diff --git a/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts b/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts
index 34b2279..0c6ee59 100644
--- a/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts
@@ -1,9 +1,8 @@
 export class ReportBuilder {
   public report_id: number;
-  public report_name: string;
-  public description: string;
-  public report_tags: string;
-  public servicename: string;
-  // Add SureConnect reference
-  public sureConnectId: number | null;
-}
\ No newline at end of file
+public report_name:string;
+public description: string;
+public report_tags: string;
+public servicename:string;
+
+}
diff --git a/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts b/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts
index 9f8c8f5..36e89e4 100644
--- a/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts
@@ -23,39 +23,6 @@ export interface DashboardContentModel {
   component?: any;
   name: string;
   type?:string;
-  // 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
-  commonFilterEnabled?: boolean;
-  // Drilldown properties
-  drilldownEnabled?: boolean;
-  drilldownApiUrl?: string;
-  drilldownXAxis?: string;
-  drilldownYAxis?: string;
-  drilldownParameter?: string;
-  drilldownFilters?: any[];
-  drilldownLayers?: any[];
-  // Compact filter properties
-  filterKey?: string;
-  filterType?: string;
-  filterLabel?: string;
-  filterOptions?: string[];
 }
 
 export interface DashboardModel {
@@ -100,10 +67,6 @@ export class value1{
 
 
 export const WidgetsMock: WidgetModel[] = [
-  {
-      name: 'Common Filter',
-      identifier: 'common_filter'
-  },
   {
       name: 'Radar Chart',
       identifier: 'radar_chart'
@@ -148,4 +111,4 @@ export const WidgetsMock: WidgetModel[] = [
   name: 'To Do',
   identifier: 'to_do_chart'
   }
-]
\ No newline at end of file
+]
diff --git a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html
index 774fa24..df4eba9 100644
--- a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.html
@@ -1,155 +1,39 @@
-<!-- Modern AI-Inspired Login Page -->
-<div class="modern-login-container" *ngIf="showLogin2">
-  <!-- Background Elements -->
-  <div class="login-background">
-    <div class="gradient-overlay"></div>
-    <div class="floating-shapes">
-      <div class="shape shape-1"></div>
-      <div class="shape shape-2"></div>
-      <div class="shape shape-3"></div>
-      <div class="shape shape-4"></div>
-    </div>
-  </div>
+<!-- <router-outlet></router-outlet> -->
 
-  <!-- Main Login Content -->
-  <div class="login-content">
-    <!-- Left Side - Branding -->
-    <div class="login-branding">
-      <div class="brand-content">
-        <div class="logo-section">
-          <div class="logo-container">
-            <img class="logo-img" src="assets/images/icon/micrologo.png" alt="CloudnSure Logo">
-            <div class="logo-glow"></div>
-          </div>
-          <h1 class="brand-title">
-            <ng-container *ngIf="loginEnvironment?.companyName; else defaultTitle">
-              {{ loginEnvironment.companyName }}
-            </ng-container>
-            <ng-template #defaultTitle>
-              CloudnSure
-            </ng-template>
-          </h1>
-          <p class="brand-subtitle">Enterprise Platform</p>
-        </div>
-
-        <div class="brand-features">
-          <div class="feature-item">
-            <clr-icon shape="shield" class="feature-icon"></clr-icon>
-            <span>Secure & Reliable</span>
-          </div>
-          <div class="feature-item">
-            <clr-icon shape="analytics" class="feature-icon"></clr-icon>
-            <span>Advanced Analytics</span>
-          </div>
-          <div class="feature-item">
-            <clr-icon shape="cog" class="feature-icon"></clr-icon>
-            <span>Customizable</span>
-          </div>
+<!-- <div class="login-wrapper" *ngIf="showLogin2 && loginEnvironment.templateNo == 'Template 1'" [style.backgroundImage]="'url(' + loginEnvironment.imagePath + ')'">
+    <form class="login">
+      <section class="title">
+        <h3 class="welcome">Welcome to</h3>
+        {{ loginEnvironment.companyName }}
+        <h5 class="hint">Use your  ID to sign in OR  <a [routerLink]="['/email-verification']" class="signup">create one now </a> </h5>
+      </section>
+      <div class="login-group">
+        <clr-input-container>
+          <label class="clr-sr-only">Username</label>
+          <input type="text" name="username" clrInput autocomplete="off" [(ngModel)]="model.email"
+          placeholder="Username (sysadmin)"/>
+      </clr-input-container>
+      <clr-password-container>
+          <label class="clr-sr-only">Password</label>
+          <input type="password" name="password" clrPassword id="login_password" autocomplete="off" [(ngModel)]="model.password"
+          placeholder="Password (test3)"/>
+      </clr-password-container>
+        <clr-checkbox-wrapper>
+          <input clrCheckbox type="checkbox" id="rememberme">
+          <label for="rememberme"> Remember me </label>
+        </clr-checkbox-wrapper>
+  
+        <div class="error active" *ngIf="isError">
+          Invalid user name or password
         </div>
+        
+        <button  [disabled]="!model.email || !model.password" type="submit" class="btn btn-primary"
+          (click)="onLogin()">Login</button>
+        <a (click)="goforgotpass()" class="signup">{{ loginEnvironment.forgotpassword }}</a>
       </div>
-    </div>
+    </form>
+  </div> -->
 
-    <!-- Right Side - Login Form -->
-    <div class="login-form-section">
-      <div class="form-container">
-        <div class="form-header">
-          <h2 class="form-title">Welcome Back</h2>
-          <p class="form-subtitle">Sign in to your account to continue</p>
-        </div>
-
-        <form class="modern-login-form" (ngSubmit)="onLogin()">
-          <!-- Username Field -->
-          <div class="form-group">
-            <label class="form-label">Username</label>
-            <div class="input-container">
-              <clr-icon shape="user" class="input-icon"></clr-icon>
-              <input type="text" name="username" class="modern-input" autocomplete="username" [(ngModel)]="model.email"
-                (input)="clearError()" placeholder="Enter your username" required>
-            </div>
-          </div>
-
-          <!-- Password Field -->
-          <div class="form-group">
-            <label class="form-label">Password</label>
-            <div class="input-container">
-              <clr-icon shape="lock" class="input-icon"></clr-icon>
-              <input [type]="showPassword ? 'text' : 'password'" name="password" class="modern-input"
-                autocomplete="current-password" [(ngModel)]="model.password" (input)="clearError()"
-                placeholder="Enter your password" required>
-              <button type="button" class="password-toggle" (click)="togglePasswordVisibility()"
-                [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
-                <span class="toggle-text">{{ showPassword ? 'Hide' : 'Show' }}</span>
-              </button>
-            </div>
-          </div>
-
-          <!-- Remember Me & Forgot Password -->
-          <div class="form-options">
-            <label class="checkbox-container">
-              <input type="checkbox" id="rememberme" class="modern-checkbox">
-              <span class="checkmark"></span>
-              <span class="checkbox-label">Remember me</span>
-            </label>
-            <a href="javascript://" class="forgot-link" (click)="goforgotpass()">
-              Forgot password?
-            </a>
-          </div>
-
-          <!-- Error Message -->
-          <div class="error-message" *ngIf="isError">
-            <clr-icon shape="exclamation-triangle"></clr-icon>
-            <span>{{ errMsg || 'Invalid username or password' }}</span>
-          </div>
-
-          <!-- Login Button -->
-          <button type="submit" class="modern-login-btn" [disabled]="isLoading" [class.loading]="isLoading">
-            <span class="btn-content" *ngIf="!isLoading">
-              <clr-icon shape="login"></clr-icon>
-              Sign In
-            </span>
-            <span class="btn-loading" *ngIf="isLoading">
-              <div class="spinner"></div>
-              Signing In...
-            </span>
-          </button>
-
-          <!-- Sign Up Link -->
-          <div class="signup-section" *ngIf="loginEnvironment?.isSignup === 'true'">
-            <p class="signup-text">
-              Don't have an account?
-              <a [routerLink]="['/email-verification']" class="signup-link">
-                Create one now
-              </a>
-            </p>
-          </div>
-        </form>
-
-        <!-- Social Login (Optional) -->
-        <div class="social-login">
-          <div class="divider">
-            <span>Or continue with</span>
-          </div>
-          <div class="social-buttons">
-            <button class="social-btn google-btn" type="button">
-              <clr-icon shape="world"></clr-icon>
-              <span>Google</span>
-            </button>
-            <button class="social-btn microsoft-btn" type="button">
-              <clr-icon shape="world"></clr-icon>
-              <span>Microsoft</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-
-
-
-<!-- 
   <div [class]="getWrapperClass()" *ngIf="showLogin2 && loginEnvironment.templateNo == '<templateNo>'" [style.backgroundImage]="'url(' + ('../../../../assets/images/new.png') + ')'">
     <form class="login">
       <section class="title">
@@ -224,7 +108,7 @@
 
   
 
-
+  <!-- <div class="login-wrapper"> -->
     <div [class]="getWrapperClass()" *ngIf="showLogin2 && loginEnvironment.templateNo == 'Template 2'" [style.backgroundImage]="'url(' + (loginEnvironment.loginImageURL !== 'null' || null ? loginEnvironment.loginImageURL : '../../../../assets/images/new.png') + ')'">
         <form class="login">
           <section class="title">
@@ -259,4 +143,4 @@
           </div>
         </form>
     </div>
-       -->
\ No newline at end of file
+      
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss
index 1edea49..221d360 100644
--- a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.scss
@@ -1,653 +1,23 @@
-// ========================================
-// MODERN AI-INSPIRED LOGIN PAGE STYLES
-// ========================================
-
-@import '../../../../styles/design-tokens';
-
-// Modern Login Container
-.modern-login-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(135deg, $primary-50 0%, $primary-100 50%, $secondary-50 100%);
-}
-
-// Background Elements
-.login-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  overflow: hidden;
-
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(135deg, 
-      rgba($primary-600, 0.1) 0%, 
-      rgba($primary-400, 0.05) 50%, 
-      rgba($accent-purple, 0.1) 100%);
+  .tamplate1 {
+    background-image: url(../../../../assets/images/new.png);
+    background-repeat: no-repeat;
+    background-size: 60%;
+    background-position: right center;
+    border: 1px solid #000;
+  }
+  
+  .tamplate2 {
+    background-image: url(../../../../assets/images/new.png);
+    background-repeat: no-repeat;
+    background-size: 60%;
+    background-position: left center;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid #000;
+  }
+  .signup {
+    cursor: pointer;
+    // color:#80b0ff;
   }
-
-  .floating-shapes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .shape {
-      position: absolute;
-      border-radius: 50%;
-      background: linear-gradient(45deg, rgba($primary-400, 0.1), rgba($accent-purple, 0.1));
-      animation: float 6s ease-in-out infinite;
-
-      &.shape-1 {
-        width: 200px;
-        height: 200px;
-        top: 10%;
-        left: 10%;
-        animation-delay: 0s;
-      }
-
-      &.shape-2 {
-        width: 150px;
-        height: 150px;
-        top: 60%;
-        right: 15%;
-        animation-delay: 2s;
-      }
-
-      &.shape-3 {
-        width: 100px;
-        height: 100px;
-        bottom: 20%;
-        left: 20%;
-        animation-delay: 4s;
-      }
-
-      &.shape-4 {
-        width: 80px;
-        height: 80px;
-        top: 30%;
-        right: 30%;
-        animation-delay: 1s;
-      }
-    }
-  }
-}
-
-// Main Content
-.login-content {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-  padding: $space-8;
-  gap: $space-12;
-  align-items: center;
-}
-
-// Left Side - Branding
-.login-branding {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: $space-8;
-
-  .brand-content {
-    text-align: center;
-    max-width: 400px;
-  }
-
-  .logo-section {
-    margin-bottom: $space-8;
-
-    .logo-container {
-      position: relative;
-      display: inline-block;
-      margin-bottom: $space-6;
-
-      .logo-img {
-        width: 80px;
-        height: 80px;
-        object-fit: contain;
-        filter: drop-shadow(0 8px 16px rgba($primary-600, 0.3));
-        transition: transform $duration-300 $ease-out;
-      }
-
-      .logo-glow {
-        position: absolute;
-        top: -10px;
-        left: -10px;
-        right: -10px;
-        bottom: -10px;
-        background: linear-gradient(45deg, $primary-400, $accent-purple);
-        border-radius: 50%;
-        opacity: 0;
-        filter: blur(20px);
-        transition: opacity $duration-300 $ease-out;
-      }
-
-      &:hover {
-        .logo-img {
-          transform: scale(1.1);
-        }
-
-        .logo-glow {
-          opacity: 0.3;
-        }
-      }
-    }
-
-    .brand-title {
-      font-size: $text-4xl;
-      font-weight: $font-bold;
-      color: $gray-900;
-      margin-bottom: $space-2;
-      background: linear-gradient(135deg, $primary-600, $accent-purple);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-
-    .brand-subtitle {
-      font-size: $text-lg;
-      color: $gray-600;
-      font-weight: $font-medium;
-    }
-  }
-
-  .brand-features {
-    display: flex;
-    flex-direction: column;
-    gap: $space-4;
-
-    .feature-item {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-      padding: $space-3;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: $radius-lg;
-      backdrop-filter: $backdrop-blur-sm;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      transition: all $duration-200 $ease-out;
-
-      &:hover {
-        transform: translateX(8px);
-        background: rgba(255, 255, 255, 0.9);
-        box-shadow: $shadow-md;
-      }
-
-      .feature-icon {
-        color: $primary-600;
-        font-size: $text-lg;
-      }
-
-      span {
-        font-size: $text-sm;
-        font-weight: $font-medium;
-        color: $gray-700;
-      }
-    }
-  }
-}
-
-// Right Side - Login Form
-.login-form-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: $space-8;
-
-  .form-container {
-    width: 100%;
-    max-width: 400px;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: $backdrop-blur-md;
-    border-radius: $radius-2xl;
-    padding: $space-8;
-    box-shadow: $shadow-xl;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-
-  .form-header {
-    text-align: center;
-    margin-bottom: $space-8;
-
-    .form-title {
-      font-size: $text-2xl;
-      font-weight: $font-bold;
-      color: $gray-900;
-      margin-bottom: $space-2;
-    }
-
-    .form-subtitle {
-      font-size: $text-sm;
-      color: $gray-600;
-    }
-  }
-
-  .modern-login-form {
-    .form-group {
-      margin-bottom: $space-6;
-
-      .form-label {
-        display: block;
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-        color: $gray-700;
-        margin-bottom: $space-2;
-      }
-
-        .input-container {
-          position: relative;
-          display: flex;
-          align-items: center;
-
-          .input-icon {
-            position: absolute;
-            left: $space-3;
-            color: $gray-400;
-            font-size: $text-base;
-            z-index: 2;
-          }
-
-          .modern-input {
-            width: 100%;
-            padding: $space-3 $space-3 $space-3 $space-10;
-            border: 2px solid $gray-200;
-            border-radius: $radius-lg;
-            font-size: $text-sm;
-            font-weight: $font-medium;
-            color: $gray-900;
-            background: $white;
-            transition: all $duration-200 $ease-out;
-
-            &::placeholder {
-              color: $gray-400;
-            }
-
-            &:focus {
-              outline: none;
-              border-color: $primary-500;
-              box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
-            }
-
-            &:hover {
-              border-color: $gray-300;
-            }
-          }
-
-          // Password field with toggle button
-          &:has(.password-toggle) .modern-input {
-            padding-right: $space-10;
-          }
-
-          .password-toggle {
-            position: absolute;
-            right: $space-3;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: $gray-400;
-            cursor: pointer;
-            padding: $space-1;
-            border-radius: $radius-sm;
-            transition: all $duration-200 $ease-out;
-            z-index: 2;
-
-            &:hover {
-              color: $gray-600;
-              background: rgba($gray-100, 0.5);
-            }
-
-            &:focus {
-              outline: none;
-              color: $primary-600;
-              background: rgba($primary-50, 0.5);
-            }
-
-            clr-icon {
-              font-size: $text-base;
-            }
-
-            .toggle-text {
-              font-size: $text-xs;
-              font-weight: $font-semibold;
-              color: inherit;
-              text-transform: uppercase;
-              letter-spacing: 0.05em;
-            }
-          }
-        }
-    }
-
-    .form-options {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: $space-6;
-
-      .checkbox-container {
-        display: flex;
-        align-items: center;
-        gap: $space-2;
-        cursor: pointer;
-
-        .modern-checkbox {
-          width: 18px;
-          height: 18px;
-          accent-color: $primary-600;
-        }
-
-        .checkbox-label {
-          font-size: $text-sm;
-          color: $gray-600;
-          font-weight: $font-medium;
-        }
-      }
-
-      .forgot-link {
-        font-size: $text-sm;
-        color: $primary-600;
-        text-decoration: none;
-        font-weight: $font-medium;
-        transition: color $duration-200 $ease-out;
-
-        &:hover {
-          color: $primary-700;
-        }
-      }
-    }
-
-    .error-message {
-      display: flex;
-      align-items: center;
-      gap: $space-2;
-      padding: $space-3;
-      background: rgba($accent-red, 0.1);
-      border: 1px solid rgba($accent-red, 0.2);
-      border-radius: $radius-lg;
-      margin-bottom: $space-6;
-      color: $accent-red;
-      font-size: $text-sm;
-      font-weight: $font-medium;
-
-      clr-icon {
-        font-size: $text-base;
-      }
-    }
-
-    .modern-login-btn {
-      width: 100%;
-      padding: $space-4;
-      background: linear-gradient(135deg, $primary-600, $primary-700);
-      color: $white;
-      border: none;
-      border-radius: $radius-lg;
-      font-size: $text-base;
-      font-weight: $font-semibold;
-      cursor: pointer;
-      transition: all $duration-200 $ease-out;
-      position: relative;
-      overflow: hidden;
-
-      &:hover:not(:disabled) {
-        transform: translateY(-2px);
-        box-shadow: $shadow-lg;
-        background: linear-gradient(135deg, $primary-700, $primary-800);
-      }
-
-      &:active {
-        transform: translateY(0);
-      }
-
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        transform: none;
-      }
-
-      &.loading {
-        .btn-content {
-          opacity: 0;
-        }
-
-        .btn-loading {
-          opacity: 1;
-        }
-      }
-
-      .btn-content {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: $space-2;
-        transition: opacity $duration-200 $ease-out;
-      }
-
-      .btn-loading {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: flex;
-        align-items: center;
-        gap: $space-2;
-        opacity: 0;
-        transition: opacity $duration-200 $ease-out;
-
-        .spinner {
-          width: 16px;
-          height: 16px;
-          border: 2px solid rgba(255, 255, 255, 0.3);
-          border-top: 2px solid $white;
-          border-radius: 50%;
-          animation: spin 1s linear infinite;
-        }
-      }
-    }
-
-    .signup-section {
-      text-align: center;
-      margin-top: $space-6;
-
-      .signup-text {
-        font-size: $text-sm;
-        color: $gray-600;
-
-        .signup-link {
-          color: $primary-600;
-          text-decoration: none;
-          font-weight: $font-semibold;
-          transition: color $duration-200 $ease-out;
-
-          &:hover {
-            color: $primary-700;
-          }
-        }
-      }
-    }
-  }
-
-  .social-login {
-    margin-top: $space-8;
-
-    .divider {
-      position: relative;
-      text-align: center;
-      margin-bottom: $space-6;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: $gray-200;
-      }
-
-      span {
-        background: rgba(255, 255, 255, 0.95);
-        padding: 0 $space-4;
-        font-size: $text-xs;
-        color: $gray-500;
-        font-weight: $font-medium;
-      }
-    }
-
-    .social-buttons {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: $space-3;
-
-      .social-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: $space-2;
-        padding: $space-3;
-        border: 2px solid $gray-200;
-        border-radius: $radius-lg;
-        background: $white;
-        color: $gray-700;
-        font-size: $text-sm;
-        font-weight: $font-medium;
-        cursor: pointer;
-        transition: all $duration-200 $ease-out;
-
-        &:hover {
-          border-color: $gray-300;
-          transform: translateY(-1px);
-          box-shadow: $shadow-md;
-        }
-
-        &.google-btn:hover {
-          border-color: #db4437;
-          color: #db4437;
-        }
-
-        &.microsoft-btn:hover {
-          border-color: #0078d4;
-          color: #0078d4;
-        }
-
-        clr-icon {
-          font-size: $text-base;
-        }
-      }
-    }
-  }
-}
-
-// Animations
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(-20px) rotate(180deg);
-  }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-// Responsive Design
-@media (max-width: $breakpoint-lg) {
-  .login-content {
-    grid-template-columns: 1fr;
-    gap: $space-8;
-    padding: $space-6;
-  }
-
-  .login-branding {
-    order: 2;
-    padding: $space-4;
-
-    .brand-content {
-      max-width: 100%;
-    }
-
-    .logo-section .brand-title {
-      font-size: $text-3xl;
-    }
-
-    .brand-features {
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-  }
-
-  .login-form-section {
-    order: 1;
-    padding: $space-4;
-
-    .form-container {
-      padding: $space-6;
-    }
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .modern-login-container {
-    padding: $space-4;
-  }
-
-  .login-content {
-    padding: $space-4;
-  }
-
-  .login-branding {
-    .brand-features {
-      flex-direction: column;
-    }
-  }
-
-  .login-form-section .form-container {
-    padding: $space-4;
-  }
-}
-
-// Legacy styles (preserved for compatibility)
-.tamplate1 {
-  background-image: url(../../../../assets/images/new.png);
-  background-repeat: no-repeat;
-  background-size: 60%;
-  background-position: right center;
-  border: 1px solid #000;
-}
-
-.tamplate2 {
-  background-image: url(../../../../assets/images/new.png);
-  background-repeat: no-repeat;
-  background-size: 60%;
-  background-position: left center;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  border: 1px solid #000;
-}
-
-.signup {
-  cursor: pointer;
-}
   
diff --git a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts
index d31362b..be82326 100644
--- a/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts
@@ -41,8 +41,6 @@ export class LoginPageComponent implements OnInit {
   email = '';
   password = '';
   isError = false;
-  isLoading = false;
-  showPassword = false;
 
   model: any = {};
   errMsg: string = '';
@@ -73,80 +71,32 @@ export class LoginPageComponent implements OnInit {
   }
 
   onLogin() {
-    console.log('onLogin called');
-    console.log('Form data:', { email: this.model.email, password: this.model.password });
-    
-    // Reset error state
-    this.isError = false;
-    this.errMsg = '';
-    
-    // Validate inputs
-    if (!this.model.email || !this.model.password) {
-      this.isError = true;
-      this.errMsg = 'Please enter both email and password';
-      console.log('Validation failed - missing email or password');
-      return;
-    }
-
-    // Set loading state
-    this.isLoading = true;
-    console.log('Loading state set to true, making API call...');
-
     // tslint:disable-next-line:max-line-length
     this.loginService.getToken(this.model.email, this.model.password)
-      .subscribe(
-        resp => {
-          console.log('API Response received:', resp);
-          this.isLoading = false;
-          
-          // Handle different response formats
-          if (resp.operationStatus === 'ERROR') {
-            this.isError = true;
-            this.errMsg = resp.operationMessage || 'Login failed';
-            return;
-          }
-          // Handle different response formats
-          if (resp.success === 'false') {
-            this.isError = true;
-            this.errMsg = resp.message || 'Login failed';
-            return;
-          }
-          if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") {
-            this.isError = true;
-            this.errMsg = 'Invalid email or password';
-            return;
-          }
-          
-          // Success - navigate to landing page
-          console.log('Login successful, navigating to:', resp.landingPage);
-          this.router.navigate([resp.landingPage]);
-        },
+      .subscribe(resp => {
+        if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") {
+          this.errMsg = 'Checking Email or password';
+          return;
+        }
+        this.router.navigate([resp.landingPage]);// add , {skipLocationChange: true}
+      },
         (errResponse: HttpErrorResponse) => {
-          console.log('API Error received:', errResponse);
-          this.isLoading = false;
-          this.isError = true;
-          
           switch (errResponse.status) {
             case 401:
               this.errMsg = 'Email or password is incorrect';
               break;
             case 404:
               this.errMsg = 'Service not found';
-              break;
             case 408:
-              this.errMsg = 'Request timeout';
-              break;
+              this.errMsg = 'Request Timedout';
             case 500:
-              this.errMsg = 'Internal server error';
-              break;
-            case 0:
-              this.errMsg = 'Network error - please check your connection';
-              break;
+              this.errMsg = 'Internal Server Error';
             default:
-              this.errMsg = 'An error occurred. Please try again.';
+              this.errMsg = 'Server Error';
           }
         }
       );
+
   }
   goaccount(){
   }
@@ -154,17 +104,5 @@ export class LoginPageComponent implements OnInit {
     this.router.navigate(["../forgotpass"], { relativeTo: this.route });
   }
 
-  // Clear error when user starts typing
-  clearError() {
-    if (this.isError) {
-      this.isError = false;
-      this.errMsg = '';
-    }
-  }
-
-  // Toggle password visibility
-  togglePasswordVisibility() {
-    this.showPassword = !this.showPassword;
-  }
 
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts b/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts
index 56b2b42..8052672 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts
@@ -12,6 +12,12 @@
 
 
 
+
+
+
+
+
+
 
 
 
@@ -234,8 +240,7 @@ export class Stepper_workflowComponent implements OnInit {
 
   rsModaldescription = false;
   goToReplaceStringdescription(row) {
-    this.rowSelected = row;
-     this.rsModaldescription = true;
+    this.rowSelected = row; this.rsModaldescription = true;
   }
 
 
@@ -248,39 +253,6 @@ export class Stepper_workflowComponent implements OnInit {
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this.router.navigate(["../demostepper/", id], { relativeTo: this.route });
-
-
-
-
   }
 
   // updateaction
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html
index fb96a15..88a4b66 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.html
@@ -1,465 +1,279 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
-  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon> {{'SECURITY' | translate}}</a></li>
-  <li><a href="javascript://">{{'MENU_ACCESS_CONTROL' | translate}}</a></li>
+  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{'SECURITY' | translate}}</a></li>
+  <li><a href="javascript://">{{ 'MENU_ACCESS_CONTROL' | translate }}</a></li>
 </ol>
 
-<section class="mac-hero">
-  <div class="mac-hero__content">
-    <div class="mac-hero__icon">
-      <clr-icon shape="shield-check"></clr-icon>
+<div class="clr-row">
+  <div class="clr-col-6" style="display:flex ;">
+    <div style="margin-right: 25px;">
+      <h4 style="font-weight:300;">{{ 'MENU_ACCESS_CONTROL' | translate }} </h4>
     </div>
-    <div>
-      <h2 class="mac-hero__title">{{'MENU_ACCESS_CONTROL' | translate}}</h2>
-      <p class="mac-hero__subtitle">{{'SECURITY' | translate}}</p>
+    <div style="margin-top:27px ; position: relative;">
+      <span class="label label-light-blue" style="display: inline;">{{ 'EDIT_MODE' | translate }}</span>
     </div>
   </div>
-  <div class="mac-hero__actions">
-    <span class="mac-chip">{{'EDIT_MODE' | translate}}</span>
-    <div class="mac-sep"></div>
-    <label class="mac-label">{{'FOR' | translate}}</label>
-    <select class="mac-select" (change)="idofselected($event.target.value)">
+  <div class="clr-col-6" style="text-align: right;">
+    {{ 'FOR' | translate }} <select id="" style="height: 30px;" (change)="idofselected($event.target.value)">
       <option *ngFor="let sub of givendata" [value]="sub.usrGrp" [selected]="sub.usrGrp== 40">{{sub.groupName}}</option>
     </select>
-    <button id="add" class="mac-btn mac-btn-primary" (click)="getbyuseriddata()">
-      <clr-icon shape="refresh"></clr-icon>
-      <span class="mac-btn-text">{{'RELOAD' | translate}}</span>
-    </button>
-    <div class="mac-toggle">
-      <span class="mac-toggle__label" *ngIf="!toggle">{{'SHOW_ALL' | translate}}</span>
-      <span class="mac-toggle__label" *ngIf="toggle">{{'ONLY_MAIN_MENU' | translate}}</span>
-      <label class="switch">
-        <input type="checkbox" ([ngModel])="toggle" checked (click)="toggleCheckbox()">
-        <span class="slider round"></span>
-      </label>
-    </div>
+    <button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="getbyuseriddata()"> {{ 'RELOAD' |
+      translate }} </button>
+    <span *ngIf="!toggle">{{ 'SHOW_ALL' | translate }} </span><span *ngIf="toggle">{{ 'ONLY_MAIN_MENU' | translate
+      }}</span>
+    <label class="switch">
+      <input type="checkbox" ([ngModel])="toggle" checked (click)="toggleCheckbox()">
+      <span class="slider round"></span>
+    </label>
   </div>
-</section>
+</div>
+<hr>
 
-<div class="mac-container">
+<div class="dg-wrapper">
   <div class="clr-row">
-    <div class="clr-col-12 mac-actions">
-      <button id="add" class="mac-btn mac-btn-primary" (click)="modaladd()" [disabled]="!toggle">
-        <clr-icon shape="plus"></clr-icon>
-        <span>{{'ADD' | translate}}</span>
-      </button>
-      <div *ngIf="!toggle" class="error-message mac-hint">
-        {{'CLOSE_TOGGLE_TO_ACTIVATE_ADD_BUTTON' | translate}}
+
+    <div class="clr-col-12" style="text-align: right;">
+
+      <button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="modaladd()" [disabled]="!toggle">
+        <clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }} </button>
+      <div *ngIf="!toggle" class="error-message" style="color: red; font-size: 14px; margin-top: 5px;">
+        {{ ' Close toggle to activate Add button. ' | translate }}
       </div>
     </div>
   </div>
 
-  <div class="mac-toolbar">
-    <div class="mac-toolbar__left">
-      <div class="mac-search">
-        <clr-icon shape="search"></clr-icon>
-        <input class="mac-search__input" type="text" placeholder="{{'SEARCH' | translate}}" [(ngModel)]="filterText" />
-      </div>
-    </div>
-    <div class="mac-toolbar__right mac-stats">
-      <div class="mac-stat">
-        <div class="mac-stat__value">{{ totalItems }}</div>
-        <div class="mac-stat__label">{{'TOTAL_ITEMS' | translate}}</div>
-      </div>
-      <div class="mac-stat">
-        <div class="mac-stat__value">{{ mainMenuCount }}</div>
-        <div class="mac-stat__label">{{'MAIN_MENUS' | translate}}</div>
-      </div>
-      <div class="mac-stat">
-        <div class="mac-stat__value">{{ subMenuCount }}</div>
-        <div class="mac-stat__label">{{'SUB_MENUS' | translate}}</div>
-      </div>
-    </div>
-  </div>
 
-  <clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="!toggle">
+  <clr-datagrid [clrDgLoading]="loading" *ngIf="!toggle">
     <clr-dg-placeholder>
-      <ng-template #loadingSpinner>
-        <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
-      </ng-template>
-      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{'NO_DATA_AVAILABLE' | translate}}</div>
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{ 'NO_DATA_AVAILABLE' | translate }}</div>
     </clr-dg-placeholder>
 
-    <clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'NO' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'MENU_ITEM_NAME' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'VIEW' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'CREATE' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'EDIT' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'DELETE' | translate }}
+        <!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'QUERY' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'EXPORT' | translate }}
+      </ng-container></clr-dg-column>
 
-    <clr-dg-row *ngFor="let all of filteredAllData;let i=index">
+    <clr-dg-row *ngFor="let all of alldata;let i=index">
       <clr-dg-cell>{{i+1}}</clr-dg-cell>
-      <clr-dg-cell *ngIf="all.menuId==0">
-        <b>{{all.menuItemDesc}}</b>
-      </clr-dg-cell>
+      <clr-dg-cell *ngIf="all.menuId==0"><b>{{all.menuItemDesc}}</b></clr-dg-cell>
       <clr-dg-cell *ngIf="all.menuId!==0">&nbsp;&nbsp;&nbsp;{{all.menuItemDesc}}</clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mvisible">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mcreate">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.medit">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mdelete">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mquery">
-      </clr-dg-cell>
-      <clr-dg-cell>
-        <input type="checkbox" [checked]="selected ===all.mexport">
-      </clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
+      <clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
 
       <clr-dg-action-overflow>
-        <button class="mac-action-item" (click)="modalEdit(all)">
-          {{'EDIT' | translate}}
-          <clr-icon shape="edit" class="is-error"></clr-icon>
-        </button>
-        <button class="mac-action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">
-          {{'DELETE' | translate}}
-          <clr-icon shape="trash" class="is-error"></clr-icon>
-        </button>
-        <button class="mac-action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">
-          {{'DELETE_MENU_SUBMENU' | translate}}
-          <clr-icon shape="edit" class="is-error"></clr-icon>
-        </button>
+        <button class="action-item" (click)="modalEdit(all)">{{ 'EDIT' | translate }} <clr-icon shape="edit"
+            class="is-error"></clr-icon></button>
+        <button class="action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">{{ 'DELETE' | translate }}
+          <clr-icon shape="trash" class="is-error"></clr-icon></button>
+        <button class="action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">{{ 'DELETE_MENU_SUBMENU' |
+          translate }}
+          <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">{{'MENUNAME' | translate}}</td>
+            <td class="td-title">Menuname</td>
             <td class="td-content"></td>
           </tr>
+
+
         </table>
       </clr-dg-row-detail>
     </clr-dg-row>
 
-    <clr-dg-footer class="mac-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
-        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-        {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
+        of {{pagination.totalItems}} Records
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
 
-  <clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="toggle">
+  <clr-datagrid [clrDgLoading]="loading" *ngIf="toggle">
     <clr-dg-placeholder>
-      <ng-template #loadingSpinner>
-        <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
-      </ng-template>
-      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{'NO_DATA_AVAILABLE' | translate}}</div>
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <div *ngIf="alldata?.length === 0;else loadingSpinner">No data available</div>
     </clr-dg-placeholder>
 
-    <clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="mac-col-title">
-          <clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    <ng-container *ngFor="let all of filteredAllData;let i=index">
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        NO
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Menu Item Name
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        View
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Create
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Edit
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Delete
+        <!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Query
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Export
+      </ng-container></clr-dg-column>
+    <ng-container *ngFor="let all of alldata;let i=index">
       <clr-dg-row *ngIf="all.menuId==0">
         <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell>
-          <b>{{all.menuItemDesc}}</b>
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mvisible">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mcreate">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.medit">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mdelete">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mquery">
-        </clr-dg-cell>
-        <clr-dg-cell>
-          <input type="checkbox" [checked]="selected ===all.mexport">
-        </clr-dg-cell>
+        <clr-dg-cell><b>{{all.menuItemDesc}}</b></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
+        <clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
         <clr-dg-action-overflow>
-          <button class="mac-action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">
-            {{'SYNC' | translate}}
-            <clr-icon shape="shrink" class="is-error"></clr-icon>
-          </button>
+          <button class="action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">Sync <clr-icon shape="shrink"
+              class="is-error"></clr-icon> </button>
         </clr-dg-action-overflow>
         <clr-dg-row-detail *clrIfExpanded>
           <table class="table">
             <tr>
-              <td class="td-title">{{'MENUNAME' | translate}}</td>
+              <td class="td-title">Menuname</td>
               <td class="td-content"></td>
             </tr>
           </table>
         </clr-dg-row-detail>
       </clr-dg-row>
     </ng-container>
-    <clr-dg-footer class="mac-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
-        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-        {{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
+        of {{pagination.totalItems}} Records
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
-    <h3 class="modal-title mac-modal-title">
-      <clr-icon shape="plus"></clr-icon> {{'ADD_MENU_ACCESS_CONTROL' | translate}}
-    </h3>
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Add Menu Access Control</h3>
     <div class="modal-body">
       <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
         <div class="clr-row">
-          <div class="clr-col-sm-12 mac-form-group">
-            <label class="mac-form-label" for="name">{{'MENU_NAME' | translate}}
-              <span class="required-field">*</span>
-            </label>
-            <select name="" id="" class="mac-form-select w-100" (change)="idselected($event.target.value)">
+          <div class="clr-col-sm-12">
+            <label for="name">Menu Name<span class="required-field">*</span></label>
+            <select name="" id="" style="width: 100%;padding: 5px 5px;border: 1px solid #ccc;border-radius: 4px;"
+              (change)="idselected($event.target.value)">
               <option *ngFor="let sub of menus" [value]="sub.menuItemId">{{sub.menuItemDesc}}</option>
             </select>
-            <div class="mac-form-help">{{'CHOOSE_MAIN_MENU_FOR_ACCESS' | translate}}</div>
           </div>
         </div>
+        <br>
         <div class="modal-footer">
-          <button type="button" class="mac-btn mac-btn-outline" (click)="modalAdd = false">
-            <clr-icon shape="times"></clr-icon>
-            <span>{{'CANCEL' | translate}}</span>
-          </button>
-          <button type="submit" class="mac-btn mac-btn-primary">
-            <clr-icon shape="check"></clr-icon>
-            <span>{{'ADD' | translate}}</span>
-          </button>
+          <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+          <button type="submit" class="btn btn-primary">ADD</button>
         </div>
       </form>
     </div>
+
   </clr-modal>
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
-    <h3 class="modal-title mac-modal-title">
-      <clr-icon shape="edit"></clr-icon> {{'UPDATE_MENU_ACCESS_CONTROL' | translate}}
-    </h3>
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Update Menu Access Control</h3>
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
-      <div class="mac-form-help">{{'MENU_ID' | translate}}: 
-        <code class="clr-code">{{rowSelected.menuItemId.menuItemId}}</code>
-      </div>
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
       <form (ngSubmit)="onUpdate(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)">
-        <div class="mac-perms">
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible" (change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="eye"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'VIEW' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mcreate" [(ngModel)]="selected ===rowSelected.mcreate" (change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="plus"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'CREATE' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit" (change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="edit"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'EDIT' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete" (change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="trash"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'DELETE' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery" (change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="search"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'QUERY' | translate}}</span>
-          </label>
-          <label class="mac-perm">
-            <input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport" (change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
-            <span class="mac-perm__icon">
-              <clr-icon shape="export"></clr-icon>
-            </span>
-            <span class="mac-perm__label">{{'EXPORT' | translate}}</span>
-          </label>
+        <div class="clr-row">
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">View</label>
+            <input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible"
+              (change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="name">Create</label>
+            <input type="checkbox" clrCheckbox name="mcreate" name="mcreate"
+              [(ngModel)]="selected ===rowSelected.mcreate"
+              (change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Edit</label>
+            <input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit"
+              (change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Delete</label>
+            <input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete"
+              (change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Query</label>
+            <input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery"
+              (change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Export</label>
+            <input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport"
+              (change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
+          </div>
+
         </div>
+        <br>
         <div class="modal-footer">
-          <button type="button" class="mac-btn mac-btn-outline" (click)="modaledit = false">
-            <clr-icon shape="times"></clr-icon>
-            <span>{{'CANCEL' | translate}}</span>
-          </button>
-          <button type="submit" class="mac-btn mac-btn-primary">
-            <clr-icon shape="check"></clr-icon>
-            <span>{{'UPDATE' | translate}}</span>
-          </button>
+          <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+          <button type="submit" class="btn btn-primary">UPDATE</button>
         </div>
       </form>
     </div>
   </clr-modal>
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-    <div class="modal-body">
-      <div class="mac-delete-header">
-        <div class="mac-delete-icon">
-          <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-        </div>
-        <h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?</h1>
-        <p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
-      </div>
-      <div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
-        <div class="mac-delete-detail-item">
-          <span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
-          <span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete = false">
-          <clr-icon shape="times"></clr-icon>
-          <span>{{'CANCEL' | translate}}</span>
-        </button>
-        <button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
-          <clr-icon shape="trash"></clr-icon>
-          <span>{{'DELETE' | translate}}</span>
-        </button>
-      </div>
-    </div>
-  </clr-modal>
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
 
-  <clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-    <div class="modal-body">
-      <div class="mac-delete-header">
-        <div class="mac-delete-icon">
-          <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-        </div>
-        <h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE_MAIN_MENU_WITH_SUBMENU' | translate}}?</h1>
-        <p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
-      </div>
-      <div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
-        <div class="mac-delete-detail-item">
-          <span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
-          <span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
-        </div>
-      </div>
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h1 class="delete">Are You Sure Want to delete?</h1>
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
       <div class="modal-footer">
-        <button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete1 = false">
-          <clr-icon shape="times"></clr-icon>
-          <span>{{'CANCEL' | translate}}</span>
-        </button>
-        <button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
-          <clr-icon shape="trash"></clr-icon>
-          <span>{{'DELETE' | translate}}</span>
-        </button>
+        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+        <button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
+          class="btn btn-primary">Delete</button>
       </div>
     </div>
   </clr-modal>
-</div>
\ No newline at end of file
+  <clr-modal [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h1 class="delete">Are You Sure Want to delete Main menu with submenu?</h1>
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete1 = false">Cancel</button>
+        <button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
+          class="btn btn-primary">Delete</button>
+      </div>
+    </div>
+  </clr-modal>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss
index 4446200..1b7ad42 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.scss
@@ -1,160 +1,43 @@
-@import '../../../../../styles/_design-tokens.scss';
-
-// Import base styles
-input[type=text],
-[type=date],
-[type=password],
-[type=checkbox] {
+input[type=text],[type=date],[type=password],[type=checkbox] {
   width: 100%;
   padding: 15px 20px;
-  background-color: var(--theme-surface);
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
   display: inline-block;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
   box-sizing: border-box;
-  font-family: var(--theme-font-primary);
-  color: var(--theme-text);
 }
+.required-field{
+  color: red;
+font-size: 18px;
 
-input[type=text]:focus,
-[type=date]:focus,
-[type=password]:focus,
-[type=checkbox]:focus {
-  outline: none;
-  border-color: var(--theme-primary);
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
 }
-
-.required-field {
-  color: var(--theme-error, #ef4444);
-  font-size: 18px;
-}
-
+// select{
+//   width: 100%;
+//   padding: 5px 5px;
+//   border: 1px solid #ccc;
+//   border-radius: 4px;
+// }
 .td-title {
   text-align: center;
   width: 150px;
-  color: white;
+color: white;
   font-weight: bold;
-  background-color: var(--theme-primary);
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
 }
-
-th {
+th{
+  //background-color:rgb(170, 169, 169);
   font-weight: bold;
 }
-
-.td-content {
+.td-content{
   text-align: left;
 }
-
-// Modern Button Styles using ThemeService
-.mac-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.mac-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.mac-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.mac-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.mac-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.mac-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1);
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.mac-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.mac-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
+.delete,.heading{
+  text-align: center;
+  color: red;
 }
-
 //toggle button
 .switch {
   position: relative;
@@ -193,585 +76,24 @@ th {
   transition: .4s;
 }
 
-input:checked+.slider {
-  background-color: var(--theme-primary);
+input:checked + .slider {
+  background-color: #0072a3;
 }
 
-input:focus+.slider {
-  box-shadow: 0 0 1px var(--theme-primary);
+input:focus + .slider {
+  box-shadow: 0 0 1px #0072a3;
 }
 
-input:checked+.slider:before {
+input:checked + .slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
 
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-// Modern themed enhancements (ThemeService variables)
-.mm-breadcrumb {
-  color: var(--theme-text-secondary);
-}
-
-.mac-header-left {
-  display: flex;
-}
-
-.mac-title h4 {
-  font-weight: 300;
-}
-
-.mac-edit-chip {
-  margin-top: 27px;
-  position: relative;
-}
-
-.mac-chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  background-color: var(--theme-background);
-  color: var(--theme-text);
-  border-radius: var(--theme-border-radius);
-  font-size: 14px;
-  font-weight: 500;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.mac-header-right {
-  text-align: right;
-}
-
-.mac-select {
-  height: 40px;
-  padding: 8px 12px;
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-  }
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.mac-btn-primary {
-  margin-left: 20px;
-  box-shadow: var(--theme-shadow);
-}
-
-.mac-actions {
-  text-align: right;
-  margin-bottom: 24px;
-}
-
-.mac-hint {
-  color: var(--theme-error, #ef4444);
-  font-size: 14px;
-  margin-top: 5px;
-}
-
-.mac-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
+      .slider.round {
+        border-radius: 34px;
       }
 
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
+      .slider.round:before {
+        border-radius: 50%;
       }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.mac-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-.mac-modal .modal-title {
-  color: var(--theme-text);
-}
-
-// Hero and actions
-.mac-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-}
-
-.mac-sep {
-  width: 1px;
-  height: 22px;
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.mac-label {
-  color: white;
-  font-weight: 500;
-}
-
-.mac-toggle__label {
-  color: white;
-  font-weight: 500;
-}
-
-// Grid columns
-.mac-col-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--theme-text-secondary);
-}
-
-.mac-col--perm .mac-col-title clr-icon {
-  color: var(--theme-primary);
-}
-
-// Toolbar, search and stats
-.mac-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    gap: 16px;
-  }
-}
-
-.mac-search {
-  position: relative;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
-    width: 100%;
-    padding: 12px 12px 12px 40px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 200ms ease-out;
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-    font-family: var(--theme-font-primary);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-    }
-  }
-}
-
-.mac-stats {
-  display: flex;
-  gap: 16px;
-}
-
-.mac-stat {
-  min-width: 110px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.04);
-  border-radius: var(--theme-border-radius);
-  padding: 16px;
-  text-align: center;
-  box-shadow: var(--theme-shadow);
-
-  &__value {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--theme-primary);
-    margin-bottom: 4px;
-  }
-
-  &__label {
-    font-size: 12px;
-    color: var(--theme-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-}
-
-// Enhanced modals
-.mac-modal-title clr-icon {
-  margin-right: 6px;
-  color: var(--theme-primary);
-}
-
-.mac-form-group {
-  margin-bottom: 20px;
-}
-
-.mac-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.mac-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-}
-
-.mac-form-help {
-  color: var(--theme-text-secondary);
-  font-size: 12px;
-  margin-top: 6px;
-  font-family: var(--theme-font-primary);
-}
-
-.mac-perms {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
-  margin: 24px 0;
-}
-
-.mac-perm {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-  transition: all 200ms ease-out;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  }
-
-  input[type="checkbox"] {
-    width: auto;
-    padding: 0;
-  }
-}
-
-.mac-perm__icon clr-icon {
-  color: var(--theme-primary);
-  width: 20px;
-  height: 20px;
-}
-
-.mac-perm__label {
-  color: var(--theme-text);
-  font-weight: 500;
-  font-family: var(--theme-font-primary);
-}
-
-// Datagrid action overflow buttons
-.mac-action-item {
-  @extend .mac-btn;
-  @extend .mac-btn-ghost;
-  @extend .mac-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
-  text-align: left;
-
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-
-  &.mac-btn-error {
-    color: var(--theme-error, #ef4444);
-
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-  }
-}
-
-// Delete Modal Styles
-.mac-delete-header {
-  text-align: center;
-  padding: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.mac-delete-icon {
-  color: var(--theme-error, #ef4444);
-  margin-bottom: 16px;
-}
-
-.mac-delete-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.mac-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.mac-delete-details {
-  padding: 24px;
-}
-
-.mac-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.mac-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.mac-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.delete,
-.heading {
-  text-align: center;
-  color: var(--theme-error, #ef4444);
-}
-
-// Modal Header
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-
-  .close {
-    color: white;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-// Modal Body
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-// Modal Footer
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .mac-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-
-    &__actions {
-      flex-direction: column;
-      width: 100%;
-    }
-  }
-
-  .mac-toolbar {
-    flex-direction: column;
-    gap: 16px;
-  }
-
-  .mac-search {
-    max-width: 100%;
-  }
-
-  .mac-stats {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .mac-perms {
-    grid-template-columns: 1fr;
-  }
-
-  .mac-actions {
-    text-align: center;
-  }
-
-  .mac-btn {
-    width: 100%;
-    justify-content: center;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts
index ada1420..1ccf78e 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menuaccesscontrol/menuaccesscontrol.component.ts
@@ -6,8 +6,6 @@ import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
 import { MenumaintanceService } from 'src/app/services/admin/menumaintance.service';
 import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
 import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
-import { ThemeService } from 'src/app/services/theme.service';
-
 @Component({
   selector: 'app-menuaccesscontrol',
   templateUrl: './menuaccesscontrol.component.html',
@@ -38,26 +36,15 @@ export class MenuaccesscontrolComponent implements OnInit {
   toggle: boolean = false;
   maindata;
   showdata;
-  // UI enhancements (no API changes)
-  filterText: string = '';
-  
-  constructor(
-    private mainservice: UsermaintanceService,
+  constructor(private mainservice: UsermaintanceService,
     private _fb: FormBuilder,
     private toastr: ToastrService,
     private route: ActivatedRoute,
     private usergrpservice: UsergrpmaintainceService,
     private menuGroupService: MenuGroupService,
-    private menuservice: MenumaintanceService,
-    private themeService: ThemeService
-  ) { }
+    private menuservice: MenumaintanceService,) { }
 
   ngOnInit(): void {
-    // Ensure theme variables are applied to the view
-    this.themeService.currentTheme$.subscribe(() => {
-      // CSS variables are updated globally; no extra handling needed here
-    });
-    
     this.showdata = this.menuGroupService.getdata();
     console.log(this.showdata);
     this.mcreate = this.showdata.mcreate;
@@ -74,64 +61,35 @@ export class MenuaccesscontrolComponent implements OnInit {
       grpid: this.usergrpid,
       gmenuid: this.menuselectid,
     });
+
   }
-  
-  // Stats & filtering helpers for UI only
-  get totalItems(): number {
-    const list: any[] = (this.alldata as unknown as any[]) || [];
-    return list.length;
-  }
-  
-  get mainMenuCount(): number {
-    const list: any[] = (this.alldata as unknown as any[]) || [];
-    return list.filter(it => it && it.menuId === 0).length;
-  }
-  
-  get subMenuCount(): number {
-    const list: any[] = (this.alldata as unknown as any[]) || [];
-    return list.filter(it => it && it.menuId !== 0).length;
-  }
-  
-  get filteredAllData(): any[] {
-    const items: any[] = (this.alldata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    return items.filter(m => (
-      (m?.menuItemDesc || '').toLowerCase().includes(text)
-    ));
-  }
-  
   dropddowngetdata() {
     this.usergrpservice.getAll().subscribe((data) => {
       console.log(data);
       this.givendata = data;
     });
   }
-  
   getdata() {
     this.menuservice.getByCurrentUserMenuGroupId1().subscribe(resp => {
       this.menus = resp;
       console.log('menus: ', this.menus);
     })
   }
-  
   getall() {
     this.usergrpservice.getall().subscribe((data) => {
       this.secmenuaccessdata = data
       console.log(data);
     })
   }
-  
   idofselected(val) {
     console.log(val);
     this.usergrpid = val;
+
   }
-  
   idselected(val) {
     console.log(val)
     this.menuselectid = val;
   }
-  
   getbyuseriddata() {
     this.usergrpservice.getbyusergrpid(this.usergrpid).subscribe((data) => {
       this.alldata = data;
@@ -146,19 +104,17 @@ export class MenuaccesscontrolComponent implements OnInit {
 
       // console.log(this.menudata)
     },
-    (error) => {
-      console.log('Error in adding data...', error);
-      if (error) {
-        this.error = "No data Available"
-      }
-    });
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.error = "No data Available"
+        }
+      });
   }
-  
   modaladd() {
     this.modalAdd = true;
     this.getdata();
   }
-  
   onSubmit() {
     this.modalAdd = false;
     this.entryForm.value.grpid = this.usergrpid;
@@ -172,30 +128,28 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
 
     },
-    (error) => {
-      console.log('Error in adding data...', error);
-      if (error.status == 400) {
-        this.toastr.error(error.error);
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error.status == 400) {
+          this.toastr.error(error.error);
+
+        } else if (error) {
+          this.toastr.error('Not added Data Getting Some Error');
+        }
+        this.ngOnInit();
+      });
 
-      } else if (error) {
-        this.toastr.error('Not added Data Getting Some Error');
-      }
-      this.ngOnInit();
-    });
   }
-  
   modalEdit(row) {
     this.rowSelected = row;
     console.log(this.rowSelected);
     this.modaledit = true;
   }
-  
   modalDelete(row) {
     this.rowSelected = row;
     console.log(this.rowSelected)
     this.modaldelete = true;
   }
-  
   delete(id, usrgrp) {
     this.modaldelete = false;
     this.usergrpservice.delete(id, usrgrp).subscribe((data) => {
@@ -212,13 +166,11 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     });
   }
-  
   modaldeletemainmenu(row) {
     this.rowSelected = row;
     console.log(this.rowSelected)
     this.modaldelete1 = true;
   }
-  
   delete1(id, usrgrp) {
     this.modaldelete1 = false;
     this.usergrpservice.deletemain(id, usrgrp).subscribe((data) => {
@@ -235,7 +187,6 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     });
   }
-  
   onUpdate(id: any, usrgrp: any) {
     this.modaledit = false;
     console.log(id, usrgrp);
@@ -253,7 +204,6 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     });
   }
-  
   onChecked(value) {
     if (value == "y") {
       this.selected = "y"
@@ -263,13 +213,11 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.selected = "n"// make a call for unchecked
     }
   }
-  
   changedelete(val) {
     console.log(val);
     val = this.colvalue = val;
     console.log(val);
   }
-  
   data: {};
   Sync(id: any, row) {
     this.rowSelected = row;
@@ -291,9 +239,8 @@ export class MenuaccesscontrolComponent implements OnInit {
       this.ngOnInit();
     })
   }
-  
   toggleCheckbox() {
     this.toggle = !this.toggle;
     //this.dataService.setDivToggler(this.toggler);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html
index f9ee1bd..7025f45 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.html
@@ -1,39 +1,11 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
   <li><a href="javascript://">{{ 'MENU_MAINTENANCE' | translate }}</a></li>
 </ol>
 
-<div class="mm-container">
-  <section class="mm-hero">
-    <div class="mm-hero__content">
-      <div class="mm-hero__icon">
-        <clr-icon shape="organization"></clr-icon>
-      </div>
-      <div>
-        <h2 class="mm-hero__title">{{ 'MENU_MAINTENANCE' | translate }}</h2>
-        <p class="mm-hero__subtitle">{{ 'MAIN_MENU' | translate }}</p>
-      </div>
-    </div>
-    <div class="mm-hero__actions">
-      <button class="btn btn-outline mm-btn-outline" (click)="onExport()">
-        <clr-icon shape="export"></clr-icon>
-        <span class="mm-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
-      </button>
-      <button class="btn btn-primary mm-btn-primary" (click)="csvImport()">
-        <clr-icon shape="import"></clr-icon>
-        <span class="mm-btn-text">{{ 'IMPORT' | translate }}</span>
-      </button>
-      <button id="add" class="btn btn-primary mm-btn-primary" (click)="goToAdd()">
-        <clr-icon shape="plus"></clr-icon>
-        <span class="mm-btn-text">{{ 'ADD' | translate }}</span>
-      </button>
-      <button class="btn mm-btn-secondary" (click)="downloadFiles()">
-        <clr-icon shape="download"></clr-icon>
-        <span class="mm-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
-      </button>
-    </div>
-  </section>
+
   <!-- <div class="clr-row">
     <div class="clr-col-12" style="text-align: right;">
       <button id="add" *ngIf="mcreate == 'true'"  class="btn btn-primary" (click)="goToAdd()">
@@ -41,44 +13,29 @@
       </button>
     </div>
   </div> -->
-  <div class="mm-stats">
-    <div class="mm-stat">
-      <div class="mm-stat__value">{{ totalMenus }}</div>
-      <div class="mm-stat__label">{{ 'TOTAL_MENUS' | translate }}</div>
-    </div>
-    <div class="mm-stat">
-      <div class="mm-stat__value">{{ enabledMenusCount }}</div>
-      <div class="mm-stat__label">{{ 'ENABLED' | translate }}</div>
-    </div>
-    <div class="mm-stat">
-      <div class="mm-stat__value">{{ disabledMenusCount }}</div>
-      <div class="mm-stat__label">{{ 'DISABLED' | translate }}</div>
-    </div>
-  </div>
+  <div class="clr-row" style="margin-top: 15px;">
+    <div class="clr-col">
+      <h3 style="font-weight: 300;display: inline;">{{ 'MENU_MAINTENANCE' | translate }} </h3>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">{{ 'MAIN_MENU' | translate }}</span><br>
 
-  <div class="mm-toolbar">
-    <div class="mm-toolbar__left">
-      <div class="mm-search">
-        <clr-icon shape="search"></clr-icon>
-        <input class="mm-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
-      </div>
     </div>
-    <div class="mm-toolbar__right">
-      <select class="mm-select" [(ngModel)]="statusFilter">
-        <option value="All">{{ 'ALL' | translate }}</option>
-        <option value="Enable">{{ 'ENABLED' | translate }}</option>
-        <option value="Disable">{{ 'DISABLED' | translate }}</option>
-      </select>
-      <div class="mm-view-toggle">
-        <button class="btn btn-sm" [class.btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-          <clr-icon shape="view-cards"></clr-icon>
-        </button>
-        <button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
-          <clr-icon shape="table"></clr-icon>
-        </button>
-      </div>
+
+    <div class="clr-col" style="text-align: right;">
+      <div class="btn-group">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
+
     </div>
-  </div>
+    
+    <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
+
+    <button class="btn btn-outline" (click)="onExport()">
+      <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
+    </button>
+        <button id="add"  class="btn btn-primary"  (click)="goToAdd()">
+            <clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
+        </button>
+    </div>
+</div>
   <!-- <table class="table">
     <thead>
       <tr>
@@ -187,253 +144,173 @@
 
     </tbody>
   </table> -->
-
-  <div class="mm-skeleton-list" *ngIf="loading">
-    <div class="mm-skeleton-item" *ngFor="let i of [1,2,3,4,5,6]">
-      <div class="mm-skel mm-skel--icon"></div>
-      <div class="mm-skel mm-skel--title"></div>
-      <div class="mm-skel mm-skel--meta"></div>
-      <div class="mm-skel mm-skel--chip"></div>
-      <div class="mm-skel mm-skel--link"></div>
-      <div class="mm-skel mm-skel--badge"></div>
-      <div class="mm-skel mm-skel--actions"></div>
-    </div>
-  </div>
-  <div class="mm-card" *ngIf="viewMode==='table'">
-    <clr-datagrid class="mm-grid mm-grid--modern" [clrDgLoading]="loading" [(clrDgSelected)]="selected">
-      <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ...
-          </clr-spinner></ng-template>
-        <div class="mm-empty" *ngIf="error;else loadingSpinner">
-          <clr-icon shape="warning-standard"></clr-icon>
-          <div class="mm-empty__title">{{ 'NO_DATA' | translate }}</div>
-          <div class="mm-empty__subtitle">{{ error }}</div>
-        </div>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="''" class="mm-col mm-col--icon">
+  <clr-datagrid [clrDgLoading]="loading"  [(clrDgSelected)]="selected">
+    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ... </clr-spinner></ng-template>
+      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
+      <clr-dg-column [clrDgField]="''" style="max-width: 40px;">
         <ng-container *clrDgHideableColumn="{hidden: false}"></ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--no">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}</span>
+          {{'NO' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--name">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}</span>
+          {{'MENU_ITEM_NAME' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--id">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="id-badge"></clr-icon> {{'ID' | translate}}</span>
+          {{'ID' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--seq">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="number-list"></clr-icon> {{'SEQUENCE' | translate}}</span>
+          {{'SEQUENCE' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--module">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="application"></clr-icon> {{'MODULE_NAME' | translate}}</span>
+          {{'MODULE_NAME' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--link">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="link"></clr-icon> {{'MENU_ACTION_LINK' | translate}}</span>
+          {{'MENU_ACTION_LINK' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--status">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          <span class="mm-col-title"><clr-icon shape="shield-check"></clr-icon> {{'STATUS' | translate}}</span>
+          {{'STATUS' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--submenu">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           {{'SUB_MENU' | translate}}
         </ng-container>
       </clr-dg-column>
-
-      <clr-dg-column class="mm-col mm-col--action">
+      
+      <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           <clr-icon shape="bars"></clr-icon>
           {{'ACTION' | translate}}
         </ng-container>
       </clr-dg-column>
+      
 
-
-      <clr-dg-row class="mm-row" *clrDgItems="let user of filteredMenus;let i = index" [clrDgItem]="user">
-        <clr-dg-cell class="mm-cell mm-cell--icon">
-          <span class="mm-icon-action"><clr-icon shape="edit" (click)="goToEdit(user)"
-              class="is-error mm-icon-edit"></clr-icon></span>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--no">{{i+1}}</clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--name">
-          <div class="mm-item">
-            <div class="mm-item__avatar"><clr-icon shape="bookmark"></clr-icon></div>
-            <div class="mm-item__text">
-              <div class="mm-item__title">{{user.menuItemDesc}}</div>
-              <div class="mm-item__meta">ID: {{user.menuId}} • Seq: {{user.itemSeq}}</div>
-            </div>
-          </div>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--id">{{user.menuId}}</clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--seq">{{user.itemSeq}}</clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--module">
-          <div class="mm-chip mm-chip--module">
-            <clr-icon shape="application"></clr-icon>
-            <span>{{user.moduleName}}</span>
-          </div>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--link">
-          <div class="mm-link">
-            <clr-icon shape="link"></clr-icon>
-            <span>{{user.main_menu_action_name}}</span>
-          </div>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--status">
-          <span class="mm-badge" [class.mm-badge--success]="user.status==='Enable'"
-            [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</span>
-        </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--submenu"><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)"
-            class="mm-icon-link"></clr-icon> </clr-dg-cell>
-        <clr-dg-cell class="mm-cell mm-cell--action">
-          <div class="mm-actions-inline">
-            <button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon></button>
-            <button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon></button>
-          </div>
-          <clr-signpost>
-            <span class="mm-icon-action" clrSignpostTrigger><clr-icon shape="help"
-                class="mm-icon-help"></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>
-        </clr-dg-cell>
-        <!-- <clr-dg-action-overflow>
+    <clr-dg-row *clrDgItems="let user of menus;let i = index" [clrDgItem]="user">
+      <clr-dg-cell style="max-width: 40px;">
+        <span style="cursor: pointer;"><clr-icon shape="edit" (click)="goToEdit(user)" class="red is-error" style="color:red;"></clr-icon></span>
+      </clr-dg-cell>
+      <clr-dg-cell >{{i+1}}</clr-dg-cell>
+      <clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
+      <clr-dg-cell >{{user.menuId}}</clr-dg-cell>
+      <clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
+      <clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
+      <clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
+      <clr-dg-cell >{{user.status}} </clr-dg-cell>
+      <clr-dg-cell ><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)" style="color: rgb(108, 108, 194);"></clr-icon> </clr-dg-cell>
+      <clr-dg-cell>
+        <span style="cursor: pointer;padding: 10px; "><clr-icon shape="trash"  (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
+        <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>
+      </clr-dg-cell>
+      <!-- <clr-dg-action-overflow>
         <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
         <button class="action-item" *ngIf="mdelete == 'true'"  (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
       </clr-dg-action-overflow> -->
 
-        <clr-dg-row-detail *clrIfExpanded>
-          <div class="mm-detail">
-            <div class="mm-detail__row"><span>Menu Name</span><strong>{{user.menuItemDesc}}</strong></div>
-            <div class="mm-detail__row"><span>Action Link</span><strong>{{user.main_menu_action_name}}</strong></div>
-            <div class="mm-detail__row"><span>Module</span><strong>{{user.moduleName}}</strong></div>
-          </div>
-        </clr-dg-row-detail>
-      </clr-dg-row>
+                <clr-dg-row-detail *clrIfExpanded >
+                  <table class="table">
+                    <tr>
+                      <td class="td-title">Menu Name: </td>
+                      <td class="td-content">{{user.menuItemDesc}}</td>
+                    </tr>
+                  </table>
+                </clr-dg-row-detail>
+    </clr-dg-row>
 
-      <clr-dg-footer class="mm-grid-footer">
-        <clr-dg-pagination #pagination [clrDgPageSize]="10">
-          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} users
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} users
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
 
-  <div *ngIf="viewMode==='cards'">
-    <div class="mm-cards">
-      <div class="mm-card-item" *ngFor="let user of filteredMenus; let i = index">
-        <div class="mm-card-item__header">
-          <!-- <div class="mm-card-item__icon"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
-          <div class="mm-card-item__title">{{user.menuItemDesc}}</div>
-          <div class="mm-card-item__badge" [class.mm-badge--success]="user.status==='Enable'"
-            [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</div>
-        </div>
-        <div class="mm-card-item__body">
-          <div class="mm-kv"><span>ID</span><strong>{{user.menuId}}</strong></div>
-          <div class="mm-kv"><span>Sequence</span><strong>{{user.itemSeq}}</strong></div>
-          <div class="mm-kv"><span>Module</span><strong>{{user.moduleName}}</strong></div>
-          <div class="mm-kv mm-link"><clr-icon shape="link"></clr-icon><strong>{{user.main_menu_action_name}}</strong>
-          </div>
-        </div>
-        <div class="mm-card-item__footer">
-          <button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon>
-            Edit</button>
-          <button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon>
-            Delete</button>
-          <button class="btn btn-sm" (click)="submenu(user.menuItemId)"><clr-icon shape="bullet-list"></clr-icon>
-            Submenu</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Add Menu Maintenance</h3>
     <div class="modal-body">
-      <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+          <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
         <div class="clr-row">
-          <!-- <div class="clr-col-sm-12">
+           <!-- <div class="clr-col-sm-12">
             <label for="name">Menu Item ID<span class="required-field">*</span></label>
            <input type="text" class="clr-input" formControlName="menuItemId">
           </div> -->
           <div class="clr-col-sm-12">
             <label for="name">Menu ID<span class="required-field">*</span></label>
-            <input type="text" class="clr-input" formControlName="menuId" name="menuId" [(ngModel)]="mainid" readonly>
+           <input type="text" class="clr-input" formControlName="menuId" name="menuId" [(ngModel)]="mainid" readonly>
           </div>
           <div class="clr-col-sm-12">
             <label for="name">Menu Item Name<span class="required-field">*</span></label>
-            <input type="text" class="clr-input" formControlName="menuItemDesc">
-            <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field
-                is Required</div>
-            </div>
+           <input type="text" class="clr-input" formControlName="menuItemDesc">
+           <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field is Required</div>
+        </div>
           </div>
           <div class="clr-col-sm-12">
             <label for="tags">Sequence</label>
             <input type="text" class="clr-input" formControlName="itemSeq">
             <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is
-                Required</div>
-            </div>
-            <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only
-                Number</div>
-            </div>
+              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is Required</div>
           </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Module Name</label>
-            <input type="text" class="clr-input" formControlName="moduleName">
-            <div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is
-                Required</div>
+          <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only Number</div>
+        </div>
             </div>
-          </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Status</label>
-            <select id="" formControlName="status">
-              <option value="Enable">Enable</option>
-              <option value="Disable">Disable</option>
-            </select>
-            <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is
-                Required</div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Module Name</label>
+              <input type="text" class="clr-input" formControlName="moduleName">
+              <div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is Required</div>
             </div>
-          </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Menu Action Link</label>
-            <input type="text" class="clr-input" formControlName="main_menu_action_name">
-            <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">
-                *This field is Required</div>
-            </div>
-            <!-- <select NAME="menu_id" >
+              </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Status</label>
+              <select  id="" formControlName="status">
+                <option value="Enable">Enable</option>
+                <option value="Disable">Disable</option>
+                </select>
+                <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+              </div>
+              <div class="clr-col-sm-12">
+                <label for="tags">Menu Action Link</label>
+                <input type="text" class="clr-input" formControlName="main_menu_action_name">
+                <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+                <!-- <select NAME="menu_id" >
                   <option SELECTED >Home Menu
                           <OPTION >Home
       <OPTION >Job
@@ -471,99 +348,94 @@
 
 
       </select> -->
-          </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Menu Icon Name</label>
-            <input type="text" class="clr-input" formControlName="main_menu_icon_name">
-            <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors" class="error_mess">
-              <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This
-                field is Required</div>
-            </div>
-          </div>
+                </div>
+                <div class="clr-col-sm-12">
+                  <label for="tags">Menu Icon Name</label>
+                  <input type="text" class="clr-input" formControlName="main_menu_icon_name">
+                  <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors" class="error_mess">
+                    <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This field is Required</div>
+                </div>
+                    </div>
         </div>
         <br>
         <div class="modal-footer">
           <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
-          <button type="submit" class="btn btn-primary">ADD</button>
+          <button type="submit" class="btn btn-primary" >ADD</button>
         </div>
-      </form>
+  </form>
     </div>
 
   </clr-modal>
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
 
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
       <h1 class="delete">Are You Sure Want to delete?</h1>
       <h2 class="heading">{{rowSelected.menuItemId}}</h2>
       <div class="modal-footer">
         <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
-        <button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary">Delete</button>
+      <button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary" >Delete</button>
       </div>
     </div>
   </clr-modal>
 
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Update Menu Maintenance</h3>
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
       <h2 class="heading">{{rowSelected.menuItemId}}</h2>
-      <form (ngSubmit)="onUpdate(rowSelected.menuItemId)">
+          <form (ngSubmit)="onUpdate(rowSelected.menuItemId)">
         <div class="clr-row">
 
           <div class="clr-col-sm-12">
             <label for="name">Menu ID<span class="required-field">*</span></label>
-            <input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.menuId" readonly>
+           <input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.menuId" readonly>
           </div>
           <div class="clr-col-sm-12">
             <label for="name">Menu Item Name<span class="required-field">*</span></label>
-            <input type="text" class="clr-input" name="menuItemDesc" [(ngModel)]="rowSelected.menuItemDesc">
+           <input type="text" class="clr-input" name="menuItemDesc" [(ngModel)]="rowSelected.menuItemDesc">
           </div>
           <div class="clr-col-sm-12">
             <label for="tags">Sequence</label>
             <input type="text" class="clr-input" name="itemSeq" [(ngModel)]="rowSelected.itemSeq">
-          </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Module Name</label>
-            <input type="text" class="clr-input" name="moduleName" [(ngModel)]="rowSelected.moduleName">
-          </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Status</label>
-            <select id="" name="status" [(ngModel)]="rowSelected.status">
-              <option value="Enable">Enable</option>
-              <option value="Disable">Disable</option>
-            </select>
-          </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Menu Action Link</label>
-            <input type="text" class="clr-input" name="main_menu_action_name"
-              [(ngModel)]="rowSelected.main_menu_action_name">
-          </div>
-          <div class="clr-col-sm-12">
-            <label for="tags">Menu Icon Name </label>
-            <input type="text" class="clr-input" name="main_menu_icon_name"
-              [(ngModel)]="rowSelected.main_menu_icon_name">
-          </div>
+            </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Module Name</label>
+              <input type="text" class="clr-input" name="moduleName" [(ngModel)]="rowSelected.moduleName">
+              </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Status</label>
+              <select  id="" name="status" [(ngModel)]="rowSelected.status">
+                <option value="Enable">Enable</option>
+                <option value="Disable">Disable</option>
+                </select>
+              </div>
+              <div class="clr-col-sm-12">
+                <label for="tags">Menu Action Link</label>
+                <input type="text" class="clr-input" name="main_menu_action_name" [(ngModel)]="rowSelected.main_menu_action_name">
+                </div>
+                <div class="clr-col-sm-12">
+                  <label for="tags">Menu Icon Name </label>
+                  <input type="text" class="clr-input" name="main_menu_icon_name" [(ngModel)]="rowSelected.main_menu_icon_name">
+                  </div>
         </div>
         <br>
         <div class="modal-footer">
           <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
-          <button type="submit" class="btn btn-primary">Update</button>
-        </div>
-      </form>
+          <button type="submit" class="btn btn-primary" >Update</button>
+          </div>
+  </form>
     </div>
 
   </clr-modal>
 
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
     <h3 class="modal-title">Import File</h3>
     <div class="modal-body">
-      <input type="file" name="file" class="file" (change)="selectFile($event)"
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+        <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
     </div>
     <div class="modal-footer">
-      <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+        <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
     </div>
-  </clr-modal>
-</div>
\ No newline at end of file
+  </clr-modal>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss
index d14e655..ab11a3c 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.scss
@@ -60,591 +60,3 @@ select{
   border-radius: 4px;
 }
 
-/* Modern theme-aware enhancements */
-.mm-container {
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-  padding: 1rem;
-}
-
-.mm-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--theme-glass-bg);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--theme-glass-border);
-  border-radius: calc(var(--theme-border-radius) + 4px);
-  padding: 1rem 1.25rem;
-  margin-bottom: 0.75rem;
-  box-shadow: var(--theme-glass-shadow);
-}
-
-.mm-hero__content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.mm-hero__icon clr-icon {
-  width: 28px;
-  height: 28px;
-  color: var(--theme-primary);
-  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
-}
-
-.mm-hero__title {
-  font-size: 1.25rem;
-  line-height: 1.2;
-  margin: 0;
-}
-
-.mm-hero__subtitle {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-hero__actions .btn + .btn {
-  margin-left: 0.5rem;
-}
-
-.mm-breadcrumb {
-  margin-bottom: 0.75rem;
-}
-
-.mm-header-row {
-  align-items: center;
-  margin-top: 0.75rem;
-}
-
-.mm-title-wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.mm-title {
-  display: inline-block;
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.mm-subtitle {
-  display: inline-block;
-}
-
-.mm-actions {
-  text-align: right;
-}
-
-.mm-btn-group {
-  margin-right: 0.5rem;
-}
-
-.mm-btn-primary {
-  border-radius: var(--theme-border-radius);
-  background: var(--theme-primary);
-  color: #fff;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
-  transition: transform 120ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), box-shadow 150ms ease;
-}
-
-.mm-btn-primary:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); transform: translateY(-1px); }
-.mm-btn-primary:active { transform: translateY(0); }
-
-.mm-btn-outline {
-  border-radius: var(--theme-border-radius);
-  border: 1px solid var(--theme-primary);
-  color: var(--theme-primary);
-  background: transparent;
-}
-
-.mm-btn-outline:hover { background: var(--theme-primary-100); }
-
-.mm-btn-secondary {
-  border-radius: var(--theme-border-radius);
-  background: var(--theme-secondary);
-  color: #fff;
-}
-
-.mm-btn-text {
-  margin-left: 0.35rem;
-}
-
-.mm-grid {
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-}
-.mm-grid--modern .datagrid-header {
-  background: linear-gradient(135deg, var(--theme-primary-50), transparent);
-}
-
-.mm-col-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 600;
-}
-
-.mm-col--icon { width: 44px; }
-.mm-col--no { width: 70px; }
-.mm-col--name { min-width: 220px; }
-.mm-col--id { width: 120px; }
-.mm-col--seq { width: 120px; }
-.mm-col--module { min-width: 160px; }
-.mm-col--link { min-width: 220px; }
-.mm-col--status { width: 140px; }
-.mm-col--submenu { width: 100px; }
-.mm-col--action { width: 140px; }
-
-.mm-card {
-  background: var(--theme-glass-bg);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--theme-glass-border);
-  border-radius: var(--theme-border-radius);
-  padding: 0.25rem;
-}
-
-.mm-grid-footer {
-  border-top: 1px solid rgba(0,0,0,0.06);
-}
-
-.mm-col--icon,
-.mm-cell--icon {
-  max-width: 40px;
-}
-
-.mm-row:hover {
-  background: var(--theme-primary-50);
-}
-
-.mm-icon-action {
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 6px;
-  transition: background 150ms ease-out, transform 150ms ease-out;
-}
-
-.mm-icon-action:hover {
-  background: var(--theme-primary-100);
-  transform: translateY(-1px);
-}
-
-.mm-icon-edit {
-  color: var(--theme-accent);
-}
-
-.mm-icon-link {
-  color: var(--theme-secondary);
-}
-
-.mm-icon-help {
-  color: var(--theme-primary);
-}
-
-.mm-icon-delete {
-  color: #ef4444;
-}
-
-.mm-danger:hover {
-  background: rgba(239, 68, 68, 0.12);
-}
-
-.mm-modal .modal-body {
-  background: var(--theme-surface);
-}
-
-.mm-modal .modal-title {
-  font-weight: 600;
-}
-
-/* Modernize Add/Edit modals */
-.mm-modal .modal-body form {
-  display: block;
-}
-
-.mm-modal .modal-body .clr-row {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px 16px;
-}
-
-@media (max-width: 640px) {
-  .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; }
-}
-
-.mm-modal label {
-  display: inline-block;
-  margin-bottom: 6px;
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.mm-modal input.clr-input,
-.mm-modal select {
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid rgba(0,0,0,0.12);
-  background: var(--theme-background);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.mm-modal input.clr-input:focus,
-.mm-modal select:focus {
-  outline: none;
-  border-color: var(--theme-primary);
-  box-shadow: 0 0 0 3px var(--theme-primary-100);
-}
-
-.mm-modal .modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.mm-modal .modal-footer .btn.btn-primary {
-  background: var(--theme-primary);
-  color: #fff;
-  border-radius: 10px;
-}
-
-.mm-modal .modal-footer .btn.btn-outline {
-  border-radius: 10px;
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-}
-
-.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
-
-.mm-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.mm-item__avatar clr-icon {
-  width: 18px;
-  height: 18px;
-  color: var(--theme-accent);
-}
-
-.mm-item__title {
-  font-weight: 600;
-}
-
-.mm-item__meta {
-  font-size: 0.75rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  border: 1px solid rgba(0,0,0,0.06);
-  background: var(--theme-primary-50);
-}
-
-.mm-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.mm-badge {
-  display: inline-block;
-  padding: 2px 10px;
-  border-radius: 999px;
-  background: var(--theme-secondary);
-  color: white;
-  font-size: 0.75rem;
-}
-
-.mm-badge--success {
-  background: var(--theme-primary);
-}
-
-.mm-badge--muted {
-  background: var(--theme-primary-200);
-  color: var(--theme-text);
-}
-
-.mm-actions-inline .btn {
-  margin-right: 6px;
-}
-
-.mm-detail {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-  padding: 8px 0;
-}
-
-.mm-detail__row {
-  display: flex;
-  justify-content: space-between;
-}
-
-/* Skeleton loader */
-.mm-skeleton-list {
-  display: grid;
-  gap: 10px;
-  margin: 8px 0 12px;
-}
-
-.mm-skeleton-item {
-  display: grid;
-  grid-template-columns: 44px 1.2fr 0.8fr 0.6fr 1fr 120px 140px;
-  align-items: center;
-  gap: 10px;
-  padding: 8px;
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  border: 1px solid rgba(0,0,0,0.05);
-}
-
-.mm-skel {
-  height: 12px;
-  border-radius: 6px;
-  background: linear-gradient(
-    90deg,
-    rgba(0,0,0,0.05) 25%,
-    rgba(0,0,0,0.08) 37%,
-    rgba(0,0,0,0.05) 63%
-  );
-  background-size: 400% 100%;
-  animation: mm-shimmer 1.2s ease-in-out infinite;
-}
-
-.mm-skel--icon { width: 24px; height: 24px; border-radius: 50%; }
-.mm-skel--title { width: 60%; height: 14px; }
-.mm-skel--meta { width: 40%; }
-.mm-skel--chip { width: 80px; }
-.mm-skel--link { width: 60%; }
-.mm-skel--badge { width: 70px; }
-.mm-skel--actions { width: 60px; }
-
-@keyframes mm-shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: 0 0; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .mm-skel { animation: none; }
-}
-
-/* Row mount animation */
-.mm-row { transition: transform 220ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), background 200ms ease; }
-.mm-row.ng-enter { transform: translateY(8px); opacity: 0.001; }
-.mm-row.ng-enter-active { transform: translateY(0); opacity: 1; }
-
-/* Responsive layouts */
-@media (max-width: 1024px) {
-  .mm-col--id, .mm-col--seq, .mm-col--submenu { display: none; }
-}
-
-@media (max-width: 768px) {
-  .mm-col--link { display: none; }
-  .mm-item__meta { display: none; }
-  .mm-actions-inline .btn { padding: 0 6px; }
-}
-
-@media (max-width: 640px) {
-  .mm-col--action { width: 100px; }
-  .mm-col--status { width: 110px; }
-  .mm-hero { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
-  .mm-hero__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
-}
-
-/* Sticky toolbar */
-.mm-toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  margin-bottom: 8px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0,0,0,0.05);
-  border-radius: var(--theme-border-radius);
-  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
-}
-
-.mm-search {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid rgba(0,0,0,0.08);
-  padding: 6px 8px;
-  border-radius: 999px;
-  background: var(--theme-background);
-}
-
-.mm-search__input {
-  border: none;
-  outline: none;
-  background: transparent;
-  min-width: 220px;
-}
-
-.mm-select {
-  border-radius: 999px;
-  padding: 6px 10px;
-  border: 1px solid rgba(0,0,0,0.08);
-  background: var(--theme-background);
-}
-
-@media (max-width: 640px) {
-  .mm-search__input { min-width: 140px; }
-}
-
-.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; }
-
-/* Card view */
-.mm-cards {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } }
-
-.mm-card-item {
-  background: var(--theme-surface);
-  border: 1px solid rgba(0,0,0,0.06);
-  border-radius: var(--theme-border-radius);
-  box-shadow: var(--theme-shadow);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.mm-card-item__header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  background: linear-gradient(135deg, var(--theme-primary-50), transparent);
-  min-height: 48px;
-}
-
-.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; }
-.mm-card-item__title { font-weight: 700; flex: 1 1 auto; }
-.mm-card-item__badge { margin-left: auto; }
-
-/* Prevent overlaps and long text issues */
-.mm-ellipsis {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mm-card-item__title {
-  max-width: 60%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media (max-width: 640px) {
-  .mm-card-item__title { max-width: 54%; }
-}
-
-.mm-card-item__body {
-  padding: 10px 12px;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0,1fr));
-  gap: 8px;
-}
-
-@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } }
-
-.mm-kv { display: flex; justify-content: space-between; }
-.mm-kv span { color: var(--theme-text-secondary); }
-
-.mm-card-item__footer {
-  padding: 10px 12px;
-  display: flex;
-  gap: 8px;
-  border-top: 1px solid rgba(0,0,0,0.06);
-}
-
-/* Theme the card footer buttons */
-.mm-card-item__footer .btn {
-  border-radius: 10px;
-}
-
-.mm-card-item__footer .btn.btn-outline {
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-  background: transparent;
-}
-
-.mm-card-item__footer .btn.btn-outline:hover { background: rgba(0,0,0,0.04); }
-
-.mm-card-item__footer .btn:not(.btn-outline) {
-  background: var(--theme-primary);
-  color: #fff;
-}
-
-.mm-card-item__footer .btn:not(.btn-outline):hover {
-  filter: brightness(0.98);
-}
-
-/* View toggle buttons */
-.mm-view-toggle .btn.btn-primary { background: var(--theme-primary); color: #fff; }
-.mm-view-toggle .btn:not(.btn-primary) { background: var(--theme-primary-100); color: var(--theme-text); }
-
-.mm-stats {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.75rem;
-  margin: 0.75rem 0 1rem;
-}
-
-.mm-stat {
-  background: var(--theme-surface);
-  border-radius: var(--theme-border-radius);
-  padding: 0.75rem 1rem;
-  border: 1px solid rgba(0,0,0,0.05);
-}
-
-.mm-stat__value {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--theme-primary);
-}
-
-.mm-stat__label {
-  font-size: 0.75rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-empty {
-  text-align: center;
-  padding: 1.5rem 0.5rem;
-  color: var(--theme-text-secondary);
-}
-
-.mm-empty clr-icon {
-  width: 32px;
-  height: 32px;
-  color: var(--theme-secondary);
-  margin-bottom: 0.25rem;
-}
-
-.mm-empty__title {
-  font-weight: 600;
-}
-
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts
index 03d5887..af0657f 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/menumaintance/menumaintance.component.ts
@@ -9,7 +9,6 @@ import { CsvService } from 'src/app/services/csv.service';
 import { ExcelService } from 'src/app/services/excel.service';
 import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
 @Component({
   selector: 'app-menumaintance',
   templateUrl: './menumaintance.component.html',
@@ -32,10 +31,6 @@ export class MenumaintanceComponent implements OnInit {
   showdata;
   error;
   submitted = false;
-  // Quick filter UI state (no API/logic changes)
-  filterText = '';
-  statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All';
-  viewMode: 'cards' | 'table' = 'cards';
   constructor(private menuservice: MenumaintanceService,
     private toastr: ToastrService,
     private excel: ExcelService,
@@ -44,14 +39,9 @@ export class MenumaintanceComponent implements OnInit {
     private menuGroupService: MenuGroupService,
     private csvService: CsvService,
     private translate: TranslateService,
-    private router: Router,
-    private themeService: ThemeService) { }
+    private router: Router,) { }
 
   ngOnInit(): void {
-    // Ensure theme variables are applied; subscription keeps this view reactive to theme changes
-    this.themeService.currentTheme$.subscribe(() => {
-      // Theme applied globally via CSS variables; no additional handling needed here
-    });
     this.showdata = this.menuGroupService.getdata();
     console.log(this.showdata);
     this.mcreate = this.showdata.mcreate;
@@ -79,71 +69,6 @@ export class MenumaintanceComponent implements OnInit {
     this.getdata();
   }
 
-  // Stats for UI (template-safe, no inline arrow functions)
-  get totalMenus(): number {
-    return this.menus ? this.menus.length : 0;
-  }
-
-  get enabledMenusCount(): number {
-    const list: any[] = (this.menus as unknown as any[]) || [];
-    return list.filter(menu => menu && menu.status === 'Enable').length;
-  }
-
-  get disabledMenusCount(): number {
-    const list: any[] = (this.menus as unknown as any[]) || [];
-    return list.filter(menu => menu && menu.status === 'Disable').length;
-  }
-
-  // Filtered list for view
-  get filteredMenus(): Rn_Main_Menu[] {
-    const items: any[] = (this.menus as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    const status = this.statusFilter;
-    return items.filter(m => {
-      const matchText = !text || (
-        (m.menuItemDesc || '').toLowerCase().includes(text) ||
-        (m.moduleName || '').toLowerCase().includes(text) ||
-        (m.main_menu_action_name || '').toLowerCase().includes(text)
-      );
-      const matchStatus = !status || status === 'All' || m.status === status;
-      return matchText && matchStatus;
-    });
-  }
-
-  setViewMode(mode: 'cards' | 'table') {
-    this.viewMode = mode;
-  }
-
-  // Resolve a safe Clarity icon shape for a menu item
-  getIconShape(menu: any): string {
-    const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim();
-    const name = raw.toLowerCase();
-    const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a';
-    if (invalid) {
-      return 'file'; // universal fallback icon
-    }
-    // Optional alias normalization
-    const aliasMap: Record<string, string> = {
-      'home': 'home',
-      'dashboard': 'dashboard',
-      'menu': 'list',
-      'list': 'list',
-      'link': 'link',
-      'application': 'application',
-      'applications': 'applications',
-      'module': 'application',
-      'settings': 'cog',
-      'config': 'cog',
-      'user': 'user',
-      'users': 'users',
-      'folder': 'folder',
-      'file': 'file',
-      'tag': 'tag',
-      'bookmark': 'bookmark'
-    };
-    return aliasMap[name] ?? name;
-  }
-
   switchLanguage(language: string) {
     this.translate.use(language);
   }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html
index 4a5da87..a685d03 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.html
@@ -1,5 +1,5 @@
 
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>Security</a></li>
   <li><a href="javascript://">Menu Maintenance</a></li>
@@ -9,50 +9,22 @@
 <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br> -->
 
 
-<section class="mm-hero">
-  <div class="mm-hero__content">
-    <div class="mm-hero__icon"><clr-icon shape="organization"></clr-icon></div>
-    <div>
-      <h2 class="mm-hero__title">Sub-Menu Maintenance</h2>
-      <p class="mm-hero__subtitle">Sub Menu</p>
-    </div>
-  </div>
-  <div class="mm-hero__actions">
-    <button id="add" class="btn btn-primary mm-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="mm-btn-text">Add</span>
-    </button>
-  </div>
-</section>
+<div class="clr-row" style="margin-top: 15px;">
+  <div class="clr-col-8">
+    <h3 style="font-weight: 300;display: inline;">Sub-Menu Maintenance </h3>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br>
 
-<div class="mm-toolbar">
-  <div class="mm-toolbar__left">
-    <div class="mm-search">
-      <clr-icon shape="search"></clr-icon>
-      <input class="mm-search__input" type="text" placeholder="Search" [(ngModel)]="filterText" />
-    </div>
-  </div>
-  <div class="mm-toolbar__right">
-    <select class="mm-select" [(ngModel)]="statusFilter">
-      <option value="All">All</option>
-      <option value="Enable">Enabled</option>
-      <option value="Disable">Disabled</option>
-    </select>
-    <div class="mm-view-toggle">
-      <button class="btn btn-sm" [class.btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-        <clr-icon shape="view-cards"></clr-icon>
-      </button>
-      <button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
-        <clr-icon shape="table"></clr-icon>
-      </button>
-    </div>
+</div>
+  <div class="clr-col-4" style="text-align: right;">
+    <button id="add" class="btn btn-primary" (click)="goToAdd()">
+      <clr-icon shape="plus"></clr-icon>ADD New
+    </button>
   </div>
 </div>
 
 
 
-  <div class="mm-card" *ngIf="viewMode==='table'">
-  <clr-datagrid class="mm-grid mm-grid--modern" [clrDgLoading]="loading">
+  <clr-datagrid [clrDgLoading]="loading"  >
     <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
 
     <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
@@ -77,29 +49,19 @@
       Status
     </ng-container></clr-dg-column>
 
-    <clr-dg-row class="mm-row" *clrDgItems="let user of filteredSubMenus;let i = index" [clrDgItem]="user">
+    <clr-dg-row *clrDgItems="let user of sub;let i = index" [clrDgItem]="user">
       <clr-dg-cell >{{i+1}}</clr-dg-cell>
-      <clr-dg-cell>
-        <div class="mm-item">
-          <!-- <div class="mm-item__avatar"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
-          <div class="mm-item__text">
-            <div class="mm-item__title">{{user.menuItemDesc}}</div>
-            <div class="mm-item__meta">ID: {{ user.menuId || '—' }} | Seq: {{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : '—' }}</div>
-          </div>
-        </div>
-      </clr-dg-cell>
+      <clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
       <clr-dg-cell >{{user.menuId}}</clr-dg-cell>
       <clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
       <clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
       <clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
       <clr-dg-cell >{{user.status}} </clr-dg-cell>
 
-      <clr-dg-cell class="mm-cell mm-cell--action">
-        <div class="mm-actions-inline">
-          <button class="btn btn-sm btn-outline mm-btn-edit" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon></button>
-          <button class="btn btn-sm btn-outline mm-btn-delete" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon></button>
-        </div>
-      </clr-dg-cell>
+      <clr-dg-action-overflow>
+        <button class="action-item" (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
+        <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
+                </clr-dg-action-overflow>
 
                 <clr-dg-row-detail *clrIfExpanded >
                   <table class="table">
@@ -111,7 +73,7 @@
                 </clr-dg-row-detail>
         </clr-dg-row>
 
-    <clr-dg-footer class="mm-grid-footer">
+    <clr-dg-footer>
       <clr-dg-pagination #pagination [clrDgPageSize]="10">
         <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
@@ -119,31 +81,8 @@
       </clr-dg-pagination>
     </clr-dg-footer>
   </clr-datagrid>
-  </div>
 
-  <div *ngIf="viewMode==='cards'">
-    <div class="mm-cards">
-      <div class="mm-card-item" *ngFor="let user of filteredSubMenus; let i = index">
-        <div class="mm-card-item__header">
-          <!-- <div class="mm-card-item__icon"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
-          <div class="mm-card-item__title">{{user.menuItemDesc}}</div>
-          <div class="mm-card-item__badge" [class.mm-badge--success]="user.status==='Enable'" [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</div>
-        </div>
-        <div class="mm-card-item__body">
-          <div class="mm-kv"><span>ID</span><strong>{{ user.menuId || '—' }}</strong></div>
-          <div class="mm-kv"><span>Sequence</span><strong>{{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : '—' }}</strong></div>
-          <div class="mm-kv"><span>Module</span><strong class="mm-ellipsis">{{ user.moduleName || '—' }}</strong></div>
-          <div class="mm-kv mm-link"><clr-icon shape="link"></clr-icon><strong class="mm-ellipsis">{{ user.main_menu_action_name || '—' }}</strong></div>
-        </div>
-        <div class="mm-card-item__footer">
-          <button class="btn btn-sm btn-outline mm-btn-edit" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon> Edit</button>
-          <button class="btn btn-sm btn-outline mm-btn-delete" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon> Delete</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Add Sub Menu Maintenance</h3>
     <div class="modal-body">
           <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
@@ -242,7 +181,7 @@
         <br>
         <div class="modal-footer">
           <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
-          <button type="submit" class="btn btn-primary">ADD</button>
+          <button type="submit" class="btn btn-primary" >ADD</button>
           </div>
   </form>
     </div>
@@ -262,7 +201,7 @@
   </clr-modal>
 
 
-  <clr-modal class="mm-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
     <h3 class="modal-title">Update Sub Menu Maintenance</h3>
     <div class="modal-body" *ngIf="rowSelected.menuItemId">
       <h2 class="heading">{{rowSelected.menuItemId}}</h2>
@@ -301,7 +240,7 @@
         <br>
         <div class="modal-footer">
           <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
-          <button type="submit" class="btn btn-primary">Update</button>
+          <button type="submit" class="btn btn-primary" >Update</button>
           </div>
   </form>
     </div>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss
index c4061f4..aad7811 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.scss
@@ -1,88 +1,3 @@
-@import '../../../../../styles/design-tokens';
-
-.mm-breadcrumb { margin-bottom: 0.75rem; }
-.mm-modal .modal-body { background: var(--theme-surface); }
-.mm-modal .modal-title { font-weight: 600; }
-.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
-@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } }
-.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); }
-.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; }
-.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); }
-.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
-.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; }
-.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); }
-.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
-
-.mm-hero {
-  display: flex; justify-content: space-between; align-items: center;
-  background: var(--theme-glass-bg); backdrop-filter: blur(12px);
-  border: 1px solid var(--theme-glass-border);
-  border-radius: calc(var(--theme-border-radius) + 4px);
-  padding: 1rem 1.25rem; margin-bottom: 0.75rem; box-shadow: var(--theme-glass-shadow);
-}
-.mm-hero__content { display: flex; align-items: center; gap: 0.75rem; }
-.mm-hero__icon clr-icon { width: 28px; height: 28px; color: var(--theme-primary); }
-.mm-hero__title { font-size: 1.25rem; margin: 0; }
-.mm-hero__subtitle { margin: 0; font-size: 0.875rem; color: var(--theme-text-secondary); }
-.mm-hero__actions .btn + .btn { margin-left: 0.5rem; }
-
-.mm-btn-primary { border-radius: var(--theme-border-radius); background: var(--theme-primary); color: #fff; }
-.mm-btn-text { margin-left: 0.35rem; }
-
-.mm-toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--theme-border-radius); box-shadow: 0 1px 0 rgba(0,0,0,0.03); }
-.mm-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(0,0,0,0.08); padding: 6px 8px; border-radius: 999px; background: var(--theme-background); }
-.mm-search__input { border: none; outline: none; background: transparent; min-width: 220px; }
-.mm-select { border-radius: 999px; padding: 6px 10px; border: 1px solid rgba(0,0,0,0.08); background: var(--theme-background); }
-.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; }
-
-.mm-card { background: var(--theme-glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--theme-glass-border); border-radius: var(--theme-border-radius); padding: 0.25rem; }
-.mm-grid { background: var(--theme-surface); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); }
-.mm-grid--modern .datagrid-header { background: linear-gradient(135deg, var(--theme-primary-50), transparent); }
-.mm-grid-footer { border-top: 1px solid rgba(0,0,0,0.06); }
-.mm-row:hover { background: var(--theme-primary-50); }
-.mm-item { display: flex; align-items: center; gap: 0.75rem; }
-.mm-item__avatar clr-icon { width: 18px; height: 18px; color: var(--theme-accent); }
-.mm-item__title { font-weight: 600; }
-.mm-item__meta { font-size: 0.75rem; color: var(--theme-text-secondary); }
-.mm-actions-inline .btn { margin-right: 6px; }
-.mm-actions-inline .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); }
-.mm-actions-inline .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); }
-.mm-actions-inline .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; }
-.mm-actions-inline .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); }
-
-.mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
-@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } .mm-search__input { min-width: 140px; } }
-.mm-card-item { background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); overflow: hidden; display: flex; flex-direction: column; }
-.mm-card-item__header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, var(--theme-primary-50), transparent); }
-.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; }
-.mm-card-item__title { font-weight: 700; flex: 1 1 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.mm-card-item__badge { margin-left: auto; }
-.mm-card-item__body { padding: 10px 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
-@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } }
-.mm-kv { display: flex; justify-content: space-between; }
-.mm-kv span { color: var(--theme-text-secondary); }
-.mm-card-item__footer { padding: 10px 12px; display: flex; gap: 8px; border-top: 1px solid rgba(0,0,0,0.06); }
-.mm-card-item__footer .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); }
-.mm-card-item__footer .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); }
-.mm-card-item__footer .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; }
-.mm-card-item__footer .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); }
-.mm-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--theme-secondary); color: #fff; font-size: 0.75rem; }
-.mm-badge--success { background: var(--theme-primary); }
-.mm-badge--muted { background: var(--theme-primary-200); color: var(--theme-text); }
-
-/* Modals */
-.mm-modal .modal-body { background: var(--theme-surface); }
-.mm-modal .modal-title { font-weight: 600; }
-.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
-@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } }
-.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); }
-.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; }
-.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); }
-.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
-.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; }
-.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); }
-.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
 input[type=text],[type=date],[type=password],[type=number] {
   width: 100%;
   padding: 15px 20px;
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts
index 5893b4a..5489d80 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/submenu/submenu.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ThemeService } from 'src/app/services/theme.service';
 import { MenumaintanceService } from '../../../../services/admin/menumaintance.service';
 import { Rn_Main_Menu } from '../../../../models/builder/Rn_Main_Menu';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -31,22 +30,13 @@ export class SubmenuComponent implements OnInit {
   mainid;
   submitted = false;
   public entryForm: FormGroup;
-  // UI filter/view state
-  filterText = '';
-  statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All';
-  viewMode: 'cards' | 'table' = 'cards';
-
   constructor(private menuservice: MenumaintanceService,
     private toastr: ToastrService,
     private _fb: FormBuilder,
     private route: ActivatedRoute,
-    private router: Router,
-    private themeService: ThemeService) { }
+    private router: Router,) { }
 
   ngOnInit(): void {
-    this.themeService.currentTheme$.subscribe(() => {
-      // Theme CSS variables applied globally
-    });
     this.id = this.route.snapshot.params["id"];
     console.log("project mainmenu with id = ", this.id);
     this.getById(this.id);
@@ -65,34 +55,6 @@ export class SubmenuComponent implements OnInit {
 
     // this.getdata();
   }
-
-  // Derived/filtered list for view
-  get filteredSubMenus(): any[] {
-    const items: any[] = (this.sub as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    const status = this.statusFilter;
-    return items.filter(m => {
-      const matchText = !text || (
-        (m.menuItemDesc || '').toLowerCase().includes(text) ||
-        (m.moduleName || '').toLowerCase().includes(text) ||
-        (m.main_menu_action_name || '').toLowerCase().includes(text)
-      );
-      const matchStatus = !status || status === 'All' || m.status === status;
-      return matchText && matchStatus;
-    });
-  }
-
-  setViewMode(mode: 'cards' | 'table') { this.viewMode = mode; }
-
-  // Resolve a safe icon
-  getIconShape(menu: any): string {
-    const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim();
-    const name = raw.toLowerCase();
-    const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a';
-    if (invalid) return 'file';
-    const alias: Record<string, string> = { application:'application', applications:'applications', settings:'cog', config:'cog', user:'user', users:'users', folder:'folder', file:'file', tag:'tag', bookmark:'bookmark', home:'home', dashboard:'dashboard', menu:'list', list:'list', link:'link', module:'application' };
-    return alias[name] ?? name;
-  }
   getById(id: any) {
     this.menuservice.getbyid(id).subscribe((data) => {
       this.sub = data;
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html
index 93987f1..f0d36a5 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html
@@ -1,320 +1,224 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
   <li><a href="javascript://">{{'USER_GROUP_MAINTENANCE' | translate}}</a></li>
+
 </ol>
 
-<section class="ug-hero">
-  <div class="ug-hero__content">
-    <div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
-    <div>
-      <h2 class="ug-hero__title">{{'USER_GROUP_MAINTENANCE' | translate}}</h2>
-      <p class="ug-hero__subtitle">{{ 'SECURITY' | translate }}</p>
-    </div>
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+    <div class="clr-col">
+      <h3>{{'USER_GROUP_MAINTENANCE' | translate}}</h3>
   </div>
-  <div class="ug-hero__actions">
-    <button class="ug-btn ug-btn-secondary" (click)="downloadFiles()">
-      <clr-icon shape="download"></clr-icon>
-      <span class="ug-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
-    </button>
-    <button class="ug-btn ug-btn-secondary" (click)="csvImport()">
-      <clr-icon shape="import"></clr-icon>
-      <span class="ug-btn-text">{{ 'IMPORT' | translate }}</span>
-    </button>
-    <button class="ug-btn ug-btn-secondary" (click)="onExport()">
-      <clr-icon shape="export"></clr-icon>
-      <span class="ug-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
-    </button>
-    <button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="ug-btn-text">{{ 'ADD' | translate }}</span>
-    </button>
-   
-  </div>
-</section>
+    <div class="clr-col" style="text-align: right;">
+      <div class="btn-group">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
 
-<div class="ug-toolbar">
-  <div class="ug-toolbar__left">
-    <div class="ug-search">
-      <clr-icon shape="search"></clr-icon>
-      <input class="ug-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
-    </div>
-  </div>
-  <div class="ug-toolbar__right">
-    <div class="ug-view-toggle">
-      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-        <clr-icon shape="view-cards"></clr-icon>
-      </button>
-      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
-        <clr-icon shape="table"></clr-icon>
-      </button>
-    </div>
-  </div>
-</div>
-
-<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
-  <clr-dg-placeholder>
-    <ng-template #loadingSpinner>
-      <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
-    </ng-template>
-    <div *ngIf="error;else loadingSpinner">{{error}}</div>
-  </clr-dg-placeholder>
-
-  <clr-dg-column [clrDgField]="'usrGrp'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'USERGROUP_NO' | translate}}
-    </ng-container>
-  </clr-dg-column>
-
-  <clr-dg-column [clrDgField]="'groupName'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'GROUP_NAME' | translate}}
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column [clrDgField]="'groupDesc'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'GROUP_DESC' | translate}}
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column [clrDgField]="'groupLevel'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'GROUP_LEVEL' | translate}}
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column [clrDgField]="'status'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'STATUS' | translate}}
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column [clrDgField]="'updateDateFormated'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'UPDATED_DATE' | translate}}
-    </ng-container>
-  </clr-dg-column>
-
-  <clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
-    <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell>
-    <clr-dg-cell>{{user.groupName}}</clr-dg-cell>
-    <clr-dg-cell>{{user.groupDesc}}</clr-dg-cell>
-    <clr-dg-cell>{{user.groupLevel}}</clr-dg-cell>
-    <clr-dg-cell>
-      <span class="ug-status-badge" [class.ug-status-enabled]="user.status === 'E'"
-        [class.ug-status-disabled]="user.status === 'D'">
-        {{user.status === 'E' ? 'Enabled' : 'Disabled'}}
-      </span>
-    </clr-dg-cell>
-    <clr-dg-cell>{{user.updateDateFormated}}</clr-dg-cell>
-
-    <clr-dg-action-overflow>
-      <!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user)">
-        <clr-icon shape="edit"></clr-icon>
-        {{'EDIT' | translate}}
-      </button> -->
-      <button class="ug-action-item" (click)="goToEdit(user)">
-        <clr-icon shape="edit"></clr-icon>
-        {{'EDIT' | translate}}
-      </button>
-      <button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon>
-        {{'DELETE'|translate}}
-      </button>
-    </clr-dg-action-overflow>
-
-    <clr-dg-row-detail *clrIfExpanded>
-      <table class="table">
-        <tr>
-          <td class="td-title">username</td>
-          <td class="td-content">{{user.groupName}}</td>
-        </tr>
-      </table>
-    </clr-dg-row-detail>
-  </clr-dg-row>
-
-  <clr-dg-footer class="ug-grid-footer">
-    <clr-dg-pagination #pagination [clrDgPageSize]="10">
-      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
-      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-      of {{pagination.totalItems}} Records
-    </clr-dg-pagination>
-  </clr-dg-footer>
-</clr-datagrid>
-
-<div class="ug-cards" *ngIf="viewMode==='cards'">
-  <div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
-    <div class="ug-card-item__header">
-      <div class="ug-card-item__icon"><clr-icon shape="users"></clr-icon></div>
-     
-      <div class="ug-card-item__title">{{user.groupName}}</div>
-      <div class="ug-card-item__badge" [class.ug-status-enabled]="user.status === 'E'"
-        [class.ug-status-disabled]="user.status === 'D'">
-        {{user.status === 'E' ? 'Enabled' : 'Disabled'}}
       </div>
-    </div>
-    <div class="ug-card-item__body">
-      <div class="ug-kv"><span>ID</span><strong>{{user.usrGrp}}</strong></div>
-      <div class="ug-kv"><span>Desc</span><strong>{{user.groupDesc}}</strong></div>
-      <div class="ug-kv"><span>Level</span><strong>{{user.groupLevel}}</strong></div>
-      <div class="ug-kv"><span>Updated</span><strong>{{user.updateDateFormated}}</strong></div>
-    </div>
-    <div class="ug-card-item__footer">
-      <!-- <button class="ug-btn ug-btn-sm ug-btn-outline" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user)">
-        <clr-icon shape="edit"></clr-icon> Edit
-      </button> -->
-      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="goToEdit(user)">
-        <clr-icon shape="edit"></clr-icon> Edit
-      </button>
-      <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon> Delete
+      <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
+        <button class="btn btn-outline" (click)="onExport()">
+          <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
+        </button>
+        <button id="add"  class="btn btn-primary" *ngIf="mcreate == 'true'" (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>
+
+      <clr-dg-column [clrDgField]="'usrGrp'">
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'USERGROUP_NO' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'groupName'">
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'GROUP_NAME' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'groupDesc'">
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'GROUP_DESC' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'groupLevel'">
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'GROUP_LEVEL' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'status'">
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'STATUS' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'updateDateFormated'">
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'UPDATED_DATE' | translate}}
+        </ng-container>
+      </clr-dg-column>
+
+    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
+      <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell>
+      <clr-dg-cell>{{user.groupName}}</clr-dg-cell>
+      <clr-dg-cell >{{user.groupDesc}}</clr-dg-cell>
+      <clr-dg-cell>{{user.groupLevel}}</clr-dg-cell>
+      <clr-dg-cell>{{user.status}}</clr-dg-cell>
+      <!-- <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell> -->
+      <clr-dg-cell>{{user.updateDateFormated}}</clr-dg-cell>
+
+      <clr-dg-action-overflow>
+
+        <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user)">   {{'EDIT' | translate}}</button>
+        <button class="action-item" (click)="onDelete(user)">{{'DELETE'|translate}}<clr-icon shape="trash" class="is-error"></clr-icon></button>
+      </clr-dg-action-overflow>
+
+      <clr-dg-row-detail *clrIfExpanded>
+        <table class="table">
+          <tr>
+            <td class="td-title">username</td>
+            <td class="td-content">{{user.groupName}}</td>
+          </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]">Record per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} Records
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
 </div>
 
 <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
   <h3 class="modal-title">Add User Group Maintenance</h3>
   <div class="modal-body">
-    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
-
-      <div class="ug-form-group">
-        <label for="groupName" class="ug-form-label">User Group<span class="required-field">*</span></label>
-        <input type="text" id="groupName" class="ug-form-input" formControlName="groupName">
-        <div *ngIf="submitted && entryForm.controls.groupName.errors" class="ug-form-error">
-          <div *ngIf="submitted && entryForm.controls.groupName.errors.required">*This field is Required</div>
-        </div>
+        <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+      <div class="clr-row">
+        <div class="clr-col-sm-12">
+          <label for="name">User Group<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" formControlName="groupName">
+         <div *ngIf="submitted && entryForm.controls.groupName.errors" class="error_mess">
+          <div *ngIf="submitted && entryForm.controls.groupName.errors.required" class="error_mess">*This field is Required</div>
       </div>
-
-      <div class="ug-form-group">
-        <label for="groupDesc" class="ug-form-label">Description<span class="required-field">*</span></label>
-        <input type="text" id="groupDesc" class="ug-form-input" formControlName="groupDesc">
-        <div *ngIf="submitted && entryForm.controls.groupDesc.errors" class="ug-form-error">
-          <div *ngIf="submitted && entryForm.controls.groupDesc.errors.required">*This field is Required</div>
         </div>
+        <div class="clr-col-sm-12">
+          <label for="name">Description<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" formControlName="groupDesc">
+         <div *ngIf="submitted && entryForm.controls.groupDesc.errors" class="error_mess">
+          <div *ngIf="submitted && entryForm.controls.groupDesc.errors.required" class="error_mess">*This field is Required</div>
       </div>
-
-      <div class="ug-form-group">
-        <label for="status" class="ug-form-label">Status<span class="required-field">*</span></label>
-        <select id="status" class="ug-form-select" formControlName="status">
-          <option value="">Select Status</option>
-          <option value="E">Enable</option>
-          <option value="D">Disable</option>
-        </select>
-        <div *ngIf="submitted && entryForm.controls.status.errors" class="ug-form-error">
-          <div *ngIf="submitted && entryForm.controls.status.errors.required">*This field is Required</div>
         </div>
+        <div class="clr-col-sm-12">
+          <label for="tags">Status<span class="required-field">*</span></label>
+          <select  id="" formControlName="status">
+            <option value="E">Enable</option>
+              <option  value="D">Disable</option></select>
+              <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
+            </div>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">Group Level<span class="required-field">*</span></label>
+            <select  id="" formControlName="groupLevel">
+              <option >10</option>
+              <option >20</option>
+             <option >30</option>
+             <option >40</option>
+             <option>50</option>
+            </select>
+            <div *ngIf="submitted && entryForm.controls.groupLevel.errors" class="error_mess">
+              <div *ngIf="submitted && entryForm.controls.groupLevel.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+            </div>
       </div>
-
-      <div class="ug-form-group">
-        <label for="groupLevel" class="ug-form-label">Group Level<span class="required-field">*</span></label>
-        <select id="groupLevel" class="ug-form-select" formControlName="groupLevel">
-          <option value="">Select Level</option>
-          <option value="10">10</option>
-          <option value="20">20</option>
-          <option value="30">30</option>
-          <option value="40">40</option>
-          <option value="50">50</option>
-        </select>
-        <div *ngIf="submitted && entryForm.controls.groupLevel.errors" class="ug-form-error">
-          <div *ngIf="submitted && entryForm.controls.groupLevel.errors.required">*This field is Required</div>
-        </div>
-      </div>
-
+      <br>
       <div class="modal-footer">
-        <button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
-        <button type="submit" class="ug-btn ug-btn-primary">ADD</button>
-      </div>
-    </form>
+        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" >ADD</button>
+        </div>
+</form>
   </div>
+
 </clr-modal>
 
 <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
   <h3 class="modal-title">Update User Group Maintenance</h3>
+
+
   <div class="modal-body" *ngIf="rowSelected.usrGrp">
-
-    <div class="ug-form-group">
-      <label for="editUsrGrp" class="ug-form-label">User Group ID</label>
-      <input type="text" id="editUsrGrp" class="ug-form-input" [(ngModel)]="rowSelected.usrGrp" name="usrGrp" disabled>
-    </div>
-
-    <div class="ug-form-group">
-      <label for="editGroupName" class="ug-form-label">User Group<span class="required-field">*</span></label>
-      <input type="text" id="editGroupName" class="ug-form-input" [(ngModel)]="rowSelected.groupName" name="groupName">
-    </div>
-
-    <div class="ug-form-group">
-      <label for="editGroupDesc" class="ug-form-label">Description<span class="required-field">*</span></label>
-      <input type="text" id="editGroupDesc" class="ug-form-input" [(ngModel)]="rowSelected.groupDesc" name="groupDesc">
-    </div>
-
-    <div class="ug-form-group">
-      <label for="editStatus" class="ug-form-label">Status<span class="required-field">*</span></label>
-      <select id="editStatus" class="ug-form-select" [(ngModel)]="rowSelected.status" name="status">
-        <option value="E">Enable</option>
-        <option value="D">Disable</option>
-      </select>
-    </div>
-
-    <div class="ug-form-group">
-      <label for="editGroupLevel" class="ug-form-label">Group Level<span class="required-field">*</span></label>
-      <select id="editGroupLevel" class="ug-form-select" [(ngModel)]="rowSelected.groupLevel" name="groupLevel">
-        <option value="10">10</option>
-        <option value="20">20</option>
-        <option value="30">30</option>
-        <option value="40">40</option>
-        <option value="50">50</option>
-      </select>
-    </div>
-
-    <div class="modal-footer">
-      <button type="button" class="ug-btn ug-btn-outline" (click)="modaledit = false">Cancel</button>
-      <button type="submit" (click)="onUpdate(rowSelected.usrGrp)" class="ug-btn ug-btn-primary">Update</button>
-    </div>
+    <h2 class="heading">{{rowSelected.usrGrp}}</h2>
+        <form (ngSubmit)="onUpdate(rowSelected.usrGrp)">
+      <div class="clr-row">
+        <div class="clr-col-sm-12">
+          <label for="name">User Group<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" [(ngModel)]="rowSelected.groupName" name="groupName">
+        </div>
+        <div class="clr-col-sm-12">
+          <label for="name">Description<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" [(ngModel)]="rowSelected.groupDesc" name="groupDesc">
+        </div>
+        <div class="clr-col-sm-12">
+          <label for="tags">Status<span class="required-field">*</span></label>
+          <select  id="" [(ngModel)]="rowSelected.status" name="status">
+            <option value="E">Enable</option>
+              <option  value="D">Disable</option></select>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">Group Level<span class="required-field">*</span></label>
+            <select  id="" [(ngModel)]="rowSelected.groupLevel" name="groupLevel">
+              <option >10</option>
+              <option >20</option>
+             <option >30</option>
+             <option >40</option>
+             <option>50</option>
+            </select>
+            </div>
+      </div>
+      <br>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" >Update</button>
+        </div>
+</form>
   </div>
-</clr-modal>
 
+</clr-modal>
 <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
   <div class="modal-body" *ngIf="rowSelected.usrGrp">
-    <div class="ug-delete-header">
-      <div class="ug-delete-icon">
-        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-      </div>
-      <h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
-      <p class="ug-delete-subtitle">This action cannot be undone</p>
-    </div>
-
-    <div class="ug-delete-details">
-      <div class="ug-delete-detail-item">
-        <span class="ug-delete-detail-label">User Group ID:</span>
-        <span class="ug-delete-detail-value">{{rowSelected.usrGrp}}</span>
-      </div>
-      <div class="ug-delete-detail-item">
-        <span class="ug-delete-detail-label">Group Name:</span>
-        <span class="ug-delete-detail-value">{{rowSelected.groupName}}</span>
-      </div>
-      <div class="ug-delete-detail-item">
-        <span class="ug-delete-detail-label">Description:</span>
-        <span class="ug-delete-detail-value">{{rowSelected.groupDesc}}</span>
-      </div>
-      
-    </div>
-
+    <h1 class="delete">Are You Sure Want to delete?</h1>
+    <h2 class="heading">{{rowSelected.usrGrp}}</h2>
     <div class="modal-footer">
-      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
-      <button type="submit" (click)="delete(rowSelected.usrGrp)" class="ug-btn ug-btn-error">Delete</button>
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+    <button type="submit" (click)="delete(rowSelected.usrGrp)" class="btn btn-primary" >Delete</button>
     </div>
   </div>
 </clr-modal>
 
+
+
 <clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
   <h3 class="modal-title">Import File</h3>
   <div class="modal-body">
-    <div class="ug-form-group">
-      <label class="ug-form-label">Select CSV File</label>
-      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-    </div>
+      <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
   </div>
   <div class="modal-footer">
-    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
-    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+      <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
   </div>
 </clr-modal>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss
index d903195..c871274 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss
@@ -1,748 +1,8 @@
-@import '../../../../../styles.scss';
-
-// Import design tokens
-@import '../../../../../styles/design-tokens';
-
-// User Group Maintenance Styles
-.ug-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    gap: 12px;
-  }
+@import '../../../../../styles1.scss';
+input.ng-invalid.ng-touched {
+  border-color: red;
 }
 
-.ug-btn-text {
-  margin-left: 8px;
+.error_mess {
+  color: red;
 }
-
-// Modern Button Styles using ThemeService
-.ug-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.ug-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.ug-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.ug-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.ug-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.ug-btn-secondary {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(0, 0, 0, 0.1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-background);
-      border-color: rgba(0, 0, 0, 0.2);
-      transform: translateY(-1px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.ug-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.ug-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.ug-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.ug-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    gap: 8px;
-  }
-}
-
-.ug-search {
-  position: relative;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
-    width: 100%;
-    padding: 12px 12px 12px 40px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 200ms ease-out;
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-    }
-  }
-}
-
-.ug-view-toggle {
-  display: flex;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  overflow: hidden;
-
-  .ug-btn {
-    border-radius: 0;
-    border: none;
-    background: var(--theme-surface);
-    color: var(--theme-text-secondary);
-
-    &:first-child {
-      border-right: 1px solid #d1d5db;
-    }
-
-    &.ug-btn-primary {
-      background: var(--theme-primary);
-      color: white;
-    }
-  }
-}
-
-// Modern Table Styles
-.ug-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.ug-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-// Modern Card Styles - More beautiful design
-.ug-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
-}
-
-.ug-card-item {
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: var(--theme-border-radius); // Using theme variable
-  box-shadow: var(--theme-shadow); // Using theme variable
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 16px;
-    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
-    min-height: 60px;
-  }
-
-  &__icon {
-    clr-icon {
-      width: 24px;
-      height: 24px;
-      color: var(--theme-primary);
-    }
-  }
-
-  &__title {
-    font-weight: 700;
-    flex: 1 1 auto;
-    font-size: 18px;
-    color: var(--theme-text);
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__badge {
-    margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 12px;
-    font-size: 12px;
-    font-weight: 600;
-    border-radius: 9999px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  &__body {
-    padding: 16px;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-  }
-
-  &__footer {
-    padding: 16px;
-    display: flex;
-    gap: 8px;
-    border-top: 1px solid rgba(0, 0, 0, 0.06);
-    background: var(--theme-background);
-  }
-}
-
-.ug-kv {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  
-  span {
-    color: var(--theme-text-secondary);
-  }
-
-  strong {
-    color: var(--theme-text);
-    font-weight: 500;
-    text-align: right;
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-// Theme the card footer buttons
-.ug-card-item__footer .ug-btn {
-  border-radius: 10px;
-  flex: 1;
-  justify-content: center;
-}
-
-.ug-card-item__footer .ug-btn.ug-btn-outline {
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-  background: transparent;
-  
-  &:hover {
-    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-    border-color: var(--theme-secondary);
-    color: var(--theme-secondary);
-  }
-}
-
-.ug-card-item__footer .ug-btn.ug-btn-error {
-  background: var(--theme-error, #ef4444);
-  color: #fff;
-  border-color: var(--theme-error, #ef4444);
-  
-  &:hover {
-    background: var(--theme-error-dark, #dc2626);
-    border-color: var(--theme-error-dark, #dc2626);
-    transform: translateY(-2px);
-  }
-}
-
-// Table view action buttons
-.ug-action-item {
-  @extend .ug-btn;
-  @extend .ug-btn-ghost;
-  @extend .ug-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
-  text-align: left;
-  
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-  
-  &.ug-btn-error {
-    color: var(--theme-error, #ef4444);
-    
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-  }
-}
-
-// Ensure action overflow is visible
-::ng-deep .datagrid-action-overflow {
-  button.action-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-align: left;
-    padding: 8px 12px;
-    
-    clr-icon {
-      margin-right: 8px;
-    }
-  }
-}
-
-// Status Badges
-.ug-status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  border-radius: 9999px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.ug-status-enabled {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
-  color: #10b981;
-}
-
-.ug-status-disabled {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
-  color: #ef4444;
-}
-
-// Form Styles
-.ug-form-group {
-  margin-bottom: 20px;
-}
-
-.ug-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.ug-form-input, .ug-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: #ef4444;
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.ug-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.ug-form-error {
-  color: #ef4444;
-  font-size: 12px;
-  margin-top: 6px;
-  font-weight: 500;
-}
-
-.required-field {
-  color: #ef4444;
-  margin-left: 4px;
-}
-
-.ug-file-input {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  
-  &::file-selector-button {
-    @extend .ug-btn;
-    @extend .ug-btn-secondary;
-    margin-right: 12px;
-    padding: 8px 16px;
-    border: none;
-  }
-}
-
-// Delete Modal Styles
-.ug-delete-header {
-  text-align: center;
-  padding: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.ug-delete-icon {
-  color: #ef4444;
-  margin-bottom: 16px;
-}
-
-.ug-delete-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.ug-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.ug-delete-details {
-  padding: 24px;
-}
-
-.ug-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.ug-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.ug-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.delete {
-  color: #ef4444;
-  text-align: center;
-  margin-bottom: 16px;
-  font-weight: 600;
-  font-size: 20px;
-}
-
-.heading {
-  text-align: center;
-  margin-bottom: 24px;
-  color: var(--theme-text);
-  font-weight: 600;
-}
-
-// Modal Header
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-// Modal Body
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-// Modal Footer
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .ug-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    &__actions {
-      width: 100%;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-  }
-  
-  .ug-toolbar {
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .ug-search {
-    max-width: 100%;
-  }
-  
-  .ug-cards {
-    grid-template-columns: 1fr;
-  }
-  
-  .ug-card-item {
-    &__header {
-      flex-direction: column;
-      text-align: center;
-      
-      &__icon {
-        margin-right: 0;
-        margin-bottom: 16px;
-      }
-    }
-    
-    &__footer {
-      justify-content: center;
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts
index 5b62fad..d1f1934 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ExcelService } from '../../../../services/excel.service';
@@ -8,15 +8,12 @@ import { ToastrService } from 'ngx-toastr';
 import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
 import { CsvService } from 'src/app/services/csv.service';
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
-
 @Component({
   selector: 'app-usergrpmaintenance',
   templateUrl: './usergrpmaintenance.component.html',
   styleUrls: ['./usergrpmaintenance.component.scss']
 })
-export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
+export class UsergrpmaintenanceComponent implements OnInit {
   loading = false;
   public entryForm: FormGroup;
   givendata;
@@ -26,13 +23,10 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
   modaledit=false;
   modaldelete=false;
   rowSelected :any= {};
-  mcreate: string | boolean = false;
-  medit: string | boolean = false;
-  showdata: any;
+  mcreate;
+  medit;
+  showdata;
   submitted=false;
-  filterText: string = '';
-  viewMode: 'table' | 'cards' = 'cards';
-  private themeSubscription: Subscription;
 
   constructor(
     private excel: ExcelService,
@@ -44,32 +38,21 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
     private mainservice:UsergrpmaintainceService,
     private csvService: CsvService,
     private translate: TranslateService,
-    private themeService: ThemeService,
   ) { }
-  
   switchLanguage(language: string) {
     this.translate.use(language);
   }
-  
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.showdata = this.menuGroupService.getdata();
-    console.log('Showdata:', this.showdata);
-    if (this.showdata) {
-      // Handle both string and boolean values
-      this.mcreate = this.showdata.mcreate === 'true' || this.showdata.mcreate === true ? true : false;
-      this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false;
-      console.log('MCREATE:', this.mcreate);
-      console.log('MEDIT:', this.medit);
-    }
+    console.log(this.showdata);
+      this.mcreate=this.showdata.mcreate;
+      console.log(this.mcreate);
+      this.medit=this.showdata.medit
+      console.log(this.medit);
 
     this.mainservice.getAll().subscribe((data) => {
-      console.log('Data received:', data);
-      this.givendata = data || [];
+      console.log(data);
+      this.givendata = data;
       if(this.givendata.length==0){
         this.error="No data Available";
         console.log(this.error)
@@ -89,30 +72,6 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
 
       });
   }
-  
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
-  get totalGroups(): number {
-    const list: any[] = (this.givendata as unknown as any[]) || [];
-    return list.length;
-  }
-
-  
-  get filteredGroups(): any[] {
-    const items: any[] = (this.givendata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    return items.filter(g => (
-      (g?.groupName || '').toLowerCase().includes(text) ||
-      (g?.groupDesc || '').toLowerCase().includes(text)
-    ));
-  }
-
-  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
   onExport() {
     this.excel.exportAsExcelFile(this.givendata, 'user_',
       moment().format('YYYYMMDD_HHmmss'))
@@ -122,8 +81,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
     //this.router.navigate(["../usermaintanceadd"],{relativeTo:this.route});
     }
   goToEdit(row){
-    console.log('Edit clicked for row:', row);
-    this.rowSelected = {...row}; // Create a copy to avoid reference issues
+    this.rowSelected = row;
     this.modaledit=true;
         //this.router.navigate(["../usermaintanceedit/"+ id], { relativeTo: this.route });
       }
@@ -177,8 +135,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
       //  }
      }
      onDelete(row) {
-      console.log('Delete clicked for row:', row);
-      this.rowSelected = {...row}; // Create a copy to avoid reference issues
+      this.rowSelected = row;
        this.modaldelete=true;
     }
 
@@ -243,4 +200,4 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
     this.csvService.downloadCsvs(this.ttype);
 
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html
index 88e73f5..fd24638 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.html
@@ -1,202 +1,124 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
   <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
   <li><a href="javascript://">{{'USER_MAINTENANCE'| translate}}</a></li>
+
 </ol>
 
-<section class="um-hero">
-  <div class="um-hero__content">
-    <div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
-    <div>
-      <h2 class="um-hero__title">{{'USER_MAINTENANCE'| translate}}</h2>
-      <p class="um-hero__subtitle">{{ 'SECURITY' | translate }}</p>
-    </div>
-  </div>
-  <div class="um-hero__actions">
-    <button class="um-btn um-btn-secondary" (click)="downloadFiles()">
-      <clr-icon shape="download"></clr-icon>
-      <span class="um-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
-    </button>
-    <button class="um-btn um-btn-secondary" (click)="csvImport()">
-      <clr-icon shape="import"></clr-icon>
-      <span class="um-btn-text">{{ 'IMPORT' | translate }}</span>
-    </button>
-    <button class="um-btn um-btn-secondary" (click)="onExport()">
-      <clr-icon shape="export"></clr-icon>
-      <span class="um-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
-    </button>
-    <button id="add" class="um-btn um-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="um-btn-text">{{ 'ADD' | translate }}</span>
-    </button>
-    <!-- <button id="add" class="um-btn um-btn-primary" *ngIf="mcreate == 'true' || mcreate == true" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon>
-      <span class="um-btn-text">{{ 'ADD' | translate }}</span>
-    </button> -->
-  </div>
-</section>
 
-<div class="um-toolbar">
-  <div class="um-toolbar__left">
-    <div class="um-search">
-      <clr-icon shape="search"></clr-icon>
-      <input class="um-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
-    </div>
+<div class="dg-wrapper">
+  <div class="clr-row">
+    <div class="clr-col">
+      <h3>{{'USER_MAINTENANCE'| translate}} </h3>
   </div>
-  <div class="um-toolbar__right">
-    <div class="um-view-toggle">
-      <button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-        <clr-icon shape="view-cards"></clr-icon>
+    <div class="clr-col" style="text-align: right;">
+      <div class="btn-group">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
+
+    </div>
+    <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
+      <button class="btn btn-outline" (click)="onExport()">
+        <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
       </button>
-      <button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
-        <clr-icon shape="table"></clr-icon>
+      <button id="add"  class="btn btn-primary" *ngIf="mcreate == 'true'" (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 ... </clr-spinner></ng-template>
+      <div *ngIf="error;else loadingSpinner">{{error}}</div>
+    </clr-dg-placeholder>
+    <!-- <clr-dg-placeholder *ngIf="!loading1;" > <clr-spinner>not</clr-spinner></clr-dg-placeholder>
+    <ng-template #other_content style="text-align: center;">Data Not found...</ng-template> -->
+
+    <clr-dg-column [clrDgField]="'userId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      User Id
+    </ng-container></clr-dg-column>
+    <!-- <clr-dg-column [clrDgField]="'username'" style="width: 300px;"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      User Name
+    </ng-container></clr-dg-column> -->
+    <clr-dg-column [clrDgField]="'fullName'" style="width: 200px;"><ng-container *clrDgHideableColumn="{hidden: false}">
+      Full Name
+      </ng-container></clr-dg-column >
+    <clr-dg-column [clrDgField]="'email'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Email
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'usrGrpName'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      User Group Name
+    </ng-container></clr-dg-column>
+    <!-- <clr-dg-column [clrDgField]="'customerNumer'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Customer Number
+    </ng-container></clr-dg-column> -->
+
+
+
+    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
+      <clr-dg-cell>{{user.userId}}</clr-dg-cell>
+      <!-- <clr-dg-cell>{{user.username}}</clr-dg-cell> -->
+      <clr-dg-cell >{{user.fullName}}</clr-dg-cell>
+      <clr-dg-cell>{{user.email}}</clr-dg-cell>
+      <clr-dg-cell>{{user.usrGrpName}}</clr-dg-cell>
+      <!-- <clr-dg-cell>{{user.customerNumer}}</clr-dg-cell> -->
+
+
+      <clr-dg-action-overflow>
+
+        <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user.userId)">Edit</button>
+        <button class="action-item" (click)="onDelete(user)">Delete<cds-icon shape="trash" class="is-error"></cds-icon></button>
+            </clr-dg-action-overflow>
+
+      <clr-dg-row-detail *clrIfExpanded>
+        <table class="table">
+          <tr>
+            <td class="td-title">username</td>
+            <td class="td-content">{{user.username}}</td>
+          </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]">Record per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} Records
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
 </div>
 
-<clr-datagrid class="um-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
-  <clr-dg-placeholder>
-    <ng-template #loadingSpinner>
-      <clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
-    </ng-template>
-    <div *ngIf="error;else loadingSpinner">{{error}}</div>
-  </clr-dg-placeholder>
-
-  <clr-dg-column [clrDgField]="'userId'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'USER_ID' | translate}}
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column [clrDgField]="'fullName'" style="width: 200px;">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'FULL_NAME' | translate}}
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column [clrDgField]="'email'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'EMAIL' | translate}}
-    </ng-container>
-  </clr-dg-column>
-  <clr-dg-column [clrDgField]="'usrGrpName'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'USER_GROUP_NAME' | translate}}
-    </ng-container>
-  </clr-dg-column>
-
-  <clr-dg-row *clrDgItems="let user of filteredUsers;let i = index" [clrDgItem]="user">
-    <clr-dg-cell>{{user.userId}}</clr-dg-cell>
-    <clr-dg-cell>{{user.fullName}}</clr-dg-cell>
-    <clr-dg-cell>{{user.email}}</clr-dg-cell>
-    <clr-dg-cell>{{user.usrGrpName}}</clr-dg-cell>
-
-    <clr-dg-action-overflow>
-      <!-- <button class="um-action-item" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user.userId)">
-        <clr-icon shape="edit"></clr-icon>
-        {{'EDIT' | translate}}
-      </button> -->
-      <button class="um-action-item" (click)="goToEdit(user.userId)">
-        <clr-icon shape="edit"></clr-icon>
-        {{'EDIT' | translate}}
-      </button>
-      <button class="um-action-item um-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon>
-        {{'DELETE'|translate}}
-      </button>
-    </clr-dg-action-overflow>
-
-    <clr-dg-row-detail *clrIfExpanded>
-      <table class="table">
-        <tr>
-          <td class="td-title">username</td>
-          <td class="td-content">{{user.username}}</td>
-        </tr>
-      </table>
-    </clr-dg-row-detail>
-  </clr-dg-row>
-
-  <clr-dg-footer class="um-grid-footer">
-    <clr-dg-pagination #pagination [clrDgPageSize]="10">
-      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
-      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-      of {{pagination.totalItems}} Records
-    </clr-dg-pagination>
-  </clr-dg-footer>
-</clr-datagrid>
-
-<div class="um-cards" *ngIf="viewMode==='cards'">
-  <div class="um-card-item" *ngFor="let user of filteredUsers; let i = index">
-    <div class="um-card-item__header">
-      <div class="um-card-item__icon"><clr-icon shape="user"></clr-icon></div>
-      <div class="um-card-item__title">{{user.fullName}}</div>
-      <div class="um-card-item__badge">ID: {{user.userId}}</div>
-    </div>
-    <div class="um-card-item__body">
-      <div class="um-kv"><span>{{'EMAIL' | translate}}</span><strong>{{user.email}}</strong></div>
-      <div class="um-kv"><span>{{'GROUP' | translate}}</span><strong>{{user.usrGrpName}}</strong></div>
-    </div>
-    <div class="um-card-item__footer">
-      <!-- <button class="um-btn um-btn-sm um-btn-outline" *ngIf="medit == 'true' || medit == true"
-        (click)="goToEdit(user.userId)">
-        <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-      </button> -->
-
-      <button class="um-btn um-btn-sm um-btn-outline" (click)="goToEdit(user.userId)">
-        <clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
-      </button>
-      <button class="um-btn um-btn-sm um-btn-error" (click)="onDelete(user)">
-        <clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
-      </button>
-    </div>
-  </div>
-</div>
 
 <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
   <div class="modal-body" *ngIf="rowSelected.userId">
-    <div class="um-delete-header">
-      <div class="um-delete-icon">
-        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-      </div>
-      <h1 class="um-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?</h1>
-      <p class="um-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
-    </div>
-
-    <div class="um-delete-details">
-      <div class="um-delete-detail-item">
-        <span class="um-delete-detail-label">{{'USER_ID' | translate}}:</span>
-        <span class="um-delete-detail-value">{{rowSelected.userId}}</span>
-      </div>
-      <div class="um-delete-detail-item">
-        <span class="um-delete-detail-label">{{'FULL_NAME' | translate}}:</span>
-        <span class="um-delete-detail-value">{{rowSelected.fullName}}</span>
-      </div>
-      <div class="um-delete-detail-item">
-        <span class="um-delete-detail-label">{{'EMAIL' | translate}}:</span>
-        <span class="um-delete-detail-value">{{rowSelected.email}}</span>
-      </div>
-    </div>
-
+    <h1 class="delete">Are You Sure Want to delete?</h1>
+    <h2 class="heading">{{rowSelected.userId}}</h2>
     <div class="modal-footer">
-      <button type="button" class="um-btn um-btn-outline" (click)="modaldelete = false">{{'CANCEL' |
-        translate}}</button>
-      <button type="submit" (click)="delete(rowSelected.userId)" class="um-btn um-btn-error">{{'DELETE' |
-        translate}}</button>
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+    <button type="submit" (click)="delete(rowSelected.userId)" class="btn btn-primary" >Delete</button>
     </div>
   </div>
 </clr-modal>
 
+
 <clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
-  <h3 class="modal-title">{{'IMPORT_FILE' | translate}}</h3>
+  <h3 class="modal-title">Import File</h3>
   <div class="modal-body">
-    <div class="um-form-group">
-      <label class="um-form-label">{{'SELECT_CSV_FILE' | translate}}</label>
-      <input type="file" name="file" class="um-file-input" (change)="selectFile($event)"
-        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-    </div>
+      <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
   </div>
   <div class="modal-footer">
-    <button class="um-btn um-btn-outline" type="button" (click)="modalCsv = false">{{'CANCEL' | translate}}</button>
-    <button class="um-btn um-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">{{'IMPORT' |
-      translate}}</button>
+      <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
   </div>
-</clr-modal>
\ No newline at end of file
+</clr-modal>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss
index adab424..76ab29b 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.scss
@@ -1,656 +1,4 @@
-@import '../../../../../styles.scss';
-
-// Import design tokens
-@import '../../../../../styles/design-tokens';
-
-.delete, .heading {
+.delete,.heading{
   text-align: center;
   color: red;
 }
-
-// Modern User Maintenance Styles
-.um-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    gap: 12px;
-  }
-}
-
-.um-btn-text {
-  margin-left: 8px;
-}
-
-// Modern Button Styles using ThemeService
-.um-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.um-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.um-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.um-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.um-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.um-btn-secondary {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(0, 0, 0, 0.1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-background);
-      border-color: rgba(0, 0, 0, 0.2);
-      transform: translateY(-1px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.um-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.um-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    gap: 8px;
-  }
-}
-
-.um-search {
-  position: relative;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
-    width: 100%;
-    padding: 12px 12px 12px 40px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 200ms ease-out;
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-    }
-  }
-}
-
-.um-view-toggle {
-  display: flex;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  overflow: hidden;
-
-  .um-btn {
-    border-radius: 0;
-    border: none;
-    background: var(--theme-surface);
-    color: var(--theme-text-secondary);
-
-    &:first-child {
-      border-right: 1px solid #d1d5db;
-    }
-
-    &.um-btn-primary {
-      background: var(--theme-primary);
-      color: white;
-    }
-  }
-}
-
-// Modern Table Styles
-.um-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.um-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-// Modern Card Styles - More beautiful design
-.um-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
-}
-
-.um-card-item {
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: var(--theme-border-radius); // Using theme variable
-  box-shadow: var(--theme-shadow); // Using theme variable
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 16px;
-    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
-    min-height: 60px;
-  }
-
-  &__icon {
-    clr-icon {
-      width: 24px;
-      height: 24px;
-      color: var(--theme-primary);
-    }
-  }
-
-  &__title {
-    font-weight: 700;
-    flex: 1 1 auto;
-    font-size: 18px;
-    color: var(--theme-text);
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__badge {
-    margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 12px;
-    font-size: 12px;
-    font-weight: 600;
-    border-radius: 9999px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.05) 100%);
-    color: var(--theme-secondary);
-  }
-
-  &__body {
-    padding: 16px;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-  }
-
-  &__footer {
-    padding: 16px;
-    display: flex;
-    gap: 8px;
-    border-top: 1px solid rgba(0, 0, 0, 0.06);
-    background: var(--theme-background);
-  }
-}
-
-.um-kv {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  
-  span {
-    color: var(--theme-text-secondary);
-  }
-
-  strong {
-    color: var(--theme-text);
-    font-weight: 500;
-    text-align: right;
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-// Theme the card footer buttons
-.um-card-item__footer .um-btn {
-  border-radius: 10px;
-  flex: 1;
-  justify-content: center;
-}
-
-.um-card-item__footer .um-btn.um-btn-outline {
-  border: 1px solid var(--theme-secondary);
-  color: var(--theme-secondary);
-  background: transparent;
-}
-
-.um-card-item__footer .um-btn.um-btn-outline:hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.um-card-item__footer .um-btn.um-btn-error {
-  background: var(--theme-error, #ef4444);
-  color: #fff;
-}
-
-.um-card-item__footer .um-btn.um-btn-error:hover {
-  background: var(--theme-error-dark, #dc2626);
-}
-
-// Action items in table
-.um-action-item {
-  @extend .um-btn;
-  @extend .um-btn-ghost;
-  @extend .um-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
-  text-align: left;
-  
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-  
-  &.um-btn-error {
-    color: var(--theme-error, #ef4444);
-    
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-    }
-  }
-}
-
-// Ensure action overflow is visible
-::ng-deep .datagrid-action-overflow {
-  button.action-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-align: left;
-    padding: 8px 12px;
-    
-    clr-icon {
-      margin-right: 8px;
-    }
-  }
-}
-
-// Delete Modal Styles
-.um-delete-header {
-  text-align: center;
-  padding: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.um-delete-icon {
-  color: #ef4444;
-  margin-bottom: 16px;
-}
-
-.um-delete-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.um-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.um-delete-details {
-  padding: 24px;
-}
-
-.um-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.um-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.um-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-// Form Styles
-.um-form-group {
-  margin-bottom: 20px;
-}
-
-.um-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.um-file-input {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  
-  &::file-selector-button {
-    @extend .um-btn;
-    @extend .um-btn-secondary;
-    margin-right: 12px;
-    padding: 8px 16px;
-    border: none;
-  }
-}
-
-// Modal Header
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-// Modal Body
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-// Modal Footer
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .um-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    &__actions {
-      width: 100%;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-  }
-  
-  .um-toolbar {
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .um-search {
-    max-width: 100%;
-  }
-  
-  .um-cards {
-    grid-template-columns: 1fr;
-  }
-  
-  .um-card-item {
-    &__header {
-      flex-direction: column;
-      text-align: center;
-      
-      &__icon {
-        margin-right: 0;
-        margin-bottom: 16px;
-      }
-    }
-    
-    &__footer {
-      justify-content: center;
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts
index d801642..84197e8 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintance/usermaintance.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ExcelService } from '../../../../services/excel.service';
@@ -8,15 +8,12 @@ import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
 import { ToastrService } from 'ngx-toastr';
 import { CsvService } from 'src/app/services/csv.service';
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
-
 @Component({
   selector: 'app-usermaintance',
   templateUrl: './usermaintance.component.html',
   styleUrls: ['./usermaintance.component.scss']
 })
-export class UsermaintanceComponent implements OnInit, OnDestroy {
+export class UsermaintanceComponent implements OnInit {
   loading = false;
   loading1=false;
   public entryForm: FormGroup;
@@ -24,18 +21,13 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
   orders;
   modalAdd= false;
   modaledit=false;
-  mcreate: string | boolean = false;
-  medit: string | boolean = false;
-  mdelete;
-  showdata;
-  error;
-  modaldelete=false;
-  rowSelected :any= {};
-  // UI-only state
-  filterText: string = '';
-  viewMode: 'table' | 'cards' = 'cards';
-  private themeSubscription: Subscription;
-  
+mcreate;
+medit;
+mdelete;
+showdata;
+error;
+modaldelete=false;
+rowSelected :any= {};
   constructor(private excel: ExcelService,
     private _fb: FormBuilder,
     private router: Router, private toastr:ToastrService,
@@ -44,41 +36,25 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
     private mainservice:UsermaintanceService,
     private csvService: CsvService,
     private translate: TranslateService,
-    private themeService: ThemeService,
     ) {this.loading1 = true;
       setTimeout(() => {
         this.loading1 = false;
       }, 1000); }
-      
-  switchLanguage(language: string) {
-    this.translate.use(language);
-  }
-  
+      switchLanguage(language: string) {
+        this.translate.use(language);
+      }
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.showdata = this.menuGroupService.getdata();
     console.log(this.showdata);
-    if (this.showdata) {
-      this.mcreate = this.showdata.mcreate === 'true' || this.showdata.mcreate === true ? true : false;
+      this.mcreate=this.showdata.mcreate;
       console.log(this.mcreate);
       this.mdelete=this.showdata.mdelete
       console.log(this.mdelete);
-      this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false;
+      this.medit=this.showdata.medit
       console.log(this.medit);
-    }
     this.getData();
-  }
-  
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
+
+     }
   getData(){
     this.mainservice.getAll().subscribe((data) => {
       console.log(data);
@@ -103,23 +79,6 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
     });
   }
 
-  // UI helpers
-  get totalUsers(): number {
-    const list: any[] = (this.givendata as unknown as any[]) || [];
-    return list.length;
-  }
-  get filteredUsers(): any[] {
-    const items: any[] = (this.givendata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    return items.filter(u => (
-      (u?.fullName || '').toLowerCase().includes(text) ||
-      (u?.email || '').toLowerCase().includes(text) ||
-      (u?.usrGrpName || '').toLowerCase().includes(text)
-    ));
-  }
-  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
-
 
   // csv
 
@@ -170,7 +129,7 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
         this.router.navigate(["../usermaintancedit/"+ id], { relativeTo: this.route });
       }
       onDelete(row) {
-        this.rowSelected = {...row}; // Create a copy to avoid reference issues
+        this.rowSelected = row;
          this.modaldelete=true;
       }
 
@@ -196,4 +155,4 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
 
 
       }
-}
\ No newline at end of file
+}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html
index d673199..3f73f06 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.html
@@ -1,282 +1,319 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
-  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
-  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon> Security</a></li>
-  <li><a href="javascript://">User Maintenance</a></li>
-</ol>
 
-<section class="um-hero">
-  <div class="um-hero__content">
-    <div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
-    <div>
-      <h2 class="um-hero__title">User Maintenance</h2>
-      <p class="um-hero__subtitle">Add New User</p>
-    </div>
-  </div>
-</section>
+    <h4 style="font-weight: 300;display: inline;"> User Maintenance</h4>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Add Mode</span><br>
+    <hr>
+    <div class="main" >
+      <form [formGroup]="entryForm">
 
-<div class="um-add-container">
-  <div class="um-form-card">
-    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="um-form">
-      <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="first_name" class="um-form-label">First Name<span class="required-field">*</span></label>
-          <input type="text" id="first_name" class="um-form-input" formControlName="first_name">
-          <div *ngIf="submitted && entryForm.controls.first_name.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.first_name.errors.required">*This field is Required</div>
-          </div>
+        <div class="clr-row">
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> First Name</label>
+           <input type="text" class="clr-input" formControlName="first_name">
+           <div *ngIf="submitted && entryForm.controls.first_name.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.first_name.errors.required" class="error_mess">*This field is Required</div>
         </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="last_name" class="um-form-label">Last Name<span class="required-field">*</span></label>
-          <input type="text" id="last_name" class="um-form-input" formControlName="last_name">
-          <div *ngIf="submitted && entryForm.controls.last_name.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.last_name.errors.required">*This field is Required</div>
           </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Last Name</label>
+           <input type="text" class="clr-input" formControlName="last_name">
+           <div *ngIf="submitted && entryForm.controls.last_name.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.last_name.errors.required" class="error_mess">*This field is Required</div>
         </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="mob_no" class="um-form-label">Mobile Number<span class="required-field">*</span></label>
-          <input type="text" id="mob_no" class="um-form-input" formControlName="mob_no" required pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
-          <div *ngIf="submitted && entryForm.controls.mob_no.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.mob_no.errors.required">*This field is Required</div>
-            <div *ngIf="submitted && entryForm.controls.mob_no.errors.pattern">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
           </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="email" class="um-form-label">Email<span class="required-field">*</span></label>
-          <input type="text" id="email" class="um-form-input" formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
-          <div *ngIf="submitted && entryForm.controls.email.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.email.errors.required">*This field is Required</div>
-            <div *ngIf="submitted && entryForm.controls.email.errors.pattern">*Email must be a valid email address</div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="new_password" class="um-form-label">New Password<span class="required-field">*</span></label>
-          <input type="password" id="new_password" class="um-form-input" formControlName="new_password" minlength="6">
-          <div *ngIf="submitted && entryForm.controls.new_password.errors" class="um-error-message">
-            <div *ngIf="entryForm.controls.new_password.errors.required">*Password is required</div>
-            <div *ngIf="entryForm.controls.new_password.errors.minlength">* Password must be at least 6 characters</div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="confirm_password" class="um-form-label">Confirm New Password<span class="required-field">*</span></label>
-          <input type="password" id="confirm_password" class="um-form-input" formControlName="confirm_password">
-          <div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="um-error-message">
-            <div *ngIf="entryForm.controls.confirm_password.errors.required">* Confirm Password is required</div>
-            <div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator">* Password and Confirm Password must be match.</div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="usrGrpId" class="um-form-label">User Group<span class="required-field">*</span></label>
-          <select id="usrGrpId" class="um-form-select" formControlName="usrGrpId">
-            <option value="">Select User Group</option>
-            <option *ngFor="let group of usergrpdata" [value]="group.usrGrp">{{group.groupName}}</option>
-          </select>
-          <div *ngIf="submitted && entryForm.controls.usrGrpId.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required">*This field is Required</div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="accesstype" class="um-form-label">Access Type<span class="required-field">*</span></label>
-          <select id="accesstype" class="um-form-select" formControlName="accesstype">
-            <option value="">Select Access Type</option>
-            <option *ngFor="let access of accessdata" [value]="access.name">{{access.name}}</option>
-          </select>
-          <div *ngIf="submitted && entryForm.controls.accesstype.errors" class="um-error-message">
-            <div *ngIf="submitted && entryForm.controls.accesstype.errors.required">*This field is Required</div>
-          </div>
-        </div>
-      </div>
-      
-      <div class="um-form-actions">
-        <button type="button" class="um-btn um-btn-outline" (click)="goback()">
-          <clr-icon shape="times"></clr-icon>
-          <span>Cancel</span>
-        </button>
-        <button type="submit" class="um-btn um-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>Add User</span>
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+           <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Mobile Number</label>
+           <input type="text" class="clr-input" formControlName="mob_no" required pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+           <div *ngIf="submitted && entryForm.controls.mob_no.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.mob_no.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="submitted && entryForm.controls.mob_no.errors.pattern" class="error_mess">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.
+            </div>
 
-<!-- Customer Modal -->
-<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
-  <h3 class="modal-title"><b>Select From List:</b></h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+        </div>
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" formControlName="new_password" minlenght="6">
+           <div *ngIf="submitted && entryForm.controls.new_password.errors" class="error_mess">
+            <div *ngIf="entryForm.controls.new_password.errors.required" class="error_mess">*Password is required</div>
+            <div *ngIf="entryForm.controls.new_password.errors.minlength" class="error_mess">* Password must be at least 6 characters</div>
+
+        </div>
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Confirm New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" formControlName="confirm_password">
+           <div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="error_mess">
+            <div *ngIf="entryForm.controls.confirm_password.errors.required" class="error_mess">* Confirm Password is required</div>
+            <div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator" class="error_mess">* Password and Confirm Password must be match.</div>
+
+        </div>
+          </div>
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Business Title</label>
+           <input type="text" class="clr-input" formControlName="title">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> Short Name</label>
+           <input type="text" class="clr-input" formControlName="shortName">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Full Name</label>
+           <input type="text" class="clr-input" formControlName="fullName">
+          </div> -->
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="tags">Status</label>
+            <select  id="" formControlName="status">
+              <option value="E">Enable</option>
+              <option  value="A">Active</option></select>
+            </div> -->
+            <!-- <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Position Code</label>
+             <input type="text" class="clr-input" formControlName="positionCodeString" [(ngModel)]="userobjpos.positionCode" name="positionCode" >
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotoposition()">V</button>
+            </div>
+            <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Department Code</label>
+             <input type="text" class="clr-input" formControlName="departmentCodeString" [(ngModel)]="userobjdept.departmentCode" name="departmentCode">
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
+            </div> -->
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="tags">User Group</label>
+              <select  id="tags" formControlName="usrGrpId" >
+                <option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
+                </select>
+                <div *ngIf="submitted && entryForm.controls.usrGrpId.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+              </div>
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Customer Id</label>
+               <input type="text" class="clr-input" formControlName="customerId" name="customerCode">
+              </div> -->
+              <!-- <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+                <button style="margin-right: 5px;" >V</button>
+              </div> -->
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Email</label>
+               <input type="text" class="clr-input" formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
+               <div *ngIf="submitted && entryForm.controls.email.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.email.errors.required" class="error_mess">*This field is Required</div>
+                <!-- <div *ngIf="submitted && entryForm.controls.email.errors.email" class="error_mess">*Email must be a valid email address</div> -->
+                <div *ngIf="submitted && entryForm.controls.email.errors.pattern" class="error_mess">*Email must be a valid email address</div>
+
+            </div>
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Access Type</label>
+                <select  name="usrGrpId" formControlName="accesstype">
+                  <option *ngFor="let sub of accessdata" [value]="sub.name" [selected]="true">{{sub.name}}</option>
+                 </select>
+                 <div *ngIf="submitted && entryForm.controls.accesstype.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.accesstype.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+                </div>
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Notification</label>
+                <select  id="" formControlName="notification">
+                  <option value="N" >NO</option>
+                  <option value="Y">YES</option></select>
+                </div> -->
+
+                   </div>
+                   <!-- <div class="clr-row">
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created By</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created On</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated By</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated On</label>
+                     <input type="text" class="clr-input">
+                    </div>
+                  </div> -->
+                  </form>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="goback()">Cancel</button>
+      <button type="button"  class="btn btn-primary" (click)="onSubmit()">Add</button>
       </div>
     </div>
 
-    <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          No
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Customer Code
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerCode'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Customer Id
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerName'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Customer Name
-        </ng-container>
-      </clr-dg-column>
 
-      <clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
-        <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getcustID(user.customerId)" class="um-clickable-cell">{{user.customerCode}}</clr-dg-cell>
-        <clr-dg-cell>{{user.customerId}}</clr-dg-cell>
-        <clr-dg-cell>{{user.customerName}}</clr-dg-cell>
+    <clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
+      <h3 class="modal-title"><b>Select From List:</b></h3>
+      <div class="modal-body">
+        <div class="clr-row">
+          <div class="clr-col-md-12 clr-col-sm-12">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
+           </div>
+          </div>
 
-        <clr-dg-row-detail *clrIfExpanded>
-          <table class="table">
-            <tr>
-              <td class="td-title">No</td>
-              <td class="td-content">{{user.id}}</td>
-            </tr>
-            <tr>
-              <td class="td-title">Customer Code</td>
-              <td class="td-content">{{user.customerCode}}</td>
-            </tr>
-            <tr>
-              <td class="td-title">Customer Id</td>
-              <td class="td-content">{{user.customerId}}</td>
-            </tr>
-            <tr>
-              <td class="td-title">Customer Name</td>
-              <td class="td-content">{{user.customerName}}</td>
-            </tr>
-          </table>
-        </clr-dg-row-detail>
-      </clr-dg-row>
+         <clr-datagrid [clrDgLoading]="loading">
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Customer Code
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Customer Id
+          </ng-container></clr-dg-column>
 
-      <clr-dg-footer>
-        <clr-dg-pagination #pagination [clrDgPageSize]="10">
-          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} Records
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
-</clr-modal>
+          <clr-dg-column [clrDgField]="'customerName'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+              Customer Name
+            </ng-container>
+            </clr-dg-column >
 
-<!-- Department Modal -->
-<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
-  <h3 class="modal-title"><b>Select From List:</b></h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+          <clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
+            <clr-dg-cell>{{i+1}}</clr-dg-cell>
+            <clr-dg-cell (click)="getcustID(user.customerId)" style="color: rgb(108, 108, 194);" >{{user.customerCode}}</clr-dg-cell>
+            <clr-dg-cell >{{user.customerId}}</clr-dg-cell>
+            <clr-dg-cell>{{user.customerName}}</clr-dg-cell>
+
+            <clr-dg-row-detail *clrIfExpanded>
+              <table class="table">
+                <tr>
+                  <td class="td-title">NO</td>
+                  <td class="td-content">{{user.id}}</td>
+                </tr>
+                <tr>
+                  <td class="td-title"> Customer Code</td>
+                  <td class="td-content">{{user.customerCode}}</td>
+                </tr>
+                <tr>
+                  <td class="td-title">Customer Id</td>
+                  <td class="td-content">{{user.customerId}} </td>
+                </tr>
+                <tr>
+                  <td class="td-title"> Customer Name<td>
+                  <td class="td-content">{{user.customerName}}</td>
+                </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]">Records per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} Records
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
       </div>
-    </div>
+    </clr-modal>
 
-    <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          No
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Department Code
-        </ng-container>
-      </clr-dg-column>
+    <clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
+      <h3 class="modal-title"><b>Select From List:</b></h3>
+      <div class="modal-body">
+        <div class="clr-row">
+          <div class="clr-col-md-12 clr-col-sm-12">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
+           </div>
+          </div>
+
+
+         <clr-datagrid [clrDgLoading]="loading">
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Department Code
+          </ng-container></clr-dg-column>
+
+          <clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
+            <clr-dg-cell>{{i+1}}</clr-dg-cell>
+            <clr-dg-cell (click)="getdepid(user.departmentCode)" style="color: rgb(108, 108, 194);" >{{user.departmentCode}}</clr-dg-cell>
+
+
+
+
+            <clr-dg-row-detail *clrIfExpanded>
+              <table class="table">
+                <tr>
+                  <td class="td-title">NO</td>
+                  <td class="td-content">{{user.id}}</td>
+                </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]">Records per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} Records
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
 
-      <clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
-        <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getdepid(user.departmentCode)" class="um-clickable-cell">{{user.departmentCode}}</clr-dg-cell>
 
-        <clr-dg-row-detail *clrIfExpanded>
-          <table class="table">
-            <tr>
-              <td class="td-title">No</td>
-              <td class="td-content">{{user.id}}</td>
-            </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]">Records per page</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} Records
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
-</clr-modal>
 
-<!-- Position Modal -->
-<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
-  <h3 class="modal-title"><b>Select From List:</b></h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
       </div>
-    </div>
+    </clr-modal>
 
-    <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          No
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Position Code
-        </ng-container>
-      </clr-dg-column>
+    <clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
+      <h3 class="modal-title"><b>Select From List:</b></h3>
+      <div class="modal-body">
+        <div class="clr-row">
+          <div class="clr-col-md-12 clr-col-sm-12">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
+           </div>
+          </div>
 
-      <clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
-        <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getposid(user.positionCode)" class="um-clickable-cell">{{user.positionCode}}</clr-dg-cell>
 
-        <clr-dg-row-detail *clrIfExpanded>
-          <table class="table">
-            <tr>
-              <td class="td-title">No</td>
-              <td class="td-content">{{user.id}}</td>
-            </tr>
-          </table>
-        </clr-dg-row-detail>
-      </clr-dg-row>
+         <clr-datagrid [clrDgLoading]="loading">
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Position Code
+          </ng-container></clr-dg-column>
 
-      <clr-dg-footer>
-        <clr-dg-pagination #pagination [clrDgPageSize]="10">
-          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} Records
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
-</clr-modal>
\ No newline at end of file
+          <clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
+            <clr-dg-cell>{{i+1}}</clr-dg-cell>
+            <clr-dg-cell (click)="getposid(user.positionCode)" style="color: rgb(108, 108, 194);" >{{user.positionCode}}</clr-dg-cell>
+
+
+
+
+            <clr-dg-row-detail *clrIfExpanded>
+              <table class="table">
+                <tr>
+                  <td class="td-title">NO</td>
+                  <td class="td-content">{{user.id}}</td>
+                </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]">Records per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} Records
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
+
+
+
+
+      </div>
+    </clr-modal>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss
index e182a11..c871274 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.scss
@@ -1,6 +1,4 @@
 @import '../../../../../styles1.scss';
-@import '../../../../../styles/_design-tokens.scss';
-
 input.ng-invalid.ng-touched {
   border-color: red;
 }
@@ -8,383 +6,3 @@ input.ng-invalid.ng-touched {
 .error_mess {
   color: red;
 }
-
-// User Maintenance Add Styles
-.um-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-}
-
-.um-add-container {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-}
-
-.um-form-card {
-  background: var(--theme-surface);
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.um-form {
-  .clr-row {
-    margin: 0 -12px;
-  }
-  
-  .clr-col-md-6,
-  .clr-col-sm-12 {
-    padding: 0 12px;
-    margin-bottom: 20px;
-  }
-}
-
-.um-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.um-form-input,
-.um-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: #ef4444;
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.um-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.um-error-message {
-  color: #ef4444;
-  font-size: 12px;
-  margin-top: 6px;
-  font-weight: 500;
-}
-
-.required-field {
-  color: #ef4444;
-  margin-left: 4px;
-}
-
-.um-form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-// Modern Button Styles using ThemeService
-.um-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.um-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.um-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.um-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.um-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.um-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.um-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.um-clickable-cell {
-  color: var(--theme-primary);
-  cursor: pointer;
-  transition: all 200ms ease-out;
-
-  &:hover {
-    text-decoration: underline;
-    transform: translateY(-1px);
-  }
-}
-
-// Modal Styles
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Data Grid Styles
-.um-datagrid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .um-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-  }
-  
-  .um-form-actions {
-    flex-direction: column;
-  }
-  
-  .um-btn {
-    width: 100%;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts
index d1f3388..a7522e4 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.ts
@@ -4,9 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
 import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
 import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
-import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-usermaintanceadd',
@@ -15,63 +12,51 @@ import { Subscription } from 'rxjs';
 })
 export class UsermaintanceaddComponent implements OnInit {
   public entryForm: FormGroup;
-  customer: boolean = false;
-  department: boolean = false;
-  position: boolean = false;
+  customer:boolean=false;
+  department:boolean=false;
+  position:boolean=false;
   custdata: any;
   loading = false;
-  clickedID: number;
+  clickedID:number;
   custiddata: any;
-  userobjcust = {
-    customerName: '',
-    customerCode: '',
+  userobjcust={
+    customerName:'',
+    customerCode:'',
   }
   departmentdata: any;
   positiondata: any;
   deptiddata: any;
-  userobjdept = {
-    departmentCode: '',
+  userobjdept={
+    departmentCode:'',
   }
-  userobjpos = {
-    positionCode: '',
+  userobjpos={
+    positionCode:'',
   }
   posiddata: any;
   usergrpdata;
   accessdata;
   error;
-  submitted = false;
-  private themeSubscription: Subscription;
+  submitted=false;
 
-  constructor(private _fb: FormBuilder,
-    private mainservice: UsermaintanceService,
-    private router: Router, private accesstype: AccesstypeService,
+  constructor( private _fb: FormBuilder,
+    private mainservice:UsermaintanceService,
+    private router: Router,private accesstype:AccesstypeService,
     private route: ActivatedRoute,
-    private usergrpservice: UsergrpmaintainceService,
-    private translate: TranslateService,
-    private themeService: ThemeService,
-  ) { }
+    private usergrpservice: UsergrpmaintainceService
+    ) { }
 
-  switchLanguage(language: string) {
-    this.translate.use(language);
-  }
-  
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.entryForm = this._fb.group({
-      first_name: ['', [Validators.required]],
-      last_name: ['', [Validators.required]],
-      email: ['', [Validators.required, Validators.email]],
-      mob_no: ['', [Validators.required]],
-      new_password: ['', [Validators.required, Validators.minLength(6)]],
-      confirm_password: ['', [Validators.required]],
-      usrGrpId: ['', [Validators.required]],
-      account_id: 1,
-      accesstype: ['', [Validators.required]],
-      // status:[null],
+      first_name :['',[Validators.required]],
+      last_name:['',[Validators.required]],
+      email:['',[Validators.required,Validators.email]],
+      mob_no:['',[Validators.required]],
+      new_password:['',[Validators.required,Validators.minLength(6)]],
+      confirm_password:['',[Validators.required]],
+      usrGrpId:['',[Validators.required]],
+      account_id:1,
+      accesstype:['',[Validators.required]],
+     // status:[null],
       // username:[null] ,
       // userPassw:[null] ,
       // confirmPassword:[null],
@@ -87,38 +72,31 @@ export class UsermaintanceaddComponent implements OnInit {
       // notification:[null],
 
       //departmentCode: this._fb.array([this.department()]),
-      // positionCode: this._fb.array([this.position()]),
+     // positionCode: this._fb.array([this.position()]),
       //usrGrp: this._fb.array([this.user()]),
 
-    }, {
-      validator: ConfirmedValidator('new_password', 'confirm_password')
-    });
-    this.usergrp();
-    this.getdata();
+      }, {
+        validator: ConfirmedValidator('new_password', 'confirm_password')
+      });
+      this.usergrp();
+      this.getdata();
   }
-  
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
-  getdata() {
+  getdata(){
     this.accesstype.getAll().subscribe(resp => {
       this.accessdata = resp;
       console.log('accessdata: ', this.accessdata);
-      if (this.accessdata.length == 0) {
-        this.error = "No data Available";
+      if(this.accessdata.length==0){
+        this.error="No data Available";
         console.log(this.error)
       }
-    }, (error) => {
-      console.log(error);
-      if (error) {
-        this.error = "Server Error";
-      }
-    })
+  },(error) => {
+    console.log(error);
+    if(error){
+     this.error="Server Error";
+   }
+  })
   }
-  usergrp() {
+  usergrp(){
     this.usergrpservice.getAll().subscribe((data) => {
       console.log(data);
       this.usergrpdata = data;
@@ -142,11 +120,11 @@ export class UsermaintanceaddComponent implements OnInit {
 
   //   });
   //}
-  onSubmit() {
-    this.submitted = true
-    if (this.entryForm.invalid) {
-      return;
-    }
+  onSubmit(){
+    this.submitted=true
+      if (this.entryForm.invalid) {
+        return;
+      }
     console.log(this.entryForm.value);
     this.mainservice.create(this.entryForm.value).subscribe(data => {
       console.log(data)
@@ -158,63 +136,63 @@ export class UsermaintanceaddComponent implements OnInit {
     this.router.navigate(["../usermaintance"], { relativeTo: this.route });
   }
 
-  goback() {
-    this.router.navigate(["../usermaintance"], { relativeTo: this.route });
-  }
-  gotodepartmet() {
-    this.department = !this.department;
-    this.mainservice.getalldepartment().subscribe((data) => {
-      console.log(data);
-      this.departmentdata = data;
-    });
-  }
-  getdepid(id: number) {
-    this.clickedID = id;
-    console.log("clicked by id" + id);
-    this.mainservice.getbydepartmentid(id).subscribe((data) => {
-      console.log(data);
-      this.deptiddata = data;
-      // this.userObj= this.custiddata;
-      this.userobjdept = this.deptiddata;
+goback(){
+  this.router.navigate(["../usermaintance"], { relativeTo: this.route });
+}
+    gotodepartmet(){
+      this.department=!this.department;
+      this.mainservice.getalldepartment().subscribe((data)=>{
+        console.log(data);
+        this.departmentdata=data;
+      });
+    }
+    getdepid(id:number){
+      this.clickedID=id;
+      console.log("clicked by id"+ id);
+      this.mainservice.getbydepartmentid(id).subscribe((data) => {
+        console.log(data);
+        this.deptiddata= data;
+       // this.userObj= this.custiddata;
+        this.userobjdept =this.deptiddata;
 
 
-    });
-    this.department = false;
-  }
-  gotoposition() {
-    this.position = !this.position;
-    this.mainservice.getallposition().subscribe((data) => {
-      console.log(data);
-      this.positiondata = data;
-    })
-  }
-  getposid(id: number) {
-    this.clickedID = id;
-    console.log("clicked by id" + id);
-    this.mainservice.getbypositionid(id).subscribe((data) => {
-      console.log(data);
-      this.posiddata = data;
-      // this.userObj= this.custiddata;
-      this.userobjpos = this.posiddata;
+        });
+        this.department=false;
+    }
+    gotoposition(){
+      this.position=!this.position;
+      this.mainservice.getallposition().subscribe((data)=>{
+        console.log(data);
+        this.positiondata=data;
+      })
+    }
+    getposid(id:number){
+      this.clickedID=id;
+      console.log("clicked by id"+ id);
+      this.mainservice.getbypositionid(id).subscribe((data) => {
+        console.log(data);
+        this.posiddata= data;
+       // this.userObj= this.custiddata;
+        this.userobjpos =this.posiddata;
 
 
-    });
-    this.position = false;
-  }
+        });
+        this.position=false;
+    }
 
 
 }
-export function ConfirmedValidator(controlName: string, matchingControlName: string) {
+export function ConfirmedValidator(controlName: string, matchingControlName: string){
   return (formGroup: FormGroup) => {
-    const control = formGroup.controls[controlName];
-    const matchingControl = formGroup.controls[matchingControlName];
-    if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
-      return;
-    }
-    if (control.value !== matchingControl.value) {
-      matchingControl.setErrors({ confirmedValidator: true });
-    } else {
-      matchingControl.setErrors(null);
-    }
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
+          return;
+      }
+      if (control.value !== matchingControl.value) {
+          matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+          matchingControl.setErrors(null);
+      }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html
index e2721fe..64d92fe 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.html
@@ -1,249 +1,348 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
-  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
-  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon> Security</a></li>
-  <li><a href="javascript://">User Maintenance</a></li>
-</ol>
 
-<section class="um-hero">
-  <div class="um-hero__content">
-    <div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
-    <div>
-      <h2 class="um-hero__title">User Maintenance</h2>
-      <p class="um-hero__subtitle">Edit User</p>
-    </div>
-  </div>
-</section>
+    <h4 style="font-weight: 300;display: inline;"> User Maintenance</h4>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Edit Mode</span><br>
+    <hr>
+    <div class="main" >
+      <form *ngIf="data1">
+        <div class="clr-row">
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> First Name</label>
+           <input type="text" class="clr-input" name="first_name" [(ngModel)]="data1.fullName" >
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Last Name</label>
+           <input type="text" class="clr-input" name="last_name" [(ngModel)]="data1.last_name">
+          </div>
+           <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Mobile Number</label>
+           <input type="text" class="clr-input" name="mob_no" [(ngModel)]="data1.mob_no">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" name="new_password" [(ngModel)]="data1.userPassw">
+          </div>
 
-<div class="um-edit-container">
-  <div class="um-form-card">
-    <form *ngIf="data1" (ngSubmit)="update()" class="um-form">
-      <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="first_name" class="um-form-label">First Name<span class="required-field">*</span></label>
-          <input type="text" id="first_name" class="um-form-input" name="first_name" [(ngModel)]="data1.fullName">
-        </div>
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Business Title</label>
+           <input type="text" class="clr-input" formControlName="title">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> Short Name</label>
+           <input type="text" class="clr-input" formControlName="shortName">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Full Name</label>
+           <input type="text" class="clr-input" formControlName="fullName">
+          </div> -->
+          <!-- <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="tags">Status</label>
+            <select  id="" formControlName="status">
+              <option value="E">Enable</option>
+              <option  value="A">Active</option></select>
+            </div> -->
+            <!-- <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Position Code</label>
+             <input type="text" class="clr-input" formControlName="positionCodeString" [(ngModel)]="userobjpos.positionCode" name="positionCode" >
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotoposition()">V</button>
+            </div>
+            <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Department Code</label>
+             <input type="text" class="clr-input" formControlName="departmentCodeString" [(ngModel)]="userobjdept.departmentCode" name="departmentCode">
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
+            </div> -->
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="tags">User Group</label>
+              <select [(ngModel)]="data1.usrGrpId" name="usrGrpId">
+                <option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
+               </select>
+              </div>
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Customer Id</label>
+               <input type="text" class="clr-input" formControlName="customerId" name="customerCode">
+              </div> -->
+              <!-- <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+                <button style="margin-right: 5px;" >V</button>
+              </div> -->
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Email</label>
+               <input type="text" class="clr-input" name="email" [(ngModel)]="data1.email">
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Access Type</label>
+                <select [(ngModel)]="data1.accesstype" name="usrGrpId">
+                  <option *ngFor="let sub of accessdata" [value]="sub.name">{{sub.name}}</option>
+                 </select>
+                </div>
+              <!-- <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Notification</label>
+                <select  id="" formControlName="notification">
+                  <option value="N" >NO</option>
+                  <option value="Y">YES</option></select>
+                </div> -->
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="last_name" class="um-form-label">Last Name<span class="required-field">*</span></label>
-          <input type="text" id="last_name" class="um-form-input" name="last_name" [(ngModel)]="data1.last_name">
-        </div>
+                   </div>
+        <!-- <div class="clr-row">
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="mob_no" class="um-form-label">Mobile Number<span class="required-field">*</span></label>
-          <input type="text" id="mob_no" class="um-form-input" name="mob_no" [(ngModel)]="data1.mob_no">
-        </div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="email" class="um-form-label">Email<span class="required-field">*</span></label>
-          <input type="text" id="email" class="um-form-input" name="email" [(ngModel)]="data1.email">
-        </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> User Name</label>
+           <input type="text" class="clr-input" [(ngModel)]="data1.username" name="username">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">New Password<span class="required-field">*</span></label>
+           <input type="password" class="clr-input" [(ngModel)]="data1.userPassw" name="userPassw">
+          </div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="new_password" class="um-form-label">New Password<span class="required-field">*</span></label>
-          <input type="password" id="new_password" class="um-form-input" name="new_password" [(ngModel)]="data1.userPassw">
-        </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Business Title</label>
+           <input type="text" class="clr-input" [(ngModel)]="data1.title" name="title">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name"> Short Name</label>
+           <input type="text" class="clr-input" [(ngModel)]="data1.shortName" name="shortName">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Full Name</label>
+           <input type="text" class="clr-input" [(ngModel)]="data1.fullName" name="fullName">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="tags">Status</label>
+            <select [(ngModel)]="data1.status" name="status">
+              <option value="E">Enable</option>
+              <option  value="A">Active</option></select>
+            </div>
+            <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Position Code</label>
+             <input type="text" class="clr-input" [(ngModel)]="data1.positionCodeString" [value]="userobjpos.positionCode"  name="positionCodeString">
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotoposition()">V</button>
+            </div>
+            <div class="clr-col-md-3 clr-col-sm-12">
+              <label for="name">Department Code</label>
+             <input type="text" class="clr-input" [(ngModel)]="data1.departmentCodeString" [value]="userobjdept.departmentCode" name="departmentCodeString">
+            </div>
+            <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+              <button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="tags">User Group</label>
+              <select [(ngModel)]="data1.usrGrpId" name="usrGrpId">
+                <option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
+               </select>
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Customer Id</label>
+               <input type="text" class="clr-input" [(ngModel)]="data1.customerId" [value]="userobjcust.customerCode" name="customerId">
+              </div>
+              <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
+                <button style="margin-right: 5px;" (click)="gotocustomerid()">V</button>
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="name">Email</label>
+               <input type="text" class="clr-input"[(ngModel)]="data1.email" name="email">
+              </div>
+              <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="tags">Notification</label>
+                <select [(ngModel)]="data1.notification" name="notification">
+                  <option value="N" >NO</option>
+                  <option value="Y">YES</option></select>
+                </div>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="usrGrpId" class="um-form-label">User Group<span class="required-field">*</span></label>
-          <select id="usrGrpId" class="um-form-select" [(ngModel)]="data1.usrGrpId" name="usrGrpId">
-            <option value="">Select User Group</option>
-            <option *ngFor="let group of usergrpdata" [value]="group.usrGrp">{{group.groupName}}</option>
-          </select>
-        </div>
+                   </div>
+                   <div class="clr-row">
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created By</label>
+                     <input type="text" class="clr-input" [(ngModel)]="data1.createby" name="createby">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Created On</label>
+                     <input type="text" class="clr-input" [(ngModel)]="data1.createdate" name="createdate">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated By</label>
+                     <input type="text" class="clr-input" [(ngModel)]="data1.updateby" name="updateby">
+                    </div>
+                    <div class="clr-col-md-3 clr-col-sm-12">
+                      <label for="name">Updated On</label>
+                     <input type="text" class="clr-input"[(ngModel)]="data1.updatedate" name="updatedate">
+                    </div>
+                  </div> -->
+                  </form>
 
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="accesstype" class="um-form-label">Access Type<span class="required-field">*</span></label>
-          <select id="accesstype" class="um-form-select" [(ngModel)]="data1.accesstype" name="accesstype">
-            <option value="">Select Access Type</option>
-            <option *ngFor="let access of accessdata" [value]="access.name">{{access.name}}</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="um-form-actions">
-        <button type="button" class="um-btn um-btn-outline" (click)="goback()">
-          <clr-icon shape="times"></clr-icon>
-          <span>Close</span>
-        </button>
-        <button type="submit" class="um-btn um-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>Update User</span>
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
-
-<!-- Customer Modal -->
-<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
-  <h3 class="modal-title"><b>Select From List:</b></h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="goback()">Close</button>
+      <button type="button"  class="btn btn-primary" (click)="update()">Update</button>
       </div>
     </div>
 
-    <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          No
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Customer Code
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerCode'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Customer Id
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerName'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Customer Name
-        </ng-container>
-      </clr-dg-column>
+    <clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
+      <h3 class="modal-title"><b>Select From List:</b></h3>
+      <div class="modal-body">
+        <div class="clr-row">
+          <div class="clr-col-md-12 clr-col-sm-12">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
+           </div>
+          </div>
 
-      <clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
-        <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getcustID(user.customerId)" class="um-clickable-cell">{{user.customerCode}}</clr-dg-cell>
-        <clr-dg-cell>{{user.customerId}}</clr-dg-cell>
-        <clr-dg-cell>{{user.customerName}}</clr-dg-cell>
+         <clr-datagrid [clrDgLoading]="loading">
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Customer Code
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Customer Id
+          </ng-container></clr-dg-column>
 
-        <clr-dg-row-detail *clrIfExpanded>
-          <table class="table">
-            <tr>
-              <td class="td-title">No</td>
-              <td class="td-content">{{user.id}}</td>
-            </tr>
-            <tr>
-              <td class="td-title">Customer Code</td>
-              <td class="td-content">{{user.customerCode}}</td>
-            </tr>
-            <tr>
-              <td class="td-title">Customer Id</td>
-              <td class="td-content">{{user.customerId}}</td>
-            </tr>
-            <tr>
-              <td class="td-title">Customer Name</td>
-              <td class="td-content">{{user.customerName}}</td>
-            </tr>
-          </table>
-        </clr-dg-row-detail>
-      </clr-dg-row>
+          <clr-dg-column [clrDgField]="'customerName'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+              Customer Name
+            </ng-container>
+            </clr-dg-column >
 
-      <clr-dg-footer>
-        <clr-dg-pagination #pagination [clrDgPageSize]="10">
-          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} Records
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
-</clr-modal>
+          <clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
+            <clr-dg-cell>{{i+1}}</clr-dg-cell>
+            <clr-dg-cell (click)="getcustID(user.customerId)" style="color: rgb(108, 108, 194);" >{{user.customerCode}}</clr-dg-cell>
+            <clr-dg-cell >{{user.customerId}}</clr-dg-cell>
+            <clr-dg-cell>{{user.customerName}}</clr-dg-cell>
 
-<!-- Department Modal -->
-<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
-  <h3 class="modal-title"><b>Select From List:</b></h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
+            <clr-dg-row-detail *clrIfExpanded>
+              <table class="table">
+                <tr>
+                  <td class="td-title">NO</td>
+                  <td class="td-content">{{user.id}}</td>
+                </tr>
+                <tr>
+                  <td class="td-title"> Customer Code</td>
+                  <td class="td-content">{{user.customerCode}}</td>
+                </tr>
+                <tr>
+                  <td class="td-title">Customer Id</td>
+                  <td class="td-content">{{user.customerId}} </td>
+                </tr>
+                <tr>
+                  <td class="td-title"> Customer Name<td>
+                  <td class="td-content">{{user.customerName}}</td>
+                </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]">Records per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} Records
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
       </div>
-    </div>
+    </clr-modal>
 
-    <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          No
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Department Code
-        </ng-container>
-      </clr-dg-column>
+    <clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
+      <h3 class="modal-title"><b>Select From List:</b></h3>
+      <div class="modal-body">
+        <div class="clr-row">
+          <div class="clr-col-md-12 clr-col-sm-12">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
+           </div>
+          </div>
+
+
+         <clr-datagrid [clrDgLoading]="loading">
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Department Code
+          </ng-container></clr-dg-column>
+
+          <clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
+            <clr-dg-cell>{{i+1}}</clr-dg-cell>
+            <clr-dg-cell (click)="getdepid(user.departmentCode)" style="color: rgb(108, 108, 194);" >{{user.departmentCode}}</clr-dg-cell>
+
+
+
+
+            <clr-dg-row-detail *clrIfExpanded>
+              <table class="table">
+                <tr>
+                  <td class="td-title">NO</td>
+                  <td class="td-content">{{user.id}}</td>
+                </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]">Records per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} Records
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
 
-      <clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
-        <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getdepid(user.departmentCode)" class="um-clickable-cell">{{user.departmentCode}}</clr-dg-cell>
 
-        <clr-dg-row-detail *clrIfExpanded>
-          <table class="table">
-            <tr>
-              <td class="td-title">No</td>
-              <td class="td-content">{{user.id}}</td>
-            </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]">Records per page</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} Records
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
-</clr-modal>
 
-<!-- Position Modal -->
-<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
-  <h3 class="modal-title"><b>Select From List:</b></h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-md-12 clr-col-sm-12">
-        <input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
       </div>
-    </div>
+    </clr-modal>
+    <clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
+      <h3 class="modal-title"><b>Select From List:</b></h3>
+      <div class="modal-body">
+        <div class="clr-row">
+          <div class="clr-col-md-12 clr-col-sm-12">
+              <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
+           </div>
+          </div>
 
-    <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder>
-        <clr-spinner>Loading ...</clr-spinner>
-      </clr-dg-placeholder>
-      <clr-dg-column [clrDgField]="'id'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          No
-        </ng-container>
-      </clr-dg-column>
-      <clr-dg-column [clrDgField]="'customerId'">
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          Position Code
-        </ng-container>
-      </clr-dg-column>
 
-      <clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
-        <clr-dg-cell>{{i+1}}</clr-dg-cell>
-        <clr-dg-cell (click)="getposid(user.positionCode)" class="um-clickable-cell">{{user.positionCode}}</clr-dg-cell>
+         <clr-datagrid [clrDgLoading]="loading">
+          <clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
+          <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            Position Code
+          </ng-container></clr-dg-column>
 
-        <clr-dg-row-detail *clrIfExpanded>
-          <table class="table">
-            <tr>
-              <td class="td-title">No</td>
-              <td class="td-content">{{user.id}}</td>
-            </tr>
-          </table>
-        </clr-dg-row-detail>
-      </clr-dg-row>
+          <clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
+            <clr-dg-cell>{{i+1}}</clr-dg-cell>
+            <clr-dg-cell (click)="getposid(user.positionCode)" style="color: rgb(108, 108, 194);" >{{user.positionCode}}</clr-dg-cell>
 
-      <clr-dg-footer>
-        <clr-dg-pagination #pagination [clrDgPageSize]="10">
-          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} Records
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
-</clr-modal>
\ No newline at end of file
+
+
+
+            <clr-dg-row-detail *clrIfExpanded>
+              <table class="table">
+                <tr>
+                  <td class="td-title">NO</td>
+                  <td class="td-content">{{user.id}}</td>
+                </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]">Records per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} Records
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
+
+
+
+
+      </div>
+    </clr-modal>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss
index 66585f8..36abb8c 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.scss
@@ -1,375 +1 @@
 @import '../../../../../styles1.scss';
-@import '../../../../../styles/_design-tokens.scss';
-
-// User Maintenance Edit Styles
-.um-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-}
-
-.um-edit-container {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-}
-
-.um-form-card {
-  background: var(--theme-surface);
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.um-form {
-  .clr-row {
-    margin: 0 -12px;
-  }
-  
-  .clr-col-md-6,
-  .clr-col-sm-12 {
-    padding: 0 12px;
-    margin-bottom: 20px;
-  }
-}
-
-.um-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.um-form-input,
-.um-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: #ef4444;
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.um-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.required-field {
-  color: #ef4444;
-  margin-left: 4px;
-}
-
-.um-form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-// Modern Button Styles using ThemeService
-.um-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.um-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.um-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.um-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.um-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.um-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.um-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.um-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-.um-clickable-cell {
-  color: var(--theme-primary);
-  cursor: pointer;
-  transition: all 200ms ease-out;
-
-  &:hover {
-    text-decoration: underline;
-    transform: translateY(-1px);
-  }
-}
-
-// Modal Styles
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Data Grid Styles
-.um-datagrid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-      
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .um-hero {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-  }
-  
-  .um-form-actions {
-    flex-direction: column;
-  }
-  
-  .um-btn {
-    width: 100%;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts
index 533fc95..2f33378 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.ts
@@ -3,9 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
 import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
 import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
-import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
-import { Subscription } from 'rxjs';
+//import { Usermain } from 'src/app/models/usermaintaince';
 
 @Component({
   selector: 'app-usermaintanceedit',
@@ -13,52 +11,40 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./usermaintanceedit.component.scss']
 })
 export class UsermaintanceeditComponent implements OnInit {
-  id: number;
-  data1: any = {};
-  customer: boolean = false;
+  id:number;
+  data1:any={};
+  customer:boolean=false;
   custdata: any;
-  clickedID: number;
+  clickedID:number;
   custiddata: any;
   loading = false;
-  userobjcust = {
-    customerName: '',
-    customerCode: '',
+  userobjcust={
+    customerName:'',
+    customerCode:'',
   }
   accessdata;
-  department: boolean = false;
+  department:boolean=false;
   departmentdata: any;
   positiondata: any;
   deptiddata: any;
-  userobjdept = {
-    departmentCode: '',
+  userobjdept={
+    departmentCode:'',
   }
-  userobjpos = {
-    positionCode: '',
+  userobjpos={
+    positionCode:'',
   }
   posiddata: any;
-  position: boolean = false;
+  position:boolean=false;
   usergrpdata;
   error;
-  private themeSubscription: Subscription;
+  constructor(private route:ActivatedRoute,
+    private mainservice:UsermaintanceService,
+    private router: Router,private accesstype:AccesstypeService,
+    private usergrpservice: UsergrpmaintainceService
 
-  constructor(private route: ActivatedRoute,
-    private mainservice: UsermaintanceService,
-    private router: Router, private accesstype: AccesstypeService,
-    private usergrpservice: UsergrpmaintainceService,
-    private translate: TranslateService,
-    private themeService: ThemeService,
-  ) { }
-  
-  switchLanguage(language: string) {
-    this.translate.use(language);
-  }
+   ) { }
 
   ngOnInit(): void {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
-      // Theme changes will automatically update CSS variables
-      // This triggers a re-render of themed elements
-    });
-    
     this.id = this.route.snapshot.params["id"];
     console.log("update with id = ", this.id);
     this.getById(this.id);
@@ -66,89 +52,82 @@ export class UsermaintanceeditComponent implements OnInit {
     this.usergrp();
     this.getdata();
   }
-  
-  ngOnDestroy(): void {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-  
-  getdata() {
+  getdata(){
     this.accesstype.getAll().subscribe(resp => {
       this.accessdata = resp;
       console.log('accessdata: ', this.accessdata);
-      if (this.accessdata.length == 0) {
-        this.error = "No data Available";
+      if(this.accessdata.length==0){
+        this.error="No data Available";
         console.log(this.error)
       }
-    }, (error) => {
-      console.log(error);
-      if (error) {
-        this.error = "Server Error";
-      }
-    })
+  },(error) => {
+    console.log(error);
+    if(error){
+     this.error="Server Error";
+   }
+  })
   }
-  usergrp() {
+  usergrp(){
     this.usergrpservice.getAll().subscribe((data) => {
       console.log(data);
       this.usergrpdata = data;
     });
   }
-  getById(id: number) {
-    this.mainservice.getbyid(id).subscribe((data) => {
-      this.data1 = data;
-      // this.data1=this.data3;
-      console.log(this.data1);
-    });
-  }
-  update() {
-    console.log(this.data1);
-    this.mainservice.updatenew(this.id, this.data1).subscribe((data) => {
-      console.log(data);
-    });
+getById(id:number){
+this.mainservice.getbyid(id).subscribe((data)=>{
+  this.data1=data;
+ // this.data1=this.data3;
+  console.log(this.data1);
+});
+}
+update(){
+  console.log(this.data1);
+  this.mainservice.updatenew(this.id,this.data1).subscribe((data)=>{
+console.log(data);
+  });
 
-  }
-  goback() {
-    this.router.navigate(["../../usermaintance"], { relativeTo: this.route });
-  }
-  gotodepartmet() {
-    this.department = !this.department;
-    this.mainservice.getalldepartment().subscribe((data) => {
+}
+goback(){
+  this.router.navigate(["../../usermaintance"], { relativeTo: this.route });
+}
+  gotodepartmet(){
+    this.department=!this.department;
+    this.mainservice.getalldepartment().subscribe((data)=>{
       console.log(data);
-      this.departmentdata = data;
+      this.departmentdata=data;
     });
   }
-  getdepid(id: number) {
-    this.clickedID = id;
-    console.log("clicked by id" + id);
+  getdepid(id:number){
+    this.clickedID=id;
+    console.log("clicked by id"+ id);
     this.mainservice.getbydepartmentid(id).subscribe((data) => {
       console.log(data);
-      this.deptiddata = data;
-      // this.userObj= this.custiddata;
-      this.userobjdept = this.deptiddata;
+      this.deptiddata= data;
+     // this.userObj= this.custiddata;
+      this.userobjdept =this.deptiddata;
 
 
-    });
-    this.department = false;
+      });
+      this.department=false;
   }
-  gotoposition() {
-    this.position = !this.position;
-    this.mainservice.getallposition().subscribe((data) => {
+  gotoposition(){
+    this.position=!this.position;
+    this.mainservice.getallposition().subscribe((data)=>{
       console.log(data);
-      this.positiondata = data;
+      this.positiondata=data;
     })
   }
-  getposid(id: number) {
-    this.clickedID = id;
-    console.log("clicked by id" + id);
+  getposid(id:number){
+    this.clickedID=id;
+    console.log("clicked by id"+ id);
     this.mainservice.getbypositionid(id).subscribe((data) => {
       console.log(data);
-      this.posiddata = data;
-      // this.userObj= this.custiddata;
-      this.userobjpos = this.posiddata;
+      this.posiddata= data;
+     // this.userObj= this.custiddata;
+      this.userobjpos =this.posiddata;
 
 
-    });
-    this.position = false;
+      });
+      this.position=false;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 2.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 2.zip
deleted file mode 100644
index 9f41612..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 2.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 3.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 3.zip
deleted file mode 100644
index 3998d6d..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 3.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 4.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 4.zip
deleted file mode 100644
index 200b6a1..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 4.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 5.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 5.zip
deleted file mode 100644
index dd9b370..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 5.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 6.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 6.zip
deleted file mode 100644
index 72d0003..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew 6.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew.zip
deleted file mode 100644
index a81113c..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake 2.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake 2.zip
deleted file mode 100644
index d030c4b..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake 2.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake 3.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake 3.zip
deleted file mode 100644
index d74492d..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake 3.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake.zip b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake.zip
deleted file mode 100644
index e9ed721..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.html
deleted file mode 100644
index 2ee46d8..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.html
+++ /dev/null
@@ -1,1209 +0,0 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong">
-  <li><a href="javascript://"> Data lake</a></li>
-</ol>
-<div class="dg-wrapper">
-  <div class="clr-row">
-    <div class="clr-col-8">
-      <h3>Data lake </h3>
-    </div>
-    <div class="clr-col-4" style="text-align: right;">
-      <button *ngIf="cardButton" id="add" class="btn btn-primary btn-icon" (click)="changeView()">
-        <clr-icon *ngIf="!isCardview" shape="grid-view"></clr-icon> <clr-icon *ngIf="isCardview"
-          shape="bars"></clr-icon>
-      </button>
-      <!-- button -->
-      <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
-        <clr-icon shape="plus"></clr-icon>ADD
-      </button>
-    </div>
-  </div>
-  <ng-container *ngIf="!isCardview"> <!-- GET ALL -->
-    <div style="overflow-x: auto;">
-      <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected" style="width: max-content; min-width: 100%;">
-        <clr-dg-placeholder>
-          <ng-template #loadingSpinner>
-            <clr-spinner>Loading ... </clr-spinner>
-          </ng-template>
-          <div *ngIf="error;else loadingSpinner">{{error}}</div>
-        </clr-dg-placeholder>
-
-        <clr-dg-column [clrDgField]="'name'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Name
-          </ng-container></clr-dg-column>
-
-
-        <clr-dg-column [clrDgField]="'url'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url
-          </ng-container></clr-dg-column>
-
-        <clr-dg-column [clrDgField]="'url_endpoint'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url Endpoint
-          </ng-container></clr-dg-column>
-
-        <clr-dg-column [clrDgField]="'schedule'"> <ng-container *clrDgHideableColumn="{hidden: false}"> schedule
-          </ng-container></clr-dg-column>
-
-
-        <clr-dg-column [clrDgField]="'cron_job'"> <ng-container *clrDgHideableColumn="{hidden: false}"> cron job
-          </ng-container></clr-dg-column>
-
-
-        <clr-dg-column [clrDgField]="'json'"> <ng-container *clrDgHideableColumn="{hidden: false}"> json
-          </ng-container></clr-dg-column>
-
-        <!-- Add groupby_json column -->
-        <clr-dg-column [clrDgField]="'groupby_json'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-            Group By JSON
-          </ng-container></clr-dg-column>
-
-
-
-        <clr-dg-column [clrDgField]="'batch_volume'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Batch Volume
-          </ng-container></clr-dg-column>
-
-        <clr-dg-column [clrDgField]="'sure_connect_id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-            SureConnect
-          </ng-container></clr-dg-column>
-
-        <!-- Add ref_datalake_id column -->
-        <clr-dg-column [clrDgField]="'ref_datalake_id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-            Reference Data Lake
-          </ng-container></clr-dg-column>
-
-        <clr-dg-column [clrDgField]="'calculated_field_json'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-            Calculated Fields
-          </ng-container></clr-dg-column>
-
-        <!-- Webhook Status Column -->
-        <clr-dg-column>
-          <ng-container *clrDgHideableColumn="{hidden: false}">
-            Webhook Status
-          </ng-container>
-        </clr-dg-column>
-
-        <!-- who column -->
-        <clr-dg-column>
-          <ng-container *clrDgHideableColumn="{hidden: false}">
-            <clr-icon shape="bars"></clr-icon> Action
-          </ng-container>
-        </clr-dg-column>
-        <!-- end -->
-
-        <clr-dg-row *clrDgItems="let user of product" [clrDgItem]="user">
-
-          <clr-dg-cell>{{user.name }}</clr-dg-cell>
-
-
-          <clr-dg-cell>
-            <div style="display: flex; align-items: center; max-width: 200px;">
-              <span
-                style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
-                title="{{user.url}}" (click)="showFullUrl(user.url)">
-                {{user.url | slice:0:30}}{{user.url.length > 30 ? '...' : ''}}
-              </span>
-              <button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url)" title="Copy URL">
-                <clr-icon shape="copy-to-clipboard"></clr-icon>
-              </button>
-            </div>
-          </clr-dg-cell>
-
-
-          <clr-dg-cell>
-            <div style="display: flex; align-items: center; max-width: 200px;">
-              <span
-                style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
-                title="{{user.url_endpoint}}" (click)="showFullUrl(user.url_endpoint)">
-                {{user.url | slice:0:30}}{{user?.url_endpoint?.length > 30 ? '...' : ''}}
-              </span>
-              <button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url_endpoint)" title="Copy URL">
-                <clr-icon shape="copy-to-clipboard"></clr-icon>
-              </button>
-            </div>
-          </clr-dg-cell>
-
-          <clr-dg-cell>{{user.schedule }}</clr-dg-cell>
-
-
-          <clr-dg-cell>{{user.cron_job }}</clr-dg-cell>
-
-
-          <clr-dg-cell (click)="goToReplaceStringjson(user.json)"
-            style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon></clr-dg-cell>
-
-          <!-- Add groupby_json cell -->
-          <clr-dg-cell (click)="goToReplaceStringjson(user.groupby_json)"
-            style="cursor: pointer; align-items: center;"><clr-icon shape="details"
-              *ngIf="user.groupby_json"></clr-icon></clr-dg-cell>
-
-
-          <clr-dg-cell>{{user.batch_volume}}</clr-dg-cell>
-
-          <clr-dg-cell>{{user.sureconnect_name}}</clr-dg-cell>
-
-          <!-- Add ref_datalake_id cell -->
-          <clr-dg-cell>{{user.ref_datalake_name}}</clr-dg-cell>
-
-          <clr-dg-cell (click)="goToReplaceStringjson(user.calculated_field_json)"
-            style="cursor: pointer; align-items: center;"><clr-icon shape="details"
-              *ngIf="user.calculated_field_json"></clr-icon></clr-dg-cell>
-
-          <!-- Webhook Status Cell -->
-          <clr-dg-cell>
-            <span *ngIf="user.webhook_url && user.webhook_url.trim() !== ''" class="webhook-enabled">Enabled</span>
-            <span *ngIf="!user.webhook_url || user.webhook_url.trim() === ''" class="webhook-disabled">Disabled</span>
-          </clr-dg-cell>
-
-          <!-- who column -->
-          <clr-dg-cell>
-            <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</h5>
-                <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
-                <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
-                <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
-                <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
-                <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
-              </clr-signpost-content>
-            </clr-signpost>
-
-            <!-- New JSON Update button -->
-            <button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
-              <clr-icon shape="refresh"></clr-icon>
-            </button>
-
-            <!-- Calculated Field button -->
-            <button class="btn btn-icon" (click)="fetchAvailableKeys(user)" title="Create Calculated Field">
-              <clr-icon shape="calculator"></clr-icon>
-            </button>
-          
-            <!-- Group By button -->
-            <button class="btn btn-icon" (click)="openGroupByModal(user)" title="Group By Configuration">
-              <clr-icon shape="group"></clr-icon>
-            </button>
-          
-            <!-- Blending Keys button (only shown for blending type with non-empty blending_lakeids) -->
-            <button class="btn btn-icon" 
-                  (click)="fetchBlendingKeys(user)" 
-                  title="Configure Blending Query"
-                  *ngIf="canShowBlendingAction(user)">
-              <clr-icon shape="code"></clr-icon>
-            </button>
-          
-            <!-- Field Mapping button -->
-            <button class="btn btn-icon" 
-                  (click)="openFieldMappingModal(user)" 
-                  title="Field Mapping"
-                  *ngIf="user.url && user.sure_connect_id">
-              <clr-icon shape="map"></clr-icon>
-            </button>
-          
-            <!-- Scheduler button -->
-            <button class="btn btn-icon" 
-                  (click)="openSchedulerModal(user)" 
-                  title="Scheduler">
-              <clr-icon shape="clock"></clr-icon>
-            </button>
-            
-            <!-- Webhook toggle button -->
-            <button class="btn btn-icon" 
-                  (click)="toggleWebhook(user)" 
-                  title="Toggle Webhook">
-              <clr-icon shape="network-globe"></clr-icon>
-            </button>
-            
-            <!-- Copy Webhook URL button -->
-            <button class="btn btn-icon" 
-                  (click)="copyWebhookUrl(user.webhook_url)" 
-                  title="Copy Webhook URL"
-                  *ngIf="user.webhook_url && user.webhook_url.trim() !== ''">
-              <clr-icon shape="copy-to-clipboard"></clr-icon>
-            </button>
-          </clr-dg-cell>
-
-          <!-- who colmn -->
-
-          <!-- <clr-dg-cell>
-    <button class="btn btn-icon" (click)="onEdit(user)">
-      <clr-icon shape="pencil"></clr-icon>
-    </button>
-    <button class="btn btn-icon" (click)="onDelete(user)">
-      <clr-icon shape="trash"></clr-icon>
-    </button>
-    
-  </clr-dg-cell> -->
-
-          <clr-dg-action-overflow>
-            <button class="action-item" (click)="onEdit(user)">Edit</button>
-            <button class="action-item" (click)="onDelete(user)">Delete</button>
-          </clr-dg-action-overflow>
-        </clr-dg-row>
-        <clr-dg-footer>
-          <clr-dg-pagination #pagination [clrDgPageSize]="10">
-            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
-            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-            of {{pagination.totalItems}} users
-          </clr-dg-pagination>
-        </clr-dg-footer>
-      </clr-datagrid>
-    </div>
-  </ng-container>
-  <ng-template #showInfo>
-    <div class="alert alert-info" role="alert">
-      <div class="alert-items">
-        <div class="alert-item static">
-          <span class="alert-text">
-            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
-            Data could be found. Loading..
-            <clr-spinner [clrMedium]="true">Loading ...</clr-spinner>
-          </span>
-        </div>
-      </div>
-    </div>
-  </ng-template>
-
-  <ng-container *ngIf="isCardview">
-    <div *ngIf="product; else showInfo" class="clr-row clr-align-items-start clr-justify-content-start">
-      <div *ngFor="let app of product| filter:search; let index = i" class="clr-col-auto">
-        <div class="clr-row">
-          <div class="clr-col-lg-12 clr-col-md-4 clr-col-sm-4 clr-col-12" style="width: 410px;">
-            <div class="card" style="padding: 10px; "
-              [style.background-color]="cardmodal.cardColor !== '' ? cardmodal.cardColor : 'white'">
-              <div class="card-body"
-                style="display: grid; grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(7, 1fr); gap: 5px;">
-                <ng-container *ngFor="let item of dashboardArray">
-                  <div [style.gridColumn]="item.x + 1" [style.gridRow]="item.y + 1"
-                    [style.gridColumnEnd]="item.x + item.cols + 1" [style.gridRowEnd]="item.y + item.rows + 1">
-                    <div *ngIf="item.name === 'textField'" class="title-card card-title"
-                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
-                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
-                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
-                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
-                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
-                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
-          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
-                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
-                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
-                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
-                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
-                      {{beforeText(item.fieldtext)}}
-                      {{ app[transform(item.fieldtext) ] }}
-                      {{afterText(item.fieldtext)}}
-                    </div>
-
-                    <div *ngIf="item.name === 'dateField'" class="title-card card-title"
-                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
-                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
-                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
-                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
-                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
-                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
-          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
-                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
-                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
-                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
-                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
-                      {{beforeText(item.fieldtext)}}
-                      {{ app[transform(item.fieldtext) ] | date}}
-                      {{afterText(item.fieldtext)}}
-                    </div>
-                    <div *ngIf="item.name === 'numberField'" class="title-card card-title"
-                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
-                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
-                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
-                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
-                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
-                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
-          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
-                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
-                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
-                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
-                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
-                      {{beforeText(item.fieldtext)}}
-                      {{ app[transform(item.fieldtext) ]}}
-                      {{afterText(item.fieldtext)}}
-                    </div>
-
-
-                    <div *ngIf="item.name === 'Line'" class="title-card card-title"
-                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
-                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
-                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
-                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
-                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
-                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
-          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
-                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
-                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
-                      <hr>
-                    </div>
-
-                    <div *ngIf="item.name === 'Icon'" class="icon-card"
-                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
-                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
-                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
-                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
-                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
-                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
-          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
-                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
-                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
-                      <clr-icon [attr.shape]="item.iconName"></clr-icon>
-                    </div>
-
-                    <div *ngIf="item.name == 'Image'"
-                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
-                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
-                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
-                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
-                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
-                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
-          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
-                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
-                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
-                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
-                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
-                      <img id="filePreview" [src]="item.imageURL" alt="File Preview"
-                        [style.width]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"
-                        [style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'">
-                    </div>
-                  </div>
-                </ng-container>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>
-
-
-<clr-modal [(clrModalOpen)]="rsModaljson" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
-  <div class="modal-body">
-    <!-- Grid view above JSON -->
-    <div *ngIf="isJsonData(rowSelected)" class="json-grid-view" style="margin-bottom: 20px;">
-      <h4>JSON Data Grid View</h4>
-      <div style="overflow-x: auto; max-height: 300px; overflow-y: auto;">
-        <clr-datagrid style="width: max-content; min-width: 100%;">
-          <!-- Generate columns dynamically based on JSON keys -->
-          <clr-dg-column *ngFor="let header of getJsonHeaders(rowSelected)" style="min-width: 150px;">
-            <ng-container *clrDgHideableColumn="{hidden: false}">
-              {{header}}
-            </ng-container>
-          </clr-dg-column>
-
-          <!-- Generate rows dynamically from JSON data -->
-          <clr-dg-row *ngFor="let item of getJsonData(rowSelected); let i = index" [clrDgItem]="item">
-            <clr-dg-cell *ngFor="let header of getJsonHeaders(rowSelected)" style="min-width: 150px;">
-              <span [title]="item[header]"
-                style="display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                {{item[header]}}
-              </span>
-            </clr-dg-cell>
-          </clr-dg-row>
-
-          <clr-dg-footer>
-            <clr-dg-pagination #jsonPagination [clrDgPageSize]="5">
-              <clr-dg-page-size [clrPageSizeOptions]="[5, 10, 20]">Items per page</clr-dg-page-size>
-              {{jsonPagination.firstItem + 1}} - {{jsonPagination.lastItem + 1}}
-              of {{getJsonData(rowSelected).length}} items
-            </clr-dg-pagination>
-          </clr-dg-footer>
-        </clr-datagrid>
-      </div>
-    </div>
-
-    <!-- JSON view below grid -->
-    <textarea class="form-control" style="width:100%; height: 200px;" readonly>{{rowSelected}}</textarea>
-  </div>
-</clr-modal>
-
-
-
-<!-- //		EDIT DATA......... -->
-<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Update Data lake
-    <!--update button -->
-
-  </h3>
-  <div class="modal-body" *ngIf="rowSelected.id">
-    <h2 class="heading">{{rowSelected.id}}</h2>
-    <!-- button -->
-    <form>
-      <div class="clr-row">
-        <div class="clr-col-sm-12">
-          <label>Name</label>
-          <input class="clr-input" type="text" [(ngModel)]="rowSelected.name" name="name" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label> Url</label>
-          <input type="url" name="url" [(ngModel)]="rowSelected.url" placeholder="Enter URL" class="clr-input"
-            pattern="https?://.+">
-          <div *ngIf="!isValidurl(rowSelected.url )" class="error_mess"> * Please enter a valid URL. </div>
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label>schedule</label>
-          <input class="clr-input" type="text" [(ngModel)]="rowSelected.schedule" name="schedule" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label>cron job</label>
-          <input class="clr-input" type="text" [(ngModel)]="rowSelected.cron_job" name="cron_job" />
-          <app-cron-job-builder [cronExpression]="editCronExpression"
-            (cronExpressionChange)="onEditCronExpressionChange($event)"
-            instanceId="edit-form-{{rowSelected.id}}"></app-cron-job-builder>
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label> json</label>
-          <input id="name" type="Text" class="form-control" style="border: none; outline: none; height:33px !important;"
-            [(ngModel)]="rowSelected.json" name=" json " />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label>Url</label>
-          <input class="clr-input" type="text" [(ngModel)]="rowSelected.url_endpoint" name="url_endpoint" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label>Batch Volume</label>
-          <input class="clr-input" type="number" [(ngModel)]="rowSelected.batch_volume" name="batch_volume" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label>SureConnect</label>
-          <select class="clr-input" [(ngModel)]="rowSelected.sure_connect_id" name="sure_connect_id">
-            <option value="">Select SureConnect</option>
-            <option *ngFor="let sureConnect of sureConnectList" [value]="sureConnect.id">{{sureConnect.connection_name}}
-            </option>
-          </select>
-        </div>
-
-        <!-- Data Lake Type -->
-        <div class="clr-col-sm-12">
-          <label>Data Lake Type</label>
-          <select class="clr-input" [(ngModel)]="rowSelected.datalake_type" name="datalake_type">
-            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
-          </select>
-        </div>
-
-        <!-- Blending Data Lakes (only show when blending type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
-          <label>Blending Data Lakes</label>
-          <div class="checkbox-container">
-            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
-              <input 
-                type="checkbox" 
-                [value]="dataLake.id" 
-                (change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
-                [checked]="isEditBlendingLakeSelected(dataLake.id)">
-              <label>{{ dataLake.name }}</label>
-            </div>
-          </div>
-          <small class="clr-subtext">Select data lakes to blend</small>
-        </div>
-
-        <!-- Reference Data Lake (only show when normal type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'normal'">
-          <label>Reference Data Lake</label>
-          <select class="clr-input" [(ngModel)]="rowSelected.ref_datalake_id" name="ref_datalake_id">
-            <option value="">Select Data Lake</option>
-            <option *ngFor="let dataLake of dataLakeList" [value]="dataLake.id">{{dataLake.name}}
-            </option>
-          </select>
-        </div>
-      </div>
-      <!-- form code start -->
-      <div *ngIf="checkFormCode">
-        <h4 style="font-weight: 300;display: inline;">Extension</h4>
-        <br>
-        <hr>
-        <div class="clr-row">
-          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
-            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
-              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
-              <input *ngSwitchCase="'text'" [type]="field.fieldType" name="{{ field.extValue }}"
-                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />
-
-              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
-              <input *ngSwitchCase="'date'" [type]="field.fieldType" name="{{ field.extValue }}"
-                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />
-
-              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
-              <textarea *ngSwitchCase="'textarea'" name="{{ field.extValue }}" [(ngModel)]="rowSelected[field.extValue]"
-                col="10" row="2"></textarea>
-
-              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
-              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" name="{{ field.extValue }}"
-                [(ngModel)]="rowSelected[field.extValue]" class="clr-checkbox" />
-            </ng-container>
-          </div>
-        </div>
-      </div>
-
-      <!-- form code end -->
-      <div class="modal-footer">
-        <button type="button" class="btn btn-outline" (click)="modalEdit = false">Cancel</button>
-        <button type="submit" class="btn btn-primary" (click)="onUpdate(rowSelected.id)">Update</button>
-      </div>
-    </form>
-  </div>
-</clr-modal>
-
-<!-- DELETE FORM ..... -->
-
-<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <div class="modal-body" *ngIf="rowSelected.id">
-    <h1 class="delete">Are You Sure Want to delete?</h1>
-    <h2 class="heading">{{rowSelected.id}}</h2>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
-      <button type="button" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
-    </div>
-  </div>
-</clr-modal>
-
-<!-- ADD FORM ..... -->
-<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Add Data lake
-
-    <!-- aeroplane icon -->
-    &nbsp; &nbsp; &nbsp; &nbsp;
-    <a *ngIf="userrole?.includes('ADMIN')" style="float: right;" href="javascript:void(0)" role="tooltip"
-      aria-haspopup="true" class="tooltip tooltip-sm tooltip-bottom-left">
-      <a id="build_extension" [routerLink]="['../extension/all']" [queryParams]="{ formCode: 'Data_lake_formCode' }">
-        <clr-icon shape="airplane" size="32"></clr-icon>
-      </a>
-      <span class="tooltip-content">Form Extension</span>
-    </a>
-  </h3>
-  <div class="modal-body">
-    <form [formGroup]="entryForm">
-      <div class="clr-row" style="height: fit-content;">
-
-        <div class="clr-col-sm-12">
-          <label> Name</label>
-          <input class="clr-input" type="text" formControlName="name" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label> Url </label>
-          <input type="url" formControlName="url" class="clr-input" pattern="https?://.+">
-          <div *ngIf="entryForm.controls['url'].errors" class="error_mess">
-            <div *ngIf="entryForm.controls['url'].hasError('pattern')" class="error_mess"> * Please enter a valid URL.
-            </div>
-          </div>
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label> schedule</label>
-          <input class="clr-input" type="text" formControlName="schedule" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label> cron job</label>
-          <input class="clr-input" type="text" formControlName="cron_job" />
-          <app-cron-job-builder [cronExpression]="addCronExpression"
-            (cronExpressionChange)="onAddCronExpressionChange($event)" instanceId="add-form"></app-cron-job-builder>
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label>json</label>
-          <input class="form-control" type="Text" formControlName="json"
-            style="border: none; outline: none; height:33px !important;" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label> Url Endpoint</label>
-          <input class="clr-input" type="text" formControlName="url_endpoint" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label> Batch Volume</label>
-          <input class="clr-input" type="number" formControlName="batch_volume" />
-        </div>
-
-        <div class="clr-col-sm-12">
-          <label>SureConnect</label>
-          <select formControlName="sure_connect_id">
-            <option value="">Select SureConnect</option>
-            <option *ngFor="let sureConnect of sureConnectList" [value]="sureConnect.id">{{sureConnect.connection_name}}
-            </option>
-          </select>
-        </div>
-
-        <!-- Data Lake Type -->
-        <div class="clr-col-sm-12">
-          <label>Data Lake Type</label>
-          <select formControlName="datalake_type">
-            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
-          </select>
-        </div>
-
-        <!-- Blending Data Lakes (only show when blending type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
-          <label>Blending Data Lakes</label>
-          <div class="checkbox-container">
-            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
-              <input 
-                type="checkbox" 
-                [value]="dataLake.id" 
-                (change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
-                [checked]="isBlendingLakeSelected(dataLake.id)">
-              <label>{{ dataLake.name }}</label>
-            </div>
-          </div>
-          <small class="clr-subtext">Select data lakes to blend</small>
-        </div>
-
-        <!-- Reference Data Lake (only show when normal type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'normal'">
-          <label>Reference Data Lake</label>
-          <select formControlName="ref_datalake_id">
-            <option value="">Select Data Lake</option>
-            <option *ngFor="let dataLake of dataLakeList" [value]="dataLake.id">{{dataLake.name}}
-            </option>
-          </select>
-        </div>
-      </div>
-
-
-      <!-- form code start -->
-      <div *ngIf="checkFormCode">
-        <h4 style="font-weight: 300;display: inline;">Extension</h4>
-        <br>
-        <hr>
-        <div class="clr-row">
-          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
-            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
-              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
-              <input *ngSwitchCase="'text'" [type]="field.fieldType" [formControlName]="field.extValue"
-                class="clr-input" />
-              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
-              <input *ngSwitchCase="'date'" [type]="field.fieldType" [formControlName]="field.extValue"
-                class="clr-input" />
-              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
-              <textarea *ngSwitchCase="'textarea'" [formControlName]="field.extValue" col="10" row="2"></textarea>
-              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
-              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" [formControlName]="field.extValue"
-                class="clr-checkbox" />
-            </ng-container>
-          </div>
-        </div>
-      </div>
-      <!-- form code end -->
-      <div class="modal-footer">
-        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
-        <button type="submit" class="btn btn-primary" (click)="onSubmit()">ADD</button>
-      </div>
-    </form>
-  </div>
-</clr-modal>
-
-<!-- Calculated Field Modal -->
-<clr-modal [(clrModalOpen)]="calculatedFieldModalOpen" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Create Calculated Field</h3>
-  <div class="modal-body">
-    <form [formGroup]="calculatedFieldForm">
-      <div class="clr-row">
-        <div class="clr-col-12 calculated-section">
-          <h4 class="section-title">
-            <clr-icon shape="key" class="section-icon"></clr-icon>
-            Available Keys from API
-          </h4>
-          <div class="field-container">
-            <span *ngFor="let key of availableKeys" class="field-tag" (click)="addFieldToEquation(key)">
-              <clr-icon shape="data-field" class="field-icon"></clr-icon>
-              {{ key }}
-            </span>
-          </div>
-        </div>
-
-        <div class="clr-col-12 calculated-section">
-          <label class="field-label">Calculated Field Name</label>
-          <input class="clr-input field-input" type="text" formControlName="fieldName" placeholder="Enter field name" />
-        </div>
-
-        <div class="clr-col-12 calculated-section">
-          <label class="field-label">Operation</label>
-          <select class="field-input" formControlName="operation">
-            <option value="">Select Operation</option>
-            <option value="add">Addition (+)</option>
-            <option value="subtract">Subtraction (-)</option>
-            <option value="multiply">Multiplication (*)</option>
-            <option value="divide">Division (/)</option>
-            <option value="percentage">Percentage (%)</option>
-            <option value="concat">Concatenation (||)</option>
-            <option value="complex">Complex Equation</option>
-          </select>
-        </div>
-
-        <!-- Complex Equation Section -->
-        <div class="clr-col-12 calculated-section" *ngIf="calculatedFieldForm.get('operation')?.value === 'complex'">
-          <label class="field-label">Complex Equation</label>
-          <textarea class="clr-textarea equation-input" formControlName="complexEquation"
-            placeholder="Enter complex equation using actual field names" rows="3"></textarea>
-          <small class="clr-subtext equation-hint">
-            Use actual field names from the available keys list above, or predefined constants (constant_X).
-            Example: (field1 + field2) * constant_1 - (field3 / field4)
-          </small>
-
-          <!-- Available Operators -->
-          <div class="operators-container">
-            <h5 class="subsection-title">
-              <clr-icon shape="calculator" class="subsection-icon"></clr-icon>
-              Available Operators
-            </h5>
-            <div class="operator-tags">
-              <span class="operator-tag" (click)="addOperatorToEquation('+')">+</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('-')">-</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('*')">×</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('/')">÷</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('(')">(</span>
-              <span class="operator-tag" (click)="addOperatorToEquation(')')">)</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('[')">[</span>
-              <span class="operator-tag" (click)="addOperatorToEquation(']')">]</span>
-              <!-- <span class="operator-tag" (click)="addOperatorToEquation('{')">{</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('}')">}</span> -->
-              <span class="operator-tag" (click)="addOperatorToEquation('^')">^</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('%')">%</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('=')">=</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('>')">&gt;</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('<')">&lt;</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('>=')">&gt;=</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('<=')">&lt;=</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('!=')">!=</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('&&')">&&</span>
-              <span class="operator-tag" (click)="addOperatorToEquation('||')">||</span>
-            </div>
-          </div>
-
-          <!-- Available Fields -->
-          <div class="fields-container">
-            <h5 class="subsection-title">
-              <clr-icon shape="data-field" class="subsection-icon"></clr-icon>
-              Available Fields
-            </h5>
-            <div class="field-tags">
-              <span *ngFor="let key of availableKeys" class="field-tag" (click)="addFieldToEquation(key)">
-                <clr-icon shape="data-field" class="field-icon"></clr-icon>
-                {{ key }}
-              </span>
-            </div>
-          </div>
-
-          <!-- Defined Constants -->
-          <div class="constants-container" *ngIf="getDefinedConstants().length > 0">
-            <h5 class="subsection-title">
-              <clr-icon shape="pin" class="subsection-icon"></clr-icon>
-              Defined Constants
-            </h5>
-            <div class="constant-tags">
-              <span *ngFor="let constant of getDefinedConstants()" class="constant-tag"
-                (click)="addFieldToEquation(constant)">
-                <clr-icon shape="pin" class="constant-icon"></clr-icon>
-                {{ constant }}
-              </span>
-            </div>
-          </div>
-
-          <!-- Add New Constant -->
-          <div class="new-constant-container">
-            <button class="btn btn-sm btn-secondary add-constant-btn" (click)="addNewConstantToEquation()">
-              <clr-icon shape="plus"></clr-icon> Add New Constant
-            </button>
-          </div>
-        </div>
-
-        <!-- Multiple Fields Section -->
-        <div class="clr-col-12 calculated-section"
-          *ngIf="calculatedFieldForm.get('operation')?.value && calculatedFieldForm.get('operation')?.value !== 'complex'">
-          <label class="field-label">Fields and Constants</label>
-          <div class="field-components-container">
-            <div formArrayName="fieldComponents">
-              <div *ngFor="let fieldComponent of getFieldComponents().controls; let i = index" [formGroupName]="i"
-                class="field-component-row">
-                <div class="field-select-container">
-                  <select class="field-select" formControlName="field">
-                    <option value="">Select Field</option>
-                    <option *ngFor="let key of availableKeys" [value]="key">{{ key }}</option>
-                  </select>
-                </div>
-                <div class="constant-input-container">
-                  <input type="text" class="constant-input" formControlName="constant"
-                    placeholder="Or enter constant value" />
-                </div>
-                <div class="remove-btn-container">
-                  <button type="button" class="btn btn-icon btn-danger remove-field-btn"
-                    (click)="removeFieldComponent(i)" *ngIf="getFieldComponents().length > 1">
-                    <clr-icon shape="trash"></clr-icon>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <button type="button" class="btn btn-sm add-field-btn" (click)="addFieldComponent()">
-              <clr-icon shape="plus"></clr-icon> Add Field/Constant
-            </button>
-          </div>
-        </div>
-      </div>
-    </form>
-
-    <div class="clr-row created-fields-section">
-      <div class="clr-col-12">
-        <h4 class="section-title">
-          <clr-icon shape="list" class="section-icon"></clr-icon>
-          Created Calculated Fields
-        </h4>
-        <div class="table-container">
-          <table class="table calculated-fields-table">
-            <thead>
-              <tr>
-                <th>Field Name</th>
-                <th>Operation</th>
-                <th>Fields/Values</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr *ngFor="let field of calculatedFields">
-                <td class="field-name-cell">{{ field.fieldName }}</td>
-                <td class="operation-cell">{{ field.operation }}</td>
-                <td class="expression-cell">
-                  <span *ngIf="field.operation === 'complex'">{{ field.complexEquation }}</span>
-                  <span *ngIf="field.operation !== 'complex' && field.type !== 'groupby'">
-                    <span *ngFor="let component of field.fieldComponents; let last = last">
-                      <span *ngIf="component.field && !component.isConstant">{{ component.field }}</span>
-                      <span *ngIf="component.isConstant">"{{ component.constant }}"</span>
-                      <span *ngIf="!component.field && component.constant">"{{ component.constant }}"</span>
-                      <span *ngIf="!last"> {{ getOperationSymbol(field.operation) }} </span>
-                    </span>
-                  </span>
-                  <span *ngIf="field.type === 'groupby'">
-                    GROUP BY: {{ field.groupFields.join(', ') }}
-                    <div *ngIf="field.aggregations && field.aggregations.length > 0">
-                      <small>
-                        <div *ngFor="let agg of field.aggregations">
-                          {{ agg.operation.toUpperCase() }}({{ agg.field }})
-                        </div>
-                      </small>
-                    </div>
-                  </span>
-                </td>
-                <td>
-                  <button class="btn btn-icon btn-danger" (click)="deleteCalculatedField(field.id)"
-                    *ngIf="field.type !== 'groupby'">
-                    <clr-icon shape="trash"></clr-icon>
-                  </button>
-                  <button class="btn btn-icon btn-danger" (click)="removeGroupByConfig(field.id)"
-                    *ngIf="field.type === 'groupby'">
-                    <clr-icon shape="trash"></clr-icon>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="calculatedFieldModalOpen = false">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="addCalculatedField()">Add Field</button>
-    <button type="button" class="btn btn-success" (click)="updateCalculatedFields()"
-      [disabled]="calculatedFields.length === 0">
-      Update Record
-    </button>
-  </div>
-</clr-modal>
-
-<!-- Constant Value Modal -->
-<clr-modal [(clrModalOpen)]="constantValueModalOpen" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Define Constant Value</h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-12">
-        <p>Enter a value for constant: <strong>{{ currentConstantName }}</strong></p>
-      </div>
-      <div class="clr-col-12">
-        <label>Constant Value</label>
-        <input class="clr-input" type="text" [(ngModel)]="currentConstantValue" placeholder="Enter constant value" />
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="cancelConstantValue()">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="saveConstantValue()">Save</button>
-  </div>
-</clr-modal>
-
-<!-- Group By Modal -->
-<clr-modal [(clrModalOpen)]="showGroupByModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Group By Configuration</h3>
-  <div class="modal-body">
-    <div class="clr-row">
-      <div class="clr-col-12">
-        <h4>Group By Fields</h4>
-        <div class="field-container">
-          <span *ngFor="let key of availableKeys" class="field-tag" [class.selected]="isGroupByFieldSelected(key)"
-            (click)="isGroupByFieldSelected(key) ? removeGroupByField(key) : addGroupByField(key)">
-            {{ key }}
-          </span>
-        </div>
-      </div>
-
-      <div class="clr-col-12" style="margin-top: 20px;">
-        <h4>Selected Group By Fields</h4>
-        <div class="selected-fields-container">
-          <span *ngFor="let field of selectedGroupByFields" class="selected-field-tag">
-            {{ field }}
-            <button class="btn btn-icon btn-sm" (click)="removeGroupByField(field)">
-              <clr-icon shape="times"></clr-icon>
-            </button>
-          </span>
-          <div *ngIf="selectedGroupByFields.length === 0" class="no-selection">
-            No fields selected for grouping
-          </div>
-        </div>
-      </div>
-
-      <div class="clr-col-12" style="margin-top: 20px;">
-        <h4>Aggregation Operations</h4>
-        <div class="aggregation-container">
-          <div *ngFor="let agg of selectedAggregationFields; let i = index" class="aggregation-row">
-            <div class="clr-row">
-              <div class="clr-col-5">
-                <label>Field</label>
-                <select class="clr-select" [(ngModel)]="agg.field">
-                  <option value="">Select Field</option>
-                  <option *ngFor="let key of availableKeys" [value]="key">{{ key }}</option>
-                </select>
-              </div>
-              <div class="clr-col-5">
-                <label>Operation</label>
-                <select class="clr-select" [(ngModel)]="agg.operation">
-                  <option *ngFor="let op of aggregationOperations" [value]="op.value">{{ op.label }}</option>
-                </select>
-              </div>
-              <div class="clr-col-2">
-                <button class="btn btn-icon btn-danger" (click)="removeAggregationField(i)" style="margin-top: 20px;">
-                  <clr-icon shape="trash"></clr-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <button class="btn btn-sm" (click)="addAggregationField()" style="margin-top: 10px;">
-            <clr-icon shape="plus"></clr-icon> Add Aggregation
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="showGroupByModal = false">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="applyGroupBy()"
-      [disabled]="selectedGroupByFields.length === 0">
-      Apply Group By
-    </button>
-  </div>
-</clr-modal>
-
-<!-- Blending Keys Panel -->
-<div class="blending-keys-panel" *ngIf="showBlendingKeys">
-  <div class="panel-header">
-    <h3>Blending Configuration</h3>
-    <button class="btn btn-icon" (click)="closeBlendingKeys()" title="Close">
-      <clr-icon shape="close"></clr-icon>
-    </button>
-  </div>
-  
-  <div class="panel-content">
-    <!-- Display keys for each blending lake -->
-    <div class="keys-container" *ngFor="let keyData of blendingKeysData">
-      <h4>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h4>
-      <div class="headers-container">
-        <span class="header-tag" *ngFor="let header of keyData.headers">{{ header }}</span>
-      </div>
-    </div>
-    
-    <!-- SQL Query Editor -->
-    <div class="sql-editor-container">
-      <h4>SQL Query Builder</h4>
-      <textarea class="clr-textarea sql-textarea" 
-                [(ngModel)]="sqlQueryText" 
-                placeholder="Enter your SQL query here using the available headers..."
-                rows="6"></textarea>
-      <div class="editor-actions">
-        <button class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Blending Configuration Modal -->
-<clr-modal [(clrModalOpen)]="showBlendingKeys" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Blending Configuration</h3>
-  <div class="modal-body">
-    <div class="blending-config-container">
-      <!-- Display keys for each blending lake -->
-      <div class="keys-section" *ngIf="blendingKeysData && blendingKeysData.length > 0">
-        <h4 class="section-title">
-          <clr-icon shape="data-field" class="section-icon"></clr-icon>
-          Available Data Sources
-        </h4>
-        <div class="keys-container">
-          <div class="key-card" *ngFor="let keyData of blendingKeysData">
-            <div class="key-header">
-              <h5>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h5>
-            </div>
-            <div class="headers-container">
-              <span class="header-tag" *ngFor="let header of keyData.headers" 
-                    (click)="insertHeaderIntoQuery(header)">
-                {{ header }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- SQL Query Editor -->
-      <div class="sql-editor-section">
-        <h4 class="section-title">
-          <clr-icon shape="code" class="section-icon"></clr-icon>
-          SQL Query Builder
-        </h4>
-        <div class="sql-editor-container">
-          <textarea class="clr-textarea sql-textarea" 
-                    [(ngModel)]="sqlQueryText" 
-                    placeholder="Enter your SQL query here using the available headers. Click on header names above to insert them into your query."
-                    rows="8"></textarea>
-          <div class="editor-hint">
-            <small class="clr-subtext">Tip: Click on header names above to automatically insert them into your query</small>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="closeBlendingKeys()">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
-  </div>
-</clr-modal>
-
-<!-- Field Mapping Modal -->
-<clr-modal [(clrModalOpen)]="showFieldMappingModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Field Mapping Configuration</h3>
-  <div class="modal-body">
-    <div class="field-mapping-container">
-      <div class="instructions">
-        <p>Map original field names to new names. Leave mapping blank to exclude field from mapping.</p>
-      </div>
-      
-      <div class="mapping-table-container" *ngIf="fieldMappingData && fieldMappingData.length > 0">
-        <table class="table mapping-table">
-          <thead>
-            <tr>
-              <th width="50%">Original Field Name</th>
-              <th width="50%">Mapped Field Name</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let field of fieldMappingData; let i = index">
-              <td class="original-field">
-                <span class="field-tag">{{ field.original }}</span>
-              </td>
-              <td>
-                <input type="text" 
-                       class="clr-input mapping-input" 
-                       [(ngModel)]="field.mapped" 
-                       placeholder="Enter new field name"
-                       (ngModelChange)="updateFieldMapping(i, $event)">
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      
-      <div class="no-data-message" *ngIf="fieldMappingData && fieldMappingData.length === 0">
-        <p>No fields available for mapping. Please check the data source configuration.</p>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="closeFieldMappingModal()">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="updateFieldMappings()" [disabled]="!fieldMappingData || fieldMappingData.length === 0">Update Field Mappings</button>
-  </div>
-</clr-modal>
-
-<!-- Scheduler Modal -->
-<clr-modal [(clrModalOpen)]="showSchedulerModal" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title">Job Scheduler</h3>
-  <div class="modal-body">
-    <div class="scheduler-container">
-      <div class="data-lake-info">
-        <h4>Data Lake: {{ selectedSchedulerItem?.name }}</h4>
-      </div>
-      
-      <!-- Job Information -->
-      <div class="job-info-section" *ngIf="schedulerJob">
-        <div class="job-header">
-          <h5>Job Information</h5>
-          <span class="badge" [ngClass]="getStatusBadgeClass(schedulerJob.status)">
-            {{ schedulerJob.status }}
-          </span>
-        </div>
-        
-        <div class="job-details">
-          <div class="detail-row">
-            <label>Job Name:</label>
-            <span>{{ schedulerJob.name }}</span>
-          </div>
-          <div class="detail-row">
-            <label>Job Type:</label>
-            <span>{{ schedulerJob.jobType }}</span>
-          </div>
-          <div class="detail-row">
-            <label>Description:</label>
-            <span>{{ schedulerJob.description }}</span>
-          </div>
-        </div>
-        
-        <!-- Job Actions -->
-        <div class="job-actions">
-          <button class="btn btn-warning" (click)="pauseJob()" *ngIf="schedulerJob.status === 'RUNNING'">
-            <clr-icon shape="pause"></clr-icon> Pause Job
-          </button>
-          <button class="btn btn-success" (click)="resumeJob()" *ngIf="schedulerJob.status === 'PAUSED'">
-            <clr-icon shape="play"></clr-icon> Resume Job
-          </button>
-          <button class="btn btn-danger" (click)="stopJob()" *ngIf="schedulerJob.status !== 'STOPPED'">
-            <clr-icon shape="stop"></clr-icon> Stop Job
-          </button>
-          <button class="btn btn-primary" (click)="restartJob()" *ngIf="schedulerJob.status === 'STOPPED'">
-            <clr-icon shape="play"></clr-icon> Restart Job
-          </button>
-        </div>
-      </div>
-      
-      <!-- No Job Found -->
-      <div class="no-job-section" *ngIf="schedulerJob === null">
-        <div class="no-job-message">
-          <p>No scheduled job found for this Data Lake.</p>
-          <p>Would you like to create a new job?</p>
-        </div>
-        
-        <div class="create-job-actions">
-          <button class="btn btn-primary" (click)="createJob()">
-            <clr-icon shape="plus"></clr-icon> Create Job
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="closeSchedulerModal()">Close</button>
-  </div>
-
-</clr-modal>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.scss
deleted file mode 100644
index 2d6880b..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.scss
+++ /dev/null
@@ -1,877 +0,0 @@
-/* Calculated Fields Modal Styles */
-
-.calculated-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.section-title {
-  color: #0072a0;
-  font-weight: 600;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-}
-
-.section-icon {
-  margin-right: 10px;
-}
-
-.field-label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: #333;
-}
-
-.field-input {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-  transition: border-color 0.3s;
-}
-
-.field-input:focus {
-  border-color: #0072a0;
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(0, 114, 160, 0.2);
-}
-
-.field-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 10px;
-}
-
-.field-tag {
-  display: inline-flex;
-  align-items: center;
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 20px;
-  padding: 6px 12px;
-  margin: 4px;
-  font-size: 13px;
-  font-family: monospace;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.field-tag:hover {
-  background-color: #bbdefb;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.field-icon {
-  margin-right: 5px;
-  color: #1976d2;
-}
-
-.equation-input {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-family: monospace;
-  font-size: 14px;
-  margin-bottom: 8px;
-}
-
-.equation-hint {
-  display: block;
-  margin-bottom: 15px;
-  color: #666;
-  font-style: italic;
-}
-
-.operators-container,
-.fields-container,
-.constants-container,
-.new-constant-container {
-  margin-bottom: 20px;
-}
-
-.subsection-title {
-  color: #555;
-  font-weight: 500;
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-}
-
-.subsection-icon {
-  margin-right: 8px;
-  color: #0072a0;
-}
-
-.operator-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.operator-tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #0072a0;
-  color: white;
-  border: 1px solid #005a80;
-  border-radius: 4px;
-  padding: 6px 10px;
-  font-size: 14px;
-  font-family: monospace;
-  cursor: pointer;
-  transition: all 0.2s;
-  min-width: 36px;
-}
-
-.operator-tag:hover {
-  background-color: #005a80;
-  transform: scale(1.1);
-}
-
-.field-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.constant-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.constant-tag {
-  display: inline-flex;
-  align-items: center;
-  background-color: #4caf50;
-  color: white;
-  border: 1px solid #388e3c;
-  border-radius: 20px;
-  padding: 6px 12px;
-  margin: 4px;
-  font-size: 13px;
-  font-family: monospace;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.constant-tag:hover {
-  background-color: #388e3c;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.constant-icon {
-  margin-right: 5px;
-}
-
-.add-constant-btn {
-  background-color: #ff9800;
-  border-color: #f57c00;
-}
-
-.add-constant-btn:hover {
-  background-color: #f57c00;
-}
-
-.field-components-container {
-  background-color: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 15px;
-}
-
-.field-component-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  gap: 10px;
-}
-
-.field-select-container,
-.constant-input-container {
-  flex: 1;
-}
-
-.field-select,
-.constant-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.remove-field-btn {
-  padding: 6px;
-}
-
-.add-field-btn {
-  margin-top: 10px;
-  background-color: #1976d2;
-  border-color: #1976d2;
-  color: white;
-}
-
-.add-field-btn:hover {
-  background-color: #1565c0;
-}
-
-.created-fields-section {
-  margin-top: 25px;
-  padding-top: 20px;
-  border-top: 1px solid #eee;
-}
-
-.table-container {
-  overflow-x: auto;
-}
-
-.calculated-fields-table {
-  width: 100%;
-  border-collapse: collapse;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.calculated-fields-table th {
-  background-color: #f5f5f5;
-  padding: 12px 15px;
-  text-align: left;
-  font-weight: 600;
-  color: #333;
-}
-
-.calculated-fields-table td {
-  padding: 12px 15px;
-  border-bottom: 1px solid #eee;
-}
-
-.field-name-cell {
-  font-weight: 500;
-  color: #0072a0;
-}
-
-.operation-cell {
-  font-family: monospace;
-  background-color: #e3f2fd;
-  border-radius: 4px;
-  padding: 4px 8px;
-  display: inline-block;
-}
-
-.expression-cell {
-  font-family: monospace;
-  font-size: 13px;
-}
-
-.actions-cell {
-  text-align: center;
-}
-
-.delete-field-btn {
-  padding: 6px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .field-component-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .field-select-container,
-  .constant-input-container {
-    margin-bottom: 8px;
-  }
-}
-
-/* Group By Modal Styles */
-.field-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 10px;
-}
-
-.field-tag {
-  display: inline-flex;
-  align-items: center;
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 20px;
-  padding: 6px 12px;
-  margin: 4px;
-  font-size: 13px;
-  font-family: monospace;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.field-tag:hover {
-  background-color: #bbdefb;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.field-tag.selected {
-  background-color: #1976d2;
-  color: white;
-  border-color: #1976d2;
-}
-
-.selected-fields-container {
-  min-height: 50px;
-  padding: 10px;
-  border: 1px dashed #ccc;
-  border-radius: 4px;
-  background-color: #f9f9f9;
-}
-
-.selected-field-tag {
-  display: inline-flex;
-  align-items: center;
-  background-color: #1976d2;
-  color: white;
-  border-radius: 20px;
-  padding: 6px 12px;
-  margin: 4px;
-  font-size: 13px;
-}
-
-.selected-field-tag .btn-icon {
-  margin-left: 8px;
-  padding: 2px;
-  color: white;
-}
-
-.no-selection {
-  color: #999;
-  font-style: italic;
-  padding: 10px;
-}
-
-.aggregation-container {
-  margin-top: 10px;
-}
-
-.aggregation-row {
-  background-color: #f5f5f5;
-  padding: 15px;
-  border-radius: 4px;
-  margin-bottom: 10px;
-}
-
-.aggregation-row label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-}
-
-.clr-select {
-  width: 100%;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-/* Data Lake Type Styles */
-.clr-subtext {
-  display: block;
-  margin-top: 5px;
-  font-size: 12px;
-  color: #666;
-}
-
-[data-multiple] {
-  height: auto !important;
-  min-height: 80px;
-}
-
-/* Checkbox Styles for Blending Data Lakes */
-.checkbox-container {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 10px;
-  max-height: 200px;
-  overflow-y: auto;
-  background-color: #f9f9f9;
-}
-
-.checkbox-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.checkbox-item input[type="checkbox"] {
-  margin-right: 8px;
-}
-
-.checkbox-item label {
-  margin-bottom: 0;
-  cursor: pointer;
-}
-
-/* Blending Keys Panel Styles */
-.blending-keys-panel {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: white;
-  border-top: 1px solid #ccc;
-  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
-  z-index: 1000;
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  border-bottom: 1px solid #eee;
-  background-color: #f5f5f5;
-}
-
-.panel-header h3 {
-  margin: 0;
-  color: #333;
-}
-
-.panel-content {
-  padding: 15px;
-}
-
-.keys-container {
-  margin-bottom: 20px;
-  padding: 10px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  background-color: #fafafa;
-}
-
-.keys-container h4 {
-  margin-top: 0;
-  color: #555;
-}
-
-.headers-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 10px;
-}
-
-.header-tag {
-  display: inline-block;
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 12px;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-family: monospace;
-}
-
-.sql-editor-container {
-  margin-top: 20px;
-}
-
-.sql-textarea {
-  width: 100%;
-  font-family: 'Courier New', monospace;
-  font-size: 14px;
-}
-
-.editor-actions {
-  margin-top: 10px;
-  text-align: right;
-}
-
-/* Blending Configuration Modal Styles */
-.blending-config-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.section-title {
-  color: #0072a0;
-  font-weight: 600;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-}
-
-.section-icon {
-  margin-right: 10px;
-}
-
-.keys-section {
-  padding: 15px;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.key-card {
-  background-color: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 15px;
-  margin-bottom: 15px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.key-header h5 {
-  margin: 0 0 10px 0;
-  color: #333;
-  font-weight: 500;
-}
-
-.headers-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.header-tag {
-  display: inline-flex;
-  align-items: center;
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 20px;
-  padding: 6px 12px;
-  margin: 4px;
-  font-size: 13px;
-  font-family: monospace;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.header-tag:hover {
-  background-color: #bbdefb;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.sql-editor-section {
-  padding: 15px;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.sql-editor-container {
-  background-color: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 15px;
-}
-
-.sql-textarea {
-  width: 100%;
-  font-family: 'Courier New', monospace;
-  font-size: 14px;
-  min-height: 150px;
-}
-
-.editor-hint {
-  margin-top: 10px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 15px;
-  border-top: 1px solid #eee;
-}
-
-/* Field Mapping Modal Styles */
-.field-mapping-container {
-  padding: 10px;
-}
-
-.instructions {
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 4px;
-  padding: 15px;
-  margin-bottom: 20px;
-}
-
-.instructions p {
-  margin: 0;
-  color: #1976d2;
-}
-
-.mapping-table-container {
-  overflow-x: auto;
-}
-
-.mapping-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.mapping-table th {
-  background-color: #f5f5f5;
-  padding: 12px 15px;
-  text-align: left;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 2px solid #ddd;
-}
-
-.mapping-table td {
-  padding: 12px 15px;
-  border-bottom: 1px solid #eee;
-}
-
-.original-field {
-  vertical-align: middle;
-}
-
-.field-tag {
-  display: inline-block;
-  background-color: #e0e0e0;
-  border: 1px solid #bdbdbd;
-  border-radius: 4px;
-  padding: 6px 10px;
-  font-family: monospace;
-  font-size: 13px;
-}
-
-.mapping-input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.mapping-input:focus {
-  outline: none;
-  border-color: #0072a0;
-  box-shadow: 0 0 0 2px rgba(0, 114, 160, 0.2);
-}
-
-.no-data-message {
-  text-align: center;
-  padding: 30px;
-  color: #666;
-  font-style: italic;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 15px;
-  border-top: 1px solid #eee;
-}
-
-/* Scheduler Modal Styles */
-.scheduler-container {
-  padding: 10px;
-}
-
-.data-lake-info h4 {
-  margin: 0 0 20px 0;
-  color: #333;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 10px;
-}
-
-.job-info-section {
-  background-color: #f9f9f9;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-
-.job-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.job-header h5 {
-  margin: 0;
-  color: #333;
-}
-
-.badge {
-  padding: 5px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.badge-success {
-  background-color: #4caf50;
-  color: white;
-}
-
-.badge-warning {
-  background-color: #ff9800;
-  color: white;
-}
-
-.badge-danger {
-  background-color: #f44336;
-  color: white;
-}
-
-.badge-light {
-  background-color: #e0e0e0;
-  color: #333;
-}
-
-.job-details {
-  margin-bottom: 20px;
-}
-
-.detail-row {
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.detail-row label {
-  font-weight: 500;
-  width: 120px;
-  color: #555;
-}
-
-.detail-row span {
-  flex: 1;
-}
-
-.job-actions {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.job-actions .btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.no-job-section {
-  text-align: center;
-  padding: 30px 20px;
-}
-
-.no-job-message p {
-  margin: 10px 0;
-  color: #666;
-}
-
-.no-job-message p:first-child {
-  font-size: 18px;
-  color: #333;
-}
-
-.create-job-actions {
-  margin-top: 20px;
-}
-
-.create-job-actions .btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 15px;
-  border-top: 1px solid #eee;
-}
-
-/* Webhook Status Styles */
-.webhook-enabled {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-  background-color: #4caf50;
-  color: white;
-}
-
-.webhook-disabled {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-  background-color: #f44336;
-  color: white;
-}
-
-/* Webhook Status Styles */
-.webhook-status {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.webhook-status.enabled {
-  background-color: #4caf50;
-  color: white;
-}
-
-.webhook-status.disabled {
-  background-color: #f44336;
-  color: white;
-}
-
-/* Webhook Modal Styles */
-.webhook-container {
-  padding: 10px;
-}
-
-.webhook-container .data-lake-info h4 {
-  margin: 0 0 20px 0;
-  color: #333;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 10px;
-}
-
-.webhook-form {
-  margin-bottom: 20px;
-}
-
-.webhook-info {
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 4px;
-  padding: 15px;
-  margin-top: 20px;
-}
-
-.webhook-info p {
-  margin: 0;
-  color: #1976d2;
-}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.ts
deleted file mode 100644
index fb4b684..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.ts
+++ /dev/null
@@ -1,1763 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ToastrService } from 'ngx-toastr';
-import { AlertService } from 'src/app/services/alert.service';
-import { Data_lakeservice } from './Data_lake.service';
-import { SchedulerService } from 'src/app/services/scheduler.service';
-import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
-import { ExtensionService } from 'src/app/services/fnd/extension.service';
-import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
-import { Data_lakecardvariable } from './Data_lake_cardvariable';
-import { UserInfoService } from 'src/app/services/user-info.service';
-import { SureconnectService } from '../sureconnect/sureconnect.service';
-import { HttpClient } from '@angular/common/http';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { DataLakeSchedulerService } from './dataLakescheduler.service';
-declare var JsBarcode: any;
-@Component({
-  selector: 'app-Data_lake',
-  templateUrl: './Data_lake.component.html',
-  styleUrls: ['./Data_lake.component.scss']
-})
-export class Data_lakeComponent implements OnInit {
-  cardButton = Data_lakecardvariable.cardButton;
-  cardmodeldata = Data_lakecardvariable.cardmodeldata;
-  public dashboardArray: DashboardContentModel2[];
-  isCardview = Data_lakecardvariable.cardButton;
-  cardmodal; changeView() {
-    this.isCardview = !this.isCardview;
-  }
-  beforeText(fieldtext: string): string { // Extract the text before the first '<'
-    const index = fieldtext.indexOf('<');
-    return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
-  }
-  afterText(fieldtext: string): string { // Extract the text after the last '>'
-    const index = fieldtext.lastIndexOf('>');
-    return index !== -1 ? fieldtext.substring(index + 1) : '';
-  }
-  transform(fieldtext: string): string {
-    const match = fieldtext.match(/<([^>]*)>/);
-    return match ? match[1] : ''; // Extract the text between '<' and '>'
-  }
-  userrole;
-  rowSelected: any = {};
-  modaldelete = false;
-  modalEdit = false;
-  modalAdd = false;
-  public entryForm: FormGroup;
-  loading = false;
-  product;
-  modalOpenedforNewLine = false;
-  newLine: any;
-  additionalFieldsFromBackend: any[] = [];
-  formcode = 'Data_lake_formCode'
-  tableName = 'Data_lake'; checkFormCode; selected: any[] = [];
-
-  // New properties for URL handling
-  urlModalOpen = false;
-  selectedUrl = '';
-
-  // Cron job builder properties
-  addCronExpression = '';
-  editCronExpression = '';
-
-  // SureConnect properties
-  sureConnectList;
-  selectedSureConnect: any = null;
-
-  // Data Lake reference properties
-  dataLakeList: any[] = [];
-  selectedDataLake: any = null;
-
-  // New properties for data lake type
-  dataLakeTypes = [
-    { value: 'normal', label: 'Normal' },
-    { value: 'blending', label: 'Blending' }
-  ];
-
-  // Calculated field properties
-  calculatedFieldModalOpen = false;
-  availableKeys: string[] = [];
-  selectedDataLakeItem: any = null;
-  calculatedFieldForm: FormGroup;
-  calculatedFields: any[] = [];
-  constantCounter = 1; // Persistent counter for unique constant names
-
-  // New properties for constant value input
-  constantValueModalOpen = false;
-  currentConstantName = '';
-  currentConstantValue = '';
-  pendingEquationUpdate = '';
-  
-  // New properties for group by functionality
-  groupByFields: string[] = [];
-  selectedGroupByFields: string[] = [];
-  showGroupByModal = false;
-  
-  // Aggregation operations
-  aggregationOperations = [
-    { value: 'count', label: 'Count' },
-    { value: 'sum', label: 'Sum' },
-    { value: 'avg', label: 'Average' },
-    { value: 'min', label: 'Minimum' },
-    { value: 'max', label: 'Maximum' },
-    { value: 'median', label: 'Median' },
-    { value: 'mode', label: 'Mode' },
-    { value: 'stdev', label: 'Standard Deviation' }
-  ];
-  
-  selectedAggregationFields: { field: string; operation: string }[] = [];
-  
-  // New property to store selected blending lake IDs as string
-  selectedBlendingLakeIds: string[] = [];
-  editSelectedBlendingLakeIds: string[] = [];
-  
-  // New properties for blending functionality
-  showBlendingKeys = false;
-  blendingKeysData: any[] = [];
-  sqlQueryText = '';
-  selectedBlendingItem: any = null;
-  
-  // New properties for field mapping
-  showFieldMappingModal = false;
-  fieldMappingData: any[] = [];
-  fieldMappings: { [key: string]: string } = {};
-  selectedMappingItem: any = null;
-  
-  // New properties for scheduler functionality
-  showSchedulerModal = false;
-  schedulerJob: any = null;
-  selectedSchedulerItem: any = null;
-  
-  // New properties for webhook functionality
-  showWebhookModal = false;
-  selectedWebhookItem: any = null;
-  
-  constructor(
-    private extensionService: ExtensionService,
-    private userInfoService: UserInfoService,
-    private mainService: Data_lakeservice,
-    private schedulerService: DataLakeSchedulerService,
-    private alertService: AlertService,
-    private toastr: ToastrService,
-    private _fb: FormBuilder,
-    private sureConnectService: SureconnectService,
-    private http: HttpClient,
-    private apiRequest: ApiRequestService
-  ) { }
-  private editInterval: any;
-  // component button 
-  ngOnInit(): void {
-    if (this.cardmodeldata !== '') {
-      this.cardmodal = JSON.parse(this.cardmodeldata);
-      this.dashboardArray = this.cardmodal.dashboard.slice();
-      console.log(this.dashboardArray)
-    }
-    this.userrole = this.userInfoService.getRoles();
-    this.getData();
-    this.getSureConnectList(); // Fetch SureConnect list
-    this.getDataLakeList(); // Fetch Data Lake list for reference dropdown
-    this.entryForm = this._fb.group({
-      name: [null],
-      url: [null],
-      schedule: [null],
-      cron_job: [null],
-      json: [null],
-      url_endpoint: [null],
-      batch_volume: [null],
-      sure_connect_id: [null],
-      ref_datalake_id: [null],
-      datalake_type: ['normal'], // Default to normal
-      blending_lakeids: [[]], // Array for multiple selections
-      webhook_url: [null] // Add webhook_url field
-    });
-    
-    // form code start
-    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
-      console.log(data);
-      const jsonArray = data.map((str) => JSON.parse(str));
-      this.additionalFieldsFromBackend = jsonArray;
-      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Data_lake_formCode");
-      console.log(this.checkFormCode);
-      console.log(this.additionalFieldsFromBackend);
-      if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
-        this.additionalFieldsFromBackend.forEach(field => {
-          if (field.formCode === this.formcode) {
-            if (!this.entryForm.contains(field.extValue)) {
-              // Add the control only if it doesn't exist in the form
-              this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
-            }
-          }
-        });
-      }
-    });
-    console.log(this.entryForm.value);
-    // form code end 
-
-    // Initialize calculated field form with FormArray for multiple fields
-    this.calculatedFieldForm = this._fb.group({
-      fieldName: [''],
-      operation: [''],
-      complexEquation: [''], // Add complex equation field
-      fieldComponents: this._fb.array([this.createFieldComponent()])
-    });
-    
-    // Add real-time validation for complex equation
-    this.calculatedFieldForm.get('complexEquation')?.valueChanges.subscribe(value => {
-      if (this.calculatedFieldForm.get('operation')?.value === 'complex' && value) {
-        this.analyzeComplexEquation(value);
-      }
-    });
-  }
-  
-  // Helper method to create a field component group
-  createFieldComponent(): FormGroup {
-    return this._fb.group({
-      field: [''],
-      constant: ['']
-    });
-  }
-  
-  // Getter for field components FormArray
-  getFieldComponents(): FormArray {
-    return this.calculatedFieldForm.get('fieldComponents') as FormArray;
-  }
-  
-  // Method to add a new field component
-  addFieldComponent(): void {
-    this.getFieldComponents().push(this.createFieldComponent());
-  }
-  
-  // Method to remove a field component
-  removeFieldComponent(index: number): void {
-    if (this.getFieldComponents().length > 1) {
-      this.getFieldComponents().removeAt(index);
-    }
-  }
-  ngOnDestroy(): void {
-    if (this.editInterval) {
-      clearInterval(this.editInterval);
-    }
-  }
-
-
-
-  error;
-  getData() {
-    this.mainService.getAll().subscribe((data) => {
-      console.log(data);
-      this.product = data;
-      this.product = [...this.product].reverse(); if (this.product.length == 0) {
-        this.error = "No Data Available"
-      }
-    }, (error) => {
-      console.log(error);
-      if (error) {
-        this.error = "Server Error";
-      }
-    });
-  }
-
-  // Fetch SureConnect list
-  getSureConnectList() {
-    this.sureConnectService.getAll().subscribe((data: any[]) => {
-      this.sureConnectList = data;
-      console.log('SureConnect List:', this.sureConnectList);
-    }, (error) => {
-      console.log('Error fetching SureConnect list:', error);
-    });
-  }
-
-  // Fetch Data Lake list for reference dropdown
-  getDataLakeList() {
-    this.mainService.getAll().subscribe((data: any[]) => {
-      this.dataLakeList = data;
-      console.log('Data Lake List:', this.dataLakeList);
-    }, (error) => {
-      console.log('Error fetching Data Lake list:', error);
-    });
-  }
-
-  // Get operation symbol for display
-  getOperationSymbol(operation: string): string {
-    switch(operation) {
-      case 'add': return '+';
-      case 'subtract': return '-';
-      case 'multiply': return '*';
-      case 'divide': return '/';
-      case 'percentage': return '%';
-      case 'concat': return '||'; // Concatenation symbol
-      default: return '';
-    }
-  }
-
-  // Fetch available keys from API
-  fetchAvailableKeys(dataLakeItem: any, isGroupBy: boolean = false) {
-    if (!dataLakeItem.url || !dataLakeItem.sure_connect_id) {
-      this.toastr.error('URL and SureConnect ID are required to fetch keys');
-      return;
-    }
-    
-    this.selectedDataLakeItem = dataLakeItem;
-    
-    // Call the service method to get all keys
-    this.mainService.fetchAvailableKeys(dataLakeItem.url, dataLakeItem.sure_connect_id).subscribe(
-      (keys: string[]) => {
-        // Combine API keys with calculated field names
-        const calculatedFieldNames = this.getCalculatedFieldNames();
-        this.availableKeys = [...keys, ...calculatedFieldNames];
-        
-        // Reset the calculated field form to ensure it starts fresh
-        this.resetCalculatedFieldForm();
-        
-        // Preload existing calculated fields if they exist
-        if (dataLakeItem.calculated_field_json) {
-          try {
-            const existingFields = JSON.parse(dataLakeItem.calculated_field_json);
-            if (Array.isArray(existingFields)) {
-              this.calculatedFields = [...existingFields];
-              this.toastr.info(`Loaded ${existingFields.length} existing calculated fields`);
-            }
-          } catch (e) {
-            console.error('Error parsing calculated_field_json:', e);
-            this.calculatedFields = [];
-          }
-        } else {
-          this.calculatedFields = [];
-        }
-        
-        // Open the appropriate modal based on the context
-        if (isGroupBy) {
-          // For group by, we need to extract existing group by configurations
-          if (dataLakeItem.calculated_field_json) {
-            try {
-              const existingFields = JSON.parse(dataLakeItem.calculated_field_json);
-              if (Array.isArray(existingFields)) {
-                // Find group by configurations
-                const groupByConfigs = existingFields.filter(field => field.type === 'groupby');
-                if (groupByConfigs.length > 0) {
-                  // For simplicity, we'll load the first group by configuration
-                  const firstConfig = groupByConfigs[0];
-                  this.selectedGroupByFields = [...firstConfig.groupFields];
-                  this.selectedAggregationFields = [...firstConfig.aggregations];
-                  this.toastr.info(`Loaded existing group by configuration`);
-                }
-              }
-            } catch (e) {
-              console.error('Error parsing calculated_field_json for group by:', e);
-            }
-          }
-          this.showGroupByModal = true;
-        } else {
-          this.calculatedFieldModalOpen = true;
-        }
-        
-        console.log('Available keys:', this.availableKeys);
-      },
-      (error) => {
-        console.error('Error fetching keys:', error);
-        this.toastr.error('Failed to fetch available keys from API');
-      }
-    );
-  }
-  
-  // Reset the calculated field form to initial state
-  resetCalculatedFieldForm(): void {
-    this.calculatedFieldForm.reset({
-      fieldName: '',
-      operation: '',
-      complexEquation: '',
-      fieldComponents: [{}] // Start with one empty field component
-    });
-    
-    // Ensure we have exactly one empty field component
-    const fieldComponents = this.getFieldComponents();
-    fieldComponents.clear();
-    fieldComponents.push(this.createFieldComponent());
-    
-    // Reset the constant counter for new calculations
-    this.constantCounter = 1;
-  }
-
-  // Add calculated field
-  addCalculatedField() {
-    const formData = this.calculatedFieldForm.value;
-
-    if (!formData.fieldName || (!formData.operation && formData.operation !== 'complex')) {
-      this.toastr.error('Field name and operation are required');
-      return;
-    }
-
-    // Handle complex equation separately
-    if (formData.operation === 'complex') {
-      if (!formData.complexEquation || formData.complexEquation.trim() === '') {
-        this.toastr.error('Complex equation is required');
-        return;
-      }
-
-      // Validate complex equation format
-      if (!this.validateComplexEquation(formData.complexEquation)) {
-        return;
-      }
-
-      // Extract constants used in the equation
-      const fieldRefs = this.extractFieldReferences(formData.complexEquation);
-      const equationConstants: any[] = [];
-      
-      for (const fieldRef of fieldRefs) {
-        // Check if it's a constant (constant_X format)
-        if (fieldRef.startsWith('constant_') && /^\d+$/.test(fieldRef.substring(9))) {
-          // Find the constant value from existing calculated fields
-          let constantValue = '';
-          for (const field of this.calculatedFields) {
-            if (field.operation === 'constant' && field.fieldName === fieldRef) {
-              if (field.fieldComponents && field.fieldComponents.length > 0) {
-                constantValue = field.fieldComponents[0].constant;
-                break;
-              }
-            }
-          }
-          
-          if (constantValue) {
-            equationConstants.push({
-              field: fieldRef,
-              constant: constantValue,
-              isConstant: true
-            });
-          }
-        }
-      }
-      // Create calculated field object for complex equation
-      const calculatedField = {
-        id: Date.now(),
-        fieldName: formData.fieldName,
-        operation: 'complex',
-        complexEquation: formData.complexEquation,
-        fieldComponents: equationConstants // Include constants used in the equation
-      };
-
-      this.calculatedFields.push(calculatedField);
-      this.toastr.success('Complex calculated field added successfully');
-      
-      // Refresh available keys to include the new calculated field
-      this.refreshAvailableKeys();
-
-      // Reset form but keep one empty field component
-      this.calculatedFieldForm.reset({
-        fieldName: '',
-        operation: '',
-        complexEquation: '',
-        fieldComponents: [{}]
-      });
-      return;
-    }
-
-    // Filter out empty field components
-    const validFieldComponents = formData.fieldComponents.filter(component => 
-      component.field || component.constant
-    );
-
-    if (validFieldComponents.length === 0) {
-      this.toastr.error('At least one field or constant is required');
-      return;
-    }
-
-    // Validate constant values - must be numeric for all operations except concatenation
-    if (formData.operation !== 'concat') {
-      for (const component of validFieldComponents) {
-        if (component.constant && component.constant.trim() !== '') {
-          const numericValue = Number(component.constant);
-          if (isNaN(numericValue)) {
-            this.toastr.error('Constant values must be numeric for this operation');
-            return;
-          }
-        }
-      }
-    }
-    
-    // Validate that constant values are unique within this calculated field
-    const constantValues = validFieldComponents
-      .map(component => component.constant)
-      .filter(constant => constant && constant.trim() !== '');
-    
-    if (constantValues.length !== new Set(constantValues).size) {
-      this.toastr.error('Constant values must be unique within a calculated field');
-      return;
-    }
-    
-    // Generate unique names for constants using the persistent counter
-    const processedFieldComponents = validFieldComponents.map(component => {
-      if (component.constant && component.constant.trim() !== '') {
-        // Generate a unique name for the constant using the persistent counter
-        const constantName = `constant_${this.constantCounter++}`;
-        return {
-          field: constantName,
-          constant: component.constant,
-          isConstant: true // Flag to indicate this is a constant with a generated name
-        };
-      }
-      return {
-        field: component.field,
-        constant: component.constant,
-        isConstant: false // Flag to indicate this is a regular field
-      };
-    });
-
-    // Create calculated field object with multiple field components
-    const calculatedField = {
-      id: Date.now(), // Simple ID generation
-      fieldName: formData.fieldName,
-      operation: formData.operation,
-      fieldComponents: processedFieldComponents
-    };
-
-    this.calculatedFields.push(calculatedField);
-    this.toastr.success('Calculated field added successfully');
-    
-    // Refresh available keys to include the new calculated field
-    this.refreshAvailableKeys();
-
-    // Reset form but keep one empty field component
-    this.calculatedFieldForm.reset({
-      fieldName: '',
-      operation: '',
-      complexEquation: '',
-      fieldComponents: [{}]
-    });
-  }
-
-  // Validate complex equation format
-  validateComplexEquation(equation: string): boolean {
-    // Updated validation to include additional operators
-    const validPattern = /^[a-zA-Z0-9_+\-*/().\[\]{}^%>=<!&|\s]+$/;
-    if (!validPattern.test(equation)) {
-      this.toastr.error('Invalid complex equation format. Only alphanumeric characters, underscores, and operators (+, -, *, /, (, ), [, ], {, }, ^, %, =, >, <, !, &, |) are allowed.');
-      return false;
-    }
-
-    // Check for empty equation
-    if (!equation || equation.trim() === '') {
-      this.toastr.error('Complex equation cannot be empty');
-      return false;
-    }
-
-    // Extract all field/constant references from the equation
-    const fieldRefs = this.extractFieldReferences(equation);
-    
-    // Validate each reference
-    const invalidReferences: string[] = [];
-    for (const fieldRef of fieldRefs) {
-      // Skip if it's a direct numeric value
-      if (!isNaN(Number(fieldRef))) {
-        continue;
-      }
-      
-      // Check if it's a predefined constant (constant_X format)
-      if (fieldRef.startsWith('constant_') && /^\d+$/.test(fieldRef.substring(9))) {
-        // Check if this constant has been defined in previous calculated fields
-        let constantFound = false;
-        for (const field of this.calculatedFields) {
-          if (field.operation === 'constant' && field.fieldName === fieldRef) {
-            constantFound = true;
-            break;
-          }
-        }
-        
-        if (!constantFound) {
-          invalidReferences.push(`Referenced constant '${fieldRef}' has not been defined`);
-        }
-        continue;
-      }
-      
-      // Check if field exists in available keys
-      if (!this.availableKeys.includes(fieldRef)) {
-        invalidReferences.push(`Field '${fieldRef}' not found in available keys`);
-      }
-    }
-    
-    // Show all validation errors
-    if (invalidReferences.length > 0) {
-      invalidReferences.forEach(error => this.toastr.error(error));
-      return false;
-    }
-    
-    // Try to parse the equation to check for basic syntax errors
-    try {
-      this.parseEquation(equation);
-    } catch (error) {
-      this.toastr.error(`Invalid equation syntax: ${error.message}`);
-      return false;
-    }
-    
-    // Additional validation for complex expressions
-    this.analyzeComplexEquation(equation);
-    
-    return true;
-  }
-  
-  // Analyze complex equation and provide warnings
-  analyzeComplexEquation(equation: string): void {
-    // Check for potentially problematic patterns
-    if (/[+\-*/]{3,}/.test(equation)) {
-      this.toastr.warning('Equation contains multiple consecutive operators which may cause unexpected results');
-    }
-    
-    // Check for unbalanced expressions
-    const operators = equation.match(/[+\-*/]/g) || [];
-    const operands = equation.match(/[a-zA-Z0-9_]+/g) || [];
-    
-    if (operators.length > 0 && operands.length === 0) {
-      this.toastr.warning('Equation contains operators but no operands (fields or constants)');
-    }
-    
-    // Check for division by zero patterns
-    if (/\/\s*0(?!\d)/.test(equation)) {
-      this.toastr.warning('Equation may contain division by zero');
-    }
-    
-    // Check for excessive nesting
-    let parenDepth = 0;
-    let maxParenDepth = 0;
-    for (const char of equation) {
-      if (char === '(') {
-        parenDepth++;
-        maxParenDepth = Math.max(maxParenDepth, parenDepth);
-      } else if (char === ')') {
-        parenDepth--;
-      }
-    }
-    
-    if (maxParenDepth > 10) {
-      this.toastr.warning('Equation has deep nesting which may affect performance');
-    }
-    
-    // Check for repeated field usage
-    const fieldRefs = this.extractFieldReferences(equation);
-    const fieldCounts: {[key: string]: number} = {};
-    fieldRefs.forEach(field => {
-      if (!isNaN(Number(field))) return; // Skip numbers
-      fieldCounts[field] = (fieldCounts[field] || 0) + 1;
-    });
-    
-    Object.keys(fieldCounts).forEach(field => {
-      if (fieldCounts[field] > 3) {
-        this.toastr.warning(`Field '${field}' is used ${fieldCounts[field]} times in the equation`);
-      }
-    });
-  }
-  
-  // Extract field references from equation
-  extractFieldReferences(equation: string): string[] {
-    // Remove all operators and parentheses to isolate field names
-    const cleanEquation = equation.replace(/[+\-*/()[\]{}^%>=<!&|\s]+/g, ' ');
-    // Split by whitespace and filter out empty strings and numbers
-    return cleanEquation.split(/\s+/).filter(token => token.length > 0);
-  }
-  
-  // Simple equation parser to check syntax (basic implementation)
-  parseEquation(equation: string): void {
-    // Remove spaces
-    const cleanEquation = equation.replace(/\s/g, '');
-    
-    // Check for balanced parentheses
-    let parenCount = 0;
-    for (const char of cleanEquation) {
-      if (char === '(') parenCount++;
-      if (char === ')') parenCount--;
-      if (parenCount < 0) throw new Error('Mismatched parentheses');
-    }
-    if (parenCount !== 0) throw new Error('Mismatched parentheses');
-    
-    // Check for balanced square brackets
-    let bracketCount = 0;
-    for (const char of cleanEquation) {
-      if (char === '[') bracketCount++;
-      if (char === ']') bracketCount--;
-      if (bracketCount < 0) throw new Error('Mismatched square brackets');
-    }
-    if (bracketCount !== 0) throw new Error('Mismatched square brackets');
-    
-    // Check for balanced curly braces
-    let braceCount = 0;
-    for (const char of cleanEquation) {
-      if (char === '{') braceCount++;
-      if (char === '}') braceCount--;
-      if (braceCount < 0) throw new Error('Mismatched curly braces');
-    }
-    if (braceCount !== 0) throw new Error('Mismatched curly braces');
-    
-    // Check for invalid sequences
-    if (/[+\-*/]{2,}/.test(cleanEquation)) {
-      throw new Error('Invalid operator sequence');
-    }
-    
-    // Check that equation doesn't start or end with an operator (except minus for negative numbers)
-    if (/^[+*/^%=<>|&]/.test(cleanEquation) || /[+\-*/^%=<>|&]$/.test(cleanEquation)) {
-      throw new Error('Equation cannot start or end with an operator');
-    }
-    
-    // Check for empty parentheses
-    if (/\(\)/.test(cleanEquation)) {
-      throw new Error('Empty parentheses are not allowed');
-    }
-  }
-
-  // Delete calculated field
-  deleteCalculatedField(id: number) {
-    this.calculatedFields = this.calculatedFields.filter(field => field.id !== id);
-    this.toastr.success('Calculated field deleted');
-    
-    // Refresh available keys to reflect the deleted field
-    this.refreshAvailableKeys();
-  }
-
-  onEdit(row) {
-    this.rowSelected = row;
-    this.editCronExpression = row.cron_job || '';
-    // Set the selected SureConnect for edit form
-    this.selectedSureConnect = row.sure_connect_id || null;
-    
-    // Initialize blending lake IDs for edit form from string
-    if (row.blending_lakeids && typeof row.blending_lakeids === 'string') {
-      this.editSelectedBlendingLakeIds = row.blending_lakeids.split(',').filter(id => id.trim() !== '');
-    } else if (row.blending_lakeids && Array.isArray(row.blending_lakeids)) {
-      this.editSelectedBlendingLakeIds = row.blending_lakeids.map(id => id.toString());
-    } else {
-      this.editSelectedBlendingLakeIds = [];
-    }
-    
-    // Use setTimeout to ensure the component has time to initialize
-    setTimeout(() => {
-      this.modalEdit = true;
-    }, 0);
-  }
-  onDelete(row) {
-    this.rowSelected = row;
-    this.modaldelete = true;
-  }
-  delete(id) {
-    this.modaldelete = false;
-    console.log("in delete  " + id);
-    this.mainService.delete(id).subscribe(
-      (data) => {
-        console.log(data);
-        this.ngOnInit();
-        if (data) { this.toastr.success('Deleted successfully'); }
-      });
-  }
-  onUpdate(id) {
-    this.modalEdit = false;
-
-    //console.log("in update");
-    console.log("id  " + id);
-    console.log(this.rowSelected);
-    //console.log("out update");
-    this.mainService.update(id, this.rowSelected).subscribe(
-      (data) => {
-        console.log(data);
-        if (data || data.status >= 200 && data.status <= 299) {
-          this.toastr.success("Update Successfully");
-        }
-        setTimeout(() => {
-          this.ngOnInit();
-        }, 500);
-
-
-
-      }, (error) => {
-        console.log(error);
-        if (error.status >= 200 && error.status <= 299) {
-          // this.toastr.success("update Succesfully");
-        }
-        if (error.status >= 400 && error.status <= 499) {
-          this.toastr.error("Not Updated");
-        }
-        if (error.status >= 500 && error.status <= 599) {
-          this.toastr.error("Not Updated");
-        }
-      });
-    setTimeout(() => {
-      this.ngOnInit();
-    }, 500);
-  }
-
-  // New method for updating JSON
-  updateJson(id: number) {
-    this.mainService.updateJson(id).subscribe(
-      (data) => {
-        console.log(data);
-        if (data || data.status >= 200 && data.status <= 299) {
-          this.toastr.success("JSON Updated Successfully");
-        }
-        setTimeout(() => {
-          this.ngOnInit();
-        }, 500);
-      }, (error) => {
-        console.log(error);
-        if (error.status >= 200 && error.status <= 299) {
-          this.toastr.success("JSON Updated Successfully");
-        }
-        if (error.status >= 400 && error.status <= 499) {
-          this.toastr.error("JSON Not Updated");
-        }
-        if (error.status >= 500 && error.status <= 599) {
-          this.toastr.error("JSON Not Updated");
-        }
-      });
-  }
-
-  // New method to show full URL in a modal
-  showFullUrl(url: string) {
-    this.selectedUrl = url;
-    this.urlModalOpen = true;
-  }
-
-  // New method to copy text to clipboard
-  copyToClipboard(text: string) {
-    const el = document.createElement('textarea');
-    el.value = text;
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand('copy');
-    document.body.removeChild(el);
-    this.toastr.success('Copied to clipboard');
-  }
-
-  // Handle cron expression change for add form
-  onAddCronExpressionChange(expression: string) {
-    this.addCronExpression = expression;
-    // Update the form control
-    if (this.entryForm && this.entryForm.get('cron_job')) {
-      this.entryForm.get('cron_job')?.setValue(expression);
-    }
-  }
-
-  // Handle cron expression change for edit form
-  onEditCronExpressionChange(expression: string) {
-    this.editCronExpression = expression;
-    // Update the rowSelected
-    if (this.rowSelected) {
-      this.rowSelected.cron_job = expression;
-    }
-  }
-
-
-  onCreate() {
-    this.modalAdd = false;
-
-
-    this.mainService.create(this.entryForm.value).subscribe(
-      (data) => {
-        console.log(data);
-        if (data || data.status >= 200 && data.status <= 299) {
-          this.toastr.success("Added Successfully");
-        }
-        setTimeout(() => {
-          this.ngOnInit();
-        }, 500);
-
-
-
-      }, (error) => {
-        console.log(error);
-        if (error.status >= 200 && error.status <= 299) {
-          // this.toastr.success("Added Succesfully");
-        }
-        if (error.status >= 400 && error.status <= 499) {
-          this.toastr.error("Not Added");
-        }
-        if (error.status >= 500 && error.status <= 599) {
-          this.toastr.error("Not Added");
-        }
-      });
-    setTimeout(() => {
-      this.ngOnInit();
-    }, 500);
-  }
-  
-  goToAdd(row) {
-    this.modalAdd = false;
-    this.addCronExpression = '';
-    this.selectedSureConnect = null; // Reset SureConnect selection
-    this.submitted = false;
-    // Reset blending lake IDs for add form
-    this.selectedBlendingLakeIds = [];
-    
-    // Reset the form control for cron_job and sure_connect_id
-    if (this.entryForm) {
-      if (this.entryForm.get('cron_job')) {
-        this.entryForm.get('cron_job')?.setValue('');
-      }
-      // Reset blending_lakeids to empty string
-      this.entryForm.get('blending_lakeids')?.setValue('');
-    }
-    this.modalAdd = true;
-  }
-  submitted = false;
-  onSubmit() {
-    console.log(this.entryForm.value);
-    this.submitted = true;
-    if (this.entryForm.invalid) {
-      return;
-    } this.onCreate();
-
-  }
-
-
-  isValidurl(url: string): boolean {
-    return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(url);
-  }
-  goTourlUrl(val) { window.open(val) }
-
-
-  rsModaljson = false;
-  goToReplaceStringjson(row) {
-    this.rowSelected = row; this.rsModaljson = true;
-  }
-
-  // Generate JSON from calculated fields and update the record
-  updateCalculatedFields(closeModal: boolean = true) {
-    if (!this.selectedDataLakeItem || this.calculatedFields.length === 0) {
-      this.toastr.error('No calculated fields to update');
-      return;
-    }
-    
-    // Convert calculated fields to JSON string
-    const calculatedFieldJson = JSON.stringify(this.calculatedFields);
-    
-    // Call the service method to update the record
-    this.mainService.updateCalculatedFields(
-      this.selectedDataLakeItem.id, 
-      calculatedFieldJson, 
-      true // iscalculatedfield = true
-    ).subscribe(
-      (response) => {
-        console.log('Calculated fields updated successfully:', response);
-        this.toastr.success('Calculated fields updated successfully');
-        
-        // Update the local data
-        const index = this.product.findIndex(item => item.id === this.selectedDataLakeItem.id);
-        if (index !== -1) {
-          this.product[index].calculated_field_json = calculatedFieldJson;
-          this.product[index].iscalculatedfield = true;
-        }
-        
-        // Refresh available keys to ensure they include the latest calculated fields
-        this.refreshAvailableKeys();
-        
-        // Close the modal only when called directly from the UI and closeModal is true
-        if (closeModal && this.calculatedFieldModalOpen) {
-          this.calculatedFieldModalOpen = false;
-        }
-      },
-      (error) => {
-        console.error('Error updating calculated fields:', error);
-        this.toastr.error('Failed to update calculated fields');
-      }
-    );
-  }
-
-  // Add operator to complex equation
-  addOperatorToEquation(operator: string) {
-    const equationControl = this.calculatedFieldForm.get('complexEquation');
-    if (equationControl) {
-      const currentValue = equationControl.value || '';
-      equationControl.setValue(currentValue + operator);
-    }
-  }
-  
-  // Add field or constant to complex equation
-  addFieldToEquation(field: string) {
-    const equationControl = this.calculatedFieldForm.get('complexEquation');
-    if (equationControl) {
-      const currentValue = equationControl.value || '';
-      // Add space before and after if needed
-      const newValue = currentValue ? `${currentValue} ${field} ` : `${field} `;
-      equationControl.setValue(newValue);
-      
-      // Validate after adding field
-      if (this.calculatedFieldForm.get('operation')?.value === 'complex') {
-        this.analyzeComplexEquation(equationControl.value);
-      }
-    }
-  }
-  
-  // Get all defined constants from existing calculated fields
-  getDefinedConstants(): string[] {
-    const constants: string[] = [];
-    this.calculatedFields.forEach(field => {
-      // Check for actual constant operations
-      if (field.operation === 'constant' && field.fieldName) {
-        constants.push(field.fieldName);
-      }
-    });
-    return constants;
-  }
-  
-  // Add a new constant to the equation
-  addNewConstantToEquation() {
-    // Generate a new constant name
-    this.currentConstantName = `constant_${this.constantCounter}`;
-    
-    // Open the constant value modal
-    this.currentConstantValue = '';
-    this.constantValueModalOpen = true;
-  }
-  
-  // Save constant value and update equation
-  saveConstantValue() {
-    if (this.currentConstantValue === '') {
-      this.toastr.error('Constant value is required');
-      return;
-    }
-    
-    // Validate constant value based on operation type
-    const operation = this.calculatedFieldForm.get('operation')?.value;
-    if (operation !== 'concat' && operation !== 'complex') {
-      const numericValue = Number(this.currentConstantValue);
-      if (isNaN(numericValue)) {
-        this.toastr.error('Constant values must be numeric for this operation');
-        return;
-      }
-    }
-    
-    // For non-complex operations, add to field components directly
-    if (operation && operation !== 'complex') {
-      const fieldComponents = this.getFieldComponents();
-      fieldComponents.push(this._fb.group({
-        field: [this.currentConstantName],
-        constant: [this.currentConstantValue]
-      }));
-    } else if (operation === 'complex') {
-      // For complex equations, add to the equation and create a constant field
-      const equationControl = this.calculatedFieldForm.get('complexEquation');
-      if (equationControl) {
-        const currentValue = equationControl.value || '';
-        const newValue = currentValue ? `${currentValue} ${this.currentConstantName} ` : `${this.currentConstantName} `;
-        equationControl.setValue(newValue);
-      }
-      
-      // Also create a constant field that can be referenced
-      const constantField = {
-        id: Date.now(),
-        fieldName: this.currentConstantName,
-        operation: 'constant',
-        fieldComponents: [{
-          field: this.currentConstantName,
-          constant: this.currentConstantValue,
-          isConstant: true
-        }]
-      };
-      
-      this.calculatedFields.push(constantField);
-    } else {
-      // If no operation is selected, just create the constant field
-      const constantField = {
-        id: Date.now(),
-        fieldName: this.currentConstantName,
-        operation: 'constant',
-        fieldComponents: [{
-          field: this.currentConstantName,
-          constant: this.currentConstantValue,
-          isConstant: true
-        }]
-      };
-      
-      this.calculatedFields.push(constantField);
-    }
-    
-    // Increment the counter for next constant
-    this.constantCounter++;
-    
-    // Close modal and show success message
-    this.constantValueModalOpen = false;
-    this.toastr.success(`Constant ${this.currentConstantName} added with value ${this.currentConstantValue}`);
-  }
-  
-  // Cancel constant value input
-  cancelConstantValue() {
-    this.constantValueModalOpen = false;
-    this.currentConstantName = '';
-    this.currentConstantValue = '';
-  }
-  
-  // Test method to verify constant validation
-  testConstantFunctionality() {
-    // Clear existing calculated fields for testing
-    this.calculatedFields = [];
-    
-    // Add a test constant
-    const testConstant = {
-      id: Date.now(),
-      fieldName: 'constant_1',
-      operation: 'constant',
-      fieldComponents: [{
-        field: 'constant_1',
-        constant: '15',
-        isConstant: true
-      }]
-    };
-    
-    this.calculatedFields.push(testConstant);
-    
-    // Test validation
-    const testEquation = 'pincode + mobno * constant_1';
-    const isValid = this.validateComplexEquation(testEquation);
-    
-    console.log('Test equation:', testEquation);
-    console.log('Validation result:', isValid);
-    console.log('Defined constants:', this.getDefinedConstants());
-  }
-  
-  // Method to open group by modal
-  openGroupByModal(dataLakeItem: any) {
-    this.selectedDataLakeItem = dataLakeItem;
-    
-    // Fetch available keys if not already fetched or if called directly
-    if (this.availableKeys.length === 0) {
-      this.fetchAvailableKeys(dataLakeItem, true); // Pass true to indicate group by context
-    } else {
-      // Keys are already available, just preload existing data and open modal
-      
-      // Initialize selected group by fields as empty array
-      this.selectedGroupByFields = [];
-      this.selectedAggregationFields = [];
-      
-      // Preload existing group by configurations if they exist in calculated_field_json
-      // (Group by configurations are stored in the same calculated_field_json field)
-      if (dataLakeItem.calculated_field_json) {
-        try {
-          const existingFields = JSON.parse(dataLakeItem.calculated_field_json);
-          if (Array.isArray(existingFields)) {
-            this.calculatedFields = [...existingFields];
-            
-            // Find group by configurations
-            const groupByConfigs = existingFields.filter(field => field.type === 'groupby');
-            if (groupByConfigs.length > 0) {
-              // For simplicity, we'll load the first group by configuration
-              const firstConfig = groupByConfigs[0];
-              this.selectedGroupByFields = [...firstConfig.groupFields];
-              this.selectedAggregationFields = [...firstConfig.aggregations];
-              this.toastr.info(`Loaded existing group by configuration`);
-            }
-          }
-        } catch (e) {
-          console.error('Error parsing calculated_field_json:', e);
-          this.calculatedFields = [];
-        }
-      } else {
-        this.calculatedFields = [];
-      }
-      
-      this.showGroupByModal = true;
-    }
-  }
-  
-  // Method to add a field to group by selection
-  addGroupByField(field: string) {
-    if (!this.selectedGroupByFields.includes(field)) {
-      this.selectedGroupByFields.push(field);
-    }
-  }
-  
-  // Method to remove a field from group by selection
-  removeGroupByField(field: string) {
-    const index = this.selectedGroupByFields.indexOf(field);
-    if (index > -1) {
-      this.selectedGroupByFields.splice(index, 1);
-    }
-  }
-  
-  // Method to add an aggregation field
-  addAggregationField() {
-    this.selectedAggregationFields.push({ field: '', operation: 'count' });
-  }
-  
-  // Method to remove an aggregation field
-  removeAggregationField(index: number) {
-    this.selectedAggregationFields.splice(index, 1);
-  }
-  
-  // Method to update aggregation field
-  updateAggregationField(index: number, field: string, operation: string) {
-    this.selectedAggregationFields[index] = { field, operation };
-  }
-  
-  // Method to apply group by
-  applyGroupBy() {
-    if (this.selectedGroupByFields.length === 0) {
-      this.toastr.error('Please select at least one field for grouping');
-      return;
-    }
-    
-    // Validate aggregation fields
-    for (const agg of this.selectedAggregationFields) {
-      if (!agg.field) {
-        this.toastr.error('Please select a field for all aggregation operations');
-        return;
-      }
-    }
-    
-    // Create group by configuration
-    const groupByConfig = {
-      id: Date.now(),
-      type: 'groupby',
-      groupFields: [...this.selectedGroupByFields],
-      aggregations: [...this.selectedAggregationFields],
-      timestamp: new Date().toISOString()
-    };
-    
-    // Add to calculated fields
-    this.calculatedFields.push(groupByConfig);
-    this.toastr.success('Group by configuration added successfully');
-    
-    // Update the calculated fields in the backend
-    this.updateCalculatedFieldsAfterGroupBy();
-    
-    this.showGroupByModal = false;
-  }
-  
-  // New method to update calculated fields after adding group by configuration
-  updateCalculatedFieldsAfterGroupBy() {
-    // Simply call the main update method without closing the modal
-    this.updateCalculatedFields(false);
-  }
-  
-  // Method to remove group by configuration
-  removeGroupByConfig(id: number) {
-    this.calculatedFields = this.calculatedFields.filter(field => field.id !== id || field.type !== 'groupby');
-    this.toastr.success('Group by configuration removed');
-    
-    // Refresh available keys to reflect the removed configuration
-    this.refreshAvailableKeys();
-  }
-  
-  // Method to check if a field is selected for group by
-  isGroupByFieldSelected(field: string): boolean {
-    return this.selectedGroupByFields.includes(field);
-  }
-
-  // Helper method to get calculated field names
-  getCalculatedFieldNames(): string[] {
-    return this.calculatedFields
-      .filter(field => field.type !== 'groupby') // Exclude group by configurations
-      .map(field => field.fieldName);
-  }
-
-  // Method to refresh available keys including calculated field names
-  refreshAvailableKeys() {
-    if (this.selectedDataLakeItem) {
-      // Fetch fresh keys from API and combine with calculated field names
-      this.mainService.fetchAvailableKeys(this.selectedDataLakeItem.url, this.selectedDataLakeItem.sure_connect_id).subscribe(
-        (keys: string[]) => {
-          const calculatedFieldNames = this.getCalculatedFieldNames();
-          this.availableKeys = [...keys, ...calculatedFieldNames];
-        },
-        (error) => {
-          console.error('Error refreshing keys:', error);
-          // Fallback to just calculated field names if API fails
-          this.availableKeys = this.getCalculatedFieldNames();
-        }
-      );
-    } else {
-      // Fallback to just calculated field names
-      this.availableKeys = this.getCalculatedFieldNames();
-    }
-  }
-
-  // Helper method to get the count of calculated fields
-  getCalculatedFieldsCount(calculatedFieldJson: string): number {
-    try {
-      const fields = JSON.parse(calculatedFieldJson);
-      return Array.isArray(fields) ? fields.length : 0;
-    } catch (e) {
-      return 0;
-    }
-  }
-
-  // Helper method to get the count of group by configurations
-  getGroupByFieldsCount(groupByJson: string): number {
-    try {
-      const configs = JSON.parse(groupByJson);
-      return Array.isArray(configs) ? configs.length : 0;
-    } catch (e) {
-      return 0;
-    }
-  }
-
-  // Helper method to check if the selected data is JSON
-  isJsonData(data: any): boolean {
-    if (!data) return false;
-    
-    try {
-      const parsed = typeof data === 'string' ? JSON.parse(data) : data;
-      return Array.isArray(parsed) && parsed.length > 0;
-    } catch (e) {
-      return false;
-    }
-  }
-
-  // Helper method to get JSON headers for grid columns
-  getJsonHeaders(data: any): string[] {
-    if (!this.isJsonData(data)) return [];
-    
-    try {
-      const parsed = typeof data === 'string' ? JSON.parse(data) : data;
-      if (Array.isArray(parsed) && parsed.length > 0) {
-        // Get all unique keys from the first few items
-        const headers = new Set<string>();
-        const sampleItems = parsed.slice(0, 3); // Check first 3 items for headers
-        
-        sampleItems.forEach(item => {
-          if (typeof item === 'object' && item !== null) {
-            Object.keys(item).forEach(key => headers.add(key));
-          }
-        });
-        
-        return Array.from(headers);
-      }
-      return [];
-    } catch (e) {
-      return [];
-    }
-  }
-
-  // Helper method to get JSON data for grid rows
-  getJsonData(data: any): any[] {
-    if (!this.isJsonData(data)) return [];
-    
-    try {
-      return typeof data === 'string' ? JSON.parse(data) : data;
-    } catch (e) {
-      return [];
-    }
-  }
-  
-  // Method to check if blending action should be available
-  canShowBlendingAction(item: any): boolean {
-    return item.datalake_type === 'blending' && 
-           item.blending_lakeids && 
-           item.blending_lakeids.trim() !== '';
-  }
-  
-  // Method to insert header into SQL query at cursor position
-  insertHeaderIntoQuery(header: string) {
-    const textarea = document.querySelector('.sql-textarea') as HTMLTextAreaElement;
-    if (textarea) {
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const text = textarea.value;
-      const before = text.substring(0, start);
-      const after = text.substring(end, text.length);
-      
-      // Insert the header at cursor position
-      this.sqlQueryText = before + header + after;
-      
-      // Set cursor position after the inserted text
-      setTimeout(() => {
-        textarea.selectionStart = start + header.length;
-        textarea.selectionEnd = start + header.length;
-        textarea.focus();
-      }, 0);
-    } else {
-      // Fallback: append to end of text
-      this.sqlQueryText += header;
-    }
-  }
-  
-  // Method to fetch blending keys
-  fetchBlendingKeys(item: any) {
-    this.selectedBlendingItem = item;
-    this.blendingKeysData = [];
-    this.showBlendingKeys = true;
-    
-    // Initialize SQL query text from existing data
-    if (item.sqlquery_json) {
-      this.sqlQueryText = item.sqlquery_json;
-    } else {
-      this.sqlQueryText = '';
-    }
-    
-    // Parse blending_lakeids string to array
-    const lakeIds = item.blending_lakeids.split(',').map(id => id.trim()).filter(id => id !== '');
-    
-    // Fetch keys for each lake ID
-    lakeIds.forEach(lakeId => {
-      this.mainService.fetchBlendingKeys(Number(lakeId)).subscribe(
-        (data: any) => {
-          this.blendingKeysData.push({
-            lakeId: lakeId,
-            tableName: data.tableName,
-            headers: data.headers
-          });
-        },
-        (error) => {
-          console.error('Error fetching keys for lake ID:', lakeId, error);
-          this.toastr.error(`Failed to fetch keys for Data Lake ${lakeId}`);
-        }
-      );
-    });
-  }
-  
-  // Method to update SQL query
-  updateSqlQuery() {
-    if (!this.selectedBlendingItem) {
-      this.toastr.error('No blending item selected');
-      return;
-    }
-    
-    // Update the SQL query JSON field
-    this.selectedBlendingItem.sqlquery_json = this.sqlQueryText;
-    
-    // Call update service
-    this.mainService.update(this.selectedBlendingItem.id, this.selectedBlendingItem).subscribe(
-      (response) => {
-        this.toastr.success('SQL query updated successfully');
-        // Update the local data
-        const index = this.product.findIndex(p => p.id === this.selectedBlendingItem.id);
-        if (index !== -1) {
-          this.product[index] = {...this.selectedBlendingItem};
-        }
-      },
-      (error) => {
-        console.error('Error updating SQL query:', error);
-        this.toastr.error('Failed to update SQL query');
-      }
-    );
-  }
-  
-  // Method to close blending keys panel
-  closeBlendingKeys() {
-    this.showBlendingKeys = false;
-    this.blendingKeysData = [];
-    this.sqlQueryText = '';
-    this.selectedBlendingItem = null;
-  }
-  
-  // Method to handle checkbox change for blending lakes (ADD form)
-  onBlendingLakeCheckboxChange(event: any, lakeId: number) {
-    const lakeIdStr = lakeId.toString();
-    if (event.target.checked) {
-      // Add to selected blending lake IDs
-      if (!this.selectedBlendingLakeIds.includes(lakeIdStr)) {
-        this.selectedBlendingLakeIds.push(lakeIdStr);
-      }
-    } else {
-      // Remove from selected blending lake IDs
-      const index = this.selectedBlendingLakeIds.indexOf(lakeIdStr);
-      if (index > -1) {
-        this.selectedBlendingLakeIds.splice(index, 1);
-      }
-    }
-    
-    // Update the form control value as a comma-separated string
-    this.entryForm.get('blending_lakeids')?.setValue(this.selectedBlendingLakeIds.join(','));
-  }
-  
-  // Method to check if a blending lake is selected (ADD form)
-  isBlendingLakeSelected(lakeId: number): boolean {
-    return this.selectedBlendingLakeIds.includes(lakeId.toString());
-  }
-  
-  // Method to handle checkbox change for blending lakes (EDIT form)
-  onEditBlendingLakeCheckboxChange(event: any, lakeId: number) {
-    const lakeIdStr = lakeId.toString();
-    if (event.target.checked) {
-      // Add to selected blending lake IDs
-      if (!this.editSelectedBlendingLakeIds.includes(lakeIdStr)) {
-        this.editSelectedBlendingLakeIds.push(lakeIdStr);
-      }
-    } else {
-      // Remove from selected blending lake IDs
-      const index = this.editSelectedBlendingLakeIds.indexOf(lakeIdStr);
-      if (index > -1) {
-        this.editSelectedBlendingLakeIds.splice(index, 1);
-      }
-    }
-    
-    // Update the rowSelected value as a comma-separated string
-    this.rowSelected.blending_lakeids = this.editSelectedBlendingLakeIds.join(',');
-  }
-  
-  // Method to check if a blending lake is selected (EDIT form)
-  isEditBlendingLakeSelected(lakeId: number): boolean {
-    return this.editSelectedBlendingLakeIds.includes(lakeId.toString());
-  }
-  
-  // Method to open field mapping modal
-  openFieldMappingModal(item: any) {
-    this.selectedMappingItem = item;
-    this.fieldMappingData = [];
-    this.fieldMappings = {};
-    this.showFieldMappingModal = true;
-    
-    // Fetch available keys using the same API as calculated fields
-    this.mainService.fetchAvailableKeys(item.url, item.sure_connect_id).subscribe(
-      (keys: string[]) => {
-        // Initialize field mappings with empty values
-        this.fieldMappingData = keys.map(key => ({
-          original: key,
-          mapped: ''
-        }));
-        
-        // If there's existing mapping data, populate it
-        if (item.mapping_json) {
-          try {
-            const existingMappings = JSON.parse(item.mapping_json);
-            this.fieldMappingData.forEach(field => {
-              if (existingMappings[field.original]) {
-                field.mapped = existingMappings[field.original];
-              }
-            });
-          } catch (e) {
-            console.error('Error parsing existing mapping JSON:', e);
-          }
-        }
-      },
-      (error) => {
-        console.error('Error fetching keys for field mapping:', error);
-        this.toastr.error('Failed to fetch available keys for field mapping');
-      }
-    );
-  }
-  
-  // Method to update field mappings
-  updateFieldMappings() {
-    if (!this.selectedMappingItem) {
-      this.toastr.error('No item selected for mapping');
-      return;
-    }
-    
-    // Create mapping object
-    const mappings: { [key: string]: string } = {};
-    this.fieldMappingData.forEach(field => {
-      if (field.mapped && field.mapped.trim() !== '') {
-        mappings[field.original] = field.mapped.trim();
-      }
-    });
-    
-    // Convert to JSON string
-    const mappingJson = JSON.stringify(mappings);
-    
-    // Update the mapping JSON field
-    this.selectedMappingItem.mapping_json = mappingJson;
-    
-    // Call update service
-    this.mainService.update(this.selectedMappingItem.id, this.selectedMappingItem).subscribe(
-      (response) => {
-        this.toastr.success('Field mappings updated successfully');
-        // Update the local data
-        const index = this.product.findIndex(p => p.id === this.selectedMappingItem.id);
-        if (index !== -1) {
-          this.product[index] = {...this.selectedMappingItem};
-        }
-        this.closeFieldMappingModal();
-      },
-      (error) => {
-        console.error('Error updating field mappings:', error);
-        this.toastr.error('Failed to update field mappings');
-      }
-    );
-  }
-  
-  // Method to close field mapping modal
-  closeFieldMappingModal() {
-    this.showFieldMappingModal = false;
-    this.fieldMappingData = [];
-    this.fieldMappings = {};
-    this.selectedMappingItem = null;
-  }
-  
-  // Method to update individual field mapping
-  updateFieldMapping(index: number, value: string) {
-    if (index >= 0 && index < this.fieldMappingData.length) {
-      this.fieldMappingData[index].mapped = value;
-    }
-  }
-  
-  
-  // Method to open scheduler modal
-  openSchedulerModal(item: any) {
-    this.selectedSchedulerItem = item;
-    this.schedulerJob = null;
-    this.showSchedulerModal = true;
-    
-    // Fetch job by lake ID
-    this.schedulerService.getJobByLakeId(item.id).subscribe(
-      (job: any) => {
-        this.schedulerJob = job;
-      },
-      (error) => {
-        // If job not found, it's expected - we'll show create option
-        if (error.status === 404) {
-          this.schedulerJob = null;
-        } else {
-          console.error('Error fetching scheduler job:', error);
-          this.toastr.error('Failed to fetch scheduler job information');
-        }
-      }
-    );
-  }
-  
-  // Method to create a new job
-  createJob() {
-    if (!this.selectedSchedulerItem) {
-      this.toastr.error('No data lake selected');
-      return;
-    }
-    
-    const jobData = {
-      name: this.selectedSchedulerItem.name,
-      status: 'RUNNING',
-      description: `Scheduled job for ${this.selectedSchedulerItem.name}`,
-      jobType: 'DATALAKE',
-      lakeid: this.selectedSchedulerItem.id
-    };
-    
-    this.schedulerService.createJob(jobData).subscribe(
-      (job: any) => {
-        this.schedulerJob = job;
-        this.toastr.success('Job created successfully');
-      },
-      (error) => {
-        console.error('Error creating job:', error);
-        this.toastr.error('Failed to create job');
-      }
-    );
-  }
-  
-  // Method to pause a job
-  pauseJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    this.schedulerService.pauseJob(this.schedulerJob.id).subscribe(
-      (response: any) => {
-        this.schedulerJob.status = 'PAUSED';
-        this.toastr.success('Job paused successfully');
-      },
-      (error) => {
-        console.error('Error pausing job:', error);
-        this.toastr.error('Failed to pause job');
-      }
-    );
-  }
-  
-  // Method to resume a job
-  resumeJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    this.schedulerService.resumeJob(this.schedulerJob.id).subscribe(
-      (response: any) => {
-        this.schedulerJob.status = 'RUNNING';
-        this.toastr.success('Job resumed successfully');
-      },
-      (error) => {
-        console.error('Error resuming job:', error);
-        this.toastr.error('Failed to resume job');
-      }
-    );
-  }
-  
-  // Method to stop a job
-  stopJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    this.schedulerService.stopJob(this.schedulerJob.id).subscribe(
-      (response: any) => {
-        this.schedulerJob.status = 'STOPPED';
-        this.toastr.success('Job stopped successfully');
-      },
-      (error) => {
-        console.error('Error stopping job:', error);
-        this.toastr.error('Failed to stop job');
-      }
-    );
-  }
-  
-  // Method to restart a stopped job
-  restartJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    // To restart a job, we need to create a new job with the same parameters
-    const jobData = {
-      name: this.schedulerJob.name,
-      status: 'RUNNING',
-      description: this.schedulerJob.description,
-      jobType: this.schedulerJob.jobType,
-      lakeid: this.schedulerJob.lakeid
-    };
-    
-    this.schedulerService.createJob(jobData).subscribe(
-      (job: any) => {
-        this.schedulerJob = job;
-        this.toastr.success('Job restarted successfully');
-      },
-      (error) => {
-        console.error('Error restarting job:', error);
-        this.toastr.error('Failed to restart job');
-      }
-    );
-  }
-  
-  // Method to close scheduler modal
-  closeSchedulerModal() {
-    this.showSchedulerModal = false;
-    this.schedulerJob = null;
-    this.selectedSchedulerItem = null;
-  }
-  
-  // Method to get status badge class
-  getStatusBadgeClass(status: string): string {
-    switch (status) {
-      case 'RUNNING':
-        return 'badge-success';
-      case 'PAUSED':
-        return 'badge-warning';
-      case 'STOPPED':
-        return 'badge-danger';
-      default:
-        return 'badge-light';
-    }
-  }
-  
-  // Method to toggle webhook for a data lake item
-  toggleWebhook(item: any) {
-    // Call the enableWebhook service method
-    this.mainService.enableWebhook(item.id).subscribe(
-      (updatedItem: any) => {
-        // Update the local data with the response from the server
-        const index = this.product.findIndex(p => p.id === item.id);
-        if (index !== -1) {
-          this.product[index] = {...updatedItem};
-        }
-        
-        // Show success message based on the new webhook status
-        if (updatedItem.webhook_url && updatedItem.webhook_url.trim() !== '') {
-          this.toastr.success('Webhook enabled successfully');
-        } else {
-          this.toastr.success('Webhook disabled successfully');
-        }
-      },
-      (error) => {
-        console.error('Error toggling webhook:', error);
-        this.toastr.error('Failed to toggle webhook');
-      }
-    );
-  }
-  
-  // Method to copy webhook URL to clipboard
-  copyWebhookUrl(webhookUrl: string) {
-    this.copyToClipboard(webhookUrl);
-  }
-}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.service.ts
deleted file mode 100644
index 51052fd..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.service.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from "rxjs";
-import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
-import { ApiRequestService } from "src/app/services/api/api-request.service";
-import { environment } from 'src/environments/environment';
-@Injectable({
-  providedIn: 'root'
-})
-export class Data_lakeservice{
-  private baseURL = "Data_lake/Data_lake" ;  constructor(
-    private http: HttpClient,
-    private apiRequest: ApiRequestService,
-  ) { }
-  getAll(page?: number, size?: number): Observable<any> {
-    return this.apiRequest.get(this.baseURL);
-  }
-  getById(id: number): Observable<any> {
-    const _http = this.baseURL + "/" + id;
-    return this.apiRequest.get(_http);
-  }
-  create(data: any): Observable<any> {
-    return this.apiRequest.post(this.baseURL, data);
-  }
-  update(id: number, data: any): Observable<any> {
-    const _http = this.baseURL + "/" + id;
-    return this.apiRequest.put(_http, data);
-  }
-  delete(id: number): Observable<any> {
-    const _http = this.baseURL + "/" + id;
-    return this.apiRequest.delete(_http);
-  }
-  
-  // New method for updating JSON
-  updateJson(id: number): Observable<any> {
-    const _http = this.baseURL + "/json/" + id;
-    return this.apiRequest.put(_http, {});
-  }
-  
-  // Method to fetch available keys from API
-  fetchAvailableKeys(url: string, sureId: number): Observable<string[]> {
-    const apiUrl = `chart/getAllKeys?apiUrl=${encodeURIComponent(url)}&sureId=${sureId}`;
-    return this.apiRequest.get(apiUrl);
-  }
-
-  // Method to fetch blending keys for a specific lake ID
-  fetchBlendingKeys(lakeId: number): Observable<any> {
-    const _http = `${this.baseURL}/keys/${lakeId}`;
-    return this.apiRequest.get(_http);
-  }
-  
-  // Method to update calculated fields for a data lake item
-  updateCalculatedFields(id: number, calculatedFieldJson: string, isCalculatedField: boolean): Observable<any> {
-    const _http = this.baseURL + "/" + id;
-    const data = {
-      calculated_field_json: calculatedFieldJson,
-      iscalculatedfield: isCalculatedField
-    };
-    return this.apiRequest.put(_http, data);
-  }
-  
-  // Method to enable webhook for a data lake item
-  enableWebhook(id: number): Observable<any> {
-    const _http = `${this.baseURL}/webhook/${id}`;
-    return this.apiRequest.get(_http);
-  }
-// updateaction
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake_cardvariable.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake_cardvariable.ts
deleted file mode 100644
index d6f15b0..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake_cardvariable.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const Data_lakecardvariable = {
-    "cardButton": false,
-    "cardmodeldata": ``
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.html
deleted file mode 100644
index f70c8a4..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<div class="cron-job-builder">
-  <h4>Cron Job Builder</h4>
-  <div class="clr-row">
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
-      <div class="form-group">
-        <label>Second</label>
-        <select class="form-control" [(ngModel)]="second" (change)="onFieldChange()">
-          <option *ngFor="let option of secondOptions" [value]="option.value">{{ option.label }}</option>
-        </select>
-      </div>
-    </div>
-    
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
-      <div class="form-group">
-        <label>Minute</label>
-        <select class="form-control" [(ngModel)]="minute" (change)="onFieldChange()">
-          <option *ngFor="let option of minuteOptions" [value]="option.value">{{ option.label }}</option>
-        </select>
-      </div>
-    </div>
-    
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
-      <div class="form-group">
-        <label>Hour</label>
-        <select class="form-control" [(ngModel)]="hour" (change)="onFieldChange()">
-          <option *ngFor="let option of hourOptions" [value]="option.value">{{ option.label }}</option>
-        </select>
-      </div>
-    </div>
-    
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
-      <div class="form-group">
-        <label>Day of Month</label>
-        <select class="form-control" [(ngModel)]="dayOfMonth" (change)="onFieldChange()">
-          <option *ngFor="let option of dayOfMonthOptions" [value]="option.value">{{ option.label }}</option>
-        </select>
-      </div>
-    </div>
-    
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
-      <div class="form-group">
-        <label>Month</label>
-        <select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
-          <option *ngFor="let option of monthOptions" [value]="option.value">{{ option.label }}</option>
-        </select>
-      </div>
-    </div>
-    
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
-      <div class="form-group">
-        <label>Day of Week</label>
-        <select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">
-          <option *ngFor="let option of dayOfWeekOptions" [value]="option.value">{{ option.label }}</option>
-        </select>
-      </div>
-    </div>
-  </div>
-  
-  <div class="clr-row">
-    <div class="clr-col-12">
-      <div class="form-group">
-        <label>Generated Cron Expression:</label>
-        <input type="text" class="form-control" [value]="buildCronExpression()" readonly>
-      </div>
-    </div>
-  </div>
-  
-  <div class="clr-row" *ngIf="cronDescription">
-    <div class="clr-col-12">
-      <div class="cron-description">
-        <strong>Schedule Description:</strong> {{ cronDescription }}
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.scss
deleted file mode 100644
index 66eedb7..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.cron-job-builder {
-  padding: 15px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background-color: #f8f8f8;
-  margin-bottom: 20px;
-  
-  h4 {
-    margin-top: 0;
-    color: #333;
-  }
-  
-  .form-group {
-    margin-bottom: 10px;
-    
-    label {
-      display: block;
-      margin-bottom: 5px;
-      font-weight: 600;
-    }
-    
-    select, input {
-      width: 100%;
-    }
-  }
-  
-  .cron-description {
-    padding: 10px;
-    background-color: #e6f7ff;
-    border: 1px solid #91d5ff;
-    border-radius: 4px;
-    margin-top: 10px;
-    font-size: 14px;
-    
-    strong {
-      color: #1890ff;
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.ts
deleted file mode 100644
index 61f87a1..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-
-@Component({
-  selector: 'app-cron-job-builder',
-  templateUrl: './cron-job-builder.component.html',
-  styleUrls: ['./cron-job-builder.component.scss']
-})
-export class CronJobBuilderComponent implements OnInit, OnChanges {
-  @Input() cronExpression: string = '';
-  @Input() instanceId: string = ''; // Unique identifier for each instance
-  @Output() cronExpressionChange = new EventEmitter<string>();
-  
-  // Cron job fields (now starting with seconds)
-  second: string = '*';
-  minute: string = '*';
-  hour: string = '*';
-  dayOfMonth: string = '*';
-  month: string = '*';
-  dayOfWeek: string = '*';
-  
-  // Human readable description
-  cronDescription: string = '';
-  
-  // Options for selectors
-  secondOptions: any[] = [];
-  minuteOptions: any[] = [];
-  hourOptions: any[] = [];
-  dayOfMonthOptions: any[] = [];
-  monthOptions: any[] = [];
-  dayOfWeekOptions: any[] = [];
-
-  ngOnInit() {
-    // Initialize options for each instance
-    this.secondOptions = this.generateOptions(0, 59, 'second');
-    this.minuteOptions = this.generateOptions(0, 59, 'minute');
-    this.hourOptions = this.generateOptions(0, 23, 'hour');
-    this.dayOfMonthOptions = this.generateOptions(1, 31, 'day');
-    this.monthOptions = [
-      { value: '*', label: 'Every month' },
-      { value: '1', label: 'January' },
-      { value: '2', label: 'February' },
-      { value: '3', label: 'March' },
-      { value: '4', label: 'April' },
-      { value: '5', label: 'May' },
-      { value: '6', label: 'June' },
-      { value: '7', label: 'July' },
-      { value: '8', label: 'August' },
-      { value: '9', label: 'September' },
-      { value: '10', label: 'October' },
-      { value: '11', label: 'November' },
-      { value: '12', label: 'December' }
-    ];
-    this.dayOfWeekOptions = [
-      { value: '*', label: 'Every day' },
-      { value: '0', label: 'Sunday' },
-      { value: '1', label: 'Monday' },
-      { value: '2', label: 'Tuesday' },
-      { value: '3', label: 'Wednesday' },
-      { value: '4', label: 'Thursday' },
-      { value: '5', label: 'Friday' },
-      { value: '6', label: 'Saturday' }
-    ];
-    
-    if (this.cronExpression) {
-      this.parseCronExpression(this.cronExpression);
-    }
-    // Generate initial description
-    this.generateDescription();
-  }
-  
-  ngOnChanges(changes: SimpleChanges) {
-    // When cronExpression input changes, update the component state
-    if (changes['cronExpression'] && !changes['cronExpression'].firstChange) {
-      this.parseCronExpression(changes['cronExpression'].currentValue);
-      this.generateDescription();
-    }
-  }
-
-  generateOptions(start: number, end: number, type: string): any[] {
-    const options = [{ value: '*', label: `Every ${type} (${start === 0 ? '0' : start}-${end})` }];
-    for (let i = start; i <= end; i++) {
-      options.push({ value: i.toString(), label: i.toString() });
-    }
-    return options;
-  }
-
-  parseCronExpression(expression: string) {
-    const parts = expression.split(' ');
-    if (parts.length >= 6) {  // Now expecting 6 parts with seconds
-      this.second = parts[0];
-      this.minute = parts[1];
-      this.hour = parts[2];
-      this.dayOfMonth = parts[3];
-      this.month = parts[4];
-      this.dayOfWeek = parts[5];
-    } else if (parts.length >= 5) {  // For backward compatibility with 5-part cron expressions
-      // Default seconds to 0 if not provided
-      this.second = '0';
-      this.minute = parts[0];
-      this.hour = parts[1];
-      this.dayOfMonth = parts[2];
-      this.month = parts[3];
-      this.dayOfWeek = parts[4];
-    }
-  }
-  
-  generateDescription() {
-    let description = 'Runs ';
-    
-    // Second description
-    if (this.second === '*') {
-      description += 'every second';
-    } else if (this.second.includes('/')) {
-      const interval = this.second.split('/')[1];
-      description += `every ${interval} seconds`;
-    } else {
-      description += `at second ${this.second}`;
-    }
-    
-    // Minute description
-    if (this.minute === '*') {
-      if (this.second === '*') {
-        description += '';
-      } else {
-        description += ' of every minute';
-      }
-    } else if (this.minute.includes('/')) {
-      const interval = this.minute.split('/')[1];
-      description += ` of every ${interval} minutes`;
-    } else {
-      description += ` at minute ${this.minute}`;
-    }
-    
-    // Hour description
-    if (this.hour === '*') {
-      if (this.minute === '*' && this.second === '*') {
-        description += '';
-      } else {
-        description += ' past every hour';
-      }
-    } else if (this.hour.includes('/')) {
-      const interval = this.hour.split('/')[1];
-      description += ` past every ${interval} hours`;
-    } else {
-      description += ` past hour ${this.hour}`;
-    }
-    
-    // Day of month description
-    if (this.dayOfMonth !== '*' && this.dayOfMonth !== '?') {
-      description += ` on day ${this.dayOfMonth}`;
-    }
-    
-    // Month description
-    if (this.month !== '*') {
-      const monthNames = ['', 'January', 'February', 'March', 'April', 'May', 'June', 
-                         'July', 'August', 'September', 'October', 'November', 'December'];
-      if (this.month.match(/^\d+$/)) {
-        description += ` in ${monthNames[parseInt(this.month)]}`;
-      } else {
-        description += ` in ${this.month}`;
-      }
-    }
-    
-    // Day of week description
-    if (this.dayOfWeek !== '*' && this.dayOfWeek !== '?') {
-      const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-      if (this.dayOfWeek.match(/^\d+$/)) {
-        description += ` on ${dayNames[parseInt(this.dayOfWeek)]}`;
-      } else {
-        description += ` on ${this.dayOfWeek}`;
-      }
-    }
-    
-    // Special case for simple patterns
-    if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
-      description = 'Runs at midnight on the first day of every month';
-    } else if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
-      description = 'Runs at midnight every day';
-    } else if (this.second === '0' && this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
-      description = 'Runs at the top of every hour';
-    } else if (this.second === '0' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
-      description = 'Runs at the top of every minute';
-    } else if (this.second === '*' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
-      description = 'Runs every second';
-    }
-    
-    this.cronDescription = description;
-  }
-
-  buildCronExpression() {
-    const expression = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
-    this.cronExpressionChange.emit(expression);
-    this.generateDescription(); // Update description when expression changes
-    return expression;
-  }
-
-  onFieldChange() {
-    this.buildCronExpression();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/dataLakescheduler.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/dataLakescheduler.service.ts
deleted file mode 100644
index 216a2f7..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/dataLakescheduler.service.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-
-import { Injectable } from '@angular/core';
-import { Observable } from "rxjs";
-import { HttpClient } from "@angular/common/http";
-import { ApiRequestService } from "src/app/services/api/api-request.service";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DataLakeSchedulerService {
-  private baseURL = "scheduler";
-
-  constructor(
-    private http: HttpClient,
-    private apiRequest: ApiRequestService,
-  ) { }
-
-  // Get job by lake ID
-  getJobByLakeId(lakeId: number): Observable<any> {
-    const _http = `${this.baseURL}/lake/${lakeId}`;
-    return this.apiRequest.get(_http);
-  }
-
-  // Create a new job
-  createJob(jobData: any): Observable<any> {
-    const _http = `${this.baseURL}/create`;
-    return this.apiRequest.post(_http, jobData);
-  }
-
-  // Pause a job
-  pauseJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/pause/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Resume a job
-  resumeJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/resume/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Stop a job
-  stopJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/stop/${jobId}`;
-    return this.apiRequest.delete(_http);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html
index 85294db..b50c51f 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.html
@@ -1,67 +1,58 @@
 <ol class="breadcrumb breadcrumb-arrow font-trirong">
-  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
-  <li><a href="javascript://"><clr-icon shape="dashboard"></clr-icon> {{ 'Dashboard_builder' | translate }}</a></li>
-</ol>
-
-<br>
-
-<div class="dg-wrapper">
-  <div class="clr-row">
-    <div class="clr-col-8">x
-      <h3>{{ 'Dashboard_builder' | 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)="gotorunner()">
-        <clr-icon shape="grid-view"></clr-icon>{{ 'Dashboard_runner' | translate }}
-      </button>
-      <!-- Add Chart Config button -->
-      <button class="btn btn-primary" (click)="openChartConfig()">
-        <clr-icon shape="cog"></clr-icon> Chart Config
-      </button>
-      <button class="btn btn-outline" (click)="onExport()">
-        <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
-      </button>
-      <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>
-
-    <clr-dg-column [clrDgField]="''">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        {{ 'Go_to' | translate }}
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'dashboard_name'">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        {{ 'Dashboard_Name' | translate }}
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'description'">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        {{ 'Description' | translate }}
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'secuirity_profile'">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        {{ 'Security_Profile' | translate }}
-      </ng-container>
-    </clr-dg-column>
-    <clr-dg-column [clrDgField]="'add_to_home'">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        {{ 'Add_to_home' | translate }}
-      </ng-container>
-    </clr-dg-column>
-    <!-- <clr-dg-column [clrDgField]="'formType'">
+    <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
+    <li><a href="javascript://"><clr-icon shape="dashboard"></clr-icon> {{ 'Dashboard_builder' | translate }}</a></li>
+  </ol>
+  
+  <br>
+  
+  <div class="dg-wrapper">
+      <div class="clr-row">
+        <div class="clr-col-8">
+          <h3>{{ 'Dashboard_builder' | translate }}</h3>
+        </div>
+        <div class="clr-col-4" style="text-align: right;">
+          <button id="add" class="btn btn-primary"  (click)="gotorunner()">
+            <clr-icon shape="grid-view"></clr-icon>{{ 'Dashboard_runner' | translate }}
+          </button>
+          <button class="btn btn-outline" (click)="onExport()">
+            <clr-icon shape="export"></clr-icon>  {{ 'EXPORT_XLSX' | translate }}
+          </button>
+          <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>
+  
+          <clr-dg-column [clrDgField]="''">
+              <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'Go_to' | translate }}
+              </ng-container>
+          </clr-dg-column>
+          <clr-dg-column [clrDgField]="'dashboard_name'">
+              <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'Dashboard_Name' | translate }}
+              </ng-container>
+          </clr-dg-column>
+          <clr-dg-column [clrDgField]="'description'">
+              <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'Description' | translate }}
+              </ng-container>
+          </clr-dg-column >
+          <clr-dg-column [clrDgField]="'secuirity_profile'">
+              <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'Security_Profile' | translate }}
+              </ng-container>
+          </clr-dg-column >
+          <clr-dg-column [clrDgField]="'add_to_home'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+              {{ 'Add_to_home' | translate }}
+            </ng-container>
+        </clr-dg-column >
+          <!-- <clr-dg-column [clrDgField]="'formType'">
             <ng-container *clrDgHideableColumn="{hidden: false}">
               Build Status
             </ng-container> 
@@ -71,86 +62,84 @@
                 Testing
               </ng-container> 
             </clr-dg-column > -->
-    <clr-dg-column [clrDgField]="'action'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-        {{ 'Action' | translate }}
-      </ng-container></clr-dg-column>
+          <clr-dg-column [clrDgField]="'action'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+            {{ 'Action' | translate }}
+            </ng-container></clr-dg-column>
+  
+          <clr-dg-row *clrDgItems="let user of data?.slice()?.reverse();" [clrDgItem]="user">
+            <clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;" (click)="goToEdit(user.id)">  {{ 'SET_UP' | translate }}</span></clr-dg-cell>
+              <clr-dg-cell>{{user.dashboard_name}}</clr-dg-cell>
+              <clr-dg-cell>{{user.description}}</clr-dg-cell>
+              <clr-dg-cell>{{user.secuirity_profile}}</clr-dg-cell>
+              <clr-dg-cell>{{user.add_to_home}}</clr-dg-cell>
 
-    <clr-dg-row *clrDgItems="let user of data?.slice()?.reverse();" [clrDgItem]="user">
-      <clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;"
-          (click)="goToEdit(user.id)"> {{ 'SET_UP' | translate }}</span></clr-dg-cell>
-      <clr-dg-cell>{{user.dashboard_name}}</clr-dg-cell>
-      <clr-dg-cell>{{user.description}}</clr-dg-cell>
-      <clr-dg-cell>{{user.secuirity_profile}}</clr-dg-cell>
-      <clr-dg-cell>{{user.add_to_home}}</clr-dg-cell>
-
-      <!-- <clr-dg-cell><input type="radio" id="cb1" class="dots" [ngStyle]="{'background-color': user.build == true ? 'green' : 'red'}"></clr-dg-cell>
+              <!-- <clr-dg-cell><input type="radio" id="cb1" class="dots" [ngStyle]="{'background-color': user.build == true ? 'green' : 'red'}"></clr-dg-cell>
         <clr-dg-cell>{{user.testing}}</clr-dg-cell> -->
-      <clr-dg-cell>
-        <!-- <span style="cursor: pointer; padding: 10px; "><clr-icon shape="form"  (click)="goToEdit(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
-        <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>
-
-      </clr-dg-cell>
-      <clr-dg-action-overflow>
-        <button class="action-item" (click)="goToEditData(user.id)">{{ 'Edit' | translate }} <clr-icon shape="edit"
-            class="is-error"></clr-icon></button>
-        <!-- <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button> -->
-      </clr-dg-action-overflow>
-    </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' | translate }} {{pagination.totalItems}} {{ 'users' | translate }}
-      </clr-dg-pagination>
-    </clr-dg-footer>
-  </clr-datagrid>
-</div>
-
-<clr-modal [(clrModalOpen)]="addModall" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <div class="modal-body">
-    <div class="s-order-dash-pg">
-      <div class="chart-box" id="word1" (click)="gotoadd()"><br>
-        <img style="margin: auto; display: block;" src="/assets/images/fromscratch.png" height="90" width="90">
-        <h5 class="center"> <b>{{ 'Start_from_scratch' | translate }}</b> </h5>
-      </div>
-      <div class="chart-box" id="word1"><br>
-        <img style="margin: auto; display: block;" src="/assets/images/copytemplate.png" height="90" width="90">
-        <h5 class="center"> <b>{{ 'Import_from_template' | translate }}</b> </h5>
-      </div>
-      <div class="chart-box" id="word1"><br>
-        <img style="margin: auto; display: block;" src="/assets/images/database.png" height="90" width="90">
-        <h5 class="center"> <b>{{ 'Import_from_public_project' | translate }}</b> </h5>
-      </div>
+              <clr-dg-cell>
+                <!-- <span style="cursor: pointer; padding: 10px; "><clr-icon shape="form"  (click)="goToEdit(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
+              <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>
+            
+              </clr-dg-cell>
+          <clr-dg-action-overflow>
+            <button class="action-item" (click)="goToEditData(user.id)">{{ 'Edit' | translate }} <clr-icon shape="edit" class="is-error"></clr-icon></button>
+            <!-- <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button> -->
+          </clr-dg-action-overflow>
+        </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' | translate }} {{pagination.totalItems}}   {{ 'users' | translate }}
+          </clr-dg-pagination>
+        </clr-dg-footer>
+      </clr-datagrid>
     </div>
-  </div>
-</clr-modal>
-
-<clr-modal [(clrModalOpen)]="modalDelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <div class="modal-body" *ngIf="rowSelected.id">
-    <h1 class="delete">{{ 'Are_you_sure_want_to_delete' | 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>
-  </div>
-</clr-modal>
\ No newline at end of file
+  
+    <clr-modal [(clrModalOpen)]="addModall" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+      <div class="modal-body">
+          <div class="s-order-dash-pg">
+              <div class="chart-box" id="word1" (click)="gotoadd()"><br>
+                <img style="margin: auto; display: block;" src="/assets/images/fromscratch.png" height="90" width="90">
+                <h5 class="center"> <b>{{ 'Start_from_scratch' | translate }}</b>  </h5>
+              </div>
+              <div class="chart-box" id="word1" ><br>
+                <img style="margin: auto; display: block;" src="/assets/images/copytemplate.png" height="90" width="90">
+                <h5 class="center"> <b>{{ 'Import_from_template' | translate }}</b>  </h5>
+              </div>
+              <div class="chart-box" id="word1"><br>
+                <img style="margin: auto; display: block;" src="/assets/images/database.png" height="90" width="90">
+                <h5 class="center"> <b>{{ 'Import_from_public_project' | translate }}</b>  </h5>
+              </div>
+            </div>
+      </div>
+    </clr-modal>
+  
+    <clr-modal [(clrModalOpen)]="modalDelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+      <div class="modal-body" *ngIf="rowSelected.id">
+        <h1 class="delete">{{ 'Are_you_sure_want_to_delete' | 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>
+      </div>
+    </clr-modal>
+   
+  
+  
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts
index e40ebc4..b907dae 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/allnewdash/allnewdash.component.ts
@@ -24,7 +24,6 @@ export class AllnewdashComponent implements OnInit {
   projectname;
   projectId;
   error;
-  chartConfigManagerOpen = false;
   constructor(
     private router : Router,
     private route: ActivatedRoute,private dashboardService : DashboardService,
@@ -122,9 +121,4 @@ export class AllnewdashComponent implements OnInit {
   //    this.router.navigate(['../editdashn'],{relativeTo:this.route});
   // }
 
-  // Add method to open chart configuration manager
-  openChartConfig(): void {
-          this.router.navigate(['../chart-types'],{relativeTo:this.route});
-
-  }
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.html
deleted file mode 100644
index 18e5c95..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.html
+++ /dev/null
@@ -1,630 +0,0 @@
-<div class="chart-config-manager">
-  <h2>Chart Configuration Manager</h2>
-  
-  <!-- Chart Types Section -->
-  <clr-tabs>
-    <clr-tab>
-      <button clrTabLink>Chart Types</button>
-      <clr-tab-content>
-        <div class="card">
-          <div class="card-header">
-            <h3>Chart Types</h3>
-            <button class="btn btn-sm btn-primary" (click)="showAddChartTypeForm = true">
-              Add Chart Type
-            </button>
-          </div>
-          
-          <!-- Add Chart Type Form -->
-          <div class="card-block" *ngIf="showAddChartTypeForm">
-            <form clrForm>
-              <clr-input-container>
-                <label>Name</label>
-                <input clrInput type="text" [(ngModel)]="newChartType.name" name="chartTypeName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Display Name</label>
-                <input clrInput type="text" [(ngModel)]="newChartType.displayName" name="chartTypeDisplayName" />
-              </clr-input-container>
-              
-              <clr-textarea-container>
-                <label>Description</label>
-                <textarea clrTextarea [(ngModel)]="newChartType.description" name="chartTypeDescription"></textarea>
-              </clr-textarea-container>
-              
-              <clr-checkbox-container>
-                <label>Is Active</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="newChartType.isActive" name="chartTypeIsActive" />
-                  <label>Active</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="createChartType()" [disabled]="!newChartType.name">Save</button>
-                <button class="btn" (click)="showAddChartTypeForm = false">Cancel</button>
-              </div>
-            </form>
-          </div>
-          
-          <!-- Chart Types Table -->
-          <div class="card-block">
-            <clr-datagrid>
-              <clr-dg-column>Name</clr-dg-column>
-              <clr-dg-column>Display Name</clr-dg-column>
-              <clr-dg-column>Description</clr-dg-column>
-              <clr-dg-column>Status</clr-dg-column>
-              <clr-dg-column>Actions</clr-dg-column>
-              
-              <clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
-                <clr-dg-cell>{{chartType.name}}</clr-dg-cell>
-                <clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
-                <clr-dg-cell>{{chartType.description}}</clr-dg-cell>
-                <clr-dg-cell>
-                  <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
-                    {{chartType.isActive ? 'Active' : 'Inactive'}}
-                  </span>
-                </clr-dg-cell>
-                <clr-dg-cell>
-                  <button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)">
-                    <cds-icon shape="pencil"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)">
-                    <cds-icon shape="trash"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)">
-                    <cds-icon shape="eye"></cds-icon>
-                  </button>
-                </clr-dg-cell>
-              </clr-dg-row>
-              
-              <clr-dg-footer>
-                {{chartTypes.length}} chart types
-              </clr-dg-footer>
-            </clr-datagrid>
-          </div>
-          
-          <!-- Edit Chart Type Form -->
-          <div class="card-block" *ngIf="selectedChartType">
-            <h4>Edit Chart Type</h4>
-            <form clrForm>
-              <clr-input-container>
-                <label>Name</label>
-                <input clrInput type="text" [(ngModel)]="selectedChartType.name" name="editChartTypeName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Display Name</label>
-                <input clrInput type="text" [(ngModel)]="selectedChartType.displayName" name="editChartTypeDisplayName" />
-              </clr-input-container>
-              
-              <clr-textarea-container>
-                <label>Description</label>
-                <textarea clrTextarea [(ngModel)]="selectedChartType.description" name="editChartTypeDescription"></textarea>
-              </clr-textarea-container>
-              
-              <clr-checkbox-container>
-                <label>Is Active</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedChartType.isActive" name="editChartTypeIsActive" />
-                  <label>Active</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="updateChartType()" [disabled]="!selectedChartType.name">Update</button>
-                <button class="btn" (click)="selectedChartType = null">Cancel</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </clr-tab-content>
-    </clr-tab>
-    
-    <!-- UI Components Section -->
-    <clr-tab *ngIf="selectedChartType">
-      <button clrTabLink>UI Components</button>
-      <clr-tab-content>
-        <div class="card">
-          <div class="card-header">
-            <h3>UI Components for {{selectedChartType?.name}}</h3>
-            <button class="btn btn-sm btn-primary" (click)="showAddUiComponentForm = true">
-              Add UI Component
-            </button>
-          </div>
-          
-          <!-- Add UI Component Form -->
-          <div class="card-block" *ngIf="showAddUiComponentForm">
-            <form clrForm>
-              <clr-input-container>
-                <label>Component Name</label>
-                <input clrInput type="text" [(ngModel)]="newUiComponent.componentName" name="componentName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Component Type</label>
-                <input clrInput type="text" [(ngModel)]="newUiComponent.componentType" name="componentType" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Display Label</label>
-                <input clrInput type="text" [(ngModel)]="newUiComponent.displayLabel" name="displayLabel" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Placeholder</label>
-                <input clrInput type="text" [(ngModel)]="newUiComponent.placeholder" name="placeholder" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Sort Order</label>
-                <input clrInput type="number" [(ngModel)]="newUiComponent.sortOrder" name="sortOrder" />
-              </clr-input-container>
-              
-              <clr-checkbox-container>
-                <label>Is Required</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="newUiComponent.isRequired" name="isRequired" />
-                  <label>Required</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="createUiComponent()" [disabled]="!newUiComponent.componentName">Save</button>
-                <button class="btn" (click)="showAddUiComponentForm = false">Cancel</button>
-              </div>
-            </form>
-          </div>
-          
-          <!-- UI Components Table -->
-          <div class="card-block">
-            <clr-datagrid>
-              <clr-dg-column>Component Name</clr-dg-column>
-              <clr-dg-column>Component Type</clr-dg-column>
-              <clr-dg-column>Display Label</clr-dg-column>
-              <clr-dg-column>Placeholder</clr-dg-column>
-              <clr-dg-column>Required</clr-dg-column>
-              <clr-dg-column>Sort Order</clr-dg-column>
-              <clr-dg-column>Actions</clr-dg-column>
-              
-              <clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
-                <clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
-                <clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
-                <clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
-                <clr-dg-cell>{{uiComponent.placeholder}}</clr-dg-cell>
-                <clr-dg-cell>
-                  <span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
-                    {{uiComponent.isRequired ? 'Yes' : 'No'}}
-                  </span>
-                </clr-dg-cell>
-                <clr-dg-cell>{{uiComponent.sortOrder}}</clr-dg-cell>
-                <clr-dg-cell>
-                  <button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)">
-                    <cds-icon shape="pencil"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)">
-                    <cds-icon shape="trash"></cds-icon>
-                  </button>
-                </clr-dg-cell>
-              </clr-dg-row>
-              
-              <clr-dg-footer>
-                {{uiComponents.length}} UI components
-              </clr-dg-footer>
-            </clr-datagrid>
-          </div>
-          
-          <!-- Edit UI Component Form -->
-          <div class="card-block" *ngIf="selectedUiComponent">
-            <h4>Edit UI Component</h4>
-            <form clrForm>
-              <clr-input-container>
-                <label>Component Name</label>
-                <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentName" name="editComponentName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Component Type</label>
-                <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentType" name="editComponentType" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Display Label</label>
-                <input clrInput type="text" [(ngModel)]="selectedUiComponent.displayLabel" name="editDisplayLabel" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Placeholder</label>
-                <input clrInput type="text" [(ngModel)]="selectedUiComponent.placeholder" name="editPlaceholder" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Sort Order</label>
-                <input clrInput type="number" [(ngModel)]="selectedUiComponent.sortOrder" name="editSortOrder" />
-              </clr-input-container>
-              
-              <clr-checkbox-container>
-                <label>Is Required</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedUiComponent.isRequired" name="editIsRequired" />
-                  <label>Required</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="updateUiComponent()" [disabled]="!selectedUiComponent.componentName">Update</button>
-                <button class="btn" (click)="selectedUiComponent = null">Cancel</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </clr-tab-content>
-    </clr-tab>
-    
-    <!-- Component Properties Section -->
-    <clr-tab *ngIf="selectedUiComponent">
-      <button clrTabLink>Component Properties</button>
-      <clr-tab-content>
-        <div class="card">
-          <div class="card-header">
-            <h3>Properties for {{selectedUiComponent?.componentName}}</h3>
-            <button class="btn btn-sm btn-primary" (click)="showAddComponentPropertyForm = true">
-              Add Property
-            </button>
-          </div>
-          
-          <!-- Add Component Property Form -->
-          <div class="card-block" *ngIf="showAddComponentPropertyForm">
-            <form clrForm>
-              <clr-input-container>
-                <label>Property Name</label>
-                <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Property Value</label>
-                <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Property Type</label>
-                <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
-              </clr-input-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="createComponentProperty()" [disabled]="!newComponentProperty.propertyName">Save</button>
-                <button class="btn" (click)="showAddComponentPropertyForm = false">Cancel</button>
-              </div>
-            </form>
-          </div>
-          
-          <!-- Component Properties Table -->
-          <div class="card-block">
-            <clr-datagrid>
-              <clr-dg-column>Property Name</clr-dg-column>
-              <clr-dg-column>Property Value</clr-dg-column>
-              <clr-dg-column>Property Type</clr-dg-column>
-              <clr-dg-column>Actions</clr-dg-column>
-              
-              <clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
-                <clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
-                <clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
-                <clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
-                <clr-dg-cell>
-                  <button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)">
-                    <cds-icon shape="pencil"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)">
-                    <cds-icon shape="trash"></cds-icon>
-                  </button>
-                </clr-dg-cell>
-              </clr-dg-row>
-              
-              <clr-dg-footer>
-                {{componentProperties.length}} properties
-              </clr-dg-footer>
-            </clr-datagrid>
-          </div>
-          
-          <!-- Edit Component Property Form -->
-          <div class="card-block" *ngIf="selectedComponentProperty">
-            <h4>Edit Component Property</h4>
-            <form clrForm>
-              <clr-input-container>
-                <label>Property Name</label>
-                <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Property Value</label>
-                <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Property Type</label>
-                <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
-              </clr-input-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="updateComponentProperty()" [disabled]="!selectedComponentProperty.propertyName">Update</button>
-                <button class="btn" (click)="selectedComponentProperty = null">Cancel</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </clr-tab-content>
-    </clr-tab>
-    
-    <!-- Chart Templates Section -->
-    <clr-tab *ngIf="selectedChartType">
-      <button clrTabLink>Chart Templates</button>
-      <clr-tab-content>
-        <div class="card">
-          <div class="card-header">
-            <h3>Templates for {{selectedChartType?.name}}</h3>
-            <button class="btn btn-sm btn-primary" (click)="showAddChartTemplateForm = true">
-              Add Template
-            </button>
-          </div>
-          
-          <!-- Add Chart Template Form -->
-          <div class="card-block" *ngIf="showAddChartTemplateForm">
-            <form clrForm>
-              <clr-input-container>
-                <label>Template Name</label>
-                <input clrInput type="text" [(ngModel)]="newChartTemplate.templateName" name="templateName" required />
-              </clr-input-container>
-              
-              <clr-textarea-container>
-                <label>HTML Template</label>
-                <textarea clrTextarea [(ngModel)]="newChartTemplate.templateHtml" name="templateHtml" rows="5"></textarea>
-              </clr-textarea-container>
-              
-              <clr-textarea-container>
-                <label>CSS Template</label>
-                <textarea clrTextarea [(ngModel)]="newChartTemplate.templateCss" name="templateCss" rows="5"></textarea>
-              </clr-textarea-container>
-              
-              <clr-checkbox-container>
-                <label>Is Default</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="newChartTemplate.isDefault" name="isDefault" />
-                  <label>Default Template</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="createChartTemplate()" [disabled]="!newChartTemplate.templateName">Save</button>
-                <button class="btn" (click)="showAddChartTemplateForm = false">Cancel</button>
-              </div>
-            </form>
-          </div>
-          
-          <!-- Chart Templates Table -->
-          <div class="card-block">
-            <clr-datagrid>
-              <clr-dg-column>Template Name</clr-dg-column>
-              <clr-dg-column>Is Default</clr-dg-column>
-              <clr-dg-column>Actions</clr-dg-column>
-              
-              <clr-dg-row *clrDgItems="let template of chartTemplates" [clrDgItem]="template">
-                <clr-dg-cell>{{template.templateName}}</clr-dg-cell>
-                <clr-dg-cell>
-                  <span class="label" [class.label-success]="template.isDefault" [class.label-danger]="!template.isDefault">
-                    {{template.isDefault ? 'Yes' : 'No'}}
-                  </span>
-                </clr-dg-cell>
-                <clr-dg-cell>
-                  <button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)">
-                    <cds-icon shape="pencil"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)">
-                    <cds-icon shape="trash"></cds-icon>
-                  </button>
-                </clr-dg-cell>
-              </clr-dg-row>
-              
-              <clr-dg-footer>
-                {{chartTemplates.length}} templates
-              </clr-dg-footer>
-            </clr-datagrid>
-          </div>
-          
-          <!-- Edit Chart Template Form -->
-          <div class="card-block" *ngIf="selectedChartTemplate">
-            <h4>Edit Chart Template</h4>
-            <form clrForm>
-              <clr-input-container>
-                <label>Template Name</label>
-                <input clrInput type="text" [(ngModel)]="selectedChartTemplate.templateName" name="editTemplateName" required />
-              </clr-input-container>
-              
-              <clr-textarea-container>
-                <label>HTML Template</label>
-                <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateHtml" name="editTemplateHtml" rows="5"></textarea>
-              </clr-textarea-container>
-              
-              <clr-textarea-container>
-                <label>CSS Template</label>
-                <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateCss" name="editTemplateCss" rows="5"></textarea>
-              </clr-textarea-container>
-              
-              <clr-checkbox-container>
-                <label>Is Default</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedChartTemplate.isDefault" name="editIsDefault" />
-                  <label>Default Template</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="updateChartTemplate()" [disabled]="!selectedChartTemplate.templateName">Update</button>
-                <button class="btn" (click)="selectedChartTemplate = null">Cancel</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </clr-tab-content>
-    </clr-tab>
-    
-    <!-- Dynamic Fields Section -->
-    <clr-tab *ngIf="selectedChartType">
-      <button clrTabLink>Dynamic Fields</button>
-      <clr-tab-content>
-        <div class="card">
-          <div class="card-header">
-            <h3>Dynamic Fields for {{selectedChartType?.name}}</h3>
-            <button class="btn btn-sm btn-primary" (click)="showAddDynamicFieldForm = true">
-              Add Field
-            </button>
-          </div>
-          
-          <!-- Add Dynamic Field Form -->
-          <div class="card-block" *ngIf="showAddDynamicFieldForm">
-            <form clrForm>
-              <clr-input-container>
-                <label>Field Name</label>
-                <input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Field Label</label>
-                <input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Field Type</label>
-                <input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
-              </clr-input-container>
-              
-              <clr-textarea-container>
-                <label>Field Options</label>
-                <textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions"></textarea>
-              </clr-textarea-container>
-              
-              <clr-input-container>
-                <label>Sort Order</label>
-                <input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
-              </clr-input-container>
-              
-              <clr-checkbox-container>
-                <label>Is Required</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
-                  <label>Required</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <clr-checkbox-container>
-                <label>Show in UI</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
-                  <label>Show in UI</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="createDynamicField()" [disabled]="!newDynamicField.fieldName">Save</button>
-                <button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
-              </div>
-            </form>
-          </div>
-          
-          <!-- Dynamic Fields Table -->
-          <div class="card-block">
-            <clr-datagrid>
-              <clr-dg-column>Field Name</clr-dg-column>
-              <clr-dg-column>Field Label</clr-dg-column>
-              <clr-dg-column>Field Type</clr-dg-column>
-              <clr-dg-column>Required</clr-dg-column>
-              <clr-dg-column>Show in UI</clr-dg-column>
-              <clr-dg-column>Sort Order</clr-dg-column>
-              <clr-dg-column>Actions</clr-dg-column>
-              
-              <clr-dg-row *clrDgItems="let field of dynamicFields" [clrDgItem]="field">
-                <clr-dg-cell>{{field.fieldName}}</clr-dg-cell>
-                <clr-dg-cell>{{field.fieldLabel}}</clr-dg-cell>
-                <clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
-                <clr-dg-cell>
-                  <span class="label" [class.label-success]="field.isRequired" [class.label-danger]="!field.isRequired">
-                    {{field.isRequired ? 'Yes' : 'No'}}
-                  </span>
-                </clr-dg-cell>
-                <clr-dg-cell>
-                  <span class="label" [class.label-success]="field.showInUi" [class.label-danger]="!field.showInUi">
-                    {{field.showInUi ? 'Yes' : 'No'}}
-                  </span>
-                </clr-dg-cell>
-                <clr-dg-cell>{{field.sortOrder}}</clr-dg-cell>
-                <clr-dg-cell>
-                  <button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)">
-                    <cds-icon shape="pencil"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)">
-                    <cds-icon shape="trash"></cds-icon>
-                  </button>
-                </clr-dg-cell>
-              </clr-dg-row>
-              
-              <clr-dg-footer>
-                {{dynamicFields.length}} fields
-              </clr-dg-footer>
-            </clr-datagrid>
-          </div>
-          
-          <!-- Edit Dynamic Field Form -->
-          <div class="card-block" *ngIf="selectedDynamicField">
-            <h4>Edit Dynamic Field</h4>
-            <form clrForm>
-              <clr-input-container>
-                <label>Field Name</label>
-                <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Field Label</label>
-                <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
-              </clr-input-container>
-              
-              <clr-input-container>
-                <label>Field Type</label>
-                <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
-              </clr-input-container>
-              
-              <clr-textarea-container>
-                <label>Field Options</label>
-                <textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions"></textarea>
-              </clr-textarea-container>
-              
-              <clr-input-container>
-                <label>Sort Order</label>
-                <input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
-              </clr-input-container>
-              
-              <clr-checkbox-container>
-                <label>Is Required</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
-                  <label>Required</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <clr-checkbox-container>
-                <label>Show in UI</label>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
-                  <label>Show in UI</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-              
-              <div class="form-actions">
-                <button class="btn btn-primary" (click)="updateDynamicField()" [disabled]="!selectedDynamicField.fieldName">Update</button>
-                <button class="btn" (click)="selectedDynamicField = null">Cancel</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </clr-tab-content>
-    </clr-tab>
-  </clr-tabs>
-</div>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.scss
deleted file mode 100644
index 8e7895c..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.chart-config-manager {
-  padding: 20px;
-  
-  .card {
-    margin-bottom: 20px;
-    
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      
-      h3 {
-        margin: 0;
-      }
-    }
-    
-    .card-block {
-      padding: 15px;
-      
-      form {
-        margin-bottom: 20px;
-      }
-    }
-  }
-  
-  .form-actions {
-    display: flex;
-    gap: 10px;
-    margin-top: 15px;
-  }
-  
-  clr-datagrid {
-    min-height: 200px;
-  }
-  
-  .label {
-    padding: 4px 8px;
-    border-radius: 3px;
-    font-size: 12px;
-    font-weight: bold;
-  }
-  
-  .label-success {
-    background-color: #318700;
-    color: white;
-  }
-  
-  .label-danger {
-    background-color: #e62200;
-    color: white;
-  }
-  
-  .required {
-    color: red;
-  }
-  
-  .alert {
-    margin-bottom: 20px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.ts
deleted file mode 100644
index 8886d71..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config-manager/chart-config-manager.component.ts
+++ /dev/null
@@ -1,658 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { environment } from 'src/environments/environment';
-import { ClrLoadingState } from '@clr/angular';
-
-interface ChartType {
-  id: number;
-  name: string;
-  displayName: string;
-  description: string;
-  isActive: boolean;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface UiComponent {
-  id: number;
-  chartType: ChartType;
-  componentName: string;
-  componentType: string;
-  displayLabel: string;
-  placeholder: string;
-  isRequired: boolean;
-  sortOrder: number;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface ComponentProperty {
-  id: number;
-  component: UiComponent;
-  propertyName: string;
-  propertyValue: string;
-  propertyType: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface ChartTemplate {
-  id: number;
-  chartType: ChartType;
-  templateName: string;
-  templateHtml: string;
-  templateCss: string;
-  isDefault: boolean;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface DynamicField {
-  id: number;
-  chartType: ChartType;
-  fieldName: string;
-  fieldLabel: string;
-  fieldType: string;
-  fieldOptions: string;
-  isRequired: boolean;
-  showInUi: boolean;
-  sortOrder: number;
-  createdAt: string;
-  updatedAt: string;
-}
-
-@Component({
-  selector: 'app-chart-config-manager',
-  templateUrl: './chart-config-manager.component.html',
-  styleUrls: ['./chart-config-manager.component.scss']
-})
-export class ChartConfigManagerComponent implements OnInit {
-  // Chart Types
-  chartTypes: ChartType[] = [];
-  selectedChartType: ChartType | null = null;
-  newChartType: Partial<ChartType> = {};
-  showAddChartTypeForm = false;
-  chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // UI Components
-  uiComponents: UiComponent[] = [];
-  selectedUiComponent: UiComponent | null = null;
-  newUiComponent: Partial<UiComponent> = {};
-  showAddUiComponentForm = false;
-  uiComponentLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Component Properties
-  componentProperties: ComponentProperty[] = [];
-  selectedComponentProperty: ComponentProperty | null = null;
-  newComponentProperty: Partial<ComponentProperty> = {};
-  showAddComponentPropertyForm = false;
-  componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Chart Templates
-  chartTemplates: ChartTemplate[] = [];
-  selectedChartTemplate: ChartTemplate | null = null;
-  newChartTemplate: Partial<ChartTemplate> = {};
-  showAddChartTemplateForm = false;
-  chartTemplateLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Dynamic Fields
-  dynamicFields: DynamicField[] = [];
-  selectedDynamicField: DynamicField | null = null;
-  newDynamicField: Partial<DynamicField> = {};
-  showAddDynamicFieldForm = false;
-  dynamicFieldLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Error handling
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  // API base URL
-  private apiUrl = environment.apiUrl || 'http://localhost:8080/api';
-
-  constructor(private http: HttpClient) { }
-
-  ngOnInit(): void {
-    this.loadChartTypes();
-  }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  // Chart Type Methods
-  loadChartTypes(): void {
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.get<ChartType[]>(`${this.apiUrl}/chart-types`).subscribe({
-      next: (data) => {
-        this.chartTypes = data;
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading chart types:', error);
-        this.showError('Error loading chart types: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createChartType(): void {
-    if (!this.newChartType.name) {
-      this.showError('Chart type name is required');
-      return;
-    }
-
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.post<ChartType>(`${this.apiUrl}/chart-types`, this.newChartType).subscribe({
-      next: (data) => {
-        this.chartTypes.push(data);
-        this.newChartType = {};
-        this.showAddChartTypeForm = false;
-        this.showSuccess('Chart type created successfully');
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating chart type:', error);
-        this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateChartType(): void {
-    if (!this.selectedChartType || !this.selectedChartType.name) {
-      this.showError('Chart type name is required');
-      return;
-    }
-
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.put<ChartType>(`${this.apiUrl}/chart-types/${this.selectedChartType.id}`, this.selectedChartType).subscribe({
-      next: (data) => {
-        const index = this.chartTypes.findIndex(ct => ct.id === data.id);
-        if (index !== -1) {
-          this.chartTypes[index] = data;
-        }
-        this.selectedChartType = null;
-        this.showSuccess('Chart type updated successfully');
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating chart type:', error);
-        this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteChartType(id: number): void {
-    if (!confirm('Are you sure you want to delete this chart type?')) {
-      return;
-    }
-
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.delete(`${this.apiUrl}/chart-types/${id}`).subscribe({
-      next: () => {
-        this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
-        // Also clear related data if the deleted chart type was selected
-        if (this.selectedChartType && this.selectedChartType.id === id) {
-          this.selectedChartType = null;
-          this.uiComponents = [];
-          this.chartTemplates = [];
-          this.dynamicFields = [];
-        }
-        this.showSuccess('Chart type deleted successfully');
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting chart type:', error);
-        this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectChartTypeForEdit(chartType: ChartType): void {
-    this.selectedChartType = { ...chartType };
-  }
-
-  // UI Component Methods
-  loadUiComponents(chartTypeId: number): void {
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    this.http.get<UiComponent[]>(`${this.apiUrl}/ui-components/chart-type/${chartTypeId}`).subscribe({
-      next: (data) => {
-        this.uiComponents = data;
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading UI components:', error);
-        this.showError('Error loading UI components: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createUiComponent(): void {
-    if (!this.selectedChartType) {
-      this.showError('Please select a chart type first');
-      return;
-    }
-
-    if (!this.newUiComponent.componentName) {
-      this.showError('Component name is required');
-      return;
-    }
-
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    const uiComponentData = {
-      ...this.newUiComponent,
-      chartType: { id: this.selectedChartType.id }
-    };
-
-    this.http.post<UiComponent>(`${this.apiUrl}/ui-components`, uiComponentData).subscribe({
-      next: (data) => {
-        this.uiComponents.push(data);
-        this.newUiComponent = {};
-        this.showAddUiComponentForm = false;
-        this.showSuccess('UI component created successfully');
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating UI component:', error);
-        this.showError('Error creating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateUiComponent(): void {
-    if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) {
-      this.showError('Component name is required');
-      return;
-    }
-
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    this.http.put<UiComponent>(`${this.apiUrl}/ui-components/${this.selectedUiComponent.id}`, this.selectedUiComponent).subscribe({
-      next: (data) => {
-        const index = this.uiComponents.findIndex(uc => uc.id === data.id);
-        if (index !== -1) {
-          this.uiComponents[index] = data;
-        }
-        this.selectedUiComponent = null;
-        this.showSuccess('UI component updated successfully');
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating UI component:', error);
-        this.showError('Error updating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteUiComponent(id: number): void {
-    if (!confirm('Are you sure you want to delete this UI component?')) {
-      return;
-    }
-
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    this.http.delete(`${this.apiUrl}/ui-components/${id}`).subscribe({
-      next: () => {
-        this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
-        if (this.selectedUiComponent && this.selectedUiComponent.id === id) {
-          this.selectedUiComponent = null;
-        }
-        this.showSuccess('UI component deleted successfully');
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting UI component:', error);
-        this.showError('Error deleting UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectUiComponentForEdit(uiComponent: UiComponent): void {
-    this.selectedUiComponent = { ...uiComponent };
-  }
-
-  // Component Property Methods
-  loadComponentProperties(componentId: number): void {
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.http.get<ComponentProperty[]>(`${this.apiUrl}/component-properties/component/${componentId}`).subscribe({
-      next: (data) => {
-        this.componentProperties = data;
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading component properties:', error);
-        this.showError('Error loading component properties: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createComponentProperty(): void {
-    if (!this.selectedUiComponent) {
-      this.showError('Please select a UI component first');
-      return;
-    }
-
-    if (!this.newComponentProperty.propertyName) {
-      this.showError('Property name is required');
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    const componentPropertyData = {
-      ...this.newComponentProperty,
-      component: { id: this.selectedUiComponent.id }
-    };
-
-    this.http.post<ComponentProperty>(`${this.apiUrl}/component-properties`, componentPropertyData).subscribe({
-      next: (data) => {
-        this.componentProperties.push(data);
-        this.newComponentProperty = {};
-        this.showAddComponentPropertyForm = false;
-        this.showSuccess('Component property created successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating component property:', error);
-        this.showError('Error creating component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateComponentProperty(): void {
-    if (!this.selectedComponentProperty || !this.selectedComponentProperty.propertyName) {
-      this.showError('Property name is required');
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.http.put<ComponentProperty>(`${this.apiUrl}/component-properties/${this.selectedComponentProperty.id}`, this.selectedComponentProperty).subscribe({
-      next: (data) => {
-        const index = this.componentProperties.findIndex(cp => cp.id === data.id);
-        if (index !== -1) {
-          this.componentProperties[index] = data;
-        }
-        this.selectedComponentProperty = null;
-        this.showSuccess('Component property updated successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating component property:', error);
-        this.showError('Error updating component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteComponentProperty(id: number): void {
-    if (!confirm('Are you sure you want to delete this component property?')) {
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.http.delete(`${this.apiUrl}/component-properties/${id}`).subscribe({
-      next: () => {
-        this.componentProperties = this.componentProperties.filter(cp => cp.id !== id);
-        if (this.selectedComponentProperty && this.selectedComponentProperty.id === id) {
-          this.selectedComponentProperty = null;
-        }
-        this.showSuccess('Component property deleted successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting component property:', error);
-        this.showError('Error deleting component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectComponentPropertyForEdit(componentProperty: ComponentProperty): void {
-    this.selectedComponentProperty = { ...componentProperty };
-  }
-
-  // Chart Template Methods
-  loadChartTemplates(chartTypeId: number): void {
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    this.http.get<ChartTemplate[]>(`${this.apiUrl}/chart-templates/chart-type/${chartTypeId}`).subscribe({
-      next: (data) => {
-        this.chartTemplates = data;
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading chart templates:', error);
-        this.showError('Error loading chart templates: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createChartTemplate(): void {
-    if (!this.selectedChartType) {
-      this.showError('Please select a chart type first');
-      return;
-    }
-
-    if (!this.newChartTemplate.templateName) {
-      this.showError('Template name is required');
-      return;
-    }
-
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    const chartTemplateData = {
-      ...this.newChartTemplate,
-      chartType: { id: this.selectedChartType.id }
-    };
-
-    this.http.post<ChartTemplate>(`${this.apiUrl}/chart-templates`, chartTemplateData).subscribe({
-      next: (data) => {
-        this.chartTemplates.push(data);
-        this.newChartTemplate = {};
-        this.showAddChartTemplateForm = false;
-        this.showSuccess('Chart template created successfully');
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating chart template:', error);
-        this.showError('Error creating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateChartTemplate(): void {
-    if (!this.selectedChartTemplate || !this.selectedChartTemplate.templateName) {
-      this.showError('Template name is required');
-      return;
-    }
-
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    this.http.put<ChartTemplate>(`${this.apiUrl}/chart-templates/${this.selectedChartTemplate.id}`, this.selectedChartTemplate).subscribe({
-      next: (data) => {
-        const index = this.chartTemplates.findIndex(ct => ct.id === data.id);
-        if (index !== -1) {
-          this.chartTemplates[index] = data;
-        }
-        this.selectedChartTemplate = null;
-        this.showSuccess('Chart template updated successfully');
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating chart template:', error);
-        this.showError('Error updating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteChartTemplate(id: number): void {
-    if (!confirm('Are you sure you want to delete this chart template?')) {
-      return;
-    }
-
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    this.http.delete(`${this.apiUrl}/chart-templates/${id}`).subscribe({
-      next: () => {
-        this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
-        if (this.selectedChartTemplate && this.selectedChartTemplate.id === id) {
-          this.selectedChartTemplate = null;
-        }
-        this.showSuccess('Chart template deleted successfully');
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting chart template:', error);
-        this.showError('Error deleting chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectChartTemplateForEdit(chartTemplate: ChartTemplate): void {
-    this.selectedChartTemplate = { ...chartTemplate };
-  }
-
-  // Dynamic Field Methods
-  loadDynamicFields(chartTypeId: number): void {
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    this.http.get<DynamicField[]>(`${this.apiUrl}/dynamic-fields/chart-type/${chartTypeId}`).subscribe({
-      next: (data) => {
-        this.dynamicFields = data;
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading dynamic fields:', error);
-        this.showError('Error loading dynamic fields: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createDynamicField(): void {
-    if (!this.selectedChartType) {
-      this.showError('Please select a chart type first');
-      return;
-    }
-
-    if (!this.newDynamicField.fieldName) {
-      this.showError('Field name is required');
-      return;
-    }
-
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    const dynamicFieldData = {
-      ...this.newDynamicField,
-      chartType: { id: this.selectedChartType.id }
-    };
-
-    this.http.post<DynamicField>(`${this.apiUrl}/dynamic-fields`, dynamicFieldData).subscribe({
-      next: (data) => {
-        this.dynamicFields.push(data);
-        this.newDynamicField = {};
-        this.showAddDynamicFieldForm = false;
-        this.showSuccess('Dynamic field created successfully');
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating dynamic field:', error);
-        this.showError('Error creating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateDynamicField(): void {
-    if (!this.selectedDynamicField || !this.selectedDynamicField.fieldName) {
-      this.showError('Field name is required');
-      return;
-    }
-
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    this.http.put<DynamicField>(`${this.apiUrl}/dynamic-fields/${this.selectedDynamicField.id}`, this.selectedDynamicField).subscribe({
-      next: (data) => {
-        const index = this.dynamicFields.findIndex(df => df.id === data.id);
-        if (index !== -1) {
-          this.dynamicFields[index] = data;
-        }
-        this.selectedDynamicField = null;
-        this.showSuccess('Dynamic field updated successfully');
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating dynamic field:', error);
-        this.showError('Error updating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteDynamicField(id: number): void {
-    if (!confirm('Are you sure you want to delete this dynamic field?')) {
-      return;
-    }
-
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    this.http.delete(`${this.apiUrl}/dynamic-fields/${id}`).subscribe({
-      next: () => {
-        this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
-        if (this.selectedDynamicField && this.selectedDynamicField.id === id) {
-          this.selectedDynamicField = null;
-        }
-        this.showSuccess('Dynamic field deleted successfully');
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting dynamic field:', error);
-        this.showError('Error deleting dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectDynamicFieldForEdit(dynamicField: DynamicField): void {
-    this.selectedDynamicField = { ...dynamicField };
-  }
-
-  // Helper methods
-  onChartTypeSelect(chartType: ChartType): void {
-    this.selectedChartType = chartType;
-    this.loadUiComponents(chartType.id);
-    this.loadChartTemplates(chartType.id);
-    this.loadDynamicFields(chartType.id);
-  }
-
-  resetForms(): void {
-    this.newChartType = {};
-    this.newUiComponent = {};
-    this.newComponentProperty = {};
-    this.newChartTemplate = {};
-    this.newDynamicField = {};
-    this.showAddChartTypeForm = false;
-    this.showAddUiComponentForm = false;
-    this.showAddComponentPropertyForm = false;
-    this.showAddChartTemplateForm = false;
-    this.showAddDynamicFieldForm = false;
-    this.selectedChartType = null;
-    this.selectedUiComponent = null;
-    this.selectedComponentProperty = null;
-    this.selectedChartTemplate = null;
-    this.selectedDynamicField = null;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html
deleted file mode 100644
index f27393a..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.html
+++ /dev/null
@@ -1,495 +0,0 @@
-<div class="chart-config-manager">
-  <h2>Chart Configuration Manager</h2>
-  
-  <!-- Test message to verify component is loading -->
-  <div class="alert alert-info">
-    <div class="alert-item">
-      <span class="alert-text">Chart Config Manager Component Loaded Successfully</span>
-    </div>
-  </div>
-  
-  <!-- Error and Success Messages -->
-  <div class="alert alert-danger" *ngIf="errorMessage">
-    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ errorMessage }}</span>
-    </div>
-  </div>
-  
-  <div class="alert alert-success" *ngIf="successMessage">
-    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ successMessage }}</span>
-    </div>
-  </div>
-  
-  <!-- Chart Types Section -->
-  <clr-tab>
-    <button clrTabLink>Chart Types</button>
-    <clr-tab-content>
-      <div class="card">
-        <div class="card-header">
-          <h3>Chart Types</h3>
-          <button class="btn btn-sm btn-primary" (click)="showAddChartTypeForm = true">
-            <cds-icon shape="plus"></cds-icon> Add Chart Type
-          </button>
-        </div>
-        
-        <!-- Add Chart Type Form -->
-        <div class="card-block" *ngIf="showAddChartTypeForm">
-          <app-chart-type-form 
-            [chartType]="newChartType" 
-            (save)="createChartType()" 
-            (cancel)="showAddChartTypeForm = false">
-          </app-chart-type-form>
-        </div>
-        
-        <!-- Chart Types Table -->
-        <div class="card-block">
-          <clr-datagrid [clrDgLoading]="chartTypeLoadingState === ClrLoadingState.LOADING">
-            <clr-dg-column>Name</clr-dg-column>
-            <clr-dg-column>Display Name</clr-dg-column>
-            <clr-dg-column>Description</clr-dg-column>
-            <clr-dg-column>Status</clr-dg-column>
-            <clr-dg-column>Created At</clr-dg-column>
-            <clr-dg-column>Updated At</clr-dg-column>
-            <clr-dg-column>Actions</clr-dg-column>
-            
-            <clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
-              <clr-dg-cell>{{chartType.name}}</clr-dg-cell>
-              <clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
-              <clr-dg-cell>{{chartType.description}}</clr-dg-cell>
-              <clr-dg-cell>
-                <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
-                  {{chartType.isActive ? 'Active' : 'Inactive'}}
-                </span>
-              </clr-dg-cell>
-              <clr-dg-cell>{{chartType.createdAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>{{chartType.updatedAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>
-                <button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)" title="Edit" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
-                  <clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                  <cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
-                </button>
-                <button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
-                  <clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                  <cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
-                </button>
-                <button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)" title="View Details" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
-                  <clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                  <cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="eye"></cds-icon>
-                </button>
-              </clr-dg-cell>
-            </clr-dg-row>
-            
-            <clr-dg-footer>
-              {{chartTypes.length}} chart type(s)
-            </clr-dg-footer>
-          </clr-datagrid>
-        </div>
-        
-        <!-- Edit Chart Type Form -->
-        <div class="card-block" *ngIf="selectedChartType">
-          <h4>Edit Chart Type</h4>
-          <app-chart-type-form 
-            [chartType]="selectedChartType" 
-            [isEdit]="true"
-            (save)="updateChartType()" 
-            (cancel)="selectedChartType = null">
-          </app-chart-type-form>
-        </div>
-      </div>
-    </clr-tab-content>
-  </clr-tab>
-  
-  <!-- UI Components Section -->
-  <clr-tab *ngIf="selectedChartType">
-    <button clrTabLink>UI Components</button>
-    <clr-tab-content>
-      <div class="card">
-        <div class="card-header">
-          <h3>UI Components for {{selectedChartType?.name}}</h3>
-          <button class="btn btn-sm btn-primary" (click)="showAddUiComponentForm = true">
-            <cds-icon shape="plus"></cds-icon> Add UI Component
-          </button>
-        </div>
-        
-        <!-- Add UI Component Form -->
-        <div class="card-block" *ngIf="showAddUiComponentForm">
-          <app-ui-component-form 
-            [uiComponent]="newUiComponent" 
-            (save)="createUiComponent()" 
-            (cancel)="showAddUiComponentForm = false">
-          </app-ui-component-form>
-        </div>
-        
-        <!-- UI Components Table -->
-        <div class="card-block">
-          <clr-datagrid [clrDgLoading]="uiComponentLoadingState === ClrLoadingState.LOADING">
-            <clr-dg-column>Component Name</clr-dg-column>
-            <clr-dg-column>Component Type</clr-dg-column>
-            <clr-dg-column>Display Label</clr-dg-column>
-            <clr-dg-column>Required</clr-dg-column>
-            <clr-dg-column>Actions</clr-dg-column>
-            
-            <clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
-              <clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
-              <clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
-              <clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
-              <clr-dg-cell>
-                <span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
-                  {{uiComponent.isRequired ? 'Yes' : 'No'}}
-                </span>
-              </clr-dg-cell>
-              <clr-dg-cell class="action-cell">
-                <div class="action-buttons">
-                  <button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
-                    <clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                    <cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
-                    <clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                    <cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
-                  </button>
-                  <button class="btn btn-sm btn-icon" (click)="onUiComponentSelect(uiComponent)" title="View Properties" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
-                    <clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                    <cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="eye" aria-label="View Properties"></cds-icon>
-                  </button>
-                </div>
-              </clr-dg-cell>
-            </clr-dg-row>
-            
-            <clr-dg-footer>
-              {{uiComponents.length}} UI component(s)
-            </clr-dg-footer>
-          </clr-datagrid>
-        </div>
-        
-        <!-- Edit UI Component Form -->
-        <div class="card-block" *ngIf="selectedUiComponent">
-          <h4>Edit UI Component</h4>
-          <app-ui-component-form 
-            [uiComponent]="selectedUiComponent" 
-            [isEdit]="true"
-            (save)="updateUiComponent()" 
-            (cancel)="selectedUiComponent = null">
-          </app-ui-component-form>
-        </div>
-      </div>
-    </clr-tab-content>
-  </clr-tab>
-  
-  <!-- Component Properties Section -->
-  <clr-tab *ngIf="selectedUiComponent">
-    <button clrTabLink>Component Properties</button>
-    <clr-tab-content>
-      <div class="card">
-        <div class="card-header">
-          <h3>Properties for {{selectedUiComponent?.componentName}}</h3>
-          <button class="btn btn-sm btn-primary" (click)="showAddComponentPropertyForm = true">
-            <cds-icon shape="plus"></cds-icon> Add Property
-          </button>
-        </div>
-        
-        <!-- Add Component Property Form -->
-        <div class="card-block" *ngIf="showAddComponentPropertyForm">
-          <app-component-property-form 
-            [componentProperty]="newComponentProperty" 
-            (save)="createComponentProperty()" 
-            (cancel)="showAddComponentPropertyForm = false">
-          </app-component-property-form>
-        </div>
-        
-        <!-- Component Properties Table -->
-        <div class="card-block">
-          <clr-datagrid [clrDgLoading]="componentPropertyLoadingState === ClrLoadingState.LOADING">
-            <clr-dg-column>Property Name</clr-dg-column>
-            <clr-dg-column>Property Value</clr-dg-column>
-            <clr-dg-column>Property Type</clr-dg-column>
-            <clr-dg-column>Created At</clr-dg-column>
-            <clr-dg-column>Updated At</clr-dg-column>
-            <clr-dg-column>Actions</clr-dg-column>
-            
-            <clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
-              <clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
-              <clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
-              <clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
-              <clr-dg-cell>{{property.createdAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>{{property.updatedAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>
-                <button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
-                  <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                  <cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
-                </button>
-                <button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
-                  <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                  <cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
-                </button>
-              </clr-dg-cell>
-            </clr-dg-row>
-            
-            <clr-dg-footer>
-              {{componentProperties.length}} propertie(s)
-            </clr-dg-footer>
-          </clr-datagrid>
-        </div>
-        
-        <!-- Edit Component Property Form -->
-        <div class="card-block" *ngIf="selectedComponentProperty">
-          <h4>Edit Component Property</h4>
-          <app-component-property-form 
-            [componentProperty]="selectedComponentProperty" 
-            [isEdit]="true"
-            (save)="updateComponentProperty()" 
-            (cancel)="selectedComponentProperty = null">
-          </app-component-property-form>
-        </div>
-      </div>
-    </clr-tab-content>
-  </clr-tab>
-  
-  <!-- Chart Templates Section -->
-  <clr-tab *ngIf="selectedChartType">
-    <button clrTabLink>Chart Templates</button>
-    <clr-tab-content>
-      <div class="card">
-        <div class="card-header">
-          <h3>Templates for {{selectedChartType?.name}}</h3>
-          <button class="btn btn-sm btn-primary" (click)="showAddChartTemplateForm = true">
-            <cds-icon shape="plus"></cds-icon> Add Template
-          </button>
-        </div>
-        
-        <!-- Add Chart Template Form -->
-        <div class="card-block" *ngIf="showAddChartTemplateForm">
-          <app-chart-template-form 
-            [chartTemplate]="newChartTemplate" 
-            (save)="createChartTemplate()" 
-            (cancel)="showAddChartTemplateForm = false">
-          </app-chart-template-form>
-        </div>
-        
-        <!-- Chart Templates Table -->
-        <div class="card-block">
-          <clr-datagrid [clrDgLoading]="chartTemplateLoadingState === ClrLoadingState.LOADING">
-            <clr-dg-column>Template Name</clr-dg-column>
-            <clr-dg-column>Is Default</clr-dg-column>
-            <clr-dg-column>Created At</clr-dg-column>
-            <clr-dg-column>Updated At</clr-dg-column>
-            <clr-dg-column>Actions</clr-dg-column>
-            
-            <clr-dg-row *clrDgItems="let template of chartTemplates" [clrDgItem]="template">
-              <clr-dg-cell>{{template.templateName}}</clr-dg-cell>
-              <clr-dg-cell>
-                <span class="label" [class.label-success]="template.isDefault" [class.label-danger]="!template.isDefault">
-                  {{template.isDefault ? 'Yes' : 'No'}}
-                </span>
-              </clr-dg-cell>
-              <clr-dg-cell>{{template.createdAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>{{template.updatedAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>
-                <button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)" title="Edit" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
-                  <clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                  <cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
-                </button>
-                <button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)" title="Delete" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
-                  <clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                  <cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
-                </button>
-              </clr-dg-cell>
-            </clr-dg-row>
-            
-            <clr-dg-footer>
-              {{chartTemplates.length}} template(s)
-            </clr-dg-footer>
-          </clr-datagrid>
-        </div>
-        
-        <!-- Edit Chart Template Form -->
-        <div class="card-block" *ngIf="selectedChartTemplate">
-          <h4>Edit Chart Template</h4>
-          <app-chart-template-form 
-            [chartTemplate]="selectedChartTemplate" 
-            [isEdit]="true"
-            (save)="updateChartTemplate()" 
-            (cancel)="selectedChartTemplate = null">
-          </app-chart-template-form>
-        </div>
-      </div>
-    </clr-tab-content>
-  </clr-tab>
-  
-  <!-- Dynamic Fields Section -->
-  <clr-tab *ngIf="selectedChartType">
-    <button clrTabLink>Dynamic Fields</button>
-    <clr-tab-content>
-      <div class="card">
-        <div class="card-header">
-          <h3>Dynamic Fields for {{selectedChartType?.name}}</h3>
-          <button class="btn btn-sm btn-primary" (click)="showAddDynamicFieldForm = true">
-            <cds-icon shape="plus"></cds-icon> Add Field
-          </button>
-        </div>
-        
-        <!-- Add Dynamic Field Form -->
-        <div class="card-block" *ngIf="showAddDynamicFieldForm">
-          <form clrForm>
-            <clr-input-container>
-              <label>Field Name <span class="required">*</span></label>
-              <input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
-            </clr-input-container>
-            
-            <clr-input-container>
-              <label>Field Label</label>
-              <input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
-            </clr-input-container>
-            
-            <clr-input-container>
-              <label>Field Type</label>
-              <input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
-            </clr-input-container>
-            
-            <clr-textarea-container>
-              <label>Field Options</label>
-              <textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions"></textarea>
-            </clr-textarea-container>
-            
-            <clr-input-container>
-              <label>Sort Order</label>
-              <input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
-            </clr-input-container>
-            
-            <clr-checkbox-container>
-              <label>Is Required</label>
-              <clr-checkbox-wrapper>
-                <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
-                <label>Required</label>
-              </clr-checkbox-wrapper>
-            </clr-checkbox-container>
-            
-            <clr-checkbox-container>
-              <label>Show in UI</label>
-              <clr-checkbox-wrapper>
-                <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
-                <label>Show in UI</label>
-              </clr-checkbox-wrapper>
-            </clr-checkbox-container>
-            
-            <div class="form-actions">
-              <button class="btn btn-primary" (click)="createDynamicField()" [disabled]="!newDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
-                <clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                Save
-              </button>
-              <button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
-            </div>
-          </form>
-        </div>
-        
-        <!-- Dynamic Fields Table -->
-        <div class="card-block">
-          <clr-datagrid [clrDgLoading]="dynamicFieldLoadingState === ClrLoadingState.LOADING">
-            <clr-dg-column>Field Name</clr-dg-column>
-            <clr-dg-column>Field Label</clr-dg-column>
-            <clr-dg-column>Field Type</clr-dg-column>
-            <clr-dg-column>Required</clr-dg-column>
-            <clr-dg-column>Show in UI</clr-dg-column>
-            <clr-dg-column>Sort Order</clr-dg-column>
-            <clr-dg-column>Created At</clr-dg-column>
-            <clr-dg-column>Updated At</clr-dg-column>
-            <clr-dg-column>Actions</clr-dg-column>
-            
-            <clr-dg-row *clrDgItems="let field of dynamicFields" [clrDgItem]="field">
-              <clr-dg-cell>{{field.fieldName}}</clr-dg-cell>
-              <clr-dg-cell>{{field.fieldLabel}}</clr-dg-cell>
-              <clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
-              <clr-dg-cell>
-                <span class="label" [class.label-success]="field.isRequired" [class.label-danger]="!field.isRequired">
-                  {{field.isRequired ? 'Yes' : 'No'}}
-                </span>
-              </clr-dg-cell>
-              <clr-dg-cell>
-                <span class="label" [class.label-success]="field.showInUi" [class.label-danger]="!field.showInUi">
-                  {{field.showInUi ? 'Yes' : 'No'}}
-                </span>
-              </clr-dg-cell>
-              <clr-dg-cell>{{field.sortOrder}}</clr-dg-cell>
-              <clr-dg-cell>{{field.createdAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>{{field.updatedAt | date:'short'}}</clr-dg-cell>
-              <clr-dg-cell>
-                <button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)" title="Edit">
-                  <cds-icon shape="pencil"></cds-icon>
-                </button>
-                <button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)" title="Delete">
-                  <cds-icon shape="trash"></cds-icon>
-                </button>
-              </clr-dg-cell>
-            </clr-dg-row>
-            
-            <clr-dg-footer>
-              {{dynamicFields.length}} field(s)
-            </clr-dg-footer>
-          </clr-datagrid>
-        </div>
-        
-        <!-- Edit Dynamic Field Form -->
-        <div class="card-block" *ngIf="selectedDynamicField">
-          <h4>Edit Dynamic Field</h4>
-          <form clrForm>
-            <clr-input-container>
-              <label>Field Name <span class="required">*</span></label>
-              <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
-            </clr-input-container>
-            
-            <clr-input-container>
-              <label>Field Label</label>
-              <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
-            </clr-input-container>
-            
-            <clr-input-container>
-              <label>Field Type</label>
-              <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
-            </clr-input-container>
-            
-            <clr-textarea-container>
-              <label>Field Options</label>
-              <textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions"></textarea>
-            </clr-textarea-container>
-            
-            <clr-input-container>
-              <label>Sort Order</label>
-              <input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
-            </clr-input-container>
-            
-            <clr-checkbox-container>
-              <label>Is Required</label>
-              <clr-checkbox-wrapper>
-                <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
-                <label>Required</label>
-              </clr-checkbox-wrapper>
-            </clr-checkbox-container>
-            
-            <clr-checkbox-container>
-              <label>Show in UI</label>
-              <clr-checkbox-wrapper>
-                <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
-                <label>Show in UI</label>
-              </clr-checkbox-wrapper>
-            </clr-checkbox-container>
-            
-            <div class="form-actions">
-              <button class="btn btn-primary" (click)="updateDynamicField()" [disabled]="!selectedDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
-                <clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                Update
-              </button>
-              <button class="btn" (click)="selectedDynamicField = null">Cancel</button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </clr-tab-content>
-  </clr-tab>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss
deleted file mode 100644
index 9a9198b..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-.chart-config-manager {
-  padding: 20px;
-  
-  .card {
-    margin-bottom: 20px;
-    
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      
-      h3 {
-        margin: 0;
-      }
-    }
-    
-    .card-block {
-      padding: 15px;
-      
-      form {
-        margin-bottom: 20px;
-      }
-    }
-  }
-  
-  .form-actions {
-    display: flex;
-    gap: 10px;
-    margin-top: 15px;
-  }
-  
-  clr-datagrid {
-    min-height: 200px;
-  }
-  
-  .label {
-    padding: 4px 8px;
-    border-radius: 3px;
-    font-size: 12px;
-    font-weight: bold;
-  }
-  
-  .label-success {
-    background-color: #318700;
-    color: white;
-  }
-  
-  .label-danger {
-    background-color: #e62200;
-    color: white;
-  }
-  
-  .required {
-    color: red;
-  }
-  
-  .alert {
-    margin-bottom: 20px;
-  }
-  
-  clr-tab-content {
-    padding: 15px 0;
-  }
-}
-
-.action-cell {
-  min-width: 120px;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 5px;
-  flex-wrap: nowrap;
-  align-items: center;
-}
-
-.action-buttons .btn-icon {
-  min-width: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// Ensure icons are visible
-cds-icon {
-  display: inline-block !important;
-}
-
-clr-spinner {
-  margin: 0;
-}cds-icon {
-  display: inline-block !important;
-}
-
-clr-spinner {
-  margin: 0;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts
deleted file mode 100644
index df35f13..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-config-manager.component.ts
+++ /dev/null
@@ -1,710 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ClrLoadingState } from '@clr/angular';
-import { ChartTypeService } from '../chart-type-manager/chart-type.service';
-import { UiComponentService } from './ui-component.service';
-import { ComponentPropertyService } from './component-property.service';
-import { ChartTemplateService } from './chart-template.service';
-import { DynamicFieldService } from './dynamic-field.service';
-
-export interface ChartType {
-  id: number;
-  name: string;
-  displayName: string;
-  description: string;
-  isActive: boolean;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface UiComponent {
-  id: number;
-  chartType: ChartType;
-  componentName: string;
-  componentType: string;
-  displayLabel: string;
-  placeholder: string;
-  isRequired: boolean;
-  sortOrder: number;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface ComponentProperty {
-  id: number;
-  component: UiComponent;
-  propertyName: string;
-  propertyValue: string;
-  propertyType: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface ChartTemplate {
-  id: number;
-  chartType: ChartType;
-  templateName: string;
-  templateHtml: string;
-  templateCss: string;
-  isDefault: boolean;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface DynamicField {
-  id: number;
-  chartType: ChartType;
-  fieldName: string;
-  fieldLabel: string;
-  fieldType: string;
-  fieldOptions: string;
-  isRequired: boolean;
-  showInUi: boolean;
-  sortOrder: number;
-  createdAt: string;
-  updatedAt: string;
-}
-
-@Component({
-  selector: 'app-chart-config-manager',
-  templateUrl: './chart-config-manager.component.html',
-  styleUrls: ['./chart-config-manager.component.scss']
-})
-export class ChartConfigManagerComponent implements OnInit {
-  // Chart Types
-  chartTypes: ChartType[] = [];
-  selectedChartType: ChartType | null = null;
-  newChartType: Partial<ChartType> = {};
-  showAddChartTypeForm = false;
-  chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // UI Components
-  uiComponents: UiComponent[] = [];
-  selectedUiComponent: UiComponent | null = null;
-  newUiComponent: Partial<UiComponent> = {};
-  showAddUiComponentForm = false;
-  uiComponentLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Component Properties
-  componentProperties: ComponentProperty[] = [];
-  selectedComponentProperty: ComponentProperty | null = null;
-  newComponentProperty: Partial<ComponentProperty> = {};
-  showAddComponentPropertyForm = false;
-  componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Chart Templates
-  chartTemplates: ChartTemplate[] = [];
-  selectedChartTemplate: ChartTemplate | null = null;
-  newChartTemplate: Partial<ChartTemplate> = {};
-  showAddChartTemplateForm = false;
-  chartTemplateLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Dynamic Fields
-  dynamicFields: DynamicField[] = [];
-  selectedDynamicField: DynamicField | null = null;
-  newDynamicField: Partial<DynamicField> = {};
-  showAddDynamicFieldForm = false;
-  dynamicFieldLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Make ClrLoadingState available to template
-  readonly ClrLoadingState = ClrLoadingState;
-
-  // Error handling
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  constructor(
-    private chartTypeService: ChartTypeService,
-    private uiComponentService: UiComponentService,
-    private componentPropertyService: ComponentPropertyService,
-    private chartTemplateService: ChartTemplateService,
-    private dynamicFieldService: DynamicFieldService
-  ) { }
-
-  ngOnInit(): void {
-    console.log('ChartConfigManagerComponent initialized');
-    this.loadChartTypes();
-  }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  // Chart Type Methods
-  loadChartTypes(): void {
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    console.log('Loading chart types...');
-    this.chartTypeService.getAllChartTypes().subscribe({
-      next: (data) => {
-        console.log('Chart types loaded:', data);
-        this.chartTypes = data;
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading chart types:', error);
-        this.showError('Error loading chart types: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createChartType(): void {
-    if (!this.newChartType.name) {
-      this.showError('Chart type name is required');
-      return;
-    }
-
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.createChartType(this.newChartType).subscribe({
-      next: (data) => {
-        this.chartTypes.push(data);
-        this.newChartType = {};
-        this.showAddChartTypeForm = false;
-        this.showSuccess('Chart type created successfully');
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating chart type:', error);
-        this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateChartType(): void {
-    if (!this.selectedChartType || !this.selectedChartType.name) {
-      this.showError('Chart type name is required');
-      return;
-    }
-
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.updateChartType(this.selectedChartType.id, this.selectedChartType).subscribe({
-      next: (data) => {
-        const index = this.chartTypes.findIndex(ct => ct.id === data.id);
-        if (index !== -1) {
-          this.chartTypes[index] = data;
-        }
-        this.selectedChartType = null;
-        this.showSuccess('Chart type updated successfully');
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating chart type:', error);
-        this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteChartType(id: number): void {
-    if (!confirm('Are you sure you want to delete this chart type? This will also delete all related UI components, templates, and fields.')) {
-      return;
-    }
-
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.deleteChartType(id).subscribe({
-      next: () => {
-        this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
-        // Clear related data if the deleted chart type was selected
-        if (this.selectedChartType && this.selectedChartType.id === id) {
-          this.selectedChartType = null;
-          this.uiComponents = [];
-          this.chartTemplates = [];
-          this.dynamicFields = [];
-        }
-        this.showSuccess('Chart type deleted successfully');
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting chart type:', error);
-        this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectChartTypeForEdit(chartType: ChartType): void {
-    this.selectedChartType = { ...chartType };
-  }
-
-  // UI Component Methods
-  loadUiComponents(chartTypeId: number): void {
-    if (!chartTypeId) {
-      this.uiComponents = [];
-      return;
-    }
-    
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    this.uiComponentService.getUiComponentsByChartType(chartTypeId).subscribe({
-      next: (data) => {
-        this.uiComponents = data;
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading UI components:', error);
-        this.showError('Error loading UI components: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createUiComponent(): void {
-    if (!this.selectedChartType) {
-      this.showError('Please select a chart type first');
-      return;
-    }
-
-    if (!this.newUiComponent.componentName) {
-      this.showError('Component name is required');
-      return;
-    }
-
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    
-    // Create a complete chartType object with only the ID
-    const chartTypeWithId = { 
-      id: this.selectedChartType.id,
-      name: '',
-      displayName: '',
-      description: '',
-      isActive: true,
-      createdAt: '',
-      updatedAt: ''
-    };
-
-    const uiComponentData = {
-      ...this.newUiComponent,
-      chartType: chartTypeWithId
-    };
-
-    this.uiComponentService.createUiComponent(uiComponentData).subscribe({
-      next: (data) => {
-        this.uiComponents.push(data);
-        this.newUiComponent = {};
-        this.showAddUiComponentForm = false;
-        this.showSuccess('UI component created successfully');
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating UI component:', error);
-        this.showError('Error creating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateUiComponent(): void {
-    if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) {
-      this.showError('Component name is required');
-      return;
-    }
-
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    this.uiComponentService.updateUiComponent(this.selectedUiComponent.id, this.selectedUiComponent).subscribe({
-      next: (data) => {
-        const index = this.uiComponents.findIndex(uc => uc.id === data.id);
-        if (index !== -1) {
-          this.uiComponents[index] = data;
-        }
-        this.selectedUiComponent = null;
-        this.showSuccess('UI component updated successfully');
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating UI component:', error);
-        this.showError('Error updating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteUiComponent(id: number): void {
-    if (!confirm('Are you sure you want to delete this UI component?')) {
-      return;
-    }
-
-    this.uiComponentLoadingState = ClrLoadingState.LOADING;
-    this.uiComponentService.deleteUiComponent(id).subscribe({
-      next: () => {
-        this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
-        this.showSuccess('UI component deleted successfully');
-        this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting UI component:', error);
-        this.showError('Error deleting UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.uiComponentLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectUiComponentForEdit(uiComponent: UiComponent): void {
-    this.selectedUiComponent = { ...uiComponent };
-  }
-
-  // Component Property Methods
-  loadComponentProperties(componentId: number): void {
-    if (!componentId) {
-      this.componentProperties = [];
-      return;
-    }
-    
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.componentPropertyService.getComponentPropertiesByComponent(componentId).subscribe({
-      next: (data) => {
-        this.componentProperties = data;
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading component properties:', error);
-        this.showError('Error loading component properties: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createComponentProperty(): void {
-    if (!this.selectedUiComponent) {
-      this.showError('Please select a UI component first');
-      return;
-    }
-
-    if (!this.newComponentProperty.propertyName) {
-      this.showError('Property name is required');
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    
-    // Create a complete component object with only the ID
-    const componentWithId = { 
-      id: this.selectedUiComponent.id
-    } as UiComponent;
-
-    const componentPropertyData = {
-      ...this.newComponentProperty,
-      component: componentWithId
-    };
-
-    this.componentPropertyService.createComponentProperty(componentPropertyData).subscribe({
-      next: (data) => {
-        this.componentProperties.push(data);
-        this.newComponentProperty = {};
-        this.showAddComponentPropertyForm = false;
-        this.showSuccess('Component property created successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating component property:', error);
-        this.showError('Error creating component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateComponentProperty(): void {
-    if (!this.selectedComponentProperty || !this.selectedComponentProperty.propertyName) {
-      this.showError('Property name is required');
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.componentPropertyService.updateComponentProperty(this.selectedComponentProperty.id, this.selectedComponentProperty).subscribe({
-      next: (data) => {
-        const index = this.componentProperties.findIndex(cp => cp.id === data.id);
-        if (index !== -1) {
-          this.componentProperties[index] = data;
-        }
-        this.selectedComponentProperty = null;
-        this.showSuccess('Component property updated successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating component property:', error);
-        this.showError('Error updating component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteComponentProperty(id: number): void {
-    if (!confirm('Are you sure you want to delete this component property?')) {
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.componentPropertyService.deleteComponentProperty(id).subscribe({
-      next: () => {
-        this.componentProperties = this.componentProperties.filter(cp => cp.id !== id);
-        this.showSuccess('Component property deleted successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting component property:', error);
-        this.showError('Error deleting component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectComponentPropertyForEdit(componentProperty: ComponentProperty): void {
-    this.selectedComponentProperty = { ...componentProperty };
-  }
-
-  // Chart Template Methods
-  loadChartTemplates(chartTypeId: number): void {
-    if (!chartTypeId) {
-      this.chartTemplates = [];
-      return;
-    }
-    
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    this.chartTemplateService.getChartTemplatesByChartType(chartTypeId).subscribe({
-      next: (data) => {
-        this.chartTemplates = data;
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading chart templates:', error);
-        this.showError('Error loading chart templates: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createChartTemplate(): void {
-    if (!this.selectedChartType) {
-      this.showError('Please select a chart type first');
-      return;
-    }
-
-    if (!this.newChartTemplate.templateName) {
-      this.showError('Template name is required');
-      return;
-    }
-
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    
-    // Remove the chartType from the template data since we're passing it as a parameter
-    const chartTemplateData = { ...this.newChartTemplate };
-    // Remove chartType property if it exists
-    delete (chartTemplateData as any).chartType;
-
-    this.chartTemplateService.createChartTemplate(chartTemplateData, this.selectedChartType.id).subscribe({
-      next: (data) => {
-        this.chartTemplates.push(data);
-        this.newChartTemplate = {};
-        this.showAddChartTemplateForm = false;
-        this.showSuccess('Chart template created successfully');
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating chart template:', error);
-        this.showError('Error creating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateChartTemplate(): void {
-    if (!this.selectedChartTemplate || !this.selectedChartTemplate.templateName) {
-      this.showError('Template name is required');
-      return;
-    }
-
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    this.chartTemplateService.updateChartTemplate(this.selectedChartTemplate.id, this.selectedChartTemplate).subscribe({
-      next: (data) => {
-        const index = this.chartTemplates.findIndex(ct => ct.id === data.id);
-        if (index !== -1) {
-          this.chartTemplates[index] = data;
-        }
-        this.selectedChartTemplate = null;
-        this.showSuccess('Chart template updated successfully');
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating chart template:', error);
-        this.showError('Error updating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteChartTemplate(id: number): void {
-    if (!confirm('Are you sure you want to delete this chart template?')) {
-      return;
-    }
-
-    this.chartTemplateLoadingState = ClrLoadingState.LOADING;
-    this.chartTemplateService.deleteChartTemplate(id).subscribe({
-      next: () => {
-        this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
-        this.showSuccess('Chart template deleted successfully');
-        this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting chart template:', error);
-        this.showError('Error deleting chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTemplateLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectChartTemplateForEdit(chartTemplate: ChartTemplate): void {
-    this.selectedChartTemplate = { ...chartTemplate };
-  }
-
-  // Dynamic Field Methods
-  loadDynamicFields(chartTypeId: number): void {
-    if (!chartTypeId) {
-      this.dynamicFields = [];
-      return;
-    }
-    
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    this.dynamicFieldService.getDynamicFieldsByChartType(chartTypeId).subscribe({
-      next: (data) => {
-        this.dynamicFields = data;
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading dynamic fields:', error);
-        this.showError('Error loading dynamic fields: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createDynamicField(): void {
-    if (!this.selectedChartType) {
-      this.showError('Please select a chart type first');
-      return;
-    }
-
-    if (!this.newDynamicField.fieldName) {
-      this.showError('Field name is required');
-      return;
-    }
-
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    
-    // Remove the chartType from the dynamic field data since we're passing it as a parameter
-    const dynamicFieldData = { ...this.newDynamicField };
-    // Remove chartType property if it exists
-    delete (dynamicFieldData as any).chartType;
-
-    this.dynamicFieldService.createDynamicField(dynamicFieldData, this.selectedChartType.id).subscribe({
-      next: (data) => {
-        this.dynamicFields.push(data);
-        this.newDynamicField = {};
-        this.showAddDynamicFieldForm = false;
-        this.showSuccess('Dynamic field created successfully');
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating dynamic field:', error);
-        this.showError('Error creating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateDynamicField(): void {
-    if (!this.selectedDynamicField || !this.selectedDynamicField.fieldName) {
-      this.showError('Field name is required');
-      return;
-    }
-
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
-      next: (data) => {
-        const index = this.dynamicFields.findIndex(df => df.id === data.id);
-        if (index !== -1) {
-          this.dynamicFields[index] = data;
-        }
-        this.selectedDynamicField = null;
-        this.showSuccess('Dynamic field updated successfully');
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating dynamic field:', error);
-        this.showError('Error updating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteDynamicField(id: number): void {
-    if (!confirm('Are you sure you want to delete this dynamic field?')) {
-      return;
-    }
-
-    this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
-    this.dynamicFieldService.deleteDynamicField(id).subscribe({
-      next: () => {
-        this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
-        this.showSuccess('Dynamic field deleted successfully');
-        this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting dynamic field:', error);
-        this.showError('Error deleting dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectDynamicFieldForEdit(dynamicField: DynamicField): void {
-    this.selectedDynamicField = { ...dynamicField };
-  }
-
-  // Helper methods
-  onChartTypeSelect(chartType: ChartType): void {
-    this.selectedChartType = chartType;
-    this.loadUiComponents(chartType.id);
-    this.loadChartTemplates(chartType.id);
-    this.loadDynamicFields(chartType.id);
-  }
-
-  onUiComponentSelect(uiComponent: UiComponent): void {
-    this.selectedUiComponent = uiComponent;
-    this.loadComponentProperties(uiComponent.id);
-    // Scroll to the Component Properties tab
-    setTimeout(() => {
-      const element = document.querySelector('clr-tab[ng-reflect-ng-if="true"] button[clr-tab-link]:nth-child(3)');
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      }
-    }, 100);
-  }
-
-  resetForms(): void {
-    this.newChartType = {};
-    this.newUiComponent = {};
-    this.newComponentProperty = {};
-    this.newChartTemplate = {};
-    this.newDynamicField = {};
-    this.showAddChartTypeForm = false;
-    this.showAddUiComponentForm = false;
-    this.showAddComponentPropertyForm = false;
-    this.showAddChartTemplateForm = false;
-    this.showAddDynamicFieldForm = false;
-    this.selectedChartType = null;
-    this.selectedUiComponent = null;
-    this.selectedComponentProperty = null;
-    this.selectedChartTemplate = null;
-    this.selectedDynamicField = null;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-template.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-template.service.ts
deleted file mode 100644
index 9b9d787..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/chart-template.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { ChartTemplate } from './chart-config-manager.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ChartTemplateService {
-  private chartTemplatesUrl = 'api/chart-templates';
-
-  constructor(private apiRequest: ApiRequestService) { }
-
-  // Get all chart templates for a chart type
-  getChartTemplatesByChartType(chartTypeId: number): Observable<ChartTemplate[]> {
-    const url = `${this.chartTemplatesUrl}/chart-type/${chartTypeId}`;
-    return this.apiRequest.get(url);
-  }
-
-  // Get chart template by ID
-  getChartTemplateById(id: number): Observable<ChartTemplate> {
-    const url = `${this.chartTemplatesUrl}/${id}`;
-    return this.apiRequest.get(url);
-  }
-
-  // Create new chart template with optional chart type ID as parameter
-  createChartTemplate(chartTemplate: Partial<ChartTemplate>, chartTypeId?: number): Observable<ChartTemplate> {
-    let url = this.chartTemplatesUrl;
-    if (chartTypeId) {
-      url = `${this.chartTemplatesUrl}?chartTypeId=${chartTypeId}`;
-    }
-    return this.apiRequest.post(url, chartTemplate);
-  }
-
-  // Update chart template
-  updateChartTemplate(id: number, chartTemplate: ChartTemplate): Observable<ChartTemplate> {
-    const url = `${this.chartTemplatesUrl}/${id}`;
-    return this.apiRequest.put(url, chartTemplate);
-  }
-
-  // Delete chart template
-  deleteChartTemplate(id: number): Observable<void> {
-    const url = `${this.chartTemplatesUrl}/${id}`;
-    return this.apiRequest.delete(url);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/component-property.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/component-property.service.ts
deleted file mode 100644
index 72f67af..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/component-property.service.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { ComponentProperty } from './chart-config-manager.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ComponentPropertyService {
-  private componentPropertiesUrl = 'api/component-properties';
-
-  constructor(private apiRequest: ApiRequestService) { }
-
-  // Get all component properties for a component
-  getComponentPropertiesByComponent(componentId: number): Observable<ComponentProperty[]> {
-    const url = `${this.componentPropertiesUrl}/component/${componentId}`;
-    return this.apiRequest.get(url);
-  }
-
-  // Get component property by ID
-  getComponentPropertyById(id: number): Observable<ComponentProperty> {
-    const url = `${this.componentPropertiesUrl}/${id}`;
-    return this.apiRequest.get(url);
-  }
-
-  // Create new component property
-  createComponentProperty(componentProperty: Partial<ComponentProperty>): Observable<ComponentProperty> {
-    return this.apiRequest.post(this.componentPropertiesUrl, componentProperty);
-  }
-
-  // Update component property
-  updateComponentProperty(id: number, componentProperty: ComponentProperty): Observable<ComponentProperty> {
-    const url = `${this.componentPropertiesUrl}/${id}`;
-    return this.apiRequest.put(url, componentProperty);
-  }
-
-  // Delete component property
-  deleteComponentProperty(id: number): Observable<void> {
-    const url = `${this.componentPropertiesUrl}/${id}`;
-    return this.apiRequest.delete(url);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts
deleted file mode 100644
index 62c63c6..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, forkJoin } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { ChartType, UiComponent, ComponentProperty, ChartTemplate, DynamicField } from './chart-config-manager.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DynamicChartLoaderService {
-  private chartTypesUrl = 'api/chart-types';
-  private uiComponentsUrl = 'api/ui-components';
-  private componentPropertiesUrl = 'api/component-properties';
-  private chartTemplatesUrl = 'api/chart-templates';
-  private dynamicFieldsUrl = 'api/dynamic-fields';
-
-  constructor(private apiRequest: ApiRequestService) { }
-
-  /**
-   * Load all chart configurations dynamically
-   * This method fetches all chart types and their associated components, templates, and fields
-   */
-  loadAllChartConfigurations(): Observable<any> {
-    console.log('Loading all chart configurations dynamically');
-
-    // Load all chart types first
-    return this.apiRequest.get(this.chartTypesUrl).pipe(
-      map(chartTypes => {
-        console.log('Loaded chart types:', chartTypes);
-        return chartTypes;
-      })
-    );
-  }
-
-  /**
-   * Load complete configuration for a specific chart type
-   * This includes UI components, templates, and dynamic fields
-   */
-  loadChartConfiguration(chartTypeId: number): Observable<{
-    chartType: ChartType,
-    uiComponents: UiComponent[],
-    templates: ChartTemplate[],
-    dynamicFields: DynamicField[]
-  }> {
-    console.log(`Loading complete configuration for chart type ${chartTypeId}`);
-
-    // Load all related data in parallel
-    return forkJoin({
-      chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
-      uiComponents: this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`),
-      templates: this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`),
-      dynamicFields: this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`)
-    }).pipe(
-      map(result => {
-        console.log(`Loaded complete configuration for chart type ${chartTypeId}:`, result);
-        return result;
-      })
-    );
-  }
-
-  /**
-   * Load chart template for a specific chart type
-   * This is used to render the chart UI dynamically
-   */
-  loadChartTemplate(chartTypeId: number): Observable<ChartTemplate[]> {
-    console.log(`Loading chart templates for chart type ${chartTypeId}`);
-    return this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`);
-  }
-
-  /**
-   * Load UI components for a specific chart type
-   * These define what configuration fields are needed for the chart
-   */
-  loadUiComponents(chartTypeId: number): Observable<UiComponent[]> {
-    console.log(`Loading UI components for chart type ${chartTypeId}`);
-    return this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`);
-  }
-
-  /**
-   * Load dynamic fields for a specific chart type
-   * These define additional dynamic fields that can be used in the chart
-   */
-  loadDynamicFields(chartTypeId: number): Observable<DynamicField[]> {
-    console.log(`Loading dynamic fields for chart type ${chartTypeId}`);
-    return this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`);
-  }
-
-  /**
-   * Get chart type by name
-   * This is useful for finding a chart type by its name rather than ID
-   */
-  // getChartTypeByName(name: string): Observable<ChartType | null> {
-  //   console.log(`Finding chart type by name: ${name}`);
-  //   return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
-  //     map((chartTypes: ChartType[]) => {
-  //       console.log('Available chart types:', chartTypes);
-  //       const chartType = chartTypes.find(ct => ct.name === name);
-  //       console.log(`Found chart type for name ${name}:`, chartType);
-  //       return chartType || null;
-  //     })
-  //   );
-  // }
-
-  getChartTypeByName(name: string): Observable<any> {
-    console.log(`Finding chart type by name: ${name}`);
-    return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
-  }
-
-
-
-  /**
-   * Load all active chart types
-   * This is used to populate the chart selection in the dashboard editor
-   */
-  loadActiveChartTypes(): Observable<ChartType[]> {
-    console.log('Loading active chart types');
-    return this.apiRequest.get(`${this.chartTypesUrl}`).pipe(
-      map((chartTypes: ChartType[]) => {
-        const activeChartTypes = chartTypes.filter(ct => ct.isActive);
-        console.log('Loaded active chart types:', activeChartTypes);
-        return activeChartTypes;
-      })
-    );
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-field.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-field.service.ts
deleted file mode 100644
index f43166f..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-field.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { DynamicField } from './chart-config-manager.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DynamicFieldService {
-  private dynamicFieldsUrl = 'api/dynamic-fields';
-
-  constructor(private apiRequest: ApiRequestService) { }
-
-  // Get all dynamic fields for a chart type
-  getDynamicFieldsByChartType(chartTypeId: number): Observable<DynamicField[]> {
-    const url = `${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`;
-    return this.apiRequest.get(url);
-  }
-
-  // Get dynamic field by ID
-  getDynamicFieldById(id: number): Observable<DynamicField> {
-    const url = `${this.dynamicFieldsUrl}/${id}`;
-    return this.apiRequest.get(url);
-  }
-
-  // Create new dynamic field with optional chart type ID as parameter
-  createDynamicField(dynamicField: Partial<DynamicField>, chartTypeId?: number): Observable<DynamicField> {
-    let url = this.dynamicFieldsUrl;
-    if (chartTypeId) {
-      url = `${this.dynamicFieldsUrl}?chartTypeId=${chartTypeId}`;
-    }
-    return this.apiRequest.post(url, dynamicField);
-  }
-
-  // Update dynamic field
-  updateDynamicField(id: number, dynamicField: DynamicField): Observable<DynamicField> {
-    const url = `${this.dynamicFieldsUrl}/${id}`;
-    return this.apiRequest.put(url, dynamicField);
-  }
-
-  // Delete dynamic field
-  deleteDynamicField(id: number): Observable<void> {
-    const url = `${this.dynamicFieldsUrl}/${id}`;
-    return this.apiRequest.delete(url);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html
deleted file mode 100644
index d7b3c4a..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="chart-template-form">
-  <form clrForm (ngSubmit)="onSubmit()" #chartTemplateForm="ngForm">
-    <clr-input-container>
-      <label>Template Name <span class="required">*</span></label>
-      <input clrInput type="text" [(ngModel)]="chartTemplate.templateName" name="templateName" required />
-    </clr-input-container>
-    
-    <clr-textarea-container>
-      <label>HTML Template</label>
-      <textarea clrTextarea [(ngModel)]="chartTemplate.templateHtml" name="templateHtml" rows="5" placeholder="<div class='chart-container'>...</div>"></textarea>
-    </clr-textarea-container>
-    
-    <clr-textarea-container>
-      <label>CSS Template</label>
-      <textarea clrTextarea [(ngModel)]="chartTemplate.templateCss" name="templateCss" rows="5" placeholder=".chart-container { ... }"></textarea>
-    </clr-textarea-container>
-    
-    <clr-checkbox-container>
-      <label>Is Default</label>
-      <clr-checkbox-wrapper>
-        <input type="checkbox" clrCheckbox [(ngModel)]="chartTemplate.isDefault" name="isDefault" />
-        <label>Default Template</label>
-      </clr-checkbox-wrapper>
-    </clr-checkbox-container>
-    
-    <div class="form-actions">
-      <button class="btn btn-primary" type="submit" [disabled]="!chartTemplate.templateName">
-        {{ isEdit ? 'Update' : 'Save' }}
-      </button>
-      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
-    </div>
-  </form>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss
deleted file mode 100644
index d58ef48..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.chart-template-form {
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.form-actions {
-  margin-top: 20px;
-  display: flex;
-  gap: 10px;
-}
-
-textarea {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts
deleted file mode 100644
index b488f33..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ChartTemplate } from '../chart-config-manager.component';
-
-@Component({
-  selector: 'app-chart-template-form',
-  templateUrl: './chart-template-form.component.html',
-  styleUrls: ['./chart-template-form.component.scss']
-})
-export class ChartTemplateFormComponent {
-  @Input() chartTemplate: Partial<ChartTemplate> = {};
-  @Input() isEdit = false;
-  @Output() save = new EventEmitter<Partial<ChartTemplate>>();
-  @Output() cancel = new EventEmitter<void>();
-
-  onSubmit(): void {
-    this.save.emit(this.chartTemplate);
-  }
-
-  onCancel(): void {
-    this.cancel.emit();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html
deleted file mode 100644
index cad41f7..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="chart-type-form">
-  <form clrForm (ngSubmit)="onSubmit()" #chartTypeForm="ngForm">
-    <clr-input-container>
-      <label>Name <span class="required">*</span></label>
-      <input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
-    </clr-input-container>
-    
-    <clr-input-container>
-      <label>Display Name</label>
-      <input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
-    </clr-input-container>
-    
-    <clr-textarea-container>
-      <label>Description</label>
-      <textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
-    </clr-textarea-container>
-    
-    <clr-checkbox-container>
-      <label>Is Active</label>
-      <clr-checkbox-wrapper>
-        <input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
-        <label>Active</label>
-      </clr-checkbox-wrapper>
-    </clr-checkbox-container>
-    
-    <div class="form-actions">
-      <button class="btn btn-primary" type="submit" [disabled]="!chartType.name">
-        {{ isEdit ? 'Update' : 'Save' }}
-      </button>
-      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
-    </div>
-  </form>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss
deleted file mode 100644
index 2262bef..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.chart-type-form {
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.form-actions {
-  margin-top: 20px;
-  display: flex;
-  gap: 10px;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts
deleted file mode 100644
index 9873aba..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ChartType } from '../chart-config-manager.component';
-
-@Component({
-  selector: 'app-chart-type-form',
-  templateUrl: './chart-type-form.component.html',
-  styleUrls: ['./chart-type-form.component.scss']
-})
-export class ChartTypeFormComponent {
-  @Input() chartType: Partial<ChartType> = {};
-  @Input() isEdit = false;
-  @Output() save = new EventEmitter<Partial<ChartType>>();
-  @Output() cancel = new EventEmitter<void>();
-
-  onSubmit(): void {
-    this.save.emit(this.chartType);
-  }
-
-  onCancel(): void {
-    this.cancel.emit();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html
deleted file mode 100644
index 28ec0d6..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="component-property-form">
-  <form clrForm (ngSubmit)="onSubmit()" #componentPropertyForm="ngForm">
-    <clr-input-container>
-      <label>Property Name <span class="required">*</span></label>
-      <input clrInput type="text" [(ngModel)]="componentProperty.propertyName" name="propertyName" required />
-    </clr-input-container>
-    
-    <clr-input-container>
-      <label>Property Value</label>
-      <input clrInput type="text" [(ngModel)]="componentProperty.propertyValue" name="propertyValue" />
-    </clr-input-container>
-    
-    <clr-select-container>
-      <label>Property Type</label>
-      <select clrSelect [(ngModel)]="componentProperty.propertyType" name="propertyType">
-        <option value="">Select a type</option>
-        <option *ngFor="let type of propertyTypes" [value]="type">{{ type | titlecase }}</option>
-      </select>
-    </clr-select-container>
-    
-    <div class="form-actions">
-      <button class="btn btn-primary" type="submit" [disabled]="!componentProperty.propertyName">
-        {{ isEdit ? 'Update' : 'Save' }}
-      </button>
-      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
-    </div>
-  </form>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss
deleted file mode 100644
index fa1b5ff..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.component-property-form {
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.form-actions {
-  margin-top: 20px;
-  display: flex;
-  gap: 10px;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts
deleted file mode 100644
index 84e135f..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ComponentProperty } from '../chart-config-manager.component';
-
-@Component({
-  selector: 'app-component-property-form',
-  templateUrl: './component-property-form.component.html',
-  styleUrls: ['./component-property-form.component.scss']
-})
-export class ComponentPropertyFormComponent {
-  @Input() componentProperty: Partial<ComponentProperty> = {};
-  @Input() isEdit = false;
-  @Output() save = new EventEmitter<Partial<ComponentProperty>>();
-  @Output() cancel = new EventEmitter<void>();
-
-  propertyTypes = [
-    'string',
-    'number',
-    'boolean',
-    'array',
-    'object',
-    'function'
-  ];
-
-  onSubmit(): void {
-    this.save.emit(this.componentProperty);
-  }
-
-  onCancel(): void {
-    this.cancel.emit();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html
deleted file mode 100644
index 4601665..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<div class="dynamic-field-form">
-  <form clrForm (ngSubmit)="onSubmit()" #dynamicFieldForm="ngForm">
-    <clr-input-container>
-      <label>Field Name <span class="required">*</span></label>
-      <input clrInput type="text" [(ngModel)]="dynamicField.fieldName" name="fieldName" required />
-    </clr-input-container>
-    
-    <clr-input-container>
-      <label>Field Label</label>
-      <input clrInput type="text" [(ngModel)]="dynamicField.fieldLabel" name="fieldLabel" />
-    </clr-input-container>
-    
-    <clr-select-container>
-      <label>Field Type</label>
-      <select clrSelect [(ngModel)]="dynamicField.fieldType" name="fieldType">
-        <option value="">Select a type</option>
-        <option *ngFor="let type of fieldTypes" [value]="type">{{ type | titlecase }}</option>
-      </select>
-    </clr-select-container>
-    
-    <clr-textarea-container>
-      <label>Field Options (JSON format)</label>
-      <textarea clrTextarea [(ngModel)]="dynamicField.fieldOptions" name="fieldOptions" rows="3" placeholder='{"option1": "Option 1", "option2": "Option 2"}'></textarea>
-    </clr-textarea-container>
-    
-    <clr-input-container>
-      <label>Sort Order</label>
-      <input clrInput type="number" [(ngModel)]="dynamicField.sortOrder" name="fieldSortOrder" />
-    </clr-input-container>
-    
-    <clr-checkbox-container>
-      <label>Is Required</label>
-      <clr-checkbox-wrapper>
-        <input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.isRequired" name="fieldIsRequired" />
-        <label>Required</label>
-      </clr-checkbox-wrapper>
-    </clr-checkbox-container>
-    
-    <clr-checkbox-container>
-      <label>Show in UI</label>
-      <clr-checkbox-wrapper>
-        <input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.showInUi" name="fieldShowInUi" />
-        <label>Show in UI</label>
-      </clr-checkbox-wrapper>
-    </clr-checkbox-container>
-    
-    <div class="form-actions">
-      <button class="btn btn-primary" type="submit" [disabled]="!dynamicField.fieldName">
-        {{ isEdit ? 'Update' : 'Save' }}
-      </button>
-      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
-    </div>
-  </form>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss
deleted file mode 100644
index 7034d94..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.dynamic-field-form {
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.form-actions {
-  margin-top: 20px;
-  display: flex;
-  gap: 10px;
-}
-
-textarea {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts
deleted file mode 100644
index e5b43fe..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { DynamicField } from '../chart-config-manager.component';
-
-@Component({
-  selector: 'app-dynamic-field-form',
-  templateUrl: './dynamic-field-form.component.html',
-  styleUrls: ['./dynamic-field-form.component.scss']
-})
-export class DynamicFieldFormComponent {
-  @Input() dynamicField: Partial<DynamicField> = {};
-  @Input() isEdit = false;
-  @Output() save = new EventEmitter<Partial<DynamicField>>();
-  @Output() cancel = new EventEmitter<void>();
-
-  fieldTypes = [
-    'text',
-    'number',
-    'email',
-    'password',
-    'date',
-    'select',
-    'checkbox',
-    'radio',
-    'textarea'
-  ];
-
-  onSubmit(): void {
-    this.save.emit(this.dynamicField);
-  }
-
-  onCancel(): void {
-    this.cancel.emit();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html
deleted file mode 100644
index fbc9bed..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="ui-component-form">
-  <form clrForm (ngSubmit)="onSubmit()" #uiComponentForm="ngForm">
-    <clr-input-container>
-      <label>Component Name <span class="required">*</span></label>
-      <input clrInput type="text" [(ngModel)]="uiComponent.componentName" name="componentName" required />
-    </clr-input-container>
-    
-    <clr-select-container>
-      <label>Component Type</label>
-      <select clrSelect [(ngModel)]="uiComponent.componentType" name="componentType">
-        <option value="">Select a type</option>
-        <option *ngFor="let type of componentTypes" [value]="type">{{ type | titlecase }}</option>
-      </select>
-    </clr-select-container>
-    
-    <clr-input-container>
-      <label>Display Label</label>
-      <input clrInput type="text" [(ngModel)]="uiComponent.displayLabel" name="displayLabel" />
-    </clr-input-container>
-    
-    <clr-input-container>
-      <label>Placeholder</label>
-      <input clrInput type="text" [(ngModel)]="uiComponent.placeholder" name="placeholder" />
-    </clr-input-container>
-    
-    <clr-input-container>
-      <label>Sort Order</label>
-      <input clrInput type="number" [(ngModel)]="uiComponent.sortOrder" name="sortOrder" />
-    </clr-input-container>
-    
-    <clr-checkbox-container>
-      <label>Is Required</label>
-      <clr-checkbox-wrapper>
-        <input type="checkbox" clrCheckbox [(ngModel)]="uiComponent.isRequired" name="isRequired" />
-        <label>Required</label>
-      </clr-checkbox-wrapper>
-    </clr-checkbox-container>
-    
-    <div class="form-actions">
-      <button class="btn btn-primary" type="submit" [disabled]="!uiComponent.componentName">
-        {{ isEdit ? 'Update' : 'Save' }}
-      </button>
-      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
-    </div>
-  </form>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss
deleted file mode 100644
index 8cad11e..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.ui-component-form {
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.form-actions {
-  margin-top: 20px;
-  display: flex;
-  gap: 10px;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts
deleted file mode 100644
index edf7eff..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { UiComponent } from '../chart-config-manager.component';
-
-@Component({
-  selector: 'app-ui-component-form',
-  templateUrl: './ui-component-form.component.html',
-  styleUrls: ['./ui-component-form.component.scss']
-})
-export class UiComponentFormComponent {
-  @Input() uiComponent: Partial<UiComponent> = {};
-  @Input() isEdit = false;
-  @Output() save = new EventEmitter<Partial<UiComponent>>();
-  @Output() cancel = new EventEmitter<void>();
-
-  componentTypes = [
-    'input',
-    'select',
-    'checkbox',
-    'radio',
-    'textarea',
-    'datepicker',
-    'slider',
-    'toggle'
-  ];
-
-  onSubmit(): void {
-    this.save.emit(this.uiComponent);
-  }
-
-  onCancel(): void {
-    this.cancel.emit();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/ui-component.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/ui-component.service.ts
deleted file mode 100644
index 86afa27..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/ui-component.service.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { UiComponent } from './chart-config-manager.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UiComponentService {
-  private uiComponentsUrl = 'api/ui-components';
-
-  constructor(private apiRequest: ApiRequestService) { }
-
-  // Get all UI components for a chart type
-  getUiComponentsByChartType(chartTypeId: number): Observable<UiComponent[]> {
-    const url = `${this.uiComponentsUrl}/chart-type/${chartTypeId}`;
-    console.log(`Fetching UI components for chart type ${chartTypeId} from ${url}`);
-    return this.apiRequest.get(url);
-  }
-
-  // Get UI component by ID
-  getUiComponentById(id: number): Observable<UiComponent> {
-    const url = `${this.uiComponentsUrl}/${id}`;
-    console.log(`Fetching UI component ${id} from ${url}`);
-    return this.apiRequest.get(url);
-  }
-
-  // Create new UI component
-  createUiComponent(uiComponent: Partial<UiComponent>): Observable<UiComponent> {
-    console.log('Creating UI component:', uiComponent);
-    return this.apiRequest.post(this.uiComponentsUrl, uiComponent);
-  }
-
-  // Update UI component
-  updateUiComponent(id: number, uiComponent: UiComponent): Observable<UiComponent> {
-    const url = `${this.uiComponentsUrl}/${id}`;
-    console.log(`Updating UI component ${id}:`, uiComponent);
-    return this.apiRequest.put(url, uiComponent);
-  }
-
-  // Delete UI component
-  deleteUiComponent(id: number): Observable<void> {
-    const url = `${this.uiComponentsUrl}/${id}`;
-    console.log(`Deleting UI component ${id}`);
-    return this.apiRequest.delete(url);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.html
deleted file mode 100644
index 71f17f9..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<div class="add-chart-type-page">
-  <div class="header">
-    <h2>Add New Chart Type</h2>
-  </div>
-
-  <!-- Error and Success Messages -->
-  <div class="alert alert-danger" *ngIf="errorMessage">
-    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ errorMessage }}</span>
-    </div>
-  </div>
-
-  <div class="alert alert-success" *ngIf="successMessage">
-    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ successMessage }}</span>
-    </div>
-  </div>
-
-  <div class="card">
-    <div class="card-block">
-      <form clrForm (ngSubmit)="createChartType()" #addChartTypeForm="ngForm">
-        <clr-input-container>
-          <label>Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
-          <clr-control-helper>Enter a unique name for the chart type (e.g., "line-chart", "bar-chart")</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Display Name</label>
-          <input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
-          <clr-control-helper>This is the user-friendly name shown in the UI</clr-control-helper>
-        </clr-input-container>
-
-        <clr-textarea-container>
-          <label>Description</label>
-          <textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
-          <clr-control-helper>Provide a detailed description of this chart type and when to use it</clr-control-helper>
-        </clr-textarea-container>
-
-        <clr-checkbox-container>
-          <label>Is Active</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
-            <label>Active</label>
-          </clr-checkbox-wrapper>
-          <clr-control-helper>Deactivate chart types that should not be available for selection</clr-control-helper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!chartType.name || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Create Chart Type
-          </button>
-          <button class="btn" type="button" (click)="onCancel()">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div class="info-section">
-    <h4>About Chart Types</h4>
-    <p>Chart types define the different visualization options available in the dashboard builder. Each chart type can have:</p>
-    <ul>
-      <li>Associated UI components that define the configuration form</li>
-      <li>Templates that define how the chart is rendered</li>
-      <li>Dynamic fields that capture specific configuration parameters</li>
-    </ul>
-    <p>After creating a chart type, you can configure its components, templates, and fields in the chart configuration manager.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.scss
deleted file mode 100644
index ed422e0..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.add-chart-type-page {
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
-
-  .header {
-    margin-bottom: 20px;
-    h2 {
-      color: #0079b8;
-      font-weight: 300;
-    }
-  }
-
-  .card {
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    .card-block {
-      padding: 20px;
-    }
-  }
-
-  .form-actions {
-    margin-top: 20px;
-    display: flex;
-    gap: 10px;
-  }
-
-  .info-section {
-    background-color: #f6f6f6;
-    border-left: 4px solid #0079b8;
-    padding: 15px;
-    border-radius: 4px;
-    
-    h4 {
-      margin-top: 0;
-      color: #0079b8;
-    }
-    
-    ul {
-      padding-left: 20px;
-      
-      li {
-        margin-bottom: 8px;
-      }
-    }
-    
-    p {
-      margin: 10px 0;
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 10px;
-    
-    .form-actions {
-      flex-direction: column;
-      
-      button {
-        width: 100%;
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.ts
deleted file mode 100644
index 2edd075..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/add-chart-type.component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { ClrLoadingState } from '@clr/angular';
-import { ChartType, ChartTypeService } from './chart-type.service';
-
-@Component({
-  selector: 'app-add-chart-type',
-  templateUrl: './add-chart-type.component.html',
-  styleUrls: ['./add-chart-type.component.scss']
-})
-export class AddChartTypeComponent {
-  chartType: Partial<ChartType> = {
-    isActive: true
-  };
-  loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  // Make ClrLoadingState available to template
-  readonly ClrLoadingState = ClrLoadingState;
-
-  constructor(
-    private chartTypeService: ChartTypeService,
-    private router: Router
-  ) { }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  createChartType(): void {
-    if (!this.chartType.name) {
-      this.showError('Chart type name is required');
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.createChartType(this.chartType).subscribe({
-      next: (data) => {
-        this.showSuccess('Chart type created successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-        // Redirect to chart types list after a short delay
-        setTimeout(() => {
-          this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-        }, 1500);
-      },
-      error: (error) => {
-        console.error('Error creating chart type:', error);
-        this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  onCancel(): void {
-    this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.html
deleted file mode 100644
index 6ede91b..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.html
+++ /dev/null
@@ -1,222 +0,0 @@
-<div class="chart-type-fields-page">
-  <div class="header">
-    <h2>
-      <button class="btn btn-link back-button" (click)="goBack()">
-        <cds-icon shape="arrow" direction="left"></cds-icon>
-      </button>
-      Dynamic Fields for {{ chartType?.name || 'Chart Type' }}
-    </h2>
-  </div>
-
-  <!-- Error and Success Messages -->
-  <div class="alert alert-danger" *ngIf="errorMessage">
-    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ errorMessage }}</span>
-    </div>
-  </div>
-
-  <div class="alert alert-success" *ngIf="successMessage">
-    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ successMessage }}</span>
-    </div>
-  </div>
-
-  <!-- Add Dynamic Field Form -->
-  <div class="card" *ngIf="showAddForm">
-    <div class="card-header">
-      <h3>Add New Dynamic Field</h3>
-    </div>
-    <div class="card-block">
-      <form clrForm (ngSubmit)="createDynamicField()" #addDynamicFieldForm="ngForm">
-        <clr-input-container>
-          <label>Field Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
-          <clr-control-helper>Enter a unique name for the dynamic field (e.g., "chart-title", "x-axis-label")</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Field Label</label>
-          <input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
-          <clr-control-helper>User-friendly label shown in the configuration form</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Field Type</label>
-          <input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
-          <clr-control-helper>Type of the field (e.g., "string", "number", "boolean")</clr-control-helper>
-        </clr-input-container>
-
-        <clr-textarea-container>
-          <label>Field Options</label>
-          <textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions" rows="3"></textarea>
-          <clr-control-helper>JSON options for the field (for select fields, etc.)</clr-control-helper>
-        </clr-textarea-container>
-
-        <clr-input-container>
-          <label>Sort Order</label>
-          <input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
-          <clr-control-helper>Order in which fields appear in the form</clr-control-helper>
-        </clr-input-container>
-
-        <clr-checkbox-container>
-          <label>Is Required</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
-            <label>Required</label>
-          </clr-checkbox-wrapper>
-          <clr-control-helper>Mark as required if this field must be filled</clr-control-helper>
-        </clr-checkbox-container>
-
-        <clr-checkbox-container>
-          <label>Show in UI</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
-            <label>Visible</label>
-          </clr-checkbox-wrapper>
-          <clr-control-helper>Uncheck to hide this field in the configuration form</clr-control-helper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!newDynamicField.fieldName || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Create Dynamic Field
-          </button>
-          <button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <!-- Dynamic Fields Grid -->
-  <div class="card">
-    <div class="card-header">
-      <div class="clr-row">
-        <div class="clr-col">
-          <h3>Dynamic Fields</h3>
-        </div>
-        <div class="clr-col" style="text-align: right;">
-          <button class="btn btn-primary" (click)="showAddForm = true">
-            <cds-icon shape="plus"></cds-icon> Add Dynamic Field
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="card-block">
-      <clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
-        <clr-dg-column>Field Name</clr-dg-column>
-        <clr-dg-column>Field Label</clr-dg-column>
-        <clr-dg-column>Field Type</clr-dg-column>
-        <clr-dg-column>Required</clr-dg-column>
-        <clr-dg-column>Visible</clr-dg-column>
-        <clr-dg-column>Sort Order</clr-dg-column>
-        <clr-dg-column>Actions</clr-dg-column>
-
-        <clr-dg-row *clrDgItems="let dynamicField of dynamicFields" [clrDgItem]="dynamicField">
-          <clr-dg-cell>{{dynamicField.fieldName}}</clr-dg-cell>
-          <clr-dg-cell>{{dynamicField.fieldLabel}}</clr-dg-cell>
-          <clr-dg-cell>{{dynamicField.fieldType}}</clr-dg-cell>
-          <clr-dg-cell>
-            <span class="label" [class.label-success]="dynamicField.isRequired" [class.label-danger]="!dynamicField.isRequired">
-              {{dynamicField.isRequired ? 'Yes' : 'No'}}
-            </span>
-          </clr-dg-cell>
-          <clr-dg-cell>
-            <span class="label" [class.label-success]="dynamicField.showInUi" [class.label-danger]="!dynamicField.showInUi">
-              {{dynamicField.showInUi ? 'Yes' : 'No'}}
-            </span>
-          </clr-dg-cell>
-          <clr-dg-cell>{{dynamicField.sortOrder}}</clr-dg-cell>
-          <clr-dg-cell>
-            <button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(dynamicField)" title="Edit">
-              <cds-icon shape="pencil"></cds-icon>
-            </button>
-            <button class="btn btn-sm btn-icon" (click)="deleteDynamicField(dynamicField.id)" title="Delete">
-              <cds-icon shape="trash"></cds-icon>
-            </button>
-          </clr-dg-cell>
-        </clr-dg-row>
-
-        <clr-dg-footer>
-          {{dynamicFields.length}} dynamic field(s)
-        </clr-dg-footer>
-      </clr-datagrid>
-    </div>
-  </div>
-
-  <!-- Edit Dynamic Field Form -->
-  <div class="card" *ngIf="selectedDynamicField">
-    <div class="card-header">
-      <h3>Edit Dynamic Field</h3>
-    </div>
-    <div class="card-block">
-      <form clrForm (ngSubmit)="updateDynamicField()" #editDynamicFieldForm="ngForm">
-        <clr-input-container>
-          <label>Field Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Field Label</label>
-          <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Field Type</label>
-          <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
-        </clr-input-container>
-
-        <clr-textarea-container>
-          <label>Field Options</label>
-          <textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions" rows="3"></textarea>
-        </clr-textarea-container>
-
-        <clr-input-container>
-          <label>Sort Order</label>
-          <input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
-        </clr-input-container>
-
-        <clr-checkbox-container>
-          <label>Is Required</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
-            <label>Required</label>
-          </clr-checkbox-wrapper>
-        </clr-checkbox-container>
-
-        <clr-checkbox-container>
-          <label>Show in UI</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
-            <label>Visible</label>
-          </clr-checkbox-wrapper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!selectedDynamicField.fieldName || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Update Dynamic Field
-          </button>
-          <button class="btn" type="button" (click)="selectedDynamicField = null">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div class="info-section">
-    <h4>About Dynamic Fields</h4>
-    <p>Dynamic fields define the configurable parameters for a chart type. Each field represents:</p>
-    <ul>
-      <li>A configuration option that can be set when creating or editing a chart</li>
-      <li>Metadata like type, label, and validation rules</li>
-      <li>Visibility and requirement settings</li>
-    </ul>
-    <p>Dynamic fields allow you to create flexible chart configurations that can be customized per instance.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.scss
deleted file mode 100644
index 16e28cf..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-.chart-type-fields-page {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-
-  .header {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    
-    h2 {
-      color: #0079b8;
-      font-weight: 300;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    
-    .back-button {
-      padding: 0;
-      cds-icon {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-
-  .card {
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    .card-block {
-      padding: 20px;
-    }
-    
-    .card-header {
-      h3 {
-        margin: 0;
-        color: #0079b8;
-      }
-    }
-  }
-
-  .form-actions {
-    margin-top: 20px;
-    display: flex;
-    gap: 10px;
-  }
-
-  .label {
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: bold;
-    
-    &.label-success {
-      background-color: #3d9970;
-      color: white;
-    }
-    
-    &.label-danger {
-      background-color: #d32f2f;
-      color: white;
-    }
-  }
-
-  clr-datagrid {
-    margin-top: 10px;
-    
-    clr-dg-cell {
-      &:first-child {
-        font-weight: 500;
-      }
-    }
-  }
-
-  .btn-icon {
-    margin-right: 5px;
-  }
-
-  .info-section {
-    background-color: #f6f6f6;
-    border-left: 4px solid #0079b8;
-    padding: 15px;
-    border-radius: 4px;
-    
-    h4 {
-      margin-top: 0;
-      color: #0079b8;
-    }
-    
-    ul {
-      padding-left: 20px;
-      
-      li {
-        margin-bottom: 8px;
-      }
-    }
-    
-    p {
-      margin: 10px 0;
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 10px;
-    
-    .form-actions {
-      flex-direction: column;
-      
-      button {
-        width: 100%;
-        margin-bottom: 10px;
-      }
-    }
-    
-    .card-header {
-      .clr-row {
-        flex-direction: column;
-        
-        .clr-col {
-          text-align: left !important;
-          margin-bottom: 10px;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts
deleted file mode 100644
index 782f5c5..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ClrLoadingState } from '@clr/angular';
-import { ChartType, ChartTypeService } from './chart-type.service';
-import { DynamicField } from '../chart-config/chart-config-manager.component';
-import { DynamicFieldService } from '../chart-config/dynamic-field.service';
-
-@Component({
-  selector: 'app-chart-type-fields',
-  templateUrl: './chart-type-fields.component.html',
-  styleUrls: ['./chart-type-fields.component.scss']
-})
-export class ChartTypeFieldsComponent implements OnInit {
-  chartType: ChartType | null = null;
-  dynamicFields: DynamicField[] = [];
-  newDynamicField: Partial<DynamicField> = {
-    isRequired: false,
-    showInUi: true
-  };
-  selectedDynamicField: DynamicField | null = null;
-  showAddForm = false;
-  
-  loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  // Make ClrLoadingState available to template
-  readonly ClrLoadingState = ClrLoadingState;
-
-  constructor(
-    private chartTypeService: ChartTypeService,
-    private dynamicFieldService: DynamicFieldService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) { }
-
-  ngOnInit(): void {
-    const chartTypeId = Number(this.route.snapshot.paramMap.get('id'));
-    if (chartTypeId) {
-      this.loadChartType(chartTypeId);
-      this.loadDynamicFields(chartTypeId);
-    } else {
-      this.showError('Invalid chart type ID');
-    }
-  }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  loadChartType(id: number): void {
-    this.chartTypeService.getChartTypeById(id).subscribe({
-      next: (data) => {
-        this.chartType = data;
-      },
-      error: (error) => {
-        console.error('Error loading chart type:', error);
-        this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-      }
-    });
-  }
-
-  loadDynamicFields(chartTypeId: number): void {
-    this.loadingState = ClrLoadingState.LOADING;
-    this.dynamicFieldService.getDynamicFieldsByChartType(chartTypeId).subscribe({
-      next: (data) => {
-        this.dynamicFields = data;
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading dynamic fields:', error);
-        this.showError('Error loading dynamic fields: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createDynamicField(): void {
-    if (!this.chartType || !this.newDynamicField.fieldName) {
-      this.showError('Field name is required');
-      return;
-    }
-
-    // Create a copy without the chartType property
-    const fieldData: Partial<DynamicField> = {
-      fieldName: this.newDynamicField.fieldName,
-      fieldLabel: this.newDynamicField.fieldLabel,
-      fieldType: this.newDynamicField.fieldType,
-      fieldOptions: this.newDynamicField.fieldOptions,
-      isRequired: this.newDynamicField.isRequired,
-      showInUi: this.newDynamicField.showInUi,
-      sortOrder: this.newDynamicField.sortOrder
-    };
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.dynamicFieldService.createDynamicField(fieldData, this.chartType.id).subscribe({
-      next: (data) => {
-        this.dynamicFields.push(data);
-        this.newDynamicField = { isRequired: false, showInUi: true };
-        this.showAddForm = false;
-        this.showSuccess('Dynamic field created successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating dynamic field:', error);
-        this.showError('Error creating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateDynamicField(): void {
-    if (!this.selectedDynamicField || !this.selectedDynamicField.fieldName) {
-      this.showError('Field name is required');
-      return;
-    }
-
-    console.log('Updating dynamic field:', this.selectedDynamicField);
-    this.loadingState = ClrLoadingState.LOADING;
-    this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
-      next: (data) => {
-        const index = this.dynamicFields.findIndex(df => df.id === data.id);
-        if (index !== -1) {
-          this.dynamicFields[index] = data;
-        }
-        this.selectedDynamicField = null;
-        this.showSuccess('Dynamic field updated successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating dynamic field:', error);
-        this.showError('Error updating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteDynamicField(id: number): void {
-    if (!confirm('Are you sure you want to delete this dynamic field?')) {
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.dynamicFieldService.deleteDynamicField(id).subscribe({
-      next: () => {
-        this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
-        this.showSuccess('Dynamic field deleted successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting dynamic field:', error);
-        this.showError('Error deleting dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectDynamicFieldForEdit(dynamicField: DynamicField): void {
-    this.selectedDynamicField = { ...dynamicField };
-  }
-
-  goBack(): void {
-    if (this.chartType) {
-      this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]);
-    } else {
-      this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.html
deleted file mode 100644
index 50e56aa..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<div class="chart-type-manager">
-  <h2>Chart Type Management</h2>
-  
-  <!-- Error and Success Messages -->
-  <div class="alert alert-danger" *ngIf="errorMessage">
-    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ errorMessage }}</span>
-    </div>
-  </div>
-  
-  <div class="alert alert-success" *ngIf="successMessage">
-    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ successMessage }}</span>
-    </div>
-  </div>
-  
-  <!-- Chart Types Grid -->
-  <div class="card">
-    <div class="card-header">
-      <div class="clr-row">
-        <div class="clr-col">
-          <h3>Chart Types</h3>
-        </div>
-        <div class="clr-col" style="text-align: right;">
-          <button class="btn btn-primary" [routerLink]="['/cns-portal/dashboardbuilder/chart-types/add']">
-            <cds-icon shape="plus"></cds-icon> Add Chart Type
-          </button>
-        </div>
-      </div>
-    </div>
-    
-    <div class="card-block">
-      <clr-datagrid [clrDgLoading]="chartTypeLoadingState === ClrLoadingState.LOADING">
-        <clr-dg-column>Name</clr-dg-column>
-        <clr-dg-column>Display Name</clr-dg-column>
-        <clr-dg-column>Description</clr-dg-column>
-        <clr-dg-column>Status</clr-dg-column>
-        <clr-dg-column>Created At</clr-dg-column>
-        <clr-dg-column>Updated At</clr-dg-column>
-        <clr-dg-column>Actions</clr-dg-column>
-        
-        <clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
-          <clr-dg-cell>{{chartType.name}}</clr-dg-cell>
-          <clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
-          <clr-dg-cell>{{chartType.description}}</clr-dg-cell>
-          <clr-dg-cell>
-            <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
-              {{chartType.isActive ? 'Active' : 'Inactive'}}
-            </span>
-          </clr-dg-cell>
-          <clr-dg-cell>{{chartType.createdAt ? (chartType.createdAt | date:'short') : 'N/A'}}</clr-dg-cell>
-          <clr-dg-cell>{{chartType.updatedAt ? (chartType.updatedAt | date:'short') : 'N/A'}}</clr-dg-cell>
-          <clr-dg-cell>
-            <button class="btn btn-sm btn-icon" [routerLink]="['/cns-portal/dashboardbuilder/chart-types/edit', chartType.id]" title="Edit">
-              <cds-icon shape="pencil"></cds-icon>
-            </button>
-            <button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete">
-              <cds-icon shape="trash"></cds-icon>
-            </button>
-          </clr-dg-cell>
-        </clr-dg-row>
-        
-        <clr-dg-footer>
-          {{chartTypes.length}} chart type(s)
-        </clr-dg-footer>
-      </clr-datagrid>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.scss
deleted file mode 100644
index bdc412a..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.chart-type-manager {
-  padding: 20px;
-
-  h2 {
-    color: #0079b8;
-    font-weight: 300;
-    margin-bottom: 20px;
-  }
-
-  .card {
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    .card-header {
-      h3 {
-        margin: 0;
-        color: #0079b8;
-      }
-    }
-    
-    .card-block {
-      padding: 20px;
-    }
-  }
-
-  .label {
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: bold;
-    
-    &.label-success {
-      background-color: #3d9970;
-      color: white;
-    }
-    
-    &.label-danger {
-      background-color: #d32f2f;
-      color: white;
-    }
-  }
-
-  clr-datagrid {
-    margin-top: 10px;
-    
-    clr-dg-cell {
-      &:first-child {
-        font-weight: 500;
-      }
-    }
-  }
-
-  .btn-icon {
-    margin-right: 5px;
-  }
-
-  @media (max-width: 768px) {
-    padding: 10px;
-    
-    .card-header {
-      .clr-row {
-        flex-direction: column;
-        
-        .clr-col {
-          text-align: left !important;
-          margin-bottom: 10px;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts
deleted file mode 100644
index 3640074..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ClrLoadingState } from '@clr/angular';
-import { ChartType, ChartTypeService } from './chart-type.service';
-
-@Component({
-  selector: 'app-chart-type-manager',
-  templateUrl: './chart-type-manager.component.html',
-  styleUrls: ['./chart-type-manager.component.scss']
-})
-export class ChartTypeManagerComponent implements OnInit {
-  chartTypes: ChartType[] = [];
-  chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-
-  // Make ClrLoadingState available to template
-  readonly ClrLoadingState = ClrLoadingState;
-
-  // Error handling
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  constructor(private chartTypeService: ChartTypeService) { }
-
-  ngOnInit(): void {
-    this.loadChartTypes();
-  }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  // Chart Type Methods
-  loadChartTypes(): void {
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.getAllChartTypes().subscribe({
-      next: (data) => {
-        // Process the data to ensure dates are properly formatted
-        this.chartTypes = data.map(chartType => ({
-          ...chartType,
-          createdAt: this.formatDate(chartType.createdAt),
-          updatedAt: this.formatDate(chartType.updatedAt)
-        }));
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading chart types:', error);
-        this.showError('Error loading chart types: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  // Format date to handle both string and object formats
-  private formatDate(date: any): string {
-    if (!date) return '';
-    
-    // If it's already a string, return as is
-    if (typeof date === 'string') {
-      return date;
-    }
-    
-    // If it's an object, try to convert to string
-    if (typeof date === 'object') {
-      // Handle various date object formats
-      if (date instanceof Date) {
-        return date.toISOString();
-      }
-      
-      // Handle ISO string within object
-      if (date.date) {
-        return date.date;
-      }
-      
-      // Handle other object formats
-      try {
-        return new Date(date).toISOString();
-      } catch {
-        return '';
-      }
-    }
-    
-    return '';
-  }
-
-  deleteChartType(id: number): void {
-    if (!confirm('Are you sure you want to delete this chart type?')) {
-      return;
-    }
-
-    this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.deleteChartType(id).subscribe({
-      next: () => {
-        this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
-        this.showSuccess('Chart type deleted successfully');
-        this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting chart type:', error);
-        this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.chartTypeLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-page.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-page.component.ts
deleted file mode 100644
index 0cf2c7e..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-page.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-chart-type-page',
-  template: `
-    <div class="chart-type-page">
-      <app-chart-type-manager></app-chart-type-manager>
-    </div>
-  `,
-  styles: [`
-    .chart-type-page {
-      padding: 20px;
-    }
-    
-    @media (max-width: 768px) {
-      .chart-type-page {
-        padding: 10px;
-      }
-    }
-  `]
-})
-export class ChartTypePageComponent { }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.html
deleted file mode 100644
index a8a4091..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<div class="chart-type-templates-page">
-  <div class="header">
-    <h2>
-      <button class="btn btn-link back-button" (click)="goBack()">
-        <cds-icon shape="arrow" direction="left"></cds-icon>
-      </button>
-      Chart Templates for {{ chartType?.name || 'Chart Type' }}
-    </h2>
-  </div>
-
-  <!-- Error and Success Messages -->
-  <div class="alert alert-danger" *ngIf="errorMessage">
-    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ errorMessage }}</span>
-    </div>
-  </div>
-
-  <div class="alert alert-success" *ngIf="successMessage">
-    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ successMessage }}</span>
-    </div>
-  </div>
-
-  <!-- Add Chart Template Form -->
-  <div class="card" *ngIf="showAddForm">
-    <div class="card-header">
-      <h3>Add New Chart Template</h3>
-    </div>
-    <div class="card-block">
-      <form clrForm (ngSubmit)="createChartTemplate()" #addChartTemplateForm="ngForm">
-        <clr-input-container>
-          <label>Template Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="newChartTemplate.templateName" name="templateName" required />
-          <clr-control-helper>Enter a unique name for the chart template</clr-control-helper>
-        </clr-input-container>
-
-        <clr-textarea-container>
-          <label>HTML Template</label>
-          <textarea clrTextarea [(ngModel)]="newChartTemplate.templateHtml" name="templateHtml" rows="5"></textarea>
-          <clr-control-helper>HTML structure for rendering the chart</clr-control-helper>
-        </clr-textarea-container>
-
-        <clr-textarea-container>
-          <label>CSS Template</label>
-          <textarea clrTextarea [(ngModel)]="newChartTemplate.templateCss" name="templateCss" rows="5"></textarea>
-          <clr-control-helper>CSS styling for the chart template</clr-control-helper>
-        </clr-textarea-container>
-
-        <clr-checkbox-container>
-          <label>Is Default</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="newChartTemplate.isDefault" name="isDefault" />
-            <label>Default Template</label>
-          </clr-checkbox-wrapper>
-          <clr-control-helper>Mark as default template for this chart type</clr-control-helper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!newChartTemplate.templateName || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Create Chart Template
-          </button>
-          <button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <!-- Chart Templates Grid -->
-  <div class="card">
-    <div class="card-header">
-      <div class="clr-row">
-        <div class="clr-col">
-          <h3>Chart Templates</h3>
-        </div>
-        <div class="clr-col" style="text-align: right;">
-          <button class="btn btn-primary" (click)="showAddForm = true">
-            <cds-icon shape="plus"></cds-icon> Add Chart Template
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="card-block">
-      <clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
-        <clr-dg-column>Template Name</clr-dg-column>
-        <clr-dg-column>Default</clr-dg-column>
-        <clr-dg-column>Created At</clr-dg-column>
-        <clr-dg-column>Updated At</clr-dg-column>
-        <clr-dg-column>Actions</clr-dg-column>
-
-        <clr-dg-row *clrDgItems="let chartTemplate of chartTemplates" [clrDgItem]="chartTemplate">
-          <clr-dg-cell>{{chartTemplate.templateName}}</clr-dg-cell>
-          <clr-dg-cell>
-            <span class="label" [class.label-success]="chartTemplate.isDefault" [class.label-danger]="!chartTemplate.isDefault">
-              {{chartTemplate.isDefault ? 'Yes' : 'No'}}
-            </span>
-          </clr-dg-cell>
-          <clr-dg-cell>{{chartTemplate.createdAt | date:'short'}}</clr-dg-cell>
-          <clr-dg-cell>{{chartTemplate.updatedAt | date:'short'}}</clr-dg-cell>
-          <clr-dg-cell>
-            <button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(chartTemplate)" title="Edit">
-              <cds-icon shape="pencil"></cds-icon>
-            </button>
-            <button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(chartTemplate.id)" title="Delete">
-              <cds-icon shape="trash"></cds-icon>
-            </button>
-          </clr-dg-cell>
-        </clr-dg-row>
-
-        <clr-dg-footer>
-          {{chartTemplates.length}} chart template(s)
-        </clr-dg-footer>
-      </clr-datagrid>
-    </div>
-  </div>
-
-  <!-- Edit Chart Template Form -->
-  <div class="card" *ngIf="selectedChartTemplate">
-    <div class="card-header">
-      <h3>Edit Chart Template</h3>
-    </div>
-    <div class="card-block">
-      <form clrForm (ngSubmit)="updateChartTemplate()" #editChartTemplateForm="ngForm">
-        <clr-input-container>
-          <label>Template Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="selectedChartTemplate.templateName" name="editTemplateName" required />
-        </clr-input-container>
-
-        <clr-textarea-container>
-          <label>HTML Template</label>
-          <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateHtml" name="editTemplateHtml" rows="5"></textarea>
-        </clr-textarea-container>
-
-        <clr-textarea-container>
-          <label>CSS Template</label>
-          <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateCss" name="editTemplateCss" rows="5"></textarea>
-        </clr-textarea-container>
-
-        <clr-checkbox-container>
-          <label>Is Default</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="selectedChartTemplate.isDefault" name="editIsDefault" />
-            <label>Default Template</label>
-          </clr-checkbox-wrapper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!selectedChartTemplate.templateName || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Update Chart Template
-          </button>
-          <button class="btn" type="button" (click)="selectedChartTemplate = null">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div class="info-section">
-    <h4>About Chart Templates</h4>
-    <p>Chart templates define how a chart of this type is rendered. Each template includes:</p>
-    <ul>
-      <li>HTML structure that defines the chart layout</li>
-      <li>CSS styling that controls the appearance</li>
-      <li>A default flag to indicate the primary template</li>
-    </ul>
-    <p>Templates allow you to have multiple visual representations for the same chart type.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.scss
deleted file mode 100644
index 53c34d7..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-.chart-type-templates-page {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-
-  .header {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    
-    h2 {
-      color: #0079b8;
-      font-weight: 300;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    
-    .back-button {
-      padding: 0;
-      cds-icon {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-
-  .card {
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    .card-block {
-      padding: 20px;
-    }
-    
-    .card-header {
-      h3 {
-        margin: 0;
-        color: #0079b8;
-      }
-    }
-  }
-
-  .form-actions {
-    margin-top: 20px;
-    display: flex;
-    gap: 10px;
-  }
-
-  .label {
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: bold;
-    
-    &.label-success {
-      background-color: #3d9970;
-      color: white;
-    }
-    
-    &.label-danger {
-      background-color: #d32f2f;
-      color: white;
-    }
-  }
-
-  clr-datagrid {
-    margin-top: 10px;
-    
-    clr-dg-cell {
-      &:first-child {
-        font-weight: 500;
-      }
-    }
-  }
-
-  .btn-icon {
-    margin-right: 5px;
-  }
-
-  .info-section {
-    background-color: #f6f6f6;
-    border-left: 4px solid #0079b8;
-    padding: 15px;
-    border-radius: 4px;
-    
-    h4 {
-      margin-top: 0;
-      color: #0079b8;
-    }
-    
-    ul {
-      padding-left: 20px;
-      
-      li {
-        margin-bottom: 8px;
-      }
-    }
-    
-    p {
-      margin: 10px 0;
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 10px;
-    
-    .form-actions {
-      flex-direction: column;
-      
-      button {
-        width: 100%;
-        margin-bottom: 10px;
-      }
-    }
-    
-    .card-header {
-      .clr-row {
-        flex-direction: column;
-        
-        .clr-col {
-          text-align: left !important;
-          margin-bottom: 10px;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.ts
deleted file mode 100644
index 85de681..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-templates.component.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ClrLoadingState } from '@clr/angular';
-import { ChartType, ChartTypeService } from './chart-type.service';
-import { ChartTemplateService } from '../chart-config/chart-template.service';
-import { ChartTemplate } from '../chart-config/chart-config-manager.component';
-
-@Component({
-  selector: 'app-chart-type-templates',
-  templateUrl: './chart-type-templates.component.html',
-  styleUrls: ['./chart-type-templates.component.scss']
-})
-export class ChartTypeTemplatesComponent implements OnInit {
-  chartType: ChartType | null = null;
-  chartTemplates: ChartTemplate[] = [];
-  newChartTemplate: Partial<ChartTemplate> = {
-    isDefault: false
-  };
-  selectedChartTemplate: ChartTemplate | null = null;
-  showAddForm = false;
-  
-  loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  // Make ClrLoadingState available to template
-  readonly ClrLoadingState = ClrLoadingState;
-
-  constructor(
-    private chartTypeService: ChartTypeService,
-    private chartTemplateService: ChartTemplateService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) { }
-
-  ngOnInit(): void {
-    const chartTypeId = Number(this.route.snapshot.paramMap.get('id'));
-    if (chartTypeId) {
-      this.loadChartType(chartTypeId);
-      this.loadChartTemplates(chartTypeId);
-    } else {
-      this.showError('Invalid chart type ID');
-    }
-  }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  loadChartType(id: number): void {
-    this.chartTypeService.getChartTypeById(id).subscribe({
-      next: (data) => {
-        this.chartType = data;
-      },
-      error: (error) => {
-        console.error('Error loading chart type:', error);
-        this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-      }
-    });
-  }
-
-  loadChartTemplates(chartTypeId: number): void {
-    this.loadingState = ClrLoadingState.LOADING;
-    this.chartTemplateService.getChartTemplatesByChartType(chartTypeId).subscribe({
-      next: (data) => {
-        this.chartTemplates = data;
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading chart templates:', error);
-        this.showError('Error loading chart templates: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createChartTemplate(): void {
-    if (!this.chartType || !this.newChartTemplate.templateName) {
-      this.showError('Template name is required');
-      return;
-    }
-
-    // Create a copy without the chartType property
-    const templateData: Partial<ChartTemplate> = {
-      templateName: this.newChartTemplate.templateName,
-      templateHtml: this.newChartTemplate.templateHtml,
-      templateCss: this.newChartTemplate.templateCss,
-      isDefault: this.newChartTemplate.isDefault
-    };
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.chartTemplateService.createChartTemplate(templateData, this.chartType.id).subscribe({
-      next: (data) => {
-        this.chartTemplates.push(data);
-        this.newChartTemplate = { isDefault: false };
-        this.showAddForm = false;
-        this.showSuccess('Chart template created successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating chart template:', error);
-        this.showError('Error creating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateChartTemplate(): void {
-    if (!this.selectedChartTemplate || !this.selectedChartTemplate.templateName) {
-      this.showError('Template name is required');
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.chartTemplateService.updateChartTemplate(this.selectedChartTemplate.id, this.selectedChartTemplate).subscribe({
-      next: (data) => {
-        const index = this.chartTemplates.findIndex(ct => ct.id === data.id);
-        if (index !== -1) {
-          this.chartTemplates[index] = data;
-        }
-        this.selectedChartTemplate = null;
-        this.showSuccess('Chart template updated successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating chart template:', error);
-        this.showError('Error updating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteChartTemplate(id: number): void {
-    if (!confirm('Are you sure you want to delete this chart template?')) {
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.chartTemplateService.deleteChartTemplate(id).subscribe({
-      next: () => {
-        this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
-        this.showSuccess('Chart template deleted successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting chart template:', error);
-        this.showError('Error deleting chart template: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectChartTemplateForEdit(chartTemplate: ChartTemplate): void {
-    this.selectedChartTemplate = { ...chartTemplate };
-  }
-
-  goBack(): void {
-    if (this.chartType) {
-      this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]);
-    } else {
-      this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html
deleted file mode 100644
index 15cee37..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.html
+++ /dev/null
@@ -1,312 +0,0 @@
-<div class="chart-type-ui-components-page">
-  <div class="header">
-    <h2>
-      <button class="btn btn-link back-button" (click)="goBack()">
-        <cds-icon shape="arrow" direction="left"></cds-icon>
-      </button>
-      UI Components for {{ chartType?.name || 'Chart Type' }}
-    </h2>
-  </div>
-
-  <!-- Error and Success Messages -->
-  <div class="alert alert-danger" *ngIf="errorMessage">
-    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ errorMessage }}</span>
-    </div>
-  </div>
-
-  <div class="alert alert-success" *ngIf="successMessage">
-    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ successMessage }}</span>
-    </div>
-  </div>
-
-  <!-- Add UI Component Form -->
-  <div class="card" *ngIf="showAddForm">
-    <div class="card-header">
-      <h3>Add New UI Component</h3>
-    </div>
-    <div class="card-block">
-      <form clrForm (ngSubmit)="createUiComponent()" #addUiComponentForm="ngForm">
-        <clr-input-container>
-          <label>Component Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="newUiComponent.componentName" name="componentName" required />
-          <clr-control-helper>Enter a unique name for the UI component (e.g., "title-config", "axis-config")</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Component Type</label>
-          <input clrInput type="text" [(ngModel)]="newUiComponent.componentType" name="componentType" />
-          <clr-control-helper>Type of the component (e.g., "input", "select", "checkbox")</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Display Label</label>
-          <input clrInput type="text" [(ngModel)]="newUiComponent.displayLabel" name="displayLabel" />
-          <clr-control-helper>User-friendly label shown in the configuration form</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Placeholder</label>
-          <input clrInput type="text" [(ngModel)]="newUiComponent.placeholder" name="placeholder" />
-          <clr-control-helper>Placeholder text for input fields</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Sort Order</label>
-          <input clrInput type="number" [(ngModel)]="newUiComponent.sortOrder" name="sortOrder" />
-          <clr-control-helper>Order in which components appear in the form</clr-control-helper>
-        </clr-input-container>
-
-        <clr-checkbox-container>
-          <label>Is Required</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="newUiComponent.isRequired" name="isRequired" />
-            <label>Required</label>
-          </clr-checkbox-wrapper>
-          <clr-control-helper>Mark as required if this component must be filled</clr-control-helper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!newUiComponent.componentName || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Create UI Component
-          </button>
-          <button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <!-- UI Components Grid -->
-  <div class="card">
-    <div class="card-header">
-      <div class="clr-row">
-        <div class="clr-col">
-          <h3>UI Components</h3>
-        </div>
-        <div class="clr-col" style="text-align: right;">
-          <button class="btn btn-primary" (click)="showAddForm = true">
-            <cds-icon shape="plus"></cds-icon> Add UI Component
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="card-block">
-      <clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
-        <clr-dg-column>Component Name</clr-dg-column>
-        <clr-dg-column>Component Type</clr-dg-column>
-        <clr-dg-column>Display Label</clr-dg-column>
-        <clr-dg-column>Required</clr-dg-column>
-        <clr-dg-column>Actions</clr-dg-column>
-
-        <clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
-          <clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
-          <clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
-          <clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
-          <clr-dg-cell>
-            <span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
-              {{uiComponent.isRequired ? 'Yes' : 'No'}}
-            </span>
-          </clr-dg-cell>
-          <clr-dg-cell class="action-cell">
-            <div class="action-buttons">
-              <button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit" [disabled]="loadingState === ClrLoadingState.LOADING">
-                <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                <cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
-              </button>
-              <button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="loadingState === ClrLoadingState.LOADING">
-                <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                <cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
-              </button>
-              <button class="btn btn-sm btn-icon btn-primary" (click)="onViewComponentProperties(uiComponent)" title="View Properties" [disabled]="loadingState === ClrLoadingState.LOADING">
-                <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-                <cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="eye" aria-label="View Properties"></cds-icon>
-              </button>
-            </div>
-          </clr-dg-cell>
-        </clr-dg-row>
-
-        <clr-dg-footer>
-          {{uiComponents.length}} UI component(s)
-        </clr-dg-footer>
-      </clr-datagrid>
-    </div>
-  </div>
-
-  <!-- Edit UI Component Form -->
-  <div class="card" *ngIf="selectedUiComponent && !showAddComponentPropertyForm && !selectedComponentProperty">
-    <div class="card-header">
-      <h3>Edit UI Component</h3>
-    </div>
-    <div class="card-block">
-      <form clrForm (ngSubmit)="updateUiComponent()" #editUiComponentForm="ngForm">
-        <clr-input-container>
-          <label>Component Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentName" name="editComponentName" required />
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Component Type</label>
-          <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentType" name="editComponentType" />
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Display Label</label>
-          <input clrInput type="text" [(ngModel)]="selectedUiComponent.displayLabel" name="editDisplayLabel" />
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Placeholder</label>
-          <input clrInput type="text" [(ngModel)]="selectedUiComponent.placeholder" name="editPlaceholder" />
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Sort Order</label>
-          <input clrInput type="number" [(ngModel)]="selectedUiComponent.sortOrder" name="editSortOrder" />
-        </clr-input-container>
-
-        <clr-checkbox-container>
-          <label>Is Required</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="selectedUiComponent.isRequired" name="editIsRequired" />
-            <label>Required</label>
-          </clr-checkbox-wrapper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!selectedUiComponent.componentName || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Update UI Component
-          </button>
-          <button class="btn" type="button" (click)="selectedUiComponent = null">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <!-- Component Properties Section -->
-  <div class="card" *ngIf="selectedUiComponent">
-    <div class="card-header">
-      <div class="clr-row">
-        <div class="clr-col">
-          <h3>Properties for {{selectedUiComponent?.componentName}}</h3>
-        </div>
-        <div class="clr-col" style="text-align: right;">
-          <button class="btn btn-primary" (click)="showAddComponentPropertyForm = true">
-            <cds-icon shape="plus"></cds-icon> Add Property
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Add Component Property Form -->
-    <div class="card-block" *ngIf="showAddComponentPropertyForm">
-      <form clrForm (ngSubmit)="createComponentProperty()" #addComponentPropertyForm="ngForm">
-        <clr-input-container>
-          <label>Property Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
-        </clr-input-container>
-        
-        <clr-input-container>
-          <label>Property Value</label>
-          <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
-        </clr-input-container>
-        
-        <clr-input-container>
-          <label>Property Type</label>
-          <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
-        </clr-input-container>
-        
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!newComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Create Property
-          </button>
-          <button class="btn" type="button" (click)="showAddComponentPropertyForm = false">Cancel</button>
-        </div>
-      </form>
-    </div>
-
-    <!-- Component Properties Table -->
-    <div class="card-block">
-      <clr-datagrid [clrDgLoading]="componentPropertyLoadingState === ClrLoadingState.LOADING">
-        <clr-dg-column>Property Name</clr-dg-column>
-        <clr-dg-column>Property Value</clr-dg-column>
-        <clr-dg-column>Property Type</clr-dg-column>
-        <clr-dg-column>Created At</clr-dg-column>
-        <clr-dg-column>Updated At</clr-dg-column>
-        <clr-dg-column>Actions</clr-dg-column>
-        
-        <clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
-          <clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
-          <clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
-          <clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
-          <clr-dg-cell>{{property.createdAt | date:'short'}}</clr-dg-cell>
-          <clr-dg-cell>{{property.updatedAt | date:'short'}}</clr-dg-cell>
-          <clr-dg-cell>
-            <button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
-              <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-              <cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
-            </button>
-            <button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
-              <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-              <cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
-            </button>
-          </clr-dg-cell>
-        </clr-dg-row>
-        
-        <clr-dg-footer>
-          {{componentProperties.length}} propertie(s)
-        </clr-dg-footer>
-      </clr-datagrid>
-    </div>
-
-    <!-- Edit Component Property Form -->
-    <div class="card-block" *ngIf="selectedComponentProperty">
-      <h4>Edit Component Property</h4>
-      <form clrForm (ngSubmit)="updateComponentProperty()" #editComponentPropertyForm="ngForm">
-        <clr-input-container>
-          <label>Property Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
-        </clr-input-container>
-        
-        <clr-input-container>
-          <label>Property Value</label>
-          <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
-        </clr-input-container>
-        
-        <clr-input-container>
-          <label>Property Type</label>
-          <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
-        </clr-input-container>
-        
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!selectedComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Update Property
-          </button>
-          <button class="btn" type="button" (click)="selectedComponentProperty = null">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div class="info-section">
-    <h4>About UI Components</h4>
-    <p>UI components define the configuration form elements for a chart type. Each component represents:</p>
-    <ul>
-      <li>A form field that appears when configuring a chart of this type</li>
-      <li>Metadata like label, placeholder, and validation rules</li>
-      <li>An order in which they appear in the configuration form</li>
-    </ul>
-    <p>After creating UI components, you can define their properties using the "View Properties" button.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss
deleted file mode 100644
index da40f68..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-.chart-type-ui-components-page {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-
-  .header {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    
-    h2 {
-      color: #0079b8;
-      font-weight: 300;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    
-    .back-button {
-      padding: 0;
-      cds-icon {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-
-  .card {
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    .card-block {
-      padding: 20px;
-    }
-    
-    .card-header {
-      h3 {
-        margin: 0;
-        color: #0079b8;
-      }
-    }
-  }
-
-  .form-actions {
-    margin-top: 20px;
-    display: flex;
-    gap: 10px;
-  }
-
-  .label {
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: bold;
-    
-    &.label-success {
-      background-color: #3d9970;
-      color: white;
-    }
-    
-    &.label-danger {
-      background-color: #d32f2f;
-      color: white;
-    }
-  }
-
-  clr-datagrid {
-    margin-top: 10px;
-    
-    clr-dg-cell {
-      &:first-child {
-        font-weight: 500;
-      }
-    }
-  }
-
-  .btn-icon {
-    margin-right: 5px;
-  }
-
-  .info-section {
-    background-color: #f6f6f6;
-    border-left: 4px solid #0079b8;
-    padding: 15px;
-    border-radius: 4px;
-    
-    h4 {
-      margin-top: 0;
-      color: #0079b8;
-    }
-    
-    ul {
-      padding-left: 20px;
-      
-      li {
-        margin-bottom: 8px;
-      }
-    }
-    
-    p {
-      margin: 10px 0;
-    }
-  }
-
-  // Component Properties Section Styles
-  .action-cell {
-    min-width: 120px;
-  }
-
-  .action-buttons {
-    display: flex;
-    gap: 5px;
-    flex-wrap: nowrap;
-    align-items: center;
-  }
-
-  .action-buttons .btn-icon {
-    min-width: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  // Ensure icons are visible
-  cds-icon {
-    display: inline-block !important;
-  }
-
-  clr-spinner {
-    margin: 0;
-  }
-
-  @media (max-width: 768px) {
-    padding: 10px;
-    
-    .form-actions {
-      flex-direction: column;
-      
-      button {
-        width: 100%;
-        margin-bottom: 10px;
-      }
-    }
-    
-    .card-header {
-      .clr-row {
-        flex-direction: column;
-        
-        .clr-col {
-          text-align: left !important;
-          margin-bottom: 10px;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts
deleted file mode 100644
index a2ca262..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-ui-components.component.ts
+++ /dev/null
@@ -1,309 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ClrLoadingState } from '@clr/angular';
-import { ChartType, ChartTypeService } from './chart-type.service';
-import { UiComponentService } from '../chart-config/ui-component.service';
-import { ComponentPropertyService } from '../chart-config/component-property.service';
-import { UiComponent, ComponentProperty } from '../chart-config/chart-config-manager.component';
-
-@Component({
-  selector: 'app-chart-type-ui-components',
-  templateUrl: './chart-type-ui-components.component.html',
-  styleUrls: ['./chart-type-ui-components.component.scss']
-})
-export class ChartTypeUiComponentsComponent implements OnInit {
-  chartType: ChartType | null = null;
-  uiComponents: UiComponent[] = [];
-  newUiComponent: Partial<UiComponent> = {
-    isRequired: false
-  };
-  selectedUiComponent: UiComponent | null = null;
-  showAddForm = false;
-  
-  // Component Properties
-  componentProperties: ComponentProperty[] = [];
-  selectedComponentProperty: ComponentProperty | null = null;
-  newComponentProperty: Partial<ComponentProperty> = {};
-  showAddComponentPropertyForm = false;
-  componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-  
-  loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  // Make ClrLoadingState available to template
-  readonly ClrLoadingState = ClrLoadingState;
-
-  constructor(
-    private chartTypeService: ChartTypeService,
-    private uiComponentService: UiComponentService,
-    private componentPropertyService: ComponentPropertyService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) { }
-
-  ngOnInit(): void {
-    const chartTypeId = Number(this.route.snapshot.paramMap.get('id'));
-    if (chartTypeId) {
-      this.loadChartType(chartTypeId);
-      this.loadUiComponents(chartTypeId);
-    } else {
-      this.showError('Invalid chart type ID');
-    }
-  }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  loadChartType(id: number): void {
-    this.chartTypeService.getChartTypeById(id).subscribe({
-      next: (data) => {
-        this.chartType = data;
-      },
-      error: (error) => {
-        console.error('Error loading chart type:', error);
-        this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-      }
-    });
-  }
-
-  loadUiComponents(chartTypeId: number): void {
-    this.loadingState = ClrLoadingState.LOADING;
-    this.uiComponentService.getUiComponentsByChartType(chartTypeId).subscribe({
-      next: (data) => {
-        this.uiComponents = data;
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading UI components:', error);
-        this.showError('Error loading UI components: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createUiComponent(): void {
-    if (!this.chartType || !this.newUiComponent.componentName) {
-      this.showError('Component name is required');
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    
-    // Create a complete chartType object with only the ID (following the pattern in chart-config-manager)
-    const chartTypeWithId = { 
-      id: this.chartType.id,
-      name: '',
-      displayName: '',
-      description: '',
-      isActive: true,
-      createdAt: '',
-      updatedAt: ''
-    };
-
-    const componentData = {
-      ...this.newUiComponent,
-      chartType: chartTypeWithId
-    };
-    
-    this.uiComponentService.createUiComponent(componentData).subscribe({
-      next: (data) => {
-        this.uiComponents.push(data);
-        this.newUiComponent = { isRequired: false };
-        this.showAddForm = false;
-        this.showSuccess('UI component created successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating UI component:', error);
-        this.showError('Error creating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateUiComponent(): void {
-    if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) {
-      this.showError('Component name is required');
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.uiComponentService.updateUiComponent(this.selectedUiComponent.id, this.selectedUiComponent).subscribe({
-      next: (data) => {
-        const index = this.uiComponents.findIndex(uc => uc.id === data.id);
-        if (index !== -1) {
-          this.uiComponents[index] = data;
-        }
-        this.selectedUiComponent = null;
-        this.showSuccess('UI component updated successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating UI component:', error);
-        this.showError('Error updating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteUiComponent(id: number): void {
-    if (!confirm('Are you sure you want to delete this UI component?')) {
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.uiComponentService.deleteUiComponent(id).subscribe({
-      next: () => {
-        this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
-        this.showSuccess('UI component deleted successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting UI component:', error);
-        this.showError('Error deleting UI component: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectUiComponentForEdit(uiComponent: UiComponent): void {
-    this.selectedUiComponent = { ...uiComponent };
-  }
-
-  // Component Property Methods
-  loadComponentProperties(componentId: number): void {
-    if (!componentId) {
-      this.componentProperties = [];
-      return;
-    }
-    
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.componentPropertyService.getComponentPropertiesByComponent(componentId).subscribe({
-      next: (data) => {
-        this.componentProperties = data;
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading component properties:', error);
-        this.showError('Error loading component properties: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  createComponentProperty(): void {
-    if (!this.selectedUiComponent) {
-      this.showError('Please select a UI component first');
-      return;
-    }
-
-    if (!this.newComponentProperty.propertyName) {
-      this.showError('Property name is required');
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    
-    // Create a complete component object with only the ID
-    const componentWithId = { 
-      id: this.selectedUiComponent.id
-    } as UiComponent;
-
-    const componentPropertyData = {
-      ...this.newComponentProperty,
-      component: componentWithId
-    };
-
-    this.componentPropertyService.createComponentProperty(componentPropertyData).subscribe({
-      next: (data) => {
-        this.componentProperties.push(data);
-        this.newComponentProperty = {};
-        this.showAddComponentPropertyForm = false;
-        this.showSuccess('Component property created successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error creating component property:', error);
-        this.showError('Error creating component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  updateComponentProperty(): void {
-    if (!this.selectedComponentProperty || !this.selectedComponentProperty.propertyName) {
-      this.showError('Property name is required');
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.componentPropertyService.updateComponentProperty(this.selectedComponentProperty.id, this.selectedComponentProperty).subscribe({
-      next: (data) => {
-        const index = this.componentProperties.findIndex(cp => cp.id === data.id);
-        if (index !== -1) {
-          this.componentProperties[index] = data;
-        }
-        this.selectedComponentProperty = null;
-        this.showSuccess('Component property updated successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error updating component property:', error);
-        this.showError('Error updating component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  deleteComponentProperty(id: number): void {
-    if (!confirm('Are you sure you want to delete this component property?')) {
-      return;
-    }
-
-    this.componentPropertyLoadingState = ClrLoadingState.LOADING;
-    this.componentPropertyService.deleteComponentProperty(id).subscribe({
-      next: () => {
-        this.componentProperties = this.componentProperties.filter(cp => cp.id !== id);
-        this.showSuccess('Component property deleted successfully');
-        this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error deleting component property:', error);
-        this.showError('Error deleting component property: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.componentPropertyLoadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  selectComponentPropertyForEdit(componentProperty: ComponentProperty): void {
-    this.selectedComponentProperty = { ...componentProperty };
-  }
-
-  // Helper method to view properties for a UI component
-  onViewComponentProperties(uiComponent: UiComponent): void {
-    this.selectedUiComponent = uiComponent;
-    this.loadComponentProperties(uiComponent.id);
-  }
-
-  goBack(): void {
-    if (this.chartType) {
-      this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]);
-    } else {
-      this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts
deleted file mode 100644
index d475ff9..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-
-export interface ChartType {
-  id: number;
-  name: string;
-  displayName: string;
-  description: string;
-  isActive: boolean;
-  createdAt: string;
-  updatedAt: string;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ChartTypeService {
-  private chartTypesUrl = 'api/chart-types';
-
-  constructor(private apiRequest: ApiRequestService) { }
-
-  // Get all chart types
-  getAllChartTypes(): Observable<ChartType[]> {
-    console.log('Fetching all chart types from', this.chartTypesUrl);
-    return this.apiRequest.get(this.chartTypesUrl);
-  }
-
-  // Get chart type by ID
-  getChartTypeById(id: number): Observable<ChartType> {
-    const url = `${this.chartTypesUrl}/${id}`;
-    console.log(`Fetching chart type ${id} from ${url}`);
-    return this.apiRequest.get(url);
-  }
-
-  // Create new chart type
-  createChartType(chartType: Partial<ChartType>): Observable<ChartType> {
-    console.log('Creating chart type:', chartType);
-    return this.apiRequest.post(this.chartTypesUrl, chartType);
-  }
-
-  // Update chart type
-  updateChartType(id: number, chartType: ChartType): Observable<ChartType> {
-    const url = `${this.chartTypesUrl}/${id}`;
-    console.log(`Updating chart type ${id}:`, chartType);
-    return this.apiRequest.put(url, chartType);
-  }
-
-  // Delete chart type
-  deleteChartType(id: number): Observable<void> {
-    const url = `${this.chartTypesUrl}/${id}`;
-    console.log(`Deleting chart type ${id}`);
-    return this.apiRequest.delete(url);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.html
deleted file mode 100644
index 1d854ee..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.html
+++ /dev/null
@@ -1,160 +0,0 @@
-<div class="edit-chart-type-page">
-  <div class="header">
-    <h2>Edit Chart Type</h2>
-  </div>
-
-  <!-- Loading State -->
-  <div *ngIf="loadingState === ClrLoadingState.LOADING" class="loading-spinner">
-    <clr-spinner clrMedium></clr-spinner>
-    <span>Loading chart type...</span>
-  </div>
-
-  <!-- Error and Success Messages -->
-  <div class="alert alert-danger" *ngIf="errorMessage">
-    <button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ errorMessage }}</span>
-    </div>
-  </div>
-
-  <div class="alert alert-success" *ngIf="successMessage">
-    <button type="button" class="close" aria-label="Close" (click)="successMessage = null">
-      <cds-icon shape="close"></cds-icon>
-    </button>
-    <div class="alert-item">
-      <span class="alert-text">{{ successMessage }}</span>
-    </div>
-  </div>
-
-  <!-- Chart Type Form -->
-  <div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
-    <div class="card-header">
-      <div class="chart-type-header">
-        <h3>{{ chartType.name }}</h3>
-        <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
-          {{ chartType.isActive ? 'Active' : 'Inactive' }}
-        </span>
-      </div>
-    </div>
-    <div class="card-block">
-      <form clrForm (ngSubmit)="updateChartType()" #editChartTypeForm="ngForm">
-        <clr-input-container>
-          <label>Name <span class="required">*</span></label>
-          <input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
-          <clr-control-helper>Enter a unique name for the chart type (e.g., "line-chart", "bar-chart")</clr-control-helper>
-        </clr-input-container>
-
-        <clr-input-container>
-          <label>Display Name</label>
-          <input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
-          <clr-control-helper>This is the user-friendly name shown in the UI</clr-control-helper>
-        </clr-input-container>
-
-        <clr-textarea-container>
-          <label>Description</label>
-          <textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
-          <clr-control-helper>Provide a detailed description of this chart type and when to use it</clr-control-helper>
-        </clr-textarea-container>
-
-        <clr-checkbox-container>
-          <label>Is Active</label>
-          <clr-checkbox-wrapper>
-            <input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
-            <label>Active</label>
-          </clr-checkbox-wrapper>
-          <clr-control-helper>Deactivate chart types that should not be available for selection</clr-control-helper>
-        </clr-checkbox-container>
-
-        <div class="form-actions">
-          <button class="btn btn-primary" type="submit" [disabled]="!chartType.name || loadingState === ClrLoadingState.LOADING">
-            <clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
-            Update Chart Type
-          </button>
-          <button class="btn" type="button" (click)="onCancel()">Cancel</button>
-          <button class="btn btn-danger" type="button" (click)="onDelete()" style="margin-left: auto;">
-            <cds-icon shape="trash"></cds-icon> Delete
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <!-- Related Entities Management -->
-  <div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
-    <div class="card-header">
-      <h3>Related Configuration</h3>
-    </div>
-    <div class="card-block">
-      <div class="related-entities-grid">
-        <div class="entity-card">
-          <div class="entity-header">
-            <cds-icon shape="view-list" size="24"></cds-icon>
-            <h4>UI Components</h4>
-          </div>
-          <p>Manage the UI components that define the configuration form for this chart type.</p>
-          <button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'ui-components']">
-            Manage UI Components
-          </button>
-        </div>
-        
-        <div class="entity-card">
-          <div class="entity-header">
-            <cds-icon shape="template" size="24"></cds-icon>
-            <h4>Chart Templates</h4>
-          </div>
-          <p>Manage the templates that define how this chart type is rendered.</p>
-          <button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'templates']">
-            Manage Templates
-          </button>
-        </div>
-        
-        <div class="entity-card">
-          <div class="entity-header">
-            <cds-icon shape="form" size="24"></cds-icon>
-            <h4>Dynamic Fields</h4>
-          </div>
-          <p>Manage the dynamic fields that capture specific configuration parameters.</p>
-          <button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'fields']">
-            Manage Fields
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Chart Type Details -->
-  <div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
-    <div class="card-header">
-      <h3>Chart Type Details</h3>
-    </div>
-    <div class="card-block">
-      <div class="details-grid">
-        <div class="detail-item">
-          <label>ID:</label>
-          <span>{{ chartType.id }}</span>
-        </div>
-        <div class="detail-item">
-          <label>Created At:</label>
-          <span>{{ chartType.createdAt ? (chartType.createdAt | date:'medium') : 'N/A' }}</span>
-        </div>
-        <div class="detail-item">
-          <label>Updated At:</label>
-          <span>{{ chartType.updatedAt ? (chartType.updatedAt | date:'medium') : 'N/A' }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="info-section">
-    <h4>About Chart Types</h4>
-    <p>Chart types define the different visualization options available in the dashboard builder. Each chart type can have:</p>
-    <ul>
-      <li>Associated UI components that define the configuration form</li>
-      <li>Templates that define how the chart is rendered</li>
-      <li>Dynamic fields that capture specific configuration parameters</li>
-    </ul>
-    <p>After creating a chart type, you can configure its components, templates, and fields using the management links above.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss
deleted file mode 100644
index 2c38984..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-.edit-chart-type-page {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-
-  .header {
-    margin-bottom: 20px;
-    h2 {
-      color: #0079b8;
-      font-weight: 300;
-    }
-  }
-
-  .loading-spinner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    gap: 10px;
-  }
-
-  .card {
-    margin-bottom: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    
-    .card-block {
-      padding: 20px;
-    }
-    
-    .card-header {
-      .chart-type-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        
-        h3 {
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  .form-actions {
-    margin-top: 20px;
-    display: flex;
-    gap: 10px;
-  }
-
-  .related-entities-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 20px;
-    
-    .entity-card {
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      padding: 20px;
-      text-align: center;
-      background-color: #f9f9f9;
-      
-      .entity-header {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 15px;
-        
-        cds-icon {
-          color: #0079b8;
-          margin-bottom: 10px;
-        }
-        
-        h4 {
-          margin: 0;
-          color: #0079b8;
-        }
-      }
-      
-      p {
-        color: #666;
-        margin-bottom: 15px;
-        min-height: 60px;
-      }
-      
-      .btn-link {
-        font-weight: 500;
-      }
-    }
-  }
-
-  .details-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 15px;
-    
-    .detail-item {
-      display: flex;
-      flex-direction: column;
-      
-      label {
-        font-weight: bold;
-        margin-bottom: 5px;
-        color: #333;
-      }
-      
-      span {
-        padding: 8px;
-        background-color: #f6f6f6;
-        border-radius: 4px;
-      }
-    }
-  }
-
-  .info-section {
-    background-color: #f6f6f6;
-    border-left: 4px solid #0079b8;
-    padding: 15px;
-    border-radius: 4px;
-    
-    h4 {
-      margin-top: 0;
-      color: #0079b8;
-    }
-    
-    ul {
-      padding-left: 20px;
-      
-      li {
-        margin-bottom: 8px;
-      }
-    }
-    
-    p {
-      margin: 10px 0;
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 10px;
-    
-    .form-actions {
-      flex-direction: column;
-      
-      button {
-        width: 100%;
-        margin-bottom: 10px;
-      }
-    }
-    
-    .chart-type-header {
-      flex-direction: column;
-      align-items: flex-start !important;
-      
-      .label {
-        margin-top: 10px;
-      }
-    }
-    
-    .related-entities-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-}    
-    
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts
deleted file mode 100644
index fd8846c..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/edit-chart-type.component.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ClrLoadingState } from '@clr/angular';
-import { ChartType, ChartTypeService } from './chart-type.service';
-
-@Component({
-  selector: 'app-edit-chart-type',
-  templateUrl: './edit-chart-type.component.html',
-  styleUrls: ['./edit-chart-type.component.scss']
-})
-export class EditChartTypeComponent implements OnInit {
-  chartType: ChartType | null = null;
-  loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
-  errorMessage: string | null = null;
-  successMessage: string | null = null;
-
-  // Make ClrLoadingState available to template
-  readonly ClrLoadingState = ClrLoadingState;
-
-  constructor(
-    private chartTypeService: ChartTypeService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) { }
-
-  ngOnInit(): void {
-    const id = Number(this.route.snapshot.paramMap.get('id'));
-    if (id) {
-      this.loadChartType(id);
-    } else {
-      this.showError('Invalid chart type ID');
-    }
-  }
-
-  // Show error message
-  private showError(message: string): void {
-    this.errorMessage = message;
-    setTimeout(() => {
-      this.errorMessage = null;
-    }, 5000);
-  }
-
-  // Show success message
-  private showSuccess(message: string): void {
-    this.successMessage = message;
-    setTimeout(() => {
-      this.successMessage = null;
-    }, 3000);
-  }
-
-  loadChartType(id: number): void {
-    this.loadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.getChartTypeById(id).subscribe({
-      next: (data) => {
-        // Process the data to ensure dates are properly formatted
-        this.chartType = {
-          ...data,
-          createdAt: this.formatDate(data.createdAt),
-          updatedAt: this.formatDate(data.updatedAt)
-        };
-        this.loadingState = ClrLoadingState.SUCCESS;
-      },
-      error: (error) => {
-        console.error('Error loading chart type:', error);
-        this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  // Format date to handle both string and object formats
-  private formatDate(date: any): string {
-    if (!date) return '';
-    
-    // If it's already a string, return as is
-    if (typeof date === 'string') {
-      return date;
-    }
-    
-    // If it's an object, try to convert to string
-    if (typeof date === 'object') {
-      // Handle various date object formats
-      if (date instanceof Date) {
-        return date.toISOString();
-      }
-      
-      // Handle ISO string within object
-      if (date.date) {
-        return date.date;
-      }
-      
-      // Handle other object formats
-      try {
-        return new Date(date).toISOString();
-      } catch {
-        return '';
-      }
-    }
-    
-    return '';
-  }
-
-  updateChartType(): void {
-    if (!this.chartType || !this.chartType.name) {
-      this.showError('Chart type name is required');
-      return;
-    }
-
-    this.loadingState = ClrLoadingState.LOADING;
-    this.chartTypeService.updateChartType(this.chartType.id, this.chartType).subscribe({
-      next: (data) => {
-        // Process the data to ensure dates are properly formatted
-        this.chartType = {
-          ...data,
-          createdAt: this.formatDate(data.createdAt),
-          updatedAt: this.formatDate(data.updatedAt)
-        };
-        this.showSuccess('Chart type updated successfully');
-        this.loadingState = ClrLoadingState.SUCCESS;
-        // Redirect to chart types list after a short delay
-        setTimeout(() => {
-          this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-        }, 1500);
-      },
-      error: (error) => {
-        console.error('Error updating chart type:', error);
-        this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-        this.loadingState = ClrLoadingState.ERROR;
-      }
-    });
-  }
-
-  onCancel(): void {
-    this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-  }
-
-  onDelete(): void {
-    if (!this.chartType) return;
-    
-    if (confirm('Are you sure you want to delete this chart type? This action cannot be undone.')) {
-      this.loadingState = ClrLoadingState.LOADING;
-      this.chartTypeService.deleteChartType(this.chartType.id).subscribe({
-        next: () => {
-          this.showSuccess('Chart type deleted successfully');
-          this.loadingState = ClrLoadingState.SUCCESS;
-          // Redirect to chart types list after a short delay
-          setTimeout(() => {
-            this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
-          }, 1500);
-        },
-        error: (error) => {
-          console.error('Error deleting chart type:', error);
-          this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
-          this.loadingState = ClrLoadingState.ERROR;
-        }
-      });
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/EXAMPLE_USAGE.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/EXAMPLE_USAGE.md
deleted file mode 100644
index 3d536da..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/EXAMPLE_USAGE.md
+++ /dev/null
@@ -1,687 +0,0 @@
-# Common Filter System - Example Usage
-
-## Dashboard Layout
-
-```
-+-----------------------------------------------------+
-| Common Filter Widget (Draggable)                    |
-|                                                     |
-| [Category ▼] [Status ▼] [Date Range] [Active -toggle]|
-| [Save Preset] [Preset Selector] [Reset]             |
-+-----------------------------------------------------+
-| +-----------+  +-----------+  +-----------+          |
-| | Bar Chart |  | Line Chart|  | Pie Chart |          |
-| |           |  |           |  |           |          |
-| |           |  |           |  |           |          |
-| +-----------+  +-----------+  +-----------+          |
-|                                                     |
-| +-----------+  +-----------+  +-----------+          |
-| | Table     |  | Map       |  | KPI Cards |          |
-| |           |  |           |  |           |          |
-| |           |  |           |  |           |          |
-| +-----------+  +-----------+  +-----------+          |
-+-----------------------------------------------------+
-```
-
-## Filter Configuration Example
-
-### 1. Creating Filter Definitions
-
-```typescript
-// In CommonFilterComponent or dashboard initialization
-const filters: Filter[] = [
-  {
-    id: 'category',
-    field: 'product_category',
-    label: 'Category',
-    type: 'dropdown',
-    options: ['Electronics', 'Clothing', 'Home & Garden', 'Books', 'Sports']
-  },
-  {
-    id: 'status',
-    field: 'order_status',
-    label: 'Status',
-    type: 'multiselect',
-    options: ['Pending', 'Processing', 'Shipped', 'Delivered', 'Cancelled']
-  },
-  {
-    id: 'date_range',
-    field: 'order_date',
-    label: 'Order Date',
-    type: 'date-range'
-  },
-  {
-    id: 'active',
-    field: 'is_active',
-    label: 'Active Orders',
-    type: 'toggle'
-  }
-];
-
-// Set filters in the service
-filterService.setFilters(filters);
-```
-
-### 2. Setting Initial Filter Values
-
-```typescript
-// Set initial values
-filterService.updateFilterValue('category', 'Electronics');
-filterService.updateFilterValue('status', ['Processing', 'Shipped']);
-filterService.updateFilterValue('date_range', {
-  start: '2023-01-01',
-  end: '2023-12-31'
-});
-filterService.updateFilterValue('active', true);
-```
-
-### 3. Chart Component Integration
-
-```typescript
-// In bar-chart.component.ts
-export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
-  private subscriptions: Subscription[] = [];
-
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService
-  ) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.subscriptions.push(
-      this.filterService.filterState$.subscribe(filters => {
-        this.refreshData();
-      })
-    );
-    
-    // Load initial data
-    this.fetchChartData();
-  }
-
-  fetchChartData(): void {
-    // Get current filter values
-    const filterValues = this.filterService.getFilterValues();
-    
-    // Build filter parameters for API
-    let filterParams = '';
-    if (Object.keys(filterValues).length > 0) {
-      const filterObj = {};
-      
-      // Add base filters first
-      if (this.baseFilters && this.baseFilters.length > 0) {
-        this.baseFilters.forEach(filter => {
-          if (filter.field && filter.value) {
-            filterObj[filter.field] = filter.value;
-          }
-        });
-      }
-      
-      // Add common filters
-      Object.keys(filterValues).forEach(key => {
-        const value = filterValues[key];
-        if (value !== undefined && value !== null && value !== '') {
-          filterObj[key] = value;
-        }
-      });
-      
-      if (Object.keys(filterObj).length > 0) {
-        filterParams = JSON.stringify(filterObj);
-      }
-    }
-    
-    // Make API call with filters
-    this.dashboardService.getChartData(
-      this.table, 
-      'bar', 
-      this.xAxis, 
-      this.yAxis, 
-      this.connection, 
-      '', 
-      '', 
-      filterParams
-    ).subscribe(data => {
-      // Handle response
-      this.processChartData(data);
-    });
-  }
-
-  refreshData(): void {
-    this.fetchChartData();
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-  }
-}
-```
-
-### 4. API Endpoint Example
-
-```javascript
-// Backend API endpoint example
-app.get('/chart/getdashjson/bar', (req, res) => {
-  const {
-    tableName,
-    xAxis,
-    yAxes,
-    sureId,
-    filters // JSON string of filters
-  } = req.query;
-  
-  // Parse filters
-  let filterObj = {};
-  if (filters) {
-    try {
-      filterObj = JSON.parse(filters);
-    } catch (e) {
-      console.error('Failed to parse filters:', e);
-    }
-  }
-  
-  // Build database query with filters
-  let query = `SELECT ${xAxis}, ${yAxes} FROM ${tableName}`;
-  const whereConditions = [];
-  
-  // Add filter conditions
-  Object.keys(filterObj).forEach(field => {
-    const value = filterObj[field];
-    if (Array.isArray(value)) {
-      // Handle multiselect (IN clause)
-      const values = value.map(v => `'${v}'`).join(',');
-      whereConditions.push(`${field} IN (${values})`);
-    } else if (typeof value === 'object' && value.start && value.end) {
-      // Handle date range
-      whereConditions.push(`${field} BETWEEN '${value.start}' AND '${value.end}'`);
-    } else if (typeof value === 'boolean') {
-      // Handle boolean
-      whereConditions.push(`${field} = ${value}`);
-    } else {
-      // Handle text and other values
-      whereConditions.push(`${field} = '${value}'`);
-    }
-  });
-  
-  if (whereConditions.length > 0) {
-    query += ` WHERE ${whereConditions.join(' AND ')}`;
-  }
-  
-  // Execute query and return results
-  database.query(query, (err, results) => {
-    if (err) {
-      res.status(500).json({ error: err.message });
-    } else {
-      res.json({
-        chartLabels: results.map(row => row[xAxis]),
-        chartData: [{
-          data: results.map(row => row[yAxes]),
-          label: yAxes
-        }]
-      });
-    }
-  });
-});
-```
-
-## Filter Presets Example
-
-### Saving a Preset
-
-```typescript
-// Save current filter state as a preset
-const presetName = 'Q4 2023 Sales';
-filterService.savePreset(presetName);
-
-// Preset is now available in the presets list
-const presets = filterService.getPresets(); // ['Q4 2023 Sales', ...]
-```
-
-### Loading a Preset
-
-```typescript
-// Load a saved preset
-filterService.loadPreset('Q4 2023 Sales');
-
-// All charts will automatically refresh with the preset filters
-```
-
-## Cross-Filtering Example
-
-```typescript
-// In a chart component, handle click events
-onBarClick(event: any): void {
-  const clickedCategory = event.active[0]._model.label;
-  
-  // Update the category filter
-  this.filterService.updateFilterValue('category', clickedCategory);
-  
-  // All other charts will automatically update
-}
-```
-
-## URL Synchronization Example
-
-```typescript
-// Update URL when filters change
-this.filterService.filterState$.subscribe(filters => {
-  const queryParams = new URLSearchParams();
-  
-  Object.keys(filters).forEach(key => {
-    const value = filters[key];
-    if (value !== undefined && value !== null && value !== '') {
-      if (typeof value === 'object') {
-        if (value.hasOwnProperty('start') && value.hasOwnProperty('end')) {
-          // Date range
-          if (value.start) queryParams.append(`${key}_start`, value.start);
-          if (value.end) queryParams.append(`${key}_end`, value.end);
-        } else {
-          // Other objects as JSON
-          queryParams.append(key, JSON.stringify(value));
-        }
-      } else {
-        // Simple values
-        queryParams.append(key, value.toString());
-      }
-    }
-  });
-  
-  // Update browser URL
-  const newUrl = `${window.location.pathname}?${queryParams.toString()}`;
-  window.history.replaceState({}, '', newUrl);
-});
-
-// Load filters from URL on page load
-ngOnInit(): void {
-  const urlParams = new URLSearchParams(window.location.search);
-  const filterState: any = {};
-  
-  // Parse URL parameters back into filter state
-  for (const [key, value] of urlParams.entries()) {
-    if (key.endsWith('_start')) {
-      const fieldName = key.replace('_start', '');
-      filterState[fieldName] = filterState[fieldName] || {};
-      filterState[fieldName].start = value;
-    } else if (key.endsWith('_end')) {
-      const fieldName = key.replace('_end', '');
-      filterState[fieldName] = filterState[fieldName] || {};
-      filterState[fieldName].end = value;
-    } else {
-      try {
-        filterState[key] = JSON.parse(value);
-      } catch (e) {
-        filterState[key] = value;
-      }
-    }
-  }
-  
-  // Apply URL filters
-  Object.keys(filterState).forEach(key => {
-    this.filterService.updateFilterValue(key, filterState[key]);
-  });
-}
-```
-
-## Data Flow Diagram
-
-```mermaid
-sequenceDiagram
-    participant User
-    participant CommonFilterComponent
-    participant FilterService
-    participant ChartComponent
-    participant API
-
-    User->>CommonFilterComponent: Configure filters
-    CommonFilterComponent->>FilterService: Update filter state
-    FilterService->>ChartComponent: Notify filter change
-    ChartComponent->>FilterService: Request current filters
-    FilterService-->>ChartComponent: Return filter values
-    ChartComponent->>API: Fetch data with filters
-    API-->>ChartComponent: Return filtered data
-    ChartComponent->>User: Display updated chart
-```
-
-This implementation provides a robust, scalable solution for managing common filters across multiple dashboard components with real-time updates and flexible configuration options.# Common Filter System - Example Usage
-
-## Dashboard Layout
-
-```
-+-----------------------------------------------------+
-| Common Filter Widget (Draggable)                    |
-|                                                     |
-| [Category ▼] [Status ▼] [Date Range] [Active -toggle]|
-| [Save Preset] [Preset Selector] [Reset]             |
-+-----------------------------------------------------+
-| +-----------+  +-----------+  +-----------+          |
-| | Bar Chart |  | Line Chart|  | Pie Chart |          |
-| |           |  |           |  |           |          |
-| |           |  |           |  |           |          |
-| +-----------+  +-----------+  +-----------+          |
-|                                                     |
-| +-----------+  +-----------+  +-----------+          |
-| | Table     |  | Map       |  | KPI Cards |          |
-| |           |  |           |  |           |          |
-| |           |  |           |  |           |          |
-| +-----------+  +-----------+  +-----------+          |
-+-----------------------------------------------------+
-```
-
-## Filter Configuration Example
-
-### 1. Creating Filter Definitions
-
-```typescript
-// In CommonFilterComponent or dashboard initialization
-const filters: Filter[] = [
-  {
-    id: 'category',
-    field: 'product_category',
-    label: 'Category',
-    type: 'dropdown',
-    options: ['Electronics', 'Clothing', 'Home & Garden', 'Books', 'Sports']
-  },
-  {
-    id: 'status',
-    field: 'order_status',
-    label: 'Status',
-    type: 'multiselect',
-    options: ['Pending', 'Processing', 'Shipped', 'Delivered', 'Cancelled']
-  },
-  {
-    id: 'date_range',
-    field: 'order_date',
-    label: 'Order Date',
-    type: 'date-range'
-  },
-  {
-    id: 'active',
-    field: 'is_active',
-    label: 'Active Orders',
-    type: 'toggle'
-  }
-];
-
-// Set filters in the service
-filterService.setFilters(filters);
-```
-
-### 2. Setting Initial Filter Values
-
-```typescript
-// Set initial values
-filterService.updateFilterValue('category', 'Electronics');
-filterService.updateFilterValue('status', ['Processing', 'Shipped']);
-filterService.updateFilterValue('date_range', {
-  start: '2023-01-01',
-  end: '2023-12-31'
-});
-filterService.updateFilterValue('active', true);
-```
-
-### 3. Chart Component Integration
-
-```typescript
-// In bar-chart.component.ts
-export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
-  private subscriptions: Subscription[] = [];
-
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService
-  ) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.subscriptions.push(
-      this.filterService.filterState$.subscribe(filters => {
-        this.refreshData();
-      })
-    );
-    
-    // Load initial data
-    this.fetchChartData();
-  }
-
-  fetchChartData(): void {
-    // Get current filter values
-    const filterValues = this.filterService.getFilterValues();
-    
-    // Build filter parameters for API
-    let filterParams = '';
-    if (Object.keys(filterValues).length > 0) {
-      const filterObj = {};
-      
-      // Add base filters first
-      if (this.baseFilters && this.baseFilters.length > 0) {
-        this.baseFilters.forEach(filter => {
-          if (filter.field && filter.value) {
-            filterObj[filter.field] = filter.value;
-          }
-        });
-      }
-      
-      // Add common filters
-      Object.keys(filterValues).forEach(key => {
-        const value = filterValues[key];
-        if (value !== undefined && value !== null && value !== '') {
-          filterObj[key] = value;
-        }
-      });
-      
-      if (Object.keys(filterObj).length > 0) {
-        filterParams = JSON.stringify(filterObj);
-      }
-    }
-    
-    // Make API call with filters
-    this.dashboardService.getChartData(
-      this.table, 
-      'bar', 
-      this.xAxis, 
-      this.yAxis, 
-      this.connection, 
-      '', 
-      '', 
-      filterParams
-    ).subscribe(data => {
-      // Handle response
-      this.processChartData(data);
-    });
-  }
-
-  refreshData(): void {
-    this.fetchChartData();
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-  }
-}
-```
-
-### 4. API Endpoint Example
-
-```javascript
-// Backend API endpoint example
-app.get('/chart/getdashjson/bar', (req, res) => {
-  const {
-    tableName,
-    xAxis,
-    yAxes,
-    sureId,
-    filters // JSON string of filters
-  } = req.query;
-  
-  // Parse filters
-  let filterObj = {};
-  if (filters) {
-    try {
-      filterObj = JSON.parse(filters);
-    } catch (e) {
-      console.error('Failed to parse filters:', e);
-    }
-  }
-  
-  // Build database query with filters
-  let query = `SELECT ${xAxis}, ${yAxes} FROM ${tableName}`;
-  const whereConditions = [];
-  
-  // Add filter conditions
-  Object.keys(filterObj).forEach(field => {
-    const value = filterObj[field];
-    if (Array.isArray(value)) {
-      // Handle multiselect (IN clause)
-      const values = value.map(v => `'${v}'`).join(',');
-      whereConditions.push(`${field} IN (${values})`);
-    } else if (typeof value === 'object' && value.start && value.end) {
-      // Handle date range
-      whereConditions.push(`${field} BETWEEN '${value.start}' AND '${value.end}'`);
-    } else if (typeof value === 'boolean') {
-      // Handle boolean
-      whereConditions.push(`${field} = ${value}`);
-    } else {
-      // Handle text and other values
-      whereConditions.push(`${field} = '${value}'`);
-    }
-  });
-  
-  if (whereConditions.length > 0) {
-    query += ` WHERE ${whereConditions.join(' AND ')}`;
-  }
-  
-  // Execute query and return results
-  database.query(query, (err, results) => {
-    if (err) {
-      res.status(500).json({ error: err.message });
-    } else {
-      res.json({
-        chartLabels: results.map(row => row[xAxis]),
-        chartData: [{
-          data: results.map(row => row[yAxes]),
-          label: yAxes
-        }]
-      });
-    }
-  });
-});
-```
-
-## Filter Presets Example
-
-### Saving a Preset
-
-```typescript
-// Save current filter state as a preset
-const presetName = 'Q4 2023 Sales';
-filterService.savePreset(presetName);
-
-// Preset is now available in the presets list
-const presets = filterService.getPresets(); // ['Q4 2023 Sales', ...]
-```
-
-### Loading a Preset
-
-```typescript
-// Load a saved preset
-filterService.loadPreset('Q4 2023 Sales');
-
-// All charts will automatically refresh with the preset filters
-```
-
-## Cross-Filtering Example
-
-```typescript
-// In a chart component, handle click events
-onBarClick(event: any): void {
-  const clickedCategory = event.active[0]._model.label;
-  
-  // Update the category filter
-  this.filterService.updateFilterValue('category', clickedCategory);
-  
-  // All other charts will automatically update
-}
-```
-
-## URL Synchronization Example
-
-```typescript
-// Update URL when filters change
-this.filterService.filterState$.subscribe(filters => {
-  const queryParams = new URLSearchParams();
-  
-  Object.keys(filters).forEach(key => {
-    const value = filters[key];
-    if (value !== undefined && value !== null && value !== '') {
-      if (typeof value === 'object') {
-        if (value.hasOwnProperty('start') && value.hasOwnProperty('end')) {
-          // Date range
-          if (value.start) queryParams.append(`${key}_start`, value.start);
-          if (value.end) queryParams.append(`${key}_end`, value.end);
-        } else {
-          // Other objects as JSON
-          queryParams.append(key, JSON.stringify(value));
-        }
-      } else {
-        // Simple values
-        queryParams.append(key, value.toString());
-      }
-    }
-  });
-  
-  // Update browser URL
-  const newUrl = `${window.location.pathname}?${queryParams.toString()}`;
-  window.history.replaceState({}, '', newUrl);
-});
-
-// Load filters from URL on page load
-ngOnInit(): void {
-  const urlParams = new URLSearchParams(window.location.search);
-  const filterState: any = {};
-  
-  // Parse URL parameters back into filter state
-  for (const [key, value] of urlParams.entries()) {
-    if (key.endsWith('_start')) {
-      const fieldName = key.replace('_start', '');
-      filterState[fieldName] = filterState[fieldName] || {};
-      filterState[fieldName].start = value;
-    } else if (key.endsWith('_end')) {
-      const fieldName = key.replace('_end', '');
-      filterState[fieldName] = filterState[fieldName] || {};
-      filterState[fieldName].end = value;
-    } else {
-      try {
-        filterState[key] = JSON.parse(value);
-      } catch (e) {
-        filterState[key] = value;
-      }
-    }
-  }
-  
-  // Apply URL filters
-  Object.keys(filterState).forEach(key => {
-    this.filterService.updateFilterValue(key, filterState[key]);
-  });
-}
-```
-
-## Data Flow Diagram
-
-```mermaid
-sequenceDiagram
-    participant User
-    participant CommonFilterComponent
-    participant FilterService
-    participant ChartComponent
-    participant API
-
-    User->>CommonFilterComponent: Configure filters
-    CommonFilterComponent->>FilterService: Update filter state
-    FilterService->>ChartComponent: Notify filter change
-    ChartComponent->>FilterService: Request current filters
-    FilterService-->>ChartComponent: Return filter values
-    ChartComponent->>API: Fetch data with filters
-    API-->>ChartComponent: Return filtered data
-    ChartComponent->>User: Display updated chart
-```
-
-This implementation provides a robust, scalable solution for managing common filters across multiple dashboard components with real-time updates and flexible configuration options.
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/IMPLEMENTATION_GUIDE.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/IMPLEMENTATION_GUIDE.md
deleted file mode 100644
index b56127f..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/IMPLEMENTATION_GUIDE.md
+++ /dev/null
@@ -1,219 +0,0 @@
-# Common Filter Implementation Guide
-
-## Overview
-
-This implementation provides a centralized filter system that allows users to control multiple charts simultaneously through a draggable filter widget. The system consists of:
-
-1. **FilterService** - Central service managing filter definitions and state
-2. **CommonFilterComponent** - Draggable widget for configuring filters
-3. **Chart Components** - Updated chart components that subscribe to filter changes
-
-## Architecture
-
-```mermaid
-graph TB
-    A[FilterService] --> B[CommonFilterComponent]
-    A --> C[BarChartComponent]
-    A --> D[LineChartComponent]
-    A --> E[OtherChartComponents]
-    F[User Interaction] --> B
-```
-
-## Key Components
-
-### 1. FilterService
-
-The central service that manages:
-- Filter definitions (type, options, labels)
-- Current filter values
-- Filter presets
-- Query parameter generation for API calls
-
-#### Methods:
-- `addFilter()` - Add a new filter
-- `removeFilter()` - Remove a filter
-- `updateFilterValue()` - Update a filter's value
-- `getFilterValues()` - Get current filter values
-- `resetFilters()` - Reset all filters to default values
-- `savePreset()` - Save current filter state as a preset
-- `loadPreset()` - Load a saved preset
-- `buildQueryParams()` - Generate query parameters for API calls
-
-### 2. CommonFilterComponent
-
-A draggable widget that provides the UI for:
-- Adding/removing filters
-- Configuring filter properties
-- Setting filter values
-- Managing presets
-
-### 3. Chart Components
-
-Updated chart components that:
-- Subscribe to filter changes
-- Automatically refresh when filters change
-- Include filter values in API calls
-
-## Implementation Details
-
-### Filter Types Supported
-
-1. **Text** - Simple text input
-2. **Dropdown** - Single selection from options
-3. **Multiselect** - Multiple selection from options
-4. **Date Range** - Start and end date selection
-5. **Toggle** - Boolean on/off switch
-
-### Data Flow
-
-1. User adds/configures filters in CommonFilterComponent
-2. FilterService stores filter definitions and values
-3. Chart components subscribe to FilterService.filterState$
-4. When filters change, charts automatically refresh
-5. Filter values are included in API calls as query parameters
-
-### API Integration
-
-Filters are passed to the backend as query parameters:
-- Text filter: `name=John`
-- Dropdown filter: `category=A`
-- Multiselect filter: `tags=["tag1","tag2"]`
-- Date range filter: `date_start=2023-01-01&date_end=2023-12-31`
-- Toggle filter: `isActive=true`
-
-## Usage Examples
-
-### Adding the Common Filter Widget
-
-1. Drag the "Common Filter" widget from the component palette
-2. Place it at the top of the dashboard
-3. Configure filters as needed
-
-### Creating Filters
-
-```typescript
-// Add a text filter
-const textFilter: Filter = {
-  id: 'name',
-  field: 'name',
-  label: 'Name',
-  type: 'text'
-};
-
-// Add a dropdown filter
-const dropdownFilter: Filter = {
-  id: 'category',
-  field: 'category',
-  label: 'Category',
-  type: 'dropdown',
-  options: ['A', 'B', 'C']
-};
-```
-
-### Consuming Filters in Charts
-
-```typescript
-// In chart component
-constructor(private filterService: FilterService) {}
-
-ngOnInit(): void {
-  // Subscribe to filter changes
-  this.subscriptions.push(
-    this.filterService.filterState$.subscribe(filters => {
-      this.fetchChartData();
-    })
-  );
-}
-
-fetchChartData(): void {
-  // Get current filter values
-  const filterValues = this.filterService.getFilterValues();
-  
-  // Include in API call
-  const queryParams = this.filterService.buildQueryParams();
-  // Use queryParams in API call
-}
-```
-
-## JSON Structures
-
-### Filter Definition
-
-```json
-{
-  "id": "filter_123456",
-  "field": "category",
-  "label": "Category",
-  "type": "dropdown",
-  "options": ["Electronics", "Clothing", "Books"],
-  "value": "Electronics"
-}
-```
-
-### Filter State
-
-```json
-{
-  "category": "Electronics",
-  "price_range": {
-    "start": 100,
-    "end": 500
-  },
-  "in_stock": true,
-  "tags": ["sale", "featured"]
-}
-```
-
-### API Response Format
-
-```json
-{
-  "chartLabels": ["Jan", "Feb", "Mar"],
-  "chartData": [
-    {
-      "data": [10, 20, 30],
-      "label": "Sales"
-    }
-  ]
-}
-```
-
-## Cross-Filtering Support
-
-Charts can also support cross-filtering where clicking on one chart updates the common filters:
-
-1. Implement click handlers in chart components
-2. Update filter values through FilterService
-3. All other charts automatically refresh
-
-Example:
-```typescript
-onChartClick(dataPoint: any): void {
-  // Update a filter based on chart click
-  this.filterService.updateFilterValue('category', dataPoint.category);
-}
-```
-
-## Preset Management
-
-Users can save and load filter presets:
-
-1. Configure desired filters
-2. Enter a preset name and click "Save Preset"
-3. Select preset from dropdown to load
-4. Delete presets as needed
-
-## URL Synchronization
-
-Filter states can be synchronized with URL query parameters for shareable dashboards:
-
-1. On filter change, update URL query parameters
-2. On page load, read filters from URL
-3. Apply filters to charts
-
-## Optional Enhancements
-
-1. **Real-time Updates** - WebSocket integration for live data
-2. **Advanced Filtering** - Custom filter expressions
-3. **Filter Dependencies** - Conditional filters based on other filter values
-4. **Analytics** - Track most used filters and combinations
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.scss
deleted file mode 100644
index 822c149..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.chart-wrapper {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  
-  .chart-header {
-    padding: 10px 15px;
-    background: #f8f8f8;
-    border-bottom: 1px solid #eee;
-    
-    h5 {
-      margin: 0;
-      color: #333;
-      font-size: 16px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  
-  .chart-container {
-    flex: 1;
-    padding: 15px;
-    overflow: auto;
-    position: relative;
-    
-    // Ensure chart containers fill available space
-    ::ng-deep canvas {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .chart-wrapper {
-    .chart-header {
-      padding: 8px 12px;
-      
-      h5 {
-        font-size: 14px;
-      }
-    }
-    
-    .chart-container {
-      padding: 10px;
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .chart-wrapper {
-    .chart-header {
-      padding: 6px 10px;
-      
-      h5 {
-        font-size: 13px;
-      }
-    }
-    
-    .chart-container {
-      padding: 8px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.spec.ts
deleted file mode 100644
index 74d20dd..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ChartWrapperComponent } from './chart-wrapper.component';
-import { FilterService } from './filter.service';
-
-describe('ChartWrapperComponent', () => {
-  let component: ChartWrapperComponent;
-  let fixture: ComponentFixture<ChartWrapperComponent>;
-  let filterService: FilterService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ChartWrapperComponent],
-      providers: [FilterService]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(ChartWrapperComponent);
-    component = fixture.componentInstance;
-    filterService = TestBed.inject(FilterService);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should subscribe to filter changes on init', () => {
-    spyOn(filterService.filterState$, 'subscribe');
-    component.ngOnInit();
-    expect(filterService.filterState$.subscribe).toHaveBeenCalled();
-  });
-
-  it('should unsubscribe from filter changes on destroy', () => {
-    component.ngOnInit();
-    spyOn(component['filterSubscription']!, 'unsubscribe');
-    component.ngOnDestroy();
-    expect(component['filterSubscription']!.unsubscribe).toHaveBeenCalled();
-  });
-});
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.ts
deleted file mode 100644
index 3552f1b..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/chart-wrapper.component.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Component, Input, OnInit, OnDestroy, ComponentRef, ViewChild, ViewContainerRef, HostListener } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { FilterService } from './filter.service';
-
-@Component({
-  selector: 'app-chart-wrapper',
-  template: `
-    <div class="chart-wrapper">
-      <div class="chart-header" *ngIf="chartTitle">
-        <h5>{{ chartTitle }}</h5>
-      </div>
-      <div class="chart-container">
-        <ng-container #chartContainer></ng-container>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./chart-wrapper.component.scss']
-})
-export class ChartWrapperComponent implements OnInit, OnDestroy {
-  @Input() chartComponent: any;
-  @Input() chartInputs: any = {};
-  @Input() chartTitle: string = '';
-
-  @ViewChild('chartContainer', { read: ViewContainerRef }) chartContainer!: ViewContainerRef;
-
-  private componentRef: ComponentRef<any> | null = null;
-  private filterSubscription: Subscription | null = null;
-
-  constructor(private filterService: FilterService) { }
-
-  ngOnInit(): void {
-    this.loadChartComponent();
-    this.subscribeToFilters();
-  }
-
-  ngOnDestroy(): void {
-    if (this.filterSubscription) {
-      this.filterSubscription.unsubscribe();
-    }
-    if (this.componentRef) {
-      this.componentRef.destroy();
-    }
-  }
-  
-  // Handle window resize events
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    // Notify the chart component to resize if it has a resize method
-    if (this.componentRef && this.componentRef.instance) {
-      const chartInstance = this.componentRef.instance;
-      
-      // If it's a chart component with an onResize method, call it
-      if (chartInstance.onResize && typeof chartInstance.onResize === 'function') {
-        chartInstance.onResize();
-      }
-      
-      // If it's a chart component with a chart property (from BaseChartDirective), resize it
-      if (chartInstance.chart && typeof chartInstance.chart.resize === 'function') {
-        setTimeout(() => {
-          chartInstance.chart.resize();
-        }, 100);
-      }
-    }
-  }
-
-  private loadChartComponent(): void {
-    if (this.chartContainer && this.chartComponent) {
-      this.chartContainer.clear();
-      const factory = this.chartContainer.createComponent(this.chartComponent);
-      this.componentRef = factory;
-      
-      // Set initial inputs
-      Object.keys(this.chartInputs).forEach(key => {
-        factory.instance[key] = this.chartInputs[key];
-      });
-    }
-  }
-
-  private subscribeToFilters(): void {
-    this.filterSubscription = this.filterService.filterState$.subscribe(filterValues => {
-      this.updateChartWithFilters(filterValues);
-    });
-  }
-
-  private updateChartWithFilters(filterValues: any): void {
-    if (this.componentRef) {
-      // Add filter values to chart inputs
-      const updatedInputs = {
-        ...this.chartInputs,
-        filterValues: filterValues,
-        // Pass the query params string for easy API integration
-        filterQueryParams: this.filterService.buildQueryParams()
-      };
-
-      // Update chart component inputs
-      Object.keys(updatedInputs).forEach(key => {
-        this.componentRef!.instance[key] = updatedInputs[key];
-      });
-
-      // Trigger change detection if the component has a method for it
-      if (this.componentRef!.instance.ngOnChanges) {
-        // We can't easily trigger ngOnChanges manually, but the input update should trigger it
-      }
-      
-      // If the chart component has a method to refresh data, call it
-      if (this.componentRef!.instance.refreshData) {
-        this.componentRef!.instance.refreshData();
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.html
deleted file mode 100644
index 9fa578a..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<div class="common-filter-container">
-  <!-- Filter Header -->
-  <div class="filter-header">
-    <h4>Common Filters</h4>
-    <button class="btn btn-sm btn-primary" (click)="addFilter()">
-      <clr-icon shape="plus"></clr-icon> Add Filter
-    </button>
-  </div>
-
-  <!-- Presets Section -->
-  <div class="presets-section" *ngIf="presets.length > 0">
-    <div class="preset-controls">
-      <select [(ngModel)]="activePreset" (change)="loadPreset(activePreset || '')" class="clr-select">
-        <option value="">Select Preset</option>
-        <option *ngFor="let preset of presets" [value]="preset">{{ preset }}</option>
-      </select>
-      <button class="btn btn-sm btn-danger" (click)="resetFilters()">
-        <clr-icon shape="undo"></clr-icon> Reset
-      </button>
-    </div>
-  </div>
-
-  <!-- Save Preset Section -->
-  <div class="save-preset-section">
-    <div class="clr-input-group">
-      <input type="text" [(ngModel)]="newPresetName" placeholder="Preset name" class="clr-input">
-      <div class="clr-input-group-btn">
-        <button class="btn btn-sm btn-success" (click)="savePreset()" [disabled]="!newPresetName.trim()">
-          <clr-icon shape="floppy"></clr-icon> Save Preset
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Filters Form -->
-  <form [formGroup]="filterForm" class="filters-form">
-    <div class="filters-grid">
-      <div *ngFor="let filter of filters" class="filter-item">
-        <div class="filter-header">
-          <span class="filter-label">{{ filter.label }}</span>
-          <button class="btn btn-icon btn-danger btn-sm" (click)="removeFilter(filter.id)">
-            <clr-icon shape="trash"></clr-icon>
-          </button>
-        </div>
-
-        <!-- Filter Type Selector -->
-        <div class="clr-form-control">
-          <select [(ngModel)]="filter.type" (ngModelChange)="updateFilter(filter.id, 'type', $event)" 
-                  [ngModelOptions]="{standalone: true}" class="clr-select filter-type-select">
-            <option value="text">Text</option>
-            <option value="dropdown">Dropdown</option>
-            <option value="multiselect">Multi-Select</option>
-            <option value="date-range">Date Range</option>
-            <option value="toggle">Toggle</option>
-          </select>
-        </div>
-
-        <!-- Filter Label Input -->
-        <div class="clr-form-control">
-          <input type="text" [(ngModel)]="filter.label" (ngModelChange)="updateFilter(filter.id, 'label', $event)" 
-                 [ngModelOptions]="{standalone: true}" placeholder="Filter Label" class="clr-input">
-        </div>
-
-        <!-- Filter Field Input -->
-        <div class="clr-form-control">
-          <input type="text" [(ngModel)]="filter.field" (ngModelChange)="updateFilter(filter.id, 'field', $event)" 
-                 [ngModelOptions]="{standalone: true}" placeholder="Field Name" class="clr-input">
-        </div>
-
-        <!-- Filter Options (for dropdown and multiselect) -->
-        <div class="clr-form-control" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
-          <textarea [(ngModel)]="filter.options" (ngModelChange)="updateFilter(filter.id, 'options', $event ? $event.split(',') : [])" 
-                    [ngModelOptions]="{standalone: true}" placeholder="Options (comma separated)" class="clr-textarea"></textarea>
-        </div>
-
-        <!-- Filter Controls Based on Type -->
-        <div class="filter-control" [ngSwitch]="filter.type">
-          <!-- Text Filter -->
-          <div *ngSwitchCase="'text'">
-            <input type="text" [formControlName]="filter.id" placeholder="Enter text" class="clr-input">
-          </div>
-
-          <!-- Dropdown Filter -->
-          <div *ngSwitchCase="'dropdown'">
-            <select [formControlName]="filter.id" class="clr-select">
-              <option value="">Select an option</option>
-              <option *ngFor="let option of filter.options" [value]="option">{{ option }}</option>
-            </select>
-          </div>
-
-          <!-- Multi-Select Filter -->
-          <div *ngSwitchCase="'multiselect'">
-            <select [formControlName]="filter.id" multiple class="clr-select multiselect">
-              <option *ngFor="let option of filter.options" [value]="option">{{ option }}</option>
-            </select>
-          </div>
-
-          <!-- Date Range Filter -->
-          <div *ngSwitchCase="'date-range'" class="date-range-controls">
-            <div class="clr-form-control">
-              <label>Start Date</label>
-              <input type="date" [ngModel]="filterForm.get(filter.id + '.start')?.value" 
-                     (ngModelChange)="onDateRangeChange(filter.id, { start: $event, end: filterForm.get(filter.id + '.end')?.value })" 
-                     [ngModelOptions]="{standalone: true}" class="clr-input">
-            </div>
-            <div class="clr-form-control">
-              <label>End Date</label>
-              <input type="date" [ngModel]="filterForm.get(filter.id + '.end')?.value" 
-                     (ngModelChange)="onDateRangeChange(filter.id, { start: filterForm.get(filter.id + '.start')?.value, end: $event })" 
-                     [ngModelOptions]="{standalone: true}" class="clr-input">
-            </div>
-          </div>
-
-          <!-- Toggle Filter -->
-          <div *ngSwitchCase="'toggle'" class="toggle-control">
-            <input type="checkbox" [formControlName]="filter.id" clrToggle class="clr-toggle">
-            <label>{{ filter.label }}</label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-
-  <!-- No Filters Message -->
-  <div class="no-filters" *ngIf="filters.length === 0">
-    <p>No filters added yet. Click "Add Filter" to create your first filter.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.scss
deleted file mode 100644
index 3bb3cb7..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.scss
+++ /dev/null
@@ -1,192 +0,0 @@
-.common-filter-container {
-  padding: 15px;
-  background: #f5f5f5;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  margin-bottom: 20px;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-
-  .filter-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
-    flex-wrap: wrap;
-    gap: 10px;
-
-    h4 {
-      margin: 0;
-      color: #333;
-      flex: 1;
-    }
-    
-    .btn {
-      white-space: nowrap;
-    }
-  }
-
-  .presets-section {
-    margin-bottom: 15px;
-    
-    .preset-controls {
-      display: flex;
-      gap: 10px;
-      align-items: center;
-      flex-wrap: wrap;
-      
-      select {
-        flex: 1;
-        min-width: 150px;
-      }
-      
-      .btn {
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .save-preset-section {
-    margin-bottom: 15px;
-    
-    .clr-input-group {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      
-      .clr-input {
-        flex: 1;
-        min-width: 150px;
-      }
-      
-      .clr-input-group-btn {
-        .btn {
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-
-  .filters-form {
-    .filters-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      gap: 15px;
-      
-      .filter-item {
-        background: white;
-        border: 1px solid #e0e0e0;
-        border-radius: 4px;
-        padding: 15px;
-        display: flex;
-        flex-direction: column;
-        
-        .filter-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 10px;
-          
-          .filter-label {
-            font-weight: bold;
-            color: #333;
-            flex: 1;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-        
-        .filter-type-select {
-          width: 100%;
-          margin-bottom: 10px;
-        }
-        
-        .clr-form-control {
-          margin-bottom: 10px;
-          
-          input, select, textarea {
-            width: 100%;
-            min-width: 0; // Allow flexbox to shrink items
-          }
-        }
-        
-        .date-range-controls {
-          display: flex;
-          gap: 10px;
-          flex-direction: column;
-          
-          .clr-form-control {
-            flex: 1;
-          }
-          
-          @media (min-width: 480px) {
-            flex-direction: row;
-          }
-        }
-        
-        .toggle-control {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          flex-wrap: wrap;
-        }
-        
-        .multiselect {
-          height: 100px;
-        }
-      }
-    }
-  }
-
-  .no-filters {
-    text-align: center;
-    padding: 20px;
-    color: #666;
-    font-style: italic;
-  }
-}
-
-// Responsive design for smaller screens
-@media (max-width: 768px) {
-  .common-filter-container {
-    padding: 10px;
-    
-    .filters-form {
-      .filters-grid {
-        grid-template-columns: 1fr;
-        gap: 10px;
-      }
-    }
-    
-    .filter-header {
-      flex-direction: column;
-      align-items: stretch;
-    }
-    
-    .presets-section {
-      .preset-controls {
-        flex-direction: column;
-      }
-    }
-    
-    .save-preset-section {
-      .clr-input-group {
-        flex-direction: column;
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .common-filter-container {
-    .date-range-controls {
-      flex-direction: column;
-    }
-    
-    .filter-item {
-      padding: 10px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.spec.ts
deleted file mode 100644
index 3a65cec..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.spec.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonFilterComponent } from './common-filter.component';
-import { FilterService } from './filter.service';
-
-describe('CommonFilterComponent', () => {
-  let component: CommonFilterComponent;
-  let fixture: ComponentFixture<CommonFilterComponent>;
-  let filterService: FilterService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule],
-      declarations: [CommonFilterComponent],
-      providers: [FormBuilder, FilterService]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(CommonFilterComponent);
-    component = fixture.componentInstance;
-    filterService = TestBed.inject(FilterService);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should add a new filter', () => {
-    const initialFilters = filterService.getFilters().length;
-    component.addFilter();
-    const updatedFilters = filterService.getFilters().length;
-    expect(updatedFilters).toBe(initialFilters + 1);
-  });
-
-  it('should remove a filter', () => {
-    // Add a filter first
-    component.addFilter();
-    const filterId = filterService.getFilters()[0].id;
-    
-    // Then remove it
-    const initialFilters = filterService.getFilters().length;
-    component.removeFilter(filterId);
-    const updatedFilters = filterService.getFilters().length;
-    expect(updatedFilters).toBe(initialFilters - 1);
-  });
-
-  it('should update filter properties', () => {
-    // Add a filter
-    component.addFilter();
-    const filter = filterService.getFilters()[0];
-    
-    // Update the filter label
-    component.updateFilter(filter.id, 'label', 'Updated Label');
-    const updatedFilters = filterService.getFilters();
-    expect(updatedFilters[0].label).toBe('Updated Label');
-  });
-
-  it('should handle filter value changes', () => {
-    const filterId = 'test-filter';
-    const testValue = 'test value';
-    
-    // Mock the filter service method
-    spyOn(filterService, 'updateFilterValue');
-    
-    component.onFilterChange(filterId, testValue);
-    expect(filterService.updateFilterValue).toHaveBeenCalledWith(filterId, testValue);
-  });
-
-  it('should reset filters', () => {
-    spyOn(filterService, 'resetFilters');
-    component.resetFilters();
-    expect(filterService.resetFilters).toHaveBeenCalled();
-  });
-
-  it('should save and load presets', () => {
-    spyOn(filterService, 'savePreset');
-    spyOn(filterService, 'loadPreset');
-    
-    // Test save preset
-    component.newPresetName = 'Test Preset';
-    component.savePreset();
-    expect(filterService.savePreset).toHaveBeenCalledWith('Test Preset');
-    
-    // Test load preset
-    component.loadPreset('Test Preset');
-    expect(filterService.loadPreset).toHaveBeenCalledWith('Test Preset');
-  });
-});
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.ts
deleted file mode 100644
index 8ca2fab..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/common-filter.component.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import { Component, OnInit, OnDestroy, Input, HostListener } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { Filter, FilterService, FilterType } from './filter.service';
-
-@Component({
-  selector: 'app-common-filter',
-  templateUrl: './common-filter.component.html',
-  styleUrls: ['./common-filter.component.scss']
-})
-export class CommonFilterComponent implements OnInit, OnDestroy {
-  @Input() baseFilters: any[] = [];
-  @Input() drilldownFilters: any[] = [];
-  @Input() drilldownLayers: any[] = [];
-  @Input() fieldName: string;
-  @Input() connection: number;
-  
-  filters: Filter[] = [];
-  filterForm: FormGroup;
-  presets: string[] = [];
-  activePreset: string | null = null;
-  newPresetName: string = '';
-  
-  private subscriptions: Subscription[] = [];
-
-  constructor(
-    private filterService: FilterService,
-    private fb: FormBuilder
-  ) {
-    this.filterForm = this.fb.group({});
-  }
-
-  ngOnInit(): void {
-    // Subscribe to filter definitions
-    this.subscriptions.push(
-      this.filterService.filters$.subscribe(filters => {
-        this.filters = filters;
-        this.buildForm();
-      })
-    );
-    
-    // Subscribe to filter state changes
-    this.subscriptions.push(
-      this.filterService.filterState$.subscribe(state => {
-        this.updateFormValues(state);
-      })
-    );
-    
-    // Subscribe to preset changes
-    this.subscriptions.push(
-      this.filterService.activePreset$.subscribe(preset => {
-        this.activePreset = preset;
-      })
-    );
-    
-    // Get initial presets
-    this.presets = this.filterService.getPresets();
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-  }
-  
-  // Handle window resize events
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    // Trigger change detection to reflow the layout
-    setTimeout(() => {
-      // This will cause the grid to recalculate its layout
-      this.filters = [...this.filters];
-    }, 100);
-  }
-
-  // Build the form based on current filters
-  private buildForm(): void {
-    // Clear existing form controls
-    Object.keys(this.filterForm.controls).forEach(key => {
-      this.filterForm.removeControl(key);
-    });
-    
-    // Add controls for each filter
-    this.filters.forEach(filter => {
-      let initialValue: any;
-      
-      switch (filter.type) {
-        case 'multiselect':
-          initialValue = filter.value || [];
-          break;
-        case 'date-range':
-          initialValue = filter.value || { start: null, end: null };
-          break;
-        case 'toggle':
-          initialValue = filter.value || false;
-          break;
-        default:
-          initialValue = filter.value || '';
-      }
-      
-      const control = this.fb.control(initialValue);
-      
-      // Subscribe to value changes for this control
-      control.valueChanges.subscribe(value => {
-        this.onFilterChange(filter.id, value);
-      });
-      
-      this.filterForm.addControl(filter.id, control);
-    });
-  }
-
-  // Update form values based on filter state
-  private updateFormValues(state: any): void {
-    Object.keys(state).forEach(key => {
-      if (this.filterForm.contains(key)) {
-        this.filterForm.get(key)?.setValue(state[key], { emitEvent: false });
-      }
-    });
-  }
-
-  // Handle filter value changes
-  onFilterChange(filterId: string, value: any): void {
-    console.log('=== COMMON FILTER DEBUG INFO ===');
-    console.log('Filter value changed for ID:', filterId);
-    console.log('New value:', value);
-    
-    const filterDef = this.filters.find(f => f.id === filterId);
-    console.log('Filter definition:', filterDef);
-    
-    this.filterService.updateFilterValue(filterId, value);
-    console.log('=== END COMMON FILTER DEBUG ===');
-  }
-
-  // Handle multiselect changes
-  onMultiselectChange(filterId: string, selectedValues: string[]): void {
-    this.filterService.updateFilterValue(filterId, selectedValues);
-  }
-
-  // Handle date range changes
-  onDateRangeChange(filterId: string, dateRange: { start: string | null, end: string | null }): void {
-    this.filterService.updateFilterValue(filterId, dateRange);
-  }
-
-  // Handle toggle changes
-  onToggleChange(filterId: string, checked: boolean): void {
-    this.filterService.updateFilterValue(filterId, checked);
-  }
-
-  // Reset all filters
-  resetFilters(): void {
-    this.filterService.resetFilters();
-  }
-
-  // Save current filter state as preset
-  savePreset(): void {
-    if (this.newPresetName.trim()) {
-      this.filterService.savePreset(this.newPresetName.trim());
-      this.presets = this.filterService.getPresets();
-      this.newPresetName = '';
-    }
-  }
-
-  // Load a preset
-  loadPreset(presetName: string): void {
-    this.filterService.loadPreset(presetName);
-  }
-
-  // Delete a preset
-  deletePreset(presetName: string): void {
-    this.filterService.deletePreset(presetName);
-    this.presets = this.filterService.getPresets();
-  }
-
-  // Add a new filter
-  addFilter(): void {
-    const newFilter: Filter = {
-      id: `filter_${Date.now()}`,
-      field: '',
-      label: 'New Filter',
-      type: 'text'
-    };
-    this.filterService.addFilter(newFilter);
-  }
-
-  // Remove a filter
-  removeFilter(filterId: string): void {
-    this.filterService.removeFilter(filterId);
-  }
-
-  // Update filter properties
-  updateFilter(filterId: string, property: string, value: any): void {
-    const filterIndex = this.filters.findIndex(f => f.id === filterId);
-    if (filterIndex !== -1) {
-      const updatedFilters = [...this.filters];
-      (updatedFilters[filterIndex] as any)[property] = value;
-      this.filterService.setFilters(updatedFilters);
-    }
-  }
-}
\ No newline at end of file
diff --git 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
deleted file mode 100644
index 7c613e4..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
+++ /dev/null
@@ -1,122 +0,0 @@
-<!-- Configuration Mode -->
-<div class="compact-filter-config" *ngIf="isConfigMode">
-  <div class="config-header">
-    <h5>Compact Filter Configuration</h5>
-    <button class="btn btn-sm btn-link" (click)="cancelConfiguration()">
-      <clr-icon shape="close"></clr-icon>
-    </button>
-  </div>
-  
-  <div class="config-form">
-    <div class="clr-form-control">
-      <label class="clr-control-label">API URL</label>
-      <input type="text" [(ngModel)]="configApiUrl" (ngModelChange)="onApiUrlChange($event)" placeholder="Enter API URL" class="clr-input">
-    </div>
-    
-    <div class="clr-form-control">
-      <label class="clr-control-label">Filter Key</label>
-      <select [(ngModel)]="configFilterKey" (ngModelChange)="onFilterKeyChange($event)" class="clr-select">
-        <option value="">Select a key</option>
-        <option *ngFor="let key of availableKeys" [value]="key">{{ key }}</option>
-      </select>
-    </div>
-    
-    <div class="clr-form-control">
-      <label class="clr-control-label">Filter Type</label>
-      <select [(ngModel)]="configFilterType" (ngModelChange)="onFilterTypeChange($event)" class="clr-select">
-        <option value="text">Text</option>
-        <option value="dropdown">Dropdown</option>
-        <option value="multiselect">Multi-Select</option>
-        <option value="date-range">Date Range</option>
-        <option value="toggle">Toggle</option>
-      </select>
-    </div>
-    
-    <!-- Options will be automatically populated for dropdown/multiselect based on API data -->
-    <div class="clr-form-control" *ngIf="configFilterType === 'dropdown' || configFilterType === 'multiselect'">
-      <label class="clr-control-label">Available Values (comma separated)</label>
-      <div class="available-values">
-        {{ availableValues.join(', ') }}
-      </div>
-    </div>
-    
-    <div class="config-actions">
-      <button class="btn btn-sm btn-outline" (click)="cancelConfiguration()">Cancel</button>
-      <button class="btn btn-sm btn-primary" (click)="saveConfiguration()">Save</button>
-    </div>
-  </div>
-</div>
-
-<!-- Display Mode -->
-<div class="compact-filter" *ngIf="!isConfigMode">
-  <div class="filter-header">
-    <span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
-    <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
-    <span class="filter-type">({{ filterType }})</span>
-    <button class="btn btn-icon btn-sm" (click)="toggleConfigMode()">
-      <clr-icon shape="cog"></clr-icon>
-    </button>
-  </div>
-  
-  <!-- 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" [value]="option">{{ option }}</option>
-    </select>
-  </div>
-
-  <!-- Multi-Select Filter -->
-  <div class="filter-control" *ngIf="filterType === 'multiselect'">
-    <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 -->
-  <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
-    <input type="date" 
-           [(ngModel)]="filterValue.start" 
-           (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
-           placeholder="Start Date"
-           class="clr-input compact-date">
-    <input type="date" 
-           [(ngModel)]="filterValue.end" 
-           (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
-           placeholder="End Date"
-           class="clr-input compact-date">
-  </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>
\ No newline at end of file
diff --git 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
deleted file mode 100644
index ee880b3..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.scss
+++ /dev/null
@@ -1,224 +0,0 @@
-.compact-filter {
-  display: inline-block;
-  min-width: 120px;
-  max-width: 200px;
-  margin: 5px;
-  padding: 5px;
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  font-size: 12px;
-  
-  .filter-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 5px;
-    
-    .filter-label, .filter-key {
-      font-weight: bold;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex-grow: 1;
-    }
-    
-    .filter-type {
-      font-size: 10px;
-      color: #6c757d;
-      margin-left: 5px;
-    }
-    
-    .btn-icon {
-      padding: 2px;
-      min-width: auto;
-    }
-  }
-  
-  .filter-control {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    
-    &.date-range {
-      flex-direction: column;
-    }
-    
-    &.toggle {
-      justify-content: center;
-    }
-  }
-  
-  .compact-input,
-  .compact-select,
-  .compact-multiselect,
-  .compact-date {
-    width: 100%;
-    padding: 4px 6px;
-    font-size: 12px;
-    border-radius: 3px;
-    min-height: 24px;
-  }
-  
-  .compact-select,
-  .compact-multiselect {
-    height: 24px;
-  }
-  
-  .compact-multiselect {
-    height: auto;
-    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;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100px;
-  }
-  
-  .clr-toggle {
-    margin: 0 5px 0 0;
-  }
-  
-  /* Responsive design */
-  @media (max-width: 768px) {
-    min-width: 100px;
-    max-width: 150px;
-    
-    .compact-input,
-    .compact-select,
-    .compact-multiselect,
-    .compact-date {
-      font-size: 11px;
-      padding: 3px 5px;
-    }
-    
-    .toggle-label {
-      font-size: 11px;
-      max-width: 80px;
-    }
-  }
-  
-  @media (max-width: 480px) {
-    min-width: 80px;
-    max-width: 120px;
-    
-    .compact-input,
-    .compact-select,
-    .compact-multiselect,
-    .compact-date {
-      font-size: 10px;
-      padding: 2px 4px;
-    }
-    
-    .toggle-label {
-      font-size: 10px;
-      max-width: 60px;
-    }
-  }
-}
-
-.compact-filter-config {
-  min-width: 200px;
-  max-width: 300px;
-  padding: 10px;
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  
-  .config-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-    
-    h5 {
-      margin: 0;
-    }
-    
-    .btn-link {
-      padding: 2px;
-      min-width: auto;
-    }
-  }
-  
-  .config-form {
-    .clr-form-control {
-      margin-bottom: 8px;
-      
-      .clr-control-label {
-        font-size: 12px;
-      }
-      
-      .clr-input,
-      .clr-select,
-      .clr-textarea {
-        font-size: 12px;
-        padding: 4px 6px;
-      }
-      
-      .clr-textarea {
-        min-height: 60px;
-      }
-      
-      .available-values {
-        background: #e9ecef;
-        border-radius: 3px;
-        padding: 6px;
-        font-size: 11px;
-        margin-top: 4px;
-        word-break: break-all;
-      }
-    }
-    
-    .config-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 5px;
-      margin-top: 10px;
-      
-      .btn {
-        font-size: 12px;
-        padding: 4px 8px;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git 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
deleted file mode 100644
index da6c536..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
+++ /dev/null
@@ -1,441 +0,0 @@
-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';
-
-@Component({
-  selector: 'app-compact-filter',
-  templateUrl: './compact-filter.component.html',
-  styleUrls: ['./compact-filter.component.scss']
-})
-export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() filterKey: string = '';
-  @Input() filterType: string = 'text';
-  @Input() filterOptions: string[] = [];
-  @Input() filterLabel: string = '';
-  @Input() apiUrl: string = '';
-  @Input() connectionId: number | undefined;
-  @Output() filterChange = new EventEmitter<any>();
-  @Output() configChange = new EventEmitter<any>();
-  
-  selectedFilter: Filter | null = null;
-  filterValue: any = '';
-  availableFilters: Filter[] = [];
-  availableKeys: string[] = [];
-  availableValues: string[] = [];
-  
-  // Multiselect dropdown state
-  showMultiselectDropdown: boolean = false;
-  
-  // Configuration properties
-  isConfigMode: boolean = false;
-  configFilterKey: string = '';
-  configFilterType: string = 'text';
-  configFilterOptions: string = '';
-  configFilterLabel: string = '';
-  configApiUrl: string = '';
-  configConnectionId: number | undefined;
-  
-  constructor(
-    private filterService: FilterService,
-    private alertService: AlertsService
-  ) { }
-
-  ngOnInit(): void {
-    // Initialize configuration from inputs
-    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;
-    
-    // Load available keys and values if API URL and filter key are provided
-    if (this.apiUrl) {
-      this.loadAvailableKeys();
-      // 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);
-      }
-    }
-    
-    // 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: `${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
-      };
-      
-      // Get current filters
-      const currentFilters = this.filterService.getFilters();
-      
-      // Check if this filter is already registered
-      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);
-      }
-      
-      // Update the filter service with the new filter list
-      this.filterService.setFilters(currentFilters);
-      
-      // Update the selected filter reference
-      this.selectedFilter = filterDef;
-    }
-  }
-  
-  updateSelectedFilter(): void {
-    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 from the service
-        const currentState = this.filterService.getFilterValues();
-        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(',');
-      }
-    }
-  }
-  
-  onFilterValueChange(value: any): void {
-    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);
-  }
-  
-  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) {
-      this.alertService.getColumnfromurl(this.apiUrl, this.connectionId).subscribe(
-        (keys: string[]) => {
-          this.availableKeys = keys;
-        },
-        (error) => {
-          console.error('Error loading available keys:', error);
-          this.availableKeys = [];
-        }
-      );
-    }
-  }
-  
-  // Load available values for a specific key
-  loadAvailableValues(key: string): void {
-    if (this.apiUrl && key) {
-      this.alertService.getValuesFromUrl(this.apiUrl, this.connectionId, key).subscribe(
-        (values: string[]) => {
-          this.availableValues = values;
-          // Update filter options if this is a dropdown or multiselect
-          if (this.filterType === 'dropdown' || this.filterType === 'multiselect') {
-            this.filterOptions = values;
-          }
-        },
-        (error) => {
-          console.error('Error loading available values:', error);
-          this.availableValues = [];
-        }
-      );
-    }
-  }
-  
-  // Configuration methods
-  toggleConfigMode(): void {
-    this.isConfigMode = !this.isConfigMode;
-    if (this.isConfigMode) {
-      // 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;
-    }
-  }
-  
-  saveConfiguration(): void {
-    const config = {
-      filterKey: this.configFilterKey,
-      filterType: this.configFilterType,
-      filterLabel: this.configFilterLabel,
-      filterOptions: this.configFilterOptions.split(',').map(opt => opt.trim()).filter(opt => opt),
-      apiUrl: this.configApiUrl,
-      connectionId: this.configConnectionId
-    };
-    
-    // Emit configuration change
-    this.configChange.emit(config);
-    
-    // Update local properties
-    this.filterKey = config.filterKey;
-    this.filterType = config.filterType;
-    this.filterLabel = config.filterLabel;
-    this.filterOptions = config.filterOptions;
-    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.configFilterType === 'dropdown' || this.configFilterType === 'multiselect') && this.configFilterKey) {
-      this.loadAvailableValues(this.configFilterKey);
-    }
-    
-    // Register the updated filter with the filter service
-    this.registerFilter();
-    
-    // Update selected filter
-    this.updateSelectedFilter();
-    
-    // Exit config mode
-    this.isConfigMode = false;
-  }
-  
-  cancelConfiguration(): void {
-    this.isConfigMode = false;
-  }
-  
-  // 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
-  onApiUrlChange(url: string): void {
-    this.configApiUrl = url;
-    // Load available keys when API URL changes
-    if (url) {
-      this.loadAvailableKeys();
-      // Also clear available values since the API has changed
-      this.availableValues = [];
-      this.filterOptions = [];
-    }
-  }
-  
-  // Handle filter type change in configuration
-  onFilterTypeChange(type: string): void {
-    this.configFilterType = type;
-    // If changing to dropdown or multiselect and we have a key selected, load values
-    if ((type === 'dropdown' || type === 'multiselect') && this.configFilterKey) {
-      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);
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/filter.service.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/filter.service.spec.ts
deleted file mode 100644
index 72e070f..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/filter.service.spec.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { FilterService, Filter } from './filter.service';
-
-describe('FilterService', () => {
-  let service: FilterService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(FilterService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should add and remove filters', () => {
-    const filter: Filter = {
-      id: 'test-filter',
-      field: 'testField',
-      label: 'Test Field',
-      type: 'text'
-    };
-
-    // Add filter
-    service.addFilter(filter);
-    const filters = service.getFilters();
-    expect(filters.length).toBe(1);
-    expect(filters[0]).toEqual(filter);
-
-    // Remove filter
-    service.removeFilter('test-filter');
-    const updatedFilters = service.getFilters();
-    expect(updatedFilters.length).toBe(0);
-  });
-
-  it('should update filter values', () => {
-    const filter: Filter = {
-      id: 'name-filter',
-      field: 'name',
-      label: 'Name',
-      type: 'text'
-    };
-
-    service.addFilter(filter);
-    service.updateFilterValue('name-filter', 'John Doe');
-
-    const filterValues = service.getFilterValues();
-    expect(filterValues['name-filter']).toBe('John Doe');
-  });
-
-  it('should reset filters', () => {
-    const textFilter: Filter = {
-      id: 'name',
-      field: 'name',
-      label: 'Name',
-      type: 'text',
-      value: 'John'
-    };
-
-    const toggleFilter: Filter = {
-      id: 'active',
-      field: 'isActive',
-      label: 'Active',
-      type: 'toggle',
-      value: true
-    };
-
-    service.setFilters([textFilter, toggleFilter]);
-    service.resetFilters();
-
-    const filterValues = service.getFilterValues();
-    expect(filterValues['name']).toBe('');
-    expect(filterValues['active']).toBe(false);
-  });
-
-  it('should manage presets', () => {
-    const filter: Filter = {
-      id: 'category',
-      field: 'category',
-      label: 'Category',
-      type: 'dropdown',
-      value: 'Electronics'
-    };
-
-    service.addFilter(filter);
-    
-    // Save preset
-    service.savePreset('Electronics View');
-    const presets = service.getPresets();
-    expect(presets).toContain('Electronics View');
-
-    // Update filter and load preset
-    service.updateFilterValue('category', 'Clothing');
-    service.loadPreset('Electronics View');
-    
-    const filterValues = service.getFilterValues();
-    expect(filterValues['category']).toBe('Electronics');
-
-    // Delete preset
-    service.deletePreset('Electronics View');
-    const updatedPresets = service.getPresets();
-    expect(updatedPresets).not.toContain('Electronics View');
-  });
-
-  it('should build query parameters', () => {
-    const textFilter: Filter = {
-      id: 'name',
-      field: 'name',
-      label: 'Name',
-      type: 'text'
-    };
-
-    const dateFilter: Filter = {
-      id: 'dateRange',
-      field: 'date',
-      label: 'Date Range',
-      type: 'date-range'
-    };
-
-    service.setFilters([textFilter, dateFilter]);
-    service.updateFilterValue('name', 'John Doe');
-    service.updateFilterValue('dateRange', { start: '2023-01-01', end: '2023-12-31' });
-
-    const queryParams = service.buildQueryParams();
-    expect(queryParams).toContain('name=John%20Doe');
-    expect(queryParams).toContain('dateRange_start=2023-01-01');
-    expect(queryParams).toContain('dateRange_end=2023-12-31');
-  });
-});
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/filter.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/filter.service.ts
deleted file mode 100644
index 4dea664..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/filter.service.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-// Define the filter types
-export type FilterType = 'dropdown' | 'multiselect' | 'date-range' | 'text' | 'toggle';
-
-// Define the filter interface
-export interface Filter {
-  id: string;
-  field: string;
-  label: string;
-  type: FilterType;
-  options?: string[]; // For dropdown and multiselect
-  value?: any; // Current value
-  placeholder?: string;
-}
-
-// Define the filter state
-export interface FilterState {
-  [key: string]: any;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class FilterService {
-  // Store the filter definitions
-  private filtersSubject = new BehaviorSubject<Filter[]>([]);
-  public filters$ = this.filtersSubject.asObservable();
-
-  // Store the current filter values
-  private filterStateSubject = new BehaviorSubject<FilterState>({});
-  public filterState$ = this.filterStateSubject.asObservable();
-
-  // Store the active filter presets
-  private activePresetSubject = new BehaviorSubject<string | null>(null);
-  public activePreset$ = this.activePresetSubject.asObservable();
-
-  // Store filter presets
-  private presets: { [key: string]: FilterState } = {};
-
-  constructor() { }
-
-  // Add a new filter
-  addFilter(filter: Filter): void {
-    const currentFilters = this.filtersSubject.value;
-    this.filtersSubject.next([...currentFilters, filter]);
-  }
-
-  // Remove a filter
-  removeFilter(filterId: string): void {
-    const currentFilters = this.filtersSubject.value;
-    const updatedFilters = currentFilters.filter(f => f.id !== filterId);
-    this.filtersSubject.next(updatedFilters);
-    
-    // Also remove the filter value from state
-    const currentState = this.filterStateSubject.value;
-    const newState = { ...currentState };
-    delete newState[filterId];
-    this.filterStateSubject.next(newState);
-  }
-
-  // Update filter value
-  updateFilterValue(filterId: string, value: any): void {
-    console.log('=== FILTER SERVICE DEBUG INFO ===');
-    console.log('Updating filter value for ID:', filterId);
-    console.log('New value:', value);
-    
-    const currentState = this.filterStateSubject.value;
-    const newState = {
-      ...currentState,
-      [filterId]: value
-    };
-    
-    console.log('New filter state:', newState);
-    this.filterStateSubject.next(newState);
-    console.log('=== END FILTER SERVICE DEBUG ===');
-  }
-
-  // Get current filter values
-  getFilterValues(): FilterState {
-    return this.filterStateSubject.value;
-  }
-
-  // Reset all filters
-  resetFilters(): void {
-    const currentFilters = this.filtersSubject.value;
-    const resetState: FilterState = {};
-    
-    // Initialize all filters with empty/default values
-    currentFilters.forEach(filter => {
-      switch (filter.type) {
-        case 'multiselect':
-          resetState[filter.id] = [];
-          break;
-        case 'date-range':
-          resetState[filter.id] = { start: null, end: null };
-          break;
-        case 'toggle':
-          resetState[filter.id] = false;
-          break;
-        default:
-          resetState[filter.id] = '';
-      }
-    });
-    
-    this.filterStateSubject.next(resetState);
-  }
-
-  // Save current filter state as a preset
-  savePreset(name: string): void {
-    this.presets[name] = this.filterStateSubject.value;
-  }
-
-  // Load a preset
-  loadPreset(name: string): void {
-    if (this.presets[name]) {
-      this.filterStateSubject.next(this.presets[name]);
-      this.activePresetSubject.next(name);
-    }
-  }
-
-  // Get all presets
-  getPresets(): string[] {
-    return Object.keys(this.presets);
-  }
-
-  // Delete a preset
-  deletePreset(name: string): void {
-    delete this.presets[name];
-    if (this.activePresetSubject.value === name) {
-      this.activePresetSubject.next(null);
-    }
-  }
-
-  // Clear all presets
-  clearPresets(): void {
-    this.presets = {};
-    this.activePresetSubject.next(null);
-  }
-
-  // Build query parameters for API calls
-  buildQueryParams(): string {
-    const filterValues = this.getFilterValues();
-    const params = new URLSearchParams();
-    
-    Object.keys(filterValues).forEach(key => {
-      const value = filterValues[key];
-      if (value !== undefined && value !== null && value !== '') {
-        if (typeof value === 'object') {
-          // Handle date ranges and other objects
-          if (value.hasOwnProperty('start') && value.hasOwnProperty('end')) {
-            // Date range
-            if (value.start) params.append(`${key}_start`, value.start);
-            if (value.end) params.append(`${key}_end`, value.end);
-          } else {
-            // Other objects as JSON
-            params.append(key, JSON.stringify(value));
-          }
-        } else {
-          // Simple values
-          params.append(key, value.toString());
-        }
-      }
-    });
-    
-    return params.toString();
-  }
-
-  // Get filter definitions
-  getFilters(): Filter[] {
-    return this.filtersSubject.value;
-  }
-
-  // Update filter definitions
-  setFilters(filters: Filter[]): void {
-    this.filtersSubject.next(filters);
-    
-    // Initialize filter state with default values
-    const initialState: FilterState = {};
-    filters.forEach(filter => {
-      switch (filter.type) {
-        case 'multiselect':
-          initialState[filter.id] = filter.value || [];
-          break;
-        case 'date-range':
-          initialState[filter.id] = filter.value || { start: null, end: null };
-          break;
-        case 'toggle':
-          initialState[filter.id] = filter.value || false;
-          break;
-        default:
-          initialState[filter.id] = filter.value || '';
-      }
-    });
-    
-    this.filterStateSubject.next(initialState);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/index.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/index.ts
deleted file mode 100644
index a770f81..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './filter.service';
-export * from './common-filter.component';
-export * from './chart-wrapper.component';
-export * from './compact-filter.component';
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/FILTER_CONFIGURATION_GUIDE.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/FILTER_CONFIGURATION_GUIDE.md
deleted file mode 100644
index ffc1d7a..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/FILTER_CONFIGURATION_GUIDE.md
+++ /dev/null
@@ -1,161 +0,0 @@
-# Filter Configuration Guide for Dashboard Editor
-
-## Overview
-This guide explains how to configure filters for chart components using the dashboard editor. The filter functionality allows users to dynamically filter chart data using multiple filter types.
-
-## Enabling Filters
-
-To enable filters for a chart component:
-
-1. Open the chart configuration modal by clicking the edit icon on any chart
-2. Scroll down to the "Filter Configuration" section
-3. Check the "Enable Filters" checkbox
-
-## Adding Filter Fields
-
-Once filters are enabled, you can add filter fields:
-
-1. Click the "Add Filter Field" button
-2. Configure each filter field with the following properties:
-
-### Filter Field Properties
-
-#### Field Name
-- The field name to filter on (e.g., 'category', 'name', 'amount')
-- This should match the field name in your data source
-
-#### Display Label (Optional)
-- Label to display for this filter in the UI
-- If not provided, the field name will be used as the label
-
-#### Filter Type
-Choose one of the following filter types:
-
-1. **Text Input**
-   - Creates a text input field
-   - Users can type to filter data
-   - Works with any text-based field
-
-2. **Dropdown**
-   - Creates a dropdown selection field
-   - Requires a comma-separated list of options
-   - Example options: "A,B,C" or "North, South, East, West"
-
-3. **Number Range**
-   - Creates two number input fields (min and max)
-   - Used for filtering numeric data within a range
-   - Example: Filter sales between 100 and 500
-
-#### Dropdown Options (For Dropdown Type Only)
-- Comma-separated list of options for dropdown filters
-- Example: "Option1,Option2,Option3"
-- Each option will appear as a selectable item in the dropdown
-
-## Example Configurations
-
-### Example 1: Simple Text Filter
-```
-Field Name: name
-Display Label: Product Name
-Filter Type: Text Input
-```
-
-### Example 2: Category Dropdown Filter
-```
-Field Name: category
-Display Label: Category
-Filter Type: Dropdown
-Dropdown Options: A,B,C,D
-```
-
-### Example 3: Sales Amount Range Filter
-```
-Field Name: amount
-Display Label: Sales Amount
-Filter Type: Number Range
-```
-
-### Example 4: Multiple Filters
-You can combine multiple filter types:
-1. Text filter for product names
-2. Dropdown filter for categories
-3. Number range filter for sales amounts
-
-## Backend Integration
-
-When filters are applied, they send parameters to your backend API with the prefix `filter_`. For example:
-- Text filter: `filter_name=John`
-- Dropdown filter: `filter_category=A`
-- Number range filter: `filter_amount_min=100&filter_amount_max=500`
-
-Your backend should implement logic to filter data based on these parameters.
-
-## Working with Drilldown
-
-The filter functionality works seamlessly with the existing drilldown feature. Filters will be applied at each drilldown level, allowing users to filter data at any level of the drilldown hierarchy.
-
-## Best Practices
-
-1. **Limit the Number of Filters**: Too many filters can overwhelm users. Generally, 3-5 filters are sufficient for most use cases.
-
-2. **Use Descriptive Labels**: Provide clear, user-friendly labels for filter fields.
-
-3. **Match Field Names**: Ensure filter field names match the actual field names in your data source.
-
-4. **Provide Meaningful Dropdown Options**: For dropdown filters, provide options that make sense for your data.
-
-5. **Test with Real Data**: Always test filter configurations with actual data to ensure they work as expected.
-
-## Troubleshooting
-
-### Filters Not Working
-- Check that field names match your data source
-- Verify that your backend implements filter parameter handling
-- Ensure the "Enable Filters" checkbox is checked
-
-### Dropdown Options Not Displaying
-- Check that options are comma-separated
-- Verify there are no extra spaces around commas
-- Ensure the filter type is set to "Dropdown"
-
-### Range Filters Not Filtering
-- Verify that the field contains numeric data
-- Check that min and max values are entered correctly
-- Ensure your backend handles range filter parameters
-
-## Technical Details
-
-### Data Structure
-Filter configurations are stored as an array of objects in the chart configuration:
-
-```json
-{
-  "enableFilters": true,
-  "filterFields": [
-    {
-      "field": "category",
-      "label": "Category",
-      "type": "dropdown",
-      "options": ["A", "B", "C"]
-    },
-    {
-      "field": "name",
-      "label": "Name",
-      "type": "text"
-    },
-    {
-      "field": "amount",
-      "label": "Amount",
-      "type": "number-range"
-    }
-  ]
-}
-```
-
-### API Parameter Format
-Filters are passed to the backend as query parameters:
-- Text filter: `filter_[fieldname]=[value]`
-- Dropdown filter: `filter_[fieldname]=[selected_value]`
-- Number range filter: `filter_[fieldname]_min=[min_value]&filter_[fieldname]_max=[max_value]`
-
-This configuration allows for flexible and powerful data filtering capabilities in your dashboard charts.
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html
deleted file mode 100644
index 80d72c0..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="chart-config-modal">
-  <h3>Chart Configuration Manager</h3>
-  <app-chart-config-manager></app-chart-config-manager>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss
deleted file mode 100644
index 74955f7..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.chart-config-modal {
-  padding: 20px;
-  max-height: 80vh;
-  overflow-y: auto;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts
deleted file mode 100644
index ef2819b..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-chart-config-modal',
-  templateUrl: './chart-config-modal.component.html',
-  styleUrls: ['./chart-config-modal.component.scss']
-})
-export class ChartConfigModalComponent {
-  // This component will be used to display the chart configuration manager in a modal
-}
\ No newline at end of file
diff --git 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
index 0d721e4..02dce20 100644
--- 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
@@ -7,233 +7,116 @@
 </ol> -->
 
 <div style="display: inline;">
-  <button class="btn componentbtn" (click)="toggleMenu()" *ngIf="!fromRunner"><clr-icon shape="plus"></clr-icon>component</button>
-  <button class="btn btn-primary" (click)="openCommonFilterModal()" style="margin-left: 10px;" *ngIf="!fromRunner">
-    <clr-icon shape="filter"></clr-icon> Common Filter
-  </button>
-  <div style="display: inline;">
-    {{dashboardName}}
-  </div>
-  <div style="display: inline; float: right;">
-    <!-- <button class="btn btn-primary">Build</button>
+    <button class="btn componentbtn" (click)="toggleMenu()"><clr-icon shape="plus"></clr-icon>component</button>
+    <div style="display: inline;">
+        {{dashboardName}}
+    </div>
+    <div style="display: inline; float: right;">
+      <!-- <button class="btn btn-primary">Build</button>
       <button class="btn btn-primary" (click)="onSchedule()">Schedule</button> -->
-    <button class="btn btn-success" (click)="testDynamicChartCreation()" style="margin-left: 10px;" *ngIf="!fromRunner">
-      <clr-icon shape="test"></clr-icon> Test Dynamic Chart
-    </button>
+    </div>
+
   </div>
-
-</div>
-
-<div class="content-container">
-  <nav class="sidenav" *ngIf="toggle && !fromRunner" style="width: 16%;">
+  
+  <div class="content-container">
+  <nav class="sidenav" *ngIf="toggle" style="width: 16%;">
     <ul class="nav-list" style="list-style-type: none;">
       <li *ngFor="let widget of WidgetsMock">
-
+  
         <!--
           Draggable widget from store using vanilla javascript event (dragstart)
           onDrag() is call, it take $event and a widget identifier as parameters
         -->
         <a draggable="true" class="nav-link" (dragstart)="onDrag($event, widget.identifier)">
           <clr-icon shape="drag-handle" style="margin-right: 10px;"></clr-icon>
-          {{ widget.name }}
+            {{ widget.name }}
           <clr-icon shape="plugin" class="has-badge"></clr-icon>
         </a>
       </li>
     </ul>
   </nav>
-  <div style="width: 100%;">
-    <gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
-      <gridster-item [item]="item" *ngFor="let item of dashboardArray">
-        <!-- <ng-container *ngIf="addToDashboard && item.addToDashboard"> -->
-        <button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)" *ngIf="!fromRunner">
-          <clr-icon shape="trash"></clr-icon>
-        </button>
-        <button class="btn btn-icon drag-handler" style="margin-left: 10px; margin-top: 10px;" *ngIf="!fromRunner">
-          <clr-icon shape="drag-handle"></clr-icon>
-        </button>
+      <div style="width: 100%;">
+          <gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
+            <gridster-item [item]="item" *ngFor="let item of dashboardArray">
+              <!-- <ng-container *ngIf="addToDashboard && item.addToDashboard"> -->
+              <button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)">
+                <clr-icon shape="trash"></clr-icon>
+              </button>
+            <button class="btn btn-icon drag-handler" style="margin-left: 10px; margin-top: 10px;">
+              <clr-icon shape="drag-handle"></clr-icon>
+            </button>
 
-        <button class="btn btn-icon" style="margin-top: 10px; float: right;" *ngIf="!fromRunner">
-          <input type="checkbox" clrToggle [(ngModel)]="item.addToDashboard" name="addToDashboardSwitch"
-            (change)="toggleAddToDashboard(item)" />
-        </button>
+            <button class="btn btn-icon" style="margin-top: 10px; float: right;">
+              <input type="checkbox" clrToggle [(ngModel)]="item.addToDashboard" name="addToDashboardSwitch" (change)="toggleAddToDashboard(item)" />
+            </button>
 
-        <!-- <label for="workflow_name">Add to Dasboard</label>
+              <!-- <label for="workflow_name">Add to Dasboard</label>
               <input class="btn btn-icon" style="margin-top: 10px;float: right;"  type="checkbox" clrToggle value="billable" name="billable" />
             -->
-        <button class="btn btn-icon" style="margin-top: 10px;float: right;" (click)="editGadget(item)" *ngIf="!fromRunner">
-          <clr-icon shape="pencil"></clr-icon>
-        </button>
+            <button class="btn btn-icon" style="margin-top: 10px;float: right;" (click)="editGadget(item)">
+              <clr-icon shape="pencil"></clr-icon>
+            </button>
 
-        <h4 style="margin-top: 0px; margin-left: 10px;">{{item.name}}</h4>
-        <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" [ndcDynamicInputs]="getChartInputs(item)"
-          (moduleInfo)="display($event)"></ndc-dynamic>
-        <!-- </ng-container> -->
-
-      </gridster-item>
-    </gridster>
+            <h4 style="margin-top: 0px; margin-left: 10px;">{{item.name}}</h4>
+            <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" (moduleInfo)="display($event)"></ndc-dynamic>
+          <!-- </ng-container> -->
+          </gridster-item>
+        </gridster>
+      </div>
   </div>
-</div>
-<div style="text-align: center;">
-  <button class="btn btn-outline" (click)="goBack()">Back</button>
-  <button type="submit" class="btn btn-primary btn-adddata " (click)="UpdateLine()" *ngIf="!fromRunner">
-    <b>Update</b>
-  </button>
-</div>
-
-
-<clr-modal [(clrModalOpen)]="modeledit" [clrModalStaticBackdrop]="true">
+  <div style="text-align: center;">
+    <button class="btn btn-outline" (click)="goBack()">Back</button>
+    <button type="submit" class="btn btn-primary btn-adddata " (click)="UpdateLine()" >
+        <b>Update</b>
+    </button>
+  </div>
+  
+  
+  <clr-modal [(clrModalOpen)]="modeledit"  [clrModalStaticBackdrop]="true">
   <h3 class="modal-title">Configure Chart</h3>
-  <div class="modal-body">
-    <form [formGroup]="entryForm" class="clr-form-horizontal">
+  <div class="modal-body" >
+    <form [formGroup]="entryForm" class="clr-form-horizontal" >
       <div class="clr-row">
         <div class="clr-col-sm-12">
           <label for="charttitle">Chart Title</label>
-          <input id="chartparameter" type="text" formControlName="charttitle" class="clr-input"
-            [(ngModel)]="gadgetsEditdata.charttitle">
+          <input id="chartparameter" type="text" formControlName="charttitle" class="clr-input" [(ngModel)]="gadgetsEditdata.charttitle" >
         </div>
       </div>
-
-
-      <!-- Compact Filter Configuration (shown only for Compact Filter components) -->
-      <div class="clr-row" *ngIf="gadgetsEditdata?.fieldName === 'Compact Filter'">
+      <!-- <div class="clr-row">
         <div class="clr-col-sm-12">
-          <h4>Compact Filter Configuration</h4>
-
-          <div class="clr-row">
-            <div class="clr-col-sm-12">
-              <label for="compactFilterConnection">Connection</label>
-              <select id="compactFilterConnection" class="clr-select" [(ngModel)]="gadgetsEditdata.connection"
-                (ngModelChange)="onCompactFilterConnectionChange($event)" [ngModelOptions]="{standalone: true}">
-                <option value="">Select Connection</option>
-                <option *ngFor="let conn of sureconnectData" [value]="conn.id">
-                  {{conn.connection_name || conn.id}}
-                </option>
-              </select>
-              <div class="clr-subtext">Select a connection for this compact filter</div>
-            </div>
-          </div>
-
-          <div class="clr-row" style="margin-top: 10px;">
-            <div class="clr-col-sm-12">
-              <label for="compactFilterApiUrl">API URL</label>
-              <div>
-                <input type="text" id="compactFilterApiUrl" class="clr-input" [(ngModel)]="gadgetsEditdata.table"
-                  (ngModelChange)="onCompactFilterApiUrlChange($event)" [ngModelOptions]="{standalone: true}"
-                  placeholder="Enter API URL">
-                <span>
-                  <button class="btn btn-icon btn-primary" style="margin: 0px;"
-                    (click)="loadAvailableKeys(gadgetsEditdata.table, gadgetsEditdata.connection)"
-                    [disabled]="!gadgetsEditdata.table">
-                    <clr-icon shape="redo"></clr-icon>
-                  </button>
-                </span>
-              </div>
-              <div class="clr-subtext">Enter the API URL to fetch data for this filter</div>
-            </div>
-          </div>
-
-          <div class="clr-row" style="margin-top: 10px;">
-            <div class="clr-col-sm-12">
-              <label for="filterKey">Filter Key</label>
-              <select id="filterKey" class="clr-select" [(ngModel)]="gadgetsEditdata.filterKey"
-                (ngModelChange)="onFilterKeyChange($event)" [ngModelOptions]="{standalone: true}">
-                <option value="">Select Filter Key</option>
-                <option *ngFor="let key of availableKeys" [value]="key">{{ key }}</option>
-              </select>
-              <div class="clr-subtext">Select the field name to filter on</div>
-            </div>
-          </div>
-
-          <div class="clr-row" style="margin-top: 10px;">
-            <div class="clr-col-sm-12">
-              <label for="filterType">Filter Type</label>
-              <select id="filterType" class="clr-select" [(ngModel)]="gadgetsEditdata.filterType"
-                (ngModelChange)="onFilterTypeChange($event)" [ngModelOptions]="{standalone: true}">
-                <option value="text">Text</option>
-                <option value="dropdown">Dropdown</option>
-                <option value="multiselect">Multi-Select</option>
-                <option value="date-range">Date Range</option>
-                <option value="toggle">Toggle</option>
-              </select>
-              <div class="clr-subtext">Select the type of filter control to display</div>
-            </div>
-          </div>
-
-          <div class="clr-row" style="margin-top: 10px;">
-            <div class="clr-col-sm-12">
-              <label for="filterLabel">Filter Label (Optional)</label>
-              <input type="text" id="filterLabel" class="clr-input" [(ngModel)]="gadgetsEditdata.filterLabel"
-                [ngModelOptions]="{standalone: true}" placeholder="Enter filter label">
-              <div class="clr-subtext">Label to display for this filter in the UI (if not provided, filter key will be
-                used)</div>
-            </div>
-          </div>
-
-          <div class="clr-row" style="margin-top: 10px;"
-            *ngIf="gadgetsEditdata.filterType === 'dropdown' || gadgetsEditdata.filterType === 'multiselect'">
-            <div class="clr-col-sm-12">
-              <label for="filterOptions">Filter Options (comma separated)</label>
-              <input type="text" id="filterOptions" class="clr-input" [(ngModel)]="filterOptionsString"
-                [ngModelOptions]="{standalone: true}" placeholder="Option1,Option2,Option3">
-              <div class="clr-subtext">Comma-separated list of options for dropdown/multiselect filters</div>
-              <div class="clr-subtext" *ngIf="gadgetsEditdata.filterKey">
-                <strong>Available values for "{{ gadgetsEditdata.filterKey }}":</strong> {{ filterOptionsString }}
-              </div>
-            </div>
-          </div>
+          <label for="id">ID</label>
+          <input id="datasource" type="text" formControlName="id" class="clr-input" [(ngModel)]="gadgetsEditdata.id">
         </div>
-      </div>
-
-      <div class="clr-row" *ngIf="gadgetsEditdata?.fieldName  !== 'Compact Filter'"
-        style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
-
-        <!-- Add Connection Selection Field -->
-        <div class="clr-row">
-          <div class="clr-col-sm-12">
-            <label for="connection">Connection</label>
-            <select id="connection" formControlName="connection" [(ngModel)]="gadgetsEditdata.connection"
-              class="clr-select">
-              <option value="">Select Connection</option>
-              <option *ngFor="let conn of sureconnectData" [value]="conn.id">
-                {{conn.connection_name || conn.id}}
-              </option>
-            </select>
-            <div class="clr-subtext">Select a SureConnect connection to use for this chart</div>
-          </div>
-        </div>
-
-        <div class="clr-row"
-          *ngIf="gadgetsEditdata?.fieldName !== 'Grid View' && gadgetsEditdata?.fieldName !== 'To Do Chart'">
-          <div class="clr-col-sm-12">
-            <div class="clr-form-control" style="margin-top: 5px;margin-bottom: 10px;">
-              <div class="clr-control-container">
-                <!-- <div class="clr-checkbox-wrapper">
+      </div> -->
+      <div class="clr-row" *ngIf="gadgetsEditdata?.fieldName !== 'Grid View' && gadgetsEditdata?.fieldName !== 'To Do Chart'">
+        <div class="clr-col-sm-12">
+          <div class="clr-form-control" style="margin-top: 5px;margin-bottom: 10px;">
+            <div class="clr-control-container">
+              <!-- <div class="clr-checkbox-wrapper">
                 <input type="checkbox" id="slices" formControlName="slices" [(ngModel)]="gadgetsEditdata.slices" class="clr-checkbox" />
                 <label for="slices" class="clr-control-label">Show colors in gradient</label>
                 </div> -->
-                <!-- <div class="clr-checkbox-wrapper">
+              <!-- <div class="clr-checkbox-wrapper">
                 <input type="checkbox" id="chartcolor" formControlName="chartcolor" [(ngModel)]="gadgetsEditdata.chartcolor" class="clr-checkbox" />
                 <label for="chartcolor" class="clr-control-label">Show colors in gradient</label>
               </div> -->
-                <!-- <div class="clr-checkbox-wrapper">
+              <!-- <div class="clr-checkbox-wrapper">
                 <input type="checkbox" id="donut" formControlName="donut"[(ngModel)]="gadgetsEditdata.donut" class="clr-checkbox" />
                 <label for="donut" class="clr-control-label">Show donut</label>
               </div> -->
-                <div class="clr-checkbox-wrapper">
-                  <input type="checkbox" id="chartlegend" formControlName="chartlegend"
-                    [(ngModel)]="gadgetsEditdata.chartlegend" class="clr-checkbox" />
-                  <label for="chartlegend" class="clr-control-label">Show Chart Legend</label>
-                </div>
-                <div class="clr-checkbox-wrapper">
-                  <input type="checkbox" id="showlabel" formControlName="showlabel"
-                    [(ngModel)]="gadgetsEditdata.showlabel" class="clr-checkbox" />
-                  <label for="showlabel" class="clr-control-label">Show Chart Label</label>
-                </div>
+              <div class="clr-checkbox-wrapper">
+                <input type="checkbox" id="chartlegend" formControlName="chartlegend" [(ngModel)]="gadgetsEditdata.chartlegend" class="clr-checkbox" />
+                <label for="chartlegend" class="clr-control-label">Show Chart Legend</label>
+              </div>
+              <div class="clr-checkbox-wrapper">
+                <input type="checkbox" id="showlabel" formControlName="showlabel" [(ngModel)]="gadgetsEditdata.showlabel" class="clr-checkbox" />
+                <label for="showlabel" class="clr-control-label">Show Chart Label</label>
               </div>
             </div>
-          </div>
+            </div>
         </div>
-        <!-- <div class="clr-row">
+      </div>
+      <!-- <div class="clr-row">
         <div class="clr-col-sm-12">
           <label for="datasource">Data Store</label>
           <select formControlName="datastore" [(ngModel)]="gadgetsEditdata.datastore" (change)="storename($event.target.value)">
@@ -242,580 +125,74 @@
             </select>
         </div>
       </div> -->
-
-        <div class="clr-row">
-          <div class="clr-col-sm-12">
-            <label for="table">Api Url</label>
-            <div><input type="urk" id="table" formControlName="table" class="clr-input"
-                [(ngModel)]="gadgetsEditdata.table" style="width:90%">&nbsp;<span><button
-                  class="btn btn-icon btn-primary" style="margin: 0px;" (click)="callApi(gadgetsEditdata.table)">
-                  <clr-icon shape="redo"></clr-icon> </button></span></div>
-            <!-- <select  id="table" formControlName="table" [(ngModel)]="gadgetsEditdata.table" (change)="tablename($event.target.value)">
+  
+      <div class="clr-row" >
+        <div class="clr-col-sm-12">
+          <label for="table">Table Name</label>
+          <div><input type="urk" id="table" formControlName="table" class="clr-input" [(ngModel)]="gadgetsEditdata.table" style="width:90%">&nbsp;<span><button  class="btn btn-icon btn-primary" style="margin: 0px;" (click)="tablename(gadgetsEditdata.table)">
+         <clr-icon shape="redo"></clr-icon> </button></span></div>
+          <!-- <select  id="table" formControlName="table" [(ngModel)]="gadgetsEditdata.table" (change)="tablename($event.target.value)">
             <option value="null">choose Table</option>
             <option *ngFor="let data of TableData" [value]="data">{{data}}</option>
            </select> -->
-          </div>
         </div>
-        <div class="clr-row"
-          *ngIf="gadgetsEditdata?.fieldName !== 'Grid View'&& gadgetsEditdata?.fieldName !== 'To Do Chart'">
-          <div class="clr-col-sm-12">
-            <label for="xAxis">X-Axis <span
-                *ngIf="gadgetsEditdata?.fieldName === 'Bubble Chart' || gadgetsEditdata?.fieldName === 'Scatter Chart' ">(Numeric)</span></label>
-            <!-- <input id="xAxis" type="text" formControlName="xAxis" class="clr-input" [(ngModel)]="gadgetsEditdata.xAxis"> -->
-            <select id="xAxis" formControlName="xAxis" [(ngModel)]="gadgetsEditdata.xAxis">
-              <option value="null">choose Column</option>
-              <option *ngFor="let data of columnData" [value]="data">{{data}}</option>
-            </select>
-          </div>
+      </div>
+      <div class="clr-row" *ngIf="gadgetsEditdata?.fieldName !== 'Grid View'&& gadgetsEditdata?.fieldName !== 'To Do Chart'">
+        <div class="clr-col-sm-12">
+          <label for="xAxis">X-Axis <span *ngIf="gadgetsEditdata?.fieldName === 'Bubble Chart' || gadgetsEditdata?.fieldName === 'Scatter Chart' ">(Numeric)</span></label>
+          <!-- <input id="xAxis" type="text" formControlName="xAxis" class="clr-input" [(ngModel)]="gadgetsEditdata.xAxis"> -->
+          <select id="xAxis"  formControlName="xAxis" [(ngModel)]="gadgetsEditdata.xAxis">
+            <option value="null">choose Column</option>
+            <option *ngFor="let data of columnData" [value]="data">{{data}}</option>
+           </select>
         </div>
-        <div class="clr-row"
-          *ngIf="gadgetsEditdata?.fieldName !== 'Pie Chart' && gadgetsEditdata?.fieldName !== 'Polar Area Chart' && gadgetsEditdata?.fieldName !== 'To Do Chart'">
-          <div class="clr-col-sm-12">
-            <label for="yAxis" *ngIf="gadgetsEditdata?.fieldName === 'Grid View'; else yaxislable">Columns</label>
-            <ng-template #yaxislable>
-              <label for="yAxis">Y-Axis (Numeric)</label>
-            </ng-template>
-
-            <!-- <input id="yAxis" type="text" formControlName="yAxis" class="clr-input" [(ngModel)]="gadgetsEditdata.yAxis"> -->
-            <clr-combobox-container style="margin-top: 10px !important;">
-              <clr-combobox id="yAxis" [(ngModel)]="selectedyAxis" formControlName="yAxis" clrMulti="true" required>
-                <ng-container *clrOptionSelected="let selected;let i = alias">
-                  {{selected}}
-                </ng-container>
-                <clr-options>
-                  <clr-option *clrOptionItems="let state of columnData" [clrValue]="state">
-                    {{state}}
-                  </clr-option>
-                </clr-options>
-              </clr-combobox>
-            </clr-combobox-container>
-          </div>
-        </div>
-
-        <div class="clr-row"
-          *ngIf="gadgetsEditdata?.fieldName == 'Pie Chart' || gadgetsEditdata?.fieldName == 'Polar Area Chart' || gadgetsEditdata?.fieldName == 'To Do Chart'">
-          <div class="clr-col-sm-12">
+      </div>
+      <div class="clr-row" *ngIf="gadgetsEditdata?.fieldName !== 'Pie Chart' && gadgetsEditdata?.fieldName !== 'Polar Area Chart' && gadgetsEditdata?.fieldName !== 'To Do Chart'">
+        <div class="clr-col-sm-12">
+          <label for="yAxis" *ngIf="gadgetsEditdata?.fieldName === 'Grid View'; else yaxislable">Columns</label>
+          <ng-template #yaxislable>
             <label for="yAxis">Y-Axis (Numeric)</label>
-            <select id="yAxis" formControlName="yAxis" [(ngModel)]="gadgetsEditdata.yAxis">
-              <option value="null">choose Column</option>
-              <option *ngFor="let data of columnData" [value]="data">{{data}}</option>
-            </select>
-          </div>
+          </ng-template>
+          
+          <!-- <input id="yAxis" type="text" formControlName="yAxis" class="clr-input" [(ngModel)]="gadgetsEditdata.yAxis"> -->
+          <clr-combobox-container style="margin-top: 10px !important;">
+            <clr-combobox  id="yAxis" [(ngModel)]="selectedyAxis" formControlName="yAxis" clrMulti="true" required>
+              <ng-container *clrOptionSelected="let selected;let i = alias">
+                {{selected}}
+              </ng-container>
+              <clr-options>
+                <clr-option *clrOptionItems="let state of columnData" [clrValue]="state">
+                  {{state}}
+                </clr-option>
+              </clr-options>
+            </clr-combobox>
+          </clr-combobox-container>
         </div>
-
-        <!-- Base API Filters -->
-        <div class="clr-row" style="margin-top: 15px;">
-          <div class="clr-col-sm-12">
-            <h5>Base API Filters</h5>
-            <div class="clr-subtext">Configure filters for the main API (applied regardless of drilldown settings)</div>
-
-            <!-- Common Filter Toggle -->
-            <div class="clr-form-control" style="margin-top: 10px;">
-              <div class="clr-control-container">
-                <div class="clr-checkbox-wrapper">
-                  <input type="checkbox" id="commonFilterToggle" [(ngModel)]="gadgetsEditdata.commonFilterEnabled"
-                    (change)="onCommonFilterToggle()" [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
-                  <label for="commonFilterToggle" class="clr-control-label">Use Common Filter</label>
-                </div>
-              </div>
-            </div>
-
-            <!-- Add Base Filter Button -->
-            <button class="btn btn-sm btn-primary" (click)="addBaseFilter()"
-              style="margin-top: 10px; margin-bottom: 10px;" [disabled]="gadgetsEditdata.commonFilterEnabled">
-              <clr-icon shape="plus"></clr-icon> Add Filter
-            </button>
-
-            <!-- Base Filter Fields List -->
-            <div *ngFor="let filter of gadgetsEditdata.baseFilters; let i = index"
-              style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
-              <div style="display: flex; justify-content: space-between; align-items: center;">
-                <span>Filter {{i + 1}}</span>
-                <button class="btn btn-icon btn-danger btn-sm" (click)="removeBaseFilter(i)"
-                  [disabled]="gadgetsEditdata.commonFilterEnabled">
-                  <clr-icon shape="trash"></clr-icon>
-                </button>
-              </div>
-
-              <div class="clr-row" style="margin-top: 8px;">
-                <div class="clr-col-sm-4">
-                  <select [(ngModel)]="filter.field" (ngModelChange)="onBaseFilterFieldChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
-                    [disabled]="gadgetsEditdata.commonFilterEnabled">
-                    <option value="">Select Field</option>
-                    <!-- Base API filters should always use columnData, not drilldownColumnData -->
-                    <option *ngFor="let column of getAvailableFields(gadgetsEditdata.baseFilters, i, columnData)"
-                      [value]="column">{{column}}</option>
-                  </select>
-                </div>
-
-                <div class="clr-col-sm-3">
-                  <select [(ngModel)]="filter.type" (ngModelChange)="onBaseFilterTypeChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
-                    [disabled]="gadgetsEditdata.commonFilterEnabled">
-                    <option value="text">Text</option>
-                    <option value="dropdown">Dropdown</option>
-                    <option value="multiselect">Multi-Select</option>
-                    <option value="date-range">Date Range</option>
-                    <option value="toggle">Toggle</option>
-                  </select>
-                </div>
-
-                <div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
-                  <input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
-                    placeholder="Option1,Option2,Option3" [disabled]="gadgetsEditdata.commonFilterEnabled" />
-                  <div class="clr-subtext" *ngIf="filter.availableValues">
-                    Available: {{ filter.availableValues }}
-                  </div>
-                </div>
-
-                <div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
-                  <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
-                    placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabled" />
-                </div>
-
-                <div class="clr-col-sm-2">
-                  <button class="btn btn-icon btn-danger btn-sm" (click)="removeBaseFilter(i)"
-                    [disabled]="gadgetsEditdata.commonFilterEnabled">
-                    <clr-icon shape="trash"></clr-icon>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+      </div>
+  
+      <div class="clr-row" *ngIf="gadgetsEditdata?.fieldName == 'Pie Chart' || gadgetsEditdata?.fieldName == 'Polar Area Chart' || gadgetsEditdata?.fieldName == 'To Do Chart'">
+        <div class="clr-col-sm-12">
+          <label for="yAxis">Y-Axis (Numeric)</label>
+          <select id="yAxis"  formControlName="yAxis" [(ngModel)]="gadgetsEditdata.yAxis">
+            <option value="null">choose Column</option>
+            <option *ngFor="let data of columnData" [value]="data">{{data}}</option>
+           </select>
         </div>
-
-        <!-- Base Drilldown Configuration Section -->
-        <div class="clr-row" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
-          <div class="clr-col-sm-12">
-            <h4>Base Drilldown Configuration</h4>
-            <div class="clr-form-control">
-              <div class="clr-control-container">
-                <div class="clr-checkbox-wrapper">
-                  <input type="checkbox" id="drilldownEnabled" formControlName="drilldownEnabled"
-                    [(ngModel)]="gadgetsEditdata.drilldownEnabled" class="clr-checkbox"
-                    (change)="gadgetsEditdata.drilldownEnabled ? null : resetDrilldownConfiguration()" />
-                  <label for="drilldownEnabled" class="clr-control-label">Enable Base Drilldown</label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled">
-          <div class="clr-col-sm-12">
-            <label for="drilldownApiUrl">Base Drilldown API URL</label>
-            <div>
-              <input type="text" id="drilldownApiUrl" formControlName="drilldownApiUrl" class="clr-input"
-                [(ngModel)]="gadgetsEditdata.drilldownApiUrl" style="width:90%"
-                [ngModelOptions]="{standalone: true}">&nbsp;
-              <span>
-                <button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshBaseDrilldownColumns()"
-                  [disabled]="!gadgetsEditdata.drilldownApiUrl">
-                  <clr-icon shape="redo"></clr-icon>
-                </button>
-              </span>
-            </div>
-            <div class="clr-subtext">Enter the API URL for base drilldown data. Use angle brackets for parameters, e.g.,
-              http://api.example.com/data/&lt;country&gt;</div>
-          </div>
-        </div>
-
-        <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled">
-          <div class="clr-col-sm-12">
-            <label for="drilldownXAxis">Base Drilldown X-Axis</label>
-            <select id="drilldownXAxis" formControlName="drilldownXAxis" [(ngModel)]="gadgetsEditdata.drilldownXAxis"
-              [ngModelOptions]="{standalone: true}">
-              <option value="">Select X-Axis Column</option>
-              <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
-            </select>
-            <div class="clr-subtext">Select the column to use for X-axis in base drilldown view</div>
-          </div>
-        </div>
-
-        <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled && 
-        gadgetsEditdata?.fieldName !== 'Pie Chart' && 
-        gadgetsEditdata?.fieldName !== 'Polar Area Chart' && 
-        gadgetsEditdata?.fieldName !== 'To Do Chart'">
-          <div class="clr-col-sm-12">
-            <label for="drilldownYAxis">Base Drilldown Y-Axis</label>
-            <select id="drilldownYAxis" formControlName="drilldownYAxis" [(ngModel)]="gadgetsEditdata.drilldownYAxis"
-              [ngModelOptions]="{standalone: true}">
-              <option value="">Select Y-Axis Column</option>
-              <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
-            </select>
-            <div class="clr-subtext">Select the column to use for Y-axis in base drilldown view</div>
-          </div>
-        </div>
-
-        <!-- Base Drilldown Parameter Configuration -->
-        <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled">
-          <div class="clr-col-sm-12">
-            <label for="drilldownParameter">Base Drilldown Parameter</label>
-            <select id="drilldownParameter" [(ngModel)]="gadgetsEditdata.drilldownParameter"
-              [ngModelOptions]="{standalone: true}">
-              <option value="">Select Parameter Column</option>
-              <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
-            </select>
-            <div class="clr-subtext">Select the column to use as parameter for URL template replacement in base
-              drilldown
-            </div>
-          </div>
-        </div>
-
-        <!-- Base Drilldown Filter Configuration -->
-        <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled" style="margin-top: 15px;">
-          <div class="clr-col-sm-12">
-            <h5>Base Drilldown Filters</h5>
-            <div class="clr-subtext">Configure filters for the base drilldown level</div>
-
-            <!-- Common Filter Toggle for Base Drilldown -->
-            <div class="clr-form-control" style="margin-top: 10px;">
-              <div class="clr-control-container">
-                <div class="clr-checkbox-wrapper">
-                  <input type="checkbox" id="commonFilterToggleDrilldown"
-                    [(ngModel)]="gadgetsEditdata.commonFilterEnabledDrilldown"
-                    (change)="onCommonFilterToggleDrilldown()" [ngModelOptions]="{standalone: true}"
-                    class="clr-checkbox" />
-                  <label for="commonFilterToggleDrilldown" class="clr-control-label">Use Common Filter</label>
-                </div>
-              </div>
-            </div>
-
-            <!-- Add Drilldown Filter Button -->
-            <button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()"
-              style="margin-top: 10px; margin-bottom: 10px;" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
-              <clr-icon shape="plus"></clr-icon> Add Filter
-            </button>
-
-            <!-- Drilldown Filter Fields List -->
-            <div *ngFor="let filter of gadgetsEditdata.drilldownFilters; let i = index"
-              style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
-              <div style="display: flex; justify-content: space-between; align-items: center;">
-                <span>Filter {{i + 1}}</span>
-                <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)"
-                  [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
-                  <clr-icon shape="trash"></clr-icon>
-                </button>
-              </div>
-
-              <div class="clr-row" style="margin-top: 8px;">
-                <div class="clr-col-sm-4">
-                  <select [(ngModel)]="filter.field" (ngModelChange)="onDrilldownFilterFieldChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
-                    [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
-                    <option value="">Select Field</option>
-                    <option
-                      *ngFor="let column of getAvailableFields(gadgetsEditdata.drilldownFilters, i, drilldownColumnData)"
-                      [value]="column">{{column}}</option>
-                  </select>
-                </div>
-
-                <div class="clr-col-sm-3">
-                  <select [(ngModel)]="filter.type" (ngModelChange)="onDrilldownFilterTypeChange(i, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
-                    [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
-                    <option value="text">Text</option>
-                    <option value="dropdown">Dropdown</option>
-                    <option value="multiselect">Multi-Select</option>
-                    <option value="date-range">Date Range</option>
-                    <option value="toggle">Toggle</option>
-                  </select>
-                </div>
-
-                <div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
-                  <input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
-                    placeholder="Option1,Option2,Option3" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
-                  <div class="clr-subtext" *ngIf="filter.availableValues">
-                    Available: {{ filter.availableValues }}
-                  </div>
-                </div>
-
-                <div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
-                  <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
-                    placeholder="Filter Value" [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown" />
-                </div>
-
-                <div class="clr-col-sm-2">
-                  <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)"
-                    [disabled]="gadgetsEditdata.commonFilterEnabledDrilldown">
-                    <clr-icon shape="trash"></clr-icon>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-
-
-        <!-- Multi-Layer Drilldown Configurations -->
-        <div class="clr-row" *ngIf="gadgetsEditdata.drilldownEnabled"
-          style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
-          <div class="clr-col-sm-12">
-            <h4>Multi-Layer Drilldown Configurations</h4>
-            <button class="btn btn-sm btn-primary" (click)="addDrilldownLayer()">
-              <clr-icon shape="plus"></clr-icon> Add Drilldown Layer
-            </button>
-            <div class="clr-subtext">Add additional drilldown layers for multi-level navigation</div>
-          </div>
-        </div>
-
-        <!-- Dynamic Drilldown Layers -->
-        <div class="clr-row" *ngFor="let layer of gadgetsEditdata.drilldownLayers; let i = index">
-          <div class="clr-col-sm-12"
-            style="margin-top: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-              <h5>Drilldown Layer {{i + 1}}</h5>
-              <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownLayer(i)">
-                <clr-icon shape="trash"></clr-icon>
-              </button>
-            </div>
-
-            <div class="clr-form-control">
-              <div class="clr-control-container">
-                <div class="clr-checkbox-wrapper">
-                  <input type="checkbox" [id]="'layerEnabled' + i" [(ngModel)]="layer.enabled" class="clr-checkbox"
-                    [ngModelOptions]="{standalone: true}" />
-                  <label [for]="'layerEnabled' + i" class="clr-control-label">Enable Layer {{i + 1}} Drilldown</label>
-                </div>
-              </div>
-            </div>
-
-            <div class="clr-row">
-              <div class="clr-col-sm-12">
-                <label [for]="'layerApiUrl' + i">Layer {{i + 1}} API URL</label>
-                <div>
-                  <input type="text" [id]="'layerApiUrl' + i" class="clr-input" [(ngModel)]="layer.apiUrl"
-                    style="width:90%" [ngModelOptions]="{standalone: true}">&nbsp;
-                  <span>
-                    <button class="btn btn-icon btn-primary" style="margin: 0px;"
-                      (click)="refreshDrilldownLayerColumns(i)" [disabled]="!layer.apiUrl">
-                      <clr-icon shape="redo"></clr-icon>
-                    </button>
-                  </span>
-                </div>
-                <div class="clr-subtext">Enter the API URL for layer {{i + 1}} drilldown data. Use angle brackets for
-                  parameters, e.g., http://api.example.com/data/&lt;state&gt;</div>
-              </div>
-            </div>
-
-            <div class="clr-row">
-              <div class="clr-col-sm-12">
-                <label [for]="'layerXAxis' + i">Layer {{i + 1}} X-Axis</label>
-                <select [id]="'layerXAxis' + i" [(ngModel)]="layer.xAxis" [ngModelOptions]="{standalone: true}">
-                  <option value="">Select X-Axis Column</option>
-                  <option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
-                </select>
-                <div class="clr-subtext">Select the column to use for X-axis in layer {{i + 1}} drilldown view</div>
-              </div>
-            </div>
-
-            <div class="clr-row" *ngIf="gadgetsEditdata?.fieldName !== 'Pie Chart' && 
-            gadgetsEditdata?.fieldName !== 'Polar Area Chart' && 
-            gadgetsEditdata?.fieldName !== 'To Do Chart'">
-              <div class="clr-col-sm-12">
-                <label [for]="'layerYAxis' + i">Layer {{i + 1}} Y-Axis</label>
-                <select [id]="'layerYAxis' + i" [(ngModel)]="layer.yAxis" [ngModelOptions]="{standalone: true}">
-                  <option value="">Select Y-Axis Column</option>
-                  <option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
-                </select>
-                <div class="clr-subtext">Select the column to use for Y-axis in layer {{i + 1}} drilldown view</div>
-              </div>
-            </div>
-
-            <!-- Parameter Selection for Drilldown Layer -->
-            <div class="clr-row">
-              <div class="clr-col-sm-12">
-                <label [for]="'layerParameter' + i">Layer {{i + 1}} Parameter</label>
-                <select [id]="'layerParameter' + i" [(ngModel)]="layer.parameter" [ngModelOptions]="{standalone: true}">
-                  <option value="">Select Parameter Column</option>
-                  <option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
-                </select>
-                <div class="clr-subtext">Select the column to use as parameter for URL template replacement in layer {{i
-                  +
-                  1}} drilldown</div>
-              </div>
-            </div>
-
-            <!-- Layer Filter Configuration -->
-            <div class="clr-row" style="margin-top: 15px;">
-              <div class="clr-col-sm-12">
-                <h5>Layer {{i + 1}} Filters</h5>
-                <div class="clr-subtext">Configure filters for this drilldown layer</div>
-
-                <!-- Common Filter Toggle for Layer -->
-                <div class="clr-form-control" style="margin-top: 10px;">
-                  <div class="clr-control-container">
-                    <div class="clr-checkbox-wrapper">
-                      <input type="checkbox" [id]="'commonFilterToggleLayer' + i"
-                        [(ngModel)]="layer.commonFilterEnabled" (change)="onCommonFilterToggleLayer(i)"
-                        [ngModelOptions]="{standalone: true}" class="clr-checkbox" />
-                      <label [for]="'commonFilterToggleLayer' + i" class="clr-control-label">Use Common Filter</label>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Add Layer Filter Button -->
-                <button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)"
-                  style="margin-top: 10px; margin-bottom: 10px;" [disabled]="layer.commonFilterEnabled">
-                  <clr-icon shape="plus"></clr-icon> Add Filter
-                </button>
-
-                <!-- Layer Filter Fields List -->
-                <div *ngFor="let filter of layer.filters; let j = index"
-                  style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
-                  <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <span>Filter {{j + 1}}</span>
-                    <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)"
-                      [disabled]="layer.commonFilterEnabled">
-                      <clr-icon shape="trash"></clr-icon>
-                    </button>
-                  </div>
-
-                  <div class="clr-row" style="margin-top: 8px;">
-                    <div class="clr-col-sm-4">
-                      <select [(ngModel)]="filter.field" (ngModelChange)="onLayerFilterFieldChange(i, j, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
-                        [disabled]="layer.commonFilterEnabled">
-                        <option value="">Select Field</option>
-                        <option *ngFor="let column of getAvailableFields(layer.filters, j, layerColumnData[i] || [])"
-                          [value]="column">{{column}}</option>
-                      </select>
-                    </div>
-
-                    <div class="clr-col-sm-3">
-                      <select [(ngModel)]="filter.type" (ngModelChange)="onLayerFilterTypeChange(i, j, $event)" [ngModelOptions]="{standalone: true}" class="clr-select"
-                        [disabled]="layer.commonFilterEnabled">
-                        <option value="text">Text</option>
-                        <option value="dropdown">Dropdown</option>
-                        <option value="multiselect">Multi-Select</option>
-                        <option value="date-range">Date Range</option>
-                        <option value="toggle">Toggle</option>
-                      </select>
-                    </div>
-
-                    <div class="clr-col-sm-3" *ngIf="filter.type === 'dropdown' || filter.type === 'multiselect'">
-                      <input type="text" [(ngModel)]="filter.options" [ngModelOptions]="{standalone: true}" class="clr-input"
-                        placeholder="Option1,Option2,Option3" [disabled]="layer.commonFilterEnabled" />
-                      <div class="clr-subtext" *ngIf="filter.availableValues">
-                        Available: {{ filter.availableValues }}
-                      </div>
-                    </div>
-
-                    <div class="clr-col-sm-3" *ngIf="filter.type !== 'dropdown' && filter.type !== 'multiselect'">
-                      <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
-                        placeholder="Filter Value" [disabled]="layer.commonFilterEnabled" />
-                    </div>
-
-                    <div class="clr-col-sm-2">
-                      <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)"
-                        [disabled]="layer.commonFilterEnabled">
-                        <clr-icon shape="trash"></clr-icon>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- <div class="clr-row">
+      </div>
+  
+      <!-- <div class="clr-row">
         <div class="clr-col-sm-12">
           <label for="chartparameter">API parameter</label>
           <input id="chartparameter" type="text" formControlName="chartparameter" class="clr-input" [(ngModel)]="gadgetsEditdata.chartparameter">
         </div>
       </div> -->
-
+      <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="modeledit = false">Cancel</button>
+      <button type="submit" class="btn btn-primary"  (click)="onSubmit(modelid)" >save</button>
       </div>
-
-        <div class="modal-footer">
-          <button type="button" class="btn btn-outline" (click)="modeledit = false">Cancel</button>
-          <button type="button" class="btn btn-primary" (click)="applyChanges(modelid)">Apply</button>
-          <button type="submit" class="btn btn-primary" (click)="onSubmit(modelid)">Save</button>
-        </div>
-
+  
     </form>
   </div>
-</clr-modal>
-
-<!-- Common Filter Modal -->
-<clr-modal [(clrModalOpen)]="commonFilterModalOpen" [clrModalStaticBackdrop]="true" clrModalSize="lg">
-  <h3 class="modal-title">Configure Common Filter</h3>
-  <div class="modal-body">
-    <form [formGroup]="commonFilterForm" class="clr-form-horizontal">
-      <div class="clr-row">
-        <div class="clr-col-sm-12">
-          <label for="commonFilterConnection">Connection</label>
-          <select id="commonFilterConnection" formControlName="connection" [(ngModel)]="commonFilterData.connection"
-            class="clr-select">
-            <option value="">Select Connection</option>
-            <option *ngFor="let conn of sureconnectData" [value]="conn.id">
-              {{conn.connection_name || conn.id}}
-            </option>
-          </select>
-        </div>
-      </div>
-
-      <div class="clr-row">
-        <div class="clr-col-sm-12">
-          <label for="commonFilterApiUrl">API URL</label>
-          <div>
-            <input type="text" id="commonFilterApiUrl" formControlName="apiUrl" class="clr-input"
-              [(ngModel)]="commonFilterData.apiUrl" style="width:90%">&nbsp;
-            <span>
-              <button class="btn btn-icon btn-primary" style="margin: 0px;" (click)="refreshCommonFilterColumns()"
-                [disabled]="!commonFilterData.apiUrl">
-                <clr-icon shape="redo"></clr-icon>
-              </button>
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Common Filter Fields List -->
-      <div class="clr-row" style="margin-top: 15px;">
-        <div class="clr-col-sm-12">
-          <h5>Common Filters</h5>
-
-          <!-- Add Common Filter Button -->
-          <button class="btn btn-sm btn-primary" (click)="addCommonFilter()"
-            style="margin-top: 10px; margin-bottom: 10px;">
-            <clr-icon shape="plus"></clr-icon> Add Filter
-          </button>
-
-          <!-- Common Filter Fields List -->
-          <div *ngFor="let filter of commonFilterData.filters; let i = index"
-            style="margin-bottom: 10px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9;">
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-              <span>Filter {{i + 1}}</span>
-              <button class="btn btn-icon btn-danger btn-sm" (click)="removeCommonFilter(i)">
-                <clr-icon shape="trash"></clr-icon>
-              </button>
-            </div>
-
-            <div class="clr-row" style="margin-top: 8px;">
-              <div class="clr-col-sm-5">
-                <select [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" class="clr-select">
-                  <option value="">Select Field</option>
-                  <option *ngFor="let column of commonFilterColumnData" [value]="column">{{column}}</option>
-                </select>
-              </div>
-
-              <div class="clr-col-sm-5">
-                <input type="text" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" class="clr-input"
-                  placeholder="Filter Value" />
-              </div>
-
-              <div class="clr-col-sm-2">
-                <button class="btn btn-icon btn-danger btn-sm" (click)="removeCommonFilter(i)">
-                  <clr-icon shape="trash"></clr-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="commonFilterModalOpen = false">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="saveCommonFilter()">Save</button>
-  </div>
-</clr-modal>
\ No newline at end of file
+  </clr-modal>
+  
+  
\ No newline at end of file
diff --git 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
index cf490a7..5104759 100644
--- 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
@@ -20,18 +20,7 @@ import { GridViewComponent } from '../gadgets/grid-view/grid-view.component';
 import { DatastoreService } from 'src/app/services/fnd/datastore.service';
 import { AlertsService } from 'src/app/services/fnd/alerts.service';
 import { isArray } from 'highcharts';
-// Add the SureconnectService import
-import { SureconnectService } from '../sureconnect/sureconnect.service';
-// Add the CommonFilterComponent import
-import { CommonFilterComponent } from '../common-filter/common-filter.component';
-// Add the CompactFilterComponent import
-import { CompactFilterComponent } from '../common-filter';
-// Add the FilterService import
-import { FilterService } from '../common-filter/filter.service';
-// Add the UnifiedChartComponent import
-import { UnifiedChartComponent } from '../gadgets/unified-chart';
-// Add the DynamicChartLoaderService import
-import { DynamicChartLoaderService } from '../chart-config/dynamic-chart-loader.service';
+// import { ChartItem } from '../chartitem';
 
 function isNullArray(arr) {
   return !Array.isArray(arr) || arr.length === 0;
@@ -47,2170 +36,582 @@ function isNullArray(arr) {
 
 export class EditnewdashComponent implements OnInit {
 
-  editId: number;
-  toggle: boolean;
-  modeledit: boolean = false;
-  commonFilterModalOpen: boolean = false; // Add common filter modal state
+  editId:number;
+  toggle:boolean;
+  modeledit:boolean = false;
   public entryForm: FormGroup;
-  public commonFilterForm: FormGroup; // Add common filter form
-  
-  // Add filterOptionsString property for compact filter
-  filterOptionsString: string = '';
-  
-  // Add availableKeys property for compact filter
-  availableKeys: string[] = [];
 
-  // Initialize with default widgets and update dynamically
   WidgetsMock: WidgetModel[] = [
     {
-      name: 'Common Filter',
-      identifier: 'common_filter'
+        name: 'Radar Chart',
+        identifier: 'radar_chart'
     },
     {
-      name: 'Radar Chart',
-      identifier: 'radar_chart'
+        name: 'Doughnut Chart',
+        identifier: 'doughnut_chart'
     },
     {
-      name: 'Doughnut Chart',
-      identifier: 'doughnut_chart'
-    },
-    {
-      name: 'Line Chart',
-      identifier: 'line_chart'
-    },
-    // {
-    //   name: 'Bar Chart',
-    //   identifier: 'bar_chart'
-    // },
-    // {
-    //   name: 'Pie Chart',
-    //   identifier: 'pie_chart'
-    // },
-    // {
-    //   name: 'Polar Area Chart',
-    //   identifier: 'polar_area_chart'
-    // },
-    // {
-    //   name: 'Bubble Chart',
-    //   identifier: 'bubble_chart'
-    // },
-    // {
-    //   name: 'Scatter Chart',
-    //   identifier: 'scatter_chart'
-    // },
-    {
-    name: 'Dynamic Chart',
-    identifier: 'dynamic_chart'
-    },
-    {
-    name: 'Financial Chart',
-    identifier: 'financial_chart'
-    },
-    {
-      name: 'To Do',
-      identifier: 'to_do_chart'
+        name: 'Line Chart',
+        identifier: 'line_chart'
     },
+	{
+		name: 'Bar Chart',
+		identifier: 'bar_chart'
+	  },
+	  {
+		name: 'Pie Chart',
+		identifier: 'pie_chart'
+	  },
+	  {
+		name: 'Polar Area Chart',
+		identifier: 'polar_area_chart'
+	  },
+	  {
+		name: 'Bubble Chart',
+		identifier: 'bubble_chart'
+	  },
+	  {
+		name: 'Scatter Chart',
+		identifier: 'scatter_chart'
+	  },
+	  // {
+		// name: 'Dynamic Chart',
+		// identifier: 'dynamic_chart'
+	  // },
+	  // {
+		// name: 'Financial Chart',
+		// identifier: 'financial_chart'
+	  // },
+	  {
+		name: 'To Do',
+		identifier: 'to_do_chart'
+	  },
     {
       name: 'Grid View',
       identifier: 'grid_view'
-    },
-    {
-      name: 'Compact Filter',
-      identifier: 'compact_filter'
-    },
-    {
-      name: 'Unified Chart',
-      identifier: 'unified_chart'
-    }
-  ]
+      }
+]
 
   public options: GridsterConfig;
-  protected dashboardId: number;
-  protected dashboardCollection: DashboardModel;
-  //dashboardCollection:any;
-  protected dashboardCollection1: DashboardModel[];
-  public dashboardArray: DashboardContentModel[];
-  public dashArr: [];
+	protected dashboardId: number;
+	protected dashboardCollection: DashboardModel;
+	//dashboardCollection:any;
+	protected dashboardCollection1: DashboardModel[];
+	public dashboardArray: DashboardContentModel[];
+  public dashArr:[];
 
-  protected componentCollection = [
-    { name: "Common Filter", componentInstance: CommonFilterComponent },
-    { name: "Line Chart", componentInstance: UnifiedChartComponent },
-    { name: "Doughnut Chart", componentInstance: UnifiedChartComponent },
-    { name: "Radar Chart", componentInstance: UnifiedChartComponent },
-    { name: "Bar Chart", componentInstance: UnifiedChartComponent },
-    { name: "Pie Chart", componentInstance: UnifiedChartComponent },
-    { name: "Polar Area Chart", componentInstance: UnifiedChartComponent },
-    { name: "Bubble Chart", componentInstance: UnifiedChartComponent },
-    { name: "Scatter Chart", componentInstance: UnifiedChartComponent },
-    { name: "Dynamic Chart", componentInstance: UnifiedChartComponent },
-    { name: "Financial Chart", componentInstance: UnifiedChartComponent },
-    { name: "To Do Chart", componentInstance: ToDoChartComponent },
+	protected componentCollection = [
+		{ name: "Line Chart", componentInstance: LineChartComponent },
+		{ name: "Doughnut Chart", componentInstance: DoughnutChartComponent },
+		{ name: "Radar Chart", componentInstance: RadarChartComponent },
+		{ name: "Bar Chart", componentInstance: BarChartComponent },
+		{ name: "Pie Chart", componentInstance: PieChartComponent },
+		{ name: "Polar Area Chart", componentInstance: PolarChartComponent },
+		{ name: "Bubble Chart", componentInstance: BubbleChartComponent },
+		{ name: "Scatter Chart", componentInstance: ScatterChartComponent },
+		{ name: "Dynamic Chart", componentInstance: DynamicChartComponent },
+		{ name: "Financial Chart", componentInstance: FinancialChartComponent },
+		{ name: "To Do Chart", componentInstance: ToDoChartComponent },
     { name: "Grid View", componentInstance: GridViewComponent },
-    { name: "Compact Filter", componentInstance: CompactFilterComponent },
-    { name: "Unified Chart", componentInstance: UnifiedChartComponent },
-  ];
-  model: any;
-  linesdata: any;
-  id: any;
-
-  // Add common filter data property
-  commonFilterData = {
-    connection: '',
-    apiUrl: '',
-    filters: [] as any[]
-  };
-  
-  // Add common filter column data property
-  commonFilterColumnData: any[] = [];
-
+	];
+  model:any;
+  linesdata:any;
+  id:any;
   gadgetsEditdata = {
-    donut: '',
+    donut : '',
     chartlegend: '',
-    showlabel: '',
+    showlabel : '',
     charturl: '',
-    chartparameter: '',
-    datastore: '',
-    table: '',
-    datasource: '',
-    charttitle: '',
-    id: '',
-    fieldName: '',
-    chartcolor: '',
-    slices: '',
-    yAxis: '',
-    xAxis: '',
-    connection: '', // Add connection field
-    chartType: '', // Add chartType field
-    // Drilldown configuration properties (base level)
-    drilldownEnabled: false,
-    drilldownApiUrl: '',
-    // Removed drilldownParameterKey since we're using URL templates
-    drilldownXAxis: '',
-    drilldownYAxis: '',
-    drilldownParameter: '', // Add drilldown parameter property
-    baseFilters: [] as any[], // Add base filters for API
-    drilldownFilters: [] as any[], // Add separate drilldown filters
-    // Multi-layer drilldown configurations
-    drilldownLayers: [] as any[],
-    // Common filter properties
-    commonFilterEnabled: false,
-    commonFilterEnabledDrilldown: false,
-    // Compact filter properties
-    filterKey: '',
-    filterType: 'text',
-    filterLabel: '',
-    filterOptions: [] as string[]
-  };
-
-  // Add sureconnect data property
-  sureconnectData: any[] = [];
-  layerColumnData: { [key: number]: any[] } = {}; // Add layer column data property
-
-  // Add drilldown column data property
-  drilldownColumnData = []; // Add drilldown column data property
-
-  // Add chart types property for dynamic chart selection
-  chartTypes: any[] = [];
+    chartparameter : '',
+    datastore : '',
+    table:'',
+    datasource : '',
+    charttitle:'',
+    id:'',
+    fieldName:'',
+    chartcolor:'',
+    slices:'',
+    yAxis:'',
+    xAxis:''
 
+};
   constructor(private route: ActivatedRoute,
-    private router: Router,
-    private dashboardService: Dashboard3Service,
-    private toastr: ToastrService,
+    private router : Router,
+      private dashboardService: Dashboard3Service,
+    private toastr:ToastrService,
     private _fb: FormBuilder,
     private datastoreService: DatastoreService,
-    private alertService: AlertsService,
-    private sureconnectService: SureconnectService,
-    private filterService: FilterService,
-    private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
+    private alertService:AlertsService,) { }
 
-  // Add property to track if coming from dashboard runner
-  fromRunner: boolean = false;
-  
-  ngOnInit(): void {
-    // Reset the filter service when the component is initialized
-    this.filterService.resetFilters();
+    ngOnInit(): void {
 
-    // Grid options
-    this.options = {
-      gridType: "fit",
-      enableEmptyCellDrop: true,
-      emptyCellDropCallback: this.onDrop,
-      pushItems: true,
-      swap: true,
-      pushDirections: { north: true, east: true, south: true, west: true },
-      resizable: { enabled: true },
-      itemChangeCallback: this.itemChange.bind(this),
-      draggable: {
-        enabled: true,
-        ignoreContent: true,
-        dropOverItems: true,
-        dragHandleClass: "drag-handler",
-        ignoreContentClass: "no-drag",
+      // Grid options
+      this.options = {
+        gridType: "fit",
+        enableEmptyCellDrop: true,
+        emptyCellDropCallback: this.onDrop,
+        pushItems: true,
+        swap: true,
+        pushDirections: { north: true, east: true, south: true, west: true },
+        resizable: { enabled: true },
+        itemChangeCallback: this.itemChange.bind(this),
+        draggable: {
+          enabled: true,
+          ignoreContent: true,
+          dropOverItems: true,
+          dragHandleClass: "drag-handler",
+          ignoreContentClass: "no-drag",
+        },
+        displayGrid: "always",
+        minCols: 10,
+        minRows: 10
+      };
+      this.getData();
+
+      this.editId = this.route.snapshot.params.id;
+      console.log(this.editId);
+      this.dashboardService.getById(this.editId).subscribe((data)=>{
+        console.log("ngOnInit",data);
+        this.linesdata = data;
+        this.id = data.dashbord1_Line[0].id;
+        console.log("this.id ",this.id);
       },
-      displayGrid: "always",
-      minCols: 10,
-      minRows: 10,
-      // Add resize callback to handle chart resizing
-      itemResizeCallback: this.itemResize.bind(this)
-    };
-    
-    // Check if coming from dashboard runner
-    this.route.queryParams.subscribe(params => {
-      if (params['fromRunner'] === 'true') {
-        this.fromRunner = true;
-      }
-    });
-
-    this.editId = this.route.snapshot.params.id;
-    console.log(this.editId);
-    this.dashboardService.getById(this.editId).subscribe((data) => {
-      console.log("ngOnInit", data);
-      this.linesdata = data;
-      this.id = data.dashbord1_Line[0].id;
-      console.log("this.id ", this.id);
-    },
-      (error: any) => {
+      (error: any)=>{
 
       }
-    );
+      );
 
-    this.entryForm = this._fb.group({
-      donut: [null],
-      chartlegend: [null],
-      showlabel: [null],
-      charturl: [null],
-      chartparameter: [null],
-      datastore: [null],
-      table: [null],
-      fieldName: [null],
-      datasource: [null],
-      charttitle: [null],
-      id: [null],
-      chartcolor: [null],
-      slices: [null],
-      yAxis: [null],
-      xAxis: [null],
-      connection: [null], // Add connection to form group
-      // Base drilldown configuration form controls
-      drilldownEnabled: [null],
-      drilldownApiUrl: [null],
-      drilldownXAxis: [null],
-      drilldownYAxis: [null],
-      drilldownParameter: [null] // Add drilldown parameter to form group
-      // Note: Dynamic drilldown layers and filters will be handled separately since they're complex objects
-    });
-    
-    // Initialize common filter form
-    this.commonFilterForm = this._fb.group({
-      connection: [''],
-      apiUrl: ['']
-    });
-    
-    // Load chart types for dynamic chart selection
-    this.loadChartTypesForSelection();
-    
-    // Load sureconnect data first, then load dashboard data
-    this.loadSureconnectData();
-    
-    // Load common filter data if it exists
-    this.loadCommonFilterData();
-  }
-
-  // Add method to load all chart types for dynamic selection
-  loadChartTypesForSelection() {
-  console.log('Loading chart types for selection');
-  this.dynamicChartLoader.loadActiveChartTypes().subscribe({
-    next: (chartTypes) => {
-      console.log('Loaded chart types for selection:', chartTypes);
-      this.chartTypes = chartTypes;
-
-      // Convert each chart type to a WidgetModel
-      const newWidgets = chartTypes.map(ct => ({
-        name: ct.displayName || ct.name,
-        // identifier: ct.name.toLowerCase().replace(/\s+/g, '_')
-        identifier: `${ct.name.toLowerCase().replace(/\s+/g, '_')}_chart`
-      }));
-
-      // Filter out duplicates by identifier
-      const existingIds = new Set(this.WidgetsMock.map(w => w.identifier));
-      const uniqueNewWidgets = newWidgets.filter(w => !existingIds.has(w.identifier));
-
-      // Append unique new widgets to WidgetsMock
-      this.WidgetsMock = [...this.WidgetsMock, ...uniqueNewWidgets];
-
-      console.log('Updated WidgetsMock:', this.WidgetsMock);
-    },
-    error: (error) => {
-      console.error('Error loading chart types for selection:', error);
+      this.entryForm = this._fb.group({
+        donut : [null],
+        chartlegend: [null],
+        showlabel : [null],
+        charturl: [null],
+        chartparameter : [null],
+        datastore:[null],
+        table:[null],
+        fieldName: [null],
+        datasource : [null],
+        charttitle:[null],
+        id:[null],
+        chartcolor:[null],
+        slices:[null],
+        yAxis:[null],
+        xAxis: [null],
+        });
     }
-  });
-}
 
-  
-  // Add method to load sureconnect data
-  loadSureconnectData() {
-    this.sureconnectService.getAll().subscribe((data: any[]) => {
-      this.sureconnectData = data;
-      console.log('Sureconnect data loaded:', this.sureconnectData);
-      // Now that sureconnect data is loaded, we can safely load dashboard data
-      this.getData();
-    }, (error) => {
-      console.log('Error loading sureconnect data:', error);
-      // Even if there's an error loading sureconnect data, we still need to load dashboard data
-      this.getData();
-    });
-  }
-  
-  // Add method to load common filter data
-  loadCommonFilterData() {
-    // In a real implementation, this would fetch common filter data from the server
-    // For now, we'll initialize with empty values
-    console.log('Loading common filter data');
-  }
-  
-  toggleMenu() {
-    this.toggle = !this.toggle;
-  }
+    toggleMenu() {
+      this.toggle = !this.toggle;
+    }
 
-  onDrag(event, identifier) {
-    console.log("on drag", identifier);
-    console.log("on drag ", event);
-    event.dataTransfer.setData('widgetIdentifier', identifier);
-  }
-  datagadgets: any;
-  dashboardLine: any;
-  dashboardName: any;
-  getData() {
-    // Reset the filter service when switching between dashboard records
-    this.filterService.resetFilters();
-    
-    // We get the id in get current router dashboard/:id
-    this.route.params.subscribe(params => {
-      // + is used to cast string to int
-      this.dashboardId = +params["id"];
-      // We make a get request with the dashboard id
-      this.dashboardService.getById(this.dashboardId).subscribe(dashboard => {
-        // We fill our dashboardCollection with returned Observable
-        this.dashboardName = dashboard.dashboard_name;
-        this.datagadgets = dashboard;
-        this.dashboardLine = dashboard.dashbord1_Line;
-        //this.dashboardCollection = dashboard.dashbord1_Line.model;
-        console.log("this.datagadgets", this.datagadgets);
-        console.log("this.dashboardLine", this.dashboardLine);
-        this.dashboardCollection = JSON.parse(this.dashboardLine[0].model);
-        //this.dashboardCollection =this.dashboardLine[0].model ;
-        console.log("this.dasboard  ", this.dashboardCollection);
-        console.log(this.dashboardCollection);
-        // We parse serialized Json to generate components on the fly
-        this.parseJson(this.dashboardCollection);
-        
-        // Set default connections for all gadgets if sureconnect data is available
-        if (this.sureconnectData && this.sureconnectData.length > 0) {
-          this.dashboardCollection.dashboard.forEach(item => {
-            if (!item['connection'] || item['connection'] === '') {
-              item['connection'] = this.sureconnectData[0].id;
-            }
+    onDrag(event, identifier) {
+    console.log("on drag",identifier);
+    console.log("on drag ",event);
+      event.dataTransfer.setData('widgetIdentifier', identifier);
+    }
+    datagadgets:any;
+    dashboardLine:any;
+    dashboardName:any;
+    getData() {
+      // We get the id in get current router dashboard/:id
+      this.route.params.subscribe(params => {
+        // + is used to cast string to int
+        this.dashboardId = +params["id"];
+        // We make a get request with the dashboard id
+        this.dashboardService.getById(this.dashboardId).subscribe(dashboard => {
+          // We fill our dashboardCollection with returned Observable
+          this.dashboardName = dashboard.dashboard_name;
+          this.datagadgets = dashboard;
+          this.dashboardLine = dashboard.dashbord1_Line;
+          //this.dashboardCollection = dashboard.dashbord1_Line.model;
+          console.log("this.datagadgets",this.datagadgets);
+          console.log("this.dashboardLine",this.dashboardLine);
+          this.dashboardCollection =JSON.parse(this.dashboardLine[0].model) ;
+          //this.dashboardCollection =this.dashboardLine[0].model ;
+          console.log("this.dasboard  ",this.dashboardCollection );
+          console.log(this.dashboardCollection);
+          // We parse serialized Json to generate components on the fly
+          this.parseJson(this.dashboardCollection);
+          // We copy array without reference
+          this.dashboardArray = this.dashboardCollection.dashboard.slice();
+          console.log("this.dashboardArray",this.dashboardArray);
+        });
+      });
+
+
+    }
+
+    // Super TOKENIZER 2.0 POWERED BY NATCHOIN
+    parseJson(dashboardCollection: DashboardModel) {
+      // We loop on our dashboardCollection
+      dashboardCollection.dashboard.forEach(dashboard => {
+        // We loop on our componentCollection
+        this.componentCollection.forEach(component => {
+          // We check if component key in our dashboardCollection
+          // is equal to our component name key in our componentCollection
+          if (dashboard.component === component.name) {
+            // If it is, we replace our serialized key by our component instance
+            dashboard.component = component.componentInstance;
+          }
+        });
+      });
+    }
+
+    serialize(dashboardCollection) {
+      // We loop on our dashboardCollection
+      dashboardCollection.forEach(dashboard => {
+        // We loop on our componentCollection
+        this.componentCollection.forEach(component => {
+          // We check if component key in our dashboardCollection
+          // is equal to our component name key in our componentCollection
+          if (dashboard.name === component.name) {
+            dashboard.component = component.name;
+          }
+        });
+      });
+    }
+
+    itemChange() {
+      this.dashboardCollection.dashboard = this.dashboardArray;
+      console.log("itemChange this.dashboardCollection.dashboard ",this.dashboardCollection.dashboard);
+      console.log("itemChange this.dashboardCollection ",this.dashboardCollection);
+      console.log("itemChange this.dashboardCollection type",typeof this.dashboardCollection);
+      console.log("itemChange this.dashboardArray ",this.dashboardArray);
+      let tmp = JSON.stringify(this.dashboardCollection);
+      console.log("temp data",tmp);
+      let parsed: DashboardModel = JSON.parse(tmp);
+      console.log("parsed data",parsed);
+      console.log("let parsed ",typeof parsed);
+      this.serialize(parsed.dashboard);
+      console.log("item chnage function ", typeof this.dashboardArray);
+      //this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
+    }
+
+    onDrop(ev) {
+      const componentType = ev.dataTransfer.getData("widgetIdentifier");
+      let maxChartId = this.dashboardArray?.reduce((maxId, item) => Math.max(maxId, item.chartid), 0);
+      switch (componentType) {
+        case "radar_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: RadarChartComponent,
+            name: "Radar Chart"
           });
-        }
-        
-        // We copy array without reference
-        this.dashboardArray = this.dashboardCollection.dashboard.slice();
-        console.log("this.dashboardArray", this.dashboardArray);
-      });
-    });
-  }
-
-  // Super TOKENIZER 2.0 POWERED BY NATCHOIN
-  parseJson(dashboardCollection: DashboardModel) {
-    // We loop on our dashboardCollection
-    dashboardCollection.dashboard.forEach(dashboard => {
-      // We loop on our componentCollection
-      this.componentCollection.forEach(component => {
-        // We check if component key in our dashboardCollection
-        // is equal to our component name key in our componentCollection
-        if (dashboard.component === component.name) {
-          // If it is, we replace our serialized key by our component instance
-          dashboard.component = component.componentInstance;
-        }
-      });
-      
-      // Map chart names to unified chart types
-      const chartTypeMap = {
-        'Radar Chart': 'radar',
-        'Line Chart': 'line',
-        'Doughnut Chart': 'doughnut',
-        'Bar Chart': 'bar',
-        'Pie Chart': 'pie',
-        'Polar Area Chart': 'polar',
-        'Bubble Chart': 'bubble',
-        'Scatter Chart': 'scatter',
-        'Dynamic Chart': 'line',
-        'Financial Chart': 'line'
-      };
-      
-      // If this is a chart, set the chartType property
-      if (chartTypeMap.hasOwnProperty(dashboard.name)) {
-        dashboard.chartType = chartTypeMap[dashboard.name];
-        // Keep the original name instead of changing it to "Unified Chart"
-        // dashboard.name = "Unified Chart";
-      }
-      
-      // Ensure compact filter configuration properties are properly initialized
-      if (dashboard.component === 'Compact Filter' || dashboard.name === 'Compact Filter') {
-        // Make sure all compact filter properties exist
-        if (dashboard.filterKey === undefined) dashboard.filterKey = '';
-        if (dashboard.filterType === undefined) dashboard.filterType = 'text';
-        if (dashboard.filterLabel === undefined) dashboard.filterLabel = '';
-        if (dashboard.filterOptions === undefined) dashboard.filterOptions = [];
-        // table and connection properties should already exist for all components
-      }
-    });
-  }
-
-  serialize(dashboardCollection) {
-    // We loop on our dashboardCollection
-    dashboardCollection.forEach(dashboard => {
-      // We loop on our componentCollection
-      this.componentCollection.forEach(component => {
-        // We check if component key in our dashboardCollection
-        // is equal to our component name key in our componentCollection
-        if (dashboard.name === component.name) {
-          dashboard.component = component.name;
-        }
-      });
-      
-      // Map unified chart types back to chart names for serialization
-      const chartNameMap = {
-        'radar': 'Radar Chart',
-        'line': 'Line Chart',
-        'doughnut': 'Doughnut Chart',
-        'bar': 'Bar Chart',
-        'pie': 'Pie Chart',
-        'polar': 'Polar Area Chart',
-        'bubble': 'Bubble Chart',
-        'scatter': 'Scatter Chart'
-        // Removed hardcoded heatmap entry to make it fully dynamic
-      };
-      
-      // If this is a unified chart, set the name back to the appropriate chart name
-      if (dashboard.name === 'Unified Chart' && dashboard.chartType && chartNameMap.hasOwnProperty(dashboard.chartType)) {
-        dashboard.name = chartNameMap[dashboard.chartType];
-      }
-      // Also handle the case where the chart already has the correct name
-      else if (dashboard.chartType && chartNameMap.hasOwnProperty(dashboard.chartType) && 
-               dashboard.name === chartNameMap[dashboard.chartType]) {
-        // The name is already correct, no need to change it
-        dashboard.component = "Unified Chart";
-      }
-      
-      // Ensure compact filter configuration properties are preserved
-      if (dashboard.name === 'Compact Filter') {
-        // Make sure all compact filter properties exist
-        if (dashboard.filterKey === undefined) dashboard.filterKey = '';
-        if (dashboard.filterType === undefined) dashboard.filterType = 'text';
-        if (dashboard.filterLabel === undefined) dashboard.filterLabel = '';
-        if (dashboard.filterOptions === undefined) dashboard.filterOptions = [];
-        // table and connection properties should already exist for all components
-      }
-    });
-  }
-  
-  // Add method to get available fields for a filter dropdown (excluding already selected fields)
-  getAvailableFields(filters: any[], currentIndex: number, allFields: string[]): string[] {
-    if (!filters || !allFields) {
-      return allFields || [];
-    }
-    
-    // Get all selected fields except the current one
-    const selectedFields = filters
-      .filter((filter, index) => filter.field && index !== currentIndex)
-      .map(filter => filter.field);
-      
-    // Return fields that haven't been selected yet
-    return allFields.filter(field => !selectedFields.includes(field));
-  }
-  
-  itemChange() {
-    this.dashboardCollection.dashboard = this.dashboardArray;
-    console.log("itemChange this.dashboardCollection.dashboard ", this.dashboardCollection.dashboard);
-    console.log("itemChange this.dashboardCollection ", this.dashboardCollection);
-    console.log("itemChange this.dashboardCollection type", typeof this.dashboardCollection);
-    console.log("itemChange this.dashboardArray ", this.dashboardArray);
-    let tmp = JSON.stringify(this.dashboardCollection);
-    console.log("temp data", tmp);
-    let parsed: DashboardModel = JSON.parse(tmp);
-    console.log("parsed data", parsed);
-    console.log("let parsed ", typeof parsed);
-    this.serialize(parsed.dashboard);
-    console.log("item chnage function ", typeof this.dashboardArray);
-    //this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
-  }
-
-  onDrop = (ev) => {
-    console.log("on drop event ", ev);
-    const componentType = ev.dataTransfer.getData("widgetIdentifier");
-    // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
-    console.log("on drop ", componentType);
-    let maxChartId = 0;
-    if (this.dashboardArray && this.dashboardArray.length > 0) {
-      const validChartIds = this.dashboardArray
-        .map(item => item.chartid)
-        .filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
-      
-      if (validChartIds.length > 0) {
-        maxChartId = Math.max(...validChartIds);
-      }
-    }
-    switch (componentType) {
-      // Handle all chart types by converting them to unified charts
-      case "radar_chart":
-        // Use dynamic chart creation for all chart types
-        return this.createDynamicChart('radar', maxChartId);
-      case "line_chart":
-        return this.createDynamicChart('line', maxChartId);
-      case "doughnut_chart":
-        return this.createDynamicChart('doughnut', maxChartId);
-      case "bar_chart":
-        return this.createDynamicChart('bar', maxChartId);
-      case "pie_chart":
-        return this.createDynamicChart('pie', maxChartId);
-      case "polar_area_chart":
-        return this.createDynamicChart('polar', maxChartId);
-      case "bubble_chart":
-        return this.createDynamicChart('bubble', maxChartId);
-      case "scatter_chart":
-        return this.createDynamicChart('scatter', maxChartId);
-      case "dynamic_chart":
-        return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
-      case "financial_chart":
-        return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
-      case "to_do_chart":
-        return this.dashboardArray.push({
-          cols: 5,
-          rows: 5,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: ToDoChartComponent,
-          name: "To Do Chart"
+        case "line_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 7,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: LineChartComponent,
+            name: "Line Chart"
+          });
+        case "doughnut_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: DoughnutChartComponent,
+            name: "Doughnut Chart"
+          });
+        case "bar_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: BarChartComponent,
+            name: "Bar Chart"
         });
-      case "common_filter":
-        return this.dashboardArray.push({
-          cols: 10,
-          rows: 3,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: CommonFilterComponent,
-          name: "Common Filter"
+        case "pie_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: PieChartComponent,
+            name: "Pie Chart"
         });
-      case "compact_filter":
-        return this.dashboardArray.push({
-          cols: 3,
-          rows: 2,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: CompactFilterComponent,
-          name: "Compact Filter",
-          // Add default configuration for compact filter
-          filterKey: '',
-          filterType: 'text',
-          filterLabel: '',
-          filterOptions: []
+        case "polar_area_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: PolarChartComponent,
+            name: "Polar Area Chart"
         });
-      case "grid_view":
-        return this.dashboardArray.push({
-          cols: 5,
-          rows: 5,
-          x: 0,
-          y: 0,
-          chartid: maxChartId + 1,
-          component: GridViewComponent,
-          name: "Grid View"
+        case "bubble_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: BubbleChartComponent,
+            name: "Bubble Chart"
+        });
+        case "scatter_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: ScatterChartComponent,
+            name: "Scatter Chart"
+        });
+        case "dynamic_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: DynamicChartComponent,
+            name: "Dynamic Chart"
+        });
+        case "financial_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 6,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: FinancialChartComponent,
+            name: "Financial Chart"
+        });
+        case "to_do_chart":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 5,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: ToDoChartComponent,
+            name: "To Do Chart"
+        });
+        case "grid_view":
+          return this.dashboardArray.push({
+            cols: 5,
+            rows: 5,
+            x: 0,
+            y: 0,
+            chartid:maxChartId + 1,
+            component: GridViewComponent,
+            name: "Grid View"
         });
-      case "unified_chart":
-        return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
-      default:
-        // Handle any other chart types dynamically
-        // Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
-        const chartTypeName = componentType.replace('_chart', '');
-        console.log('Creating dynamic chart of type:', chartTypeName);
-        console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
-        
-        // Use dynamic chart creation for all chart types
-        return this.createDynamicChart(chartTypeName, maxChartId);
-    }
-  }
-  removeItem(item) {
-    this.dashboardArray.splice(
-      this.dashboardArray.indexOf(item),
-      1
-    );
-    this.itemChange();
-  }
-
-  changedOptions() {
-    this.options.api.optionsChanged();
-  }
-
-  modelid: number;
-  // Update the editGadget method to initialize filter properties
-  editGadget(item) {
-    // If coming from dashboard runner, skip showing the config modal
-    if (this.fromRunner) {
-      console.log('Coming from dashboard runner, skipping config modal');
-      return;
-    }
-    
-    this.modeledit = true;
-    this.modelid = item.chartid;
-    console.log(this.modelid);
-    this.gadgetsEditdata = item;
-    this.gadgetsEditdata.fieldName = item.name;
-    if (item.showlabel === undefined) { item.showlabel = true; }
-    if (item.chartcolor === undefined) { item.chartcolor = true; }
-    if (item.chartlegend === undefined) { item.chartlegend = true; }
-    // Initialize common filter property if not present
-    if (item['commonFilterEnabled'] === undefined) { 
-      this.gadgetsEditdata['commonFilterEnabled'] = false; 
-    }
-    // Initialize drilldown common filter property if not present
-    if (item['commonFilterEnabledDrilldown'] === undefined) { 
-      this.gadgetsEditdata['commonFilterEnabledDrilldown'] = false; 
-    }
-    // Initialize compact filter properties if not present
-    if (item['filterKey'] === undefined) { 
-      this.gadgetsEditdata['filterKey'] = ''; 
-    }
-    if (item['filterType'] === undefined) { 
-      this.gadgetsEditdata['filterType'] = 'text'; 
-    }
-    if (item['filterLabel'] === undefined) { 
-      this.gadgetsEditdata['filterLabel'] = ''; 
-    }
-    if (item['filterOptions'] === undefined) { 
-      this.gadgetsEditdata['filterOptions'] = []; 
-    }
-    // Initialize chartType property if not present (for unified chart)
-    if (item['chartType'] === undefined) { 
-      this.gadgetsEditdata['chartType'] = 'bar'; 
-    }
-    
-    // Initialize filterOptionsString for compact filter
-    if (item.name === 'Compact Filter') {
-      this.filterOptionsString = this.gadgetsEditdata['filterOptions'].join(', ');
-      // Load available keys when editing a compact filter
-      if (this.gadgetsEditdata['table']) {
-        this.loadAvailableKeys(this.gadgetsEditdata['table'], this.gadgetsEditdata['connection']);
       }
-    } else {
-      this.filterOptionsString = '';
     }
-    
-    // Initialize base filters with type and options if not present
-    if (item['baseFilters'] === undefined) { 
-      this.gadgetsEditdata['baseFilters'] = []; 
-    } else {
-      // Ensure each base filter has type and options properties
-      this.gadgetsEditdata['baseFilters'] = this.gadgetsEditdata['baseFilters'].map(filter => ({
-        field: filter.field || '',
-        value: filter.value || '',
-        type: filter.type || 'text',
-        options: filter.options || '',
-        availableValues: filter.availableValues || ''
-      }));
+    removeItem(item) {
+      this.dashboardArray.splice(
+        this.dashboardArray.indexOf(item),
+        1
+      );
+      this.itemChange();
     }
-    
-    // Initialize drilldown filters with type and options if not present
-    if (item['drilldownFilters'] === undefined) { 
-      this.gadgetsEditdata['drilldownFilters'] = []; 
-    } else {
-      // Ensure each drilldown filter has type and options properties
-      this.gadgetsEditdata['drilldownFilters'] = this.gadgetsEditdata['drilldownFilters'].map(filter => ({
-        field: filter.field || '',
-        value: filter.value || '',
-        type: filter.type || 'text',
-        options: filter.options || '',
-        availableValues: filter.availableValues || ''
-      }));
+
+      changedOptions() {
+      this.options.api.optionsChanged();
     }
-    
-    // Initialize drilldown layers with proper filter structure if not present
-    if (item['drilldownLayers'] === undefined) { 
-      this.gadgetsEditdata['drilldownLayers'] = []; 
-    } else {
-      // Ensure each layer has proper filter structure
-      this.gadgetsEditdata['drilldownLayers'] = this.gadgetsEditdata['drilldownLayers'].map(layer => {
-        // Initialize parameter if not present
-        if (layer['parameter'] === undefined) {
-          layer['parameter'] = '';
-        }
-        // Initialize filters if not present
-        if (layer['filters'] === undefined) {
-          layer['filters'] = [];
-        } else {
-          // Ensure each layer filter has type and options properties
-          layer['filters'] = layer['filters'].map(filter => ({
-            field: filter.field || '',
-            value: filter.value || '',
-            type: filter.type || 'text',
-            options: filter.options || '',
-            availableValues: filter.availableValues || ''
-          }));
-        }
-        // Initialize common filter property for layer if not present
-        if (layer['commonFilterEnabled'] === undefined) {
-          layer['commonFilterEnabled'] = false;
-        }
-        return layer;
-      });
-    }
-    
-    this.getStores();
-    
-    // Set default connection if none is set and we have connections
-    if ((!item['connection'] || item['connection'] === '') && this.sureconnectData && this.sureconnectData.length > 0) {
-      this.gadgetsEditdata['connection'] = this.sureconnectData[0].id;
-      // Also update the form control
-      this.entryForm.patchValue({ connection: this.sureconnectData[0].id });
-    }
-    
-    // Initialize base drilldown properties if not present
-    if (item['drilldownEnabled'] === undefined) { 
-      this.gadgetsEditdata['drilldownEnabled'] = false; 
-    }
-    if (item['drilldownApiUrl'] === undefined) { 
-      this.gadgetsEditdata['drilldownApiUrl'] = ''; 
-    }
-    // Removed drilldownParameterKey initialization
-    if (item['drilldownXAxis'] === undefined) { 
-      this.gadgetsEditdata['drilldownXAxis'] = ''; 
-    }
-    if (item['drilldownYAxis'] === undefined) { 
-      this.gadgetsEditdata['drilldownYAxis'] = ''; 
-    }
-    if (item['drilldownParameter'] === undefined) { 
-      this.gadgetsEditdata['drilldownParameter'] = ''; 
-    }
-    
-    // Reset drilldown column data
-    this.drilldownColumnData = [];
-    
-    // If drilldown is enabled and we have a drilldown API URL, fetch the drilldown column data
-    if (this.gadgetsEditdata.drilldownEnabled && this.gadgetsEditdata.drilldownApiUrl) {
-      this.refreshBaseDrilldownColumns();
-    }
-    
-    // Check if we have either datastore or table to fetch columns
-    if ((item.datastore !== undefined && item.datastore !== '' && item.datastore !== null) || 
-        (item.table !== undefined && item.table !== '' && item.table !== null)) {
+
+    modelid:number ;
+    editGadget(item)
+    {
+      this.modeledit = true;
+      this.modelid = item.chartid;
+      console.log(this.modelid);
+      this.gadgetsEditdata = item;
+      this.gadgetsEditdata.fieldName = item.name;
+      if(item.showlabel === undefined){  item.showlabel = true; }
+      if(item.chartcolor === undefined ){  item.chartcolor = true;} 
+      if(item.chartlegend === undefined){ item.chartlegend = true; }
+      this.getStores();
+      if(item.datastore !== undefined || '' || null){
       const datastore = item.datastore;
+      this.getTables(datastore);
       const table = item.table;
-      
-      // Fetch tables if datastore is available
-      if (datastore) {
-        this.getTables(datastore);
-      }
-      
-      // Fetch columns if table is available
-      if (table) {
-        this.getColumns(datastore, table);
-      }
-      
+      this.getColumns(datastore,table);
       console.log(item.yAxis);
-      // Set selectedyAxis regardless of whether it's an array or string
-      if (item.yAxis !== undefined && item.yAxis !== '' && item.yAxis !== null) {
-        if (isArray(item.yAxis)) {
-          this.selectedyAxis = item.yAxis;
-        } else {
-          // For single yAxis values, convert to array
-          this.selectedyAxis = [item.yAxis];
-        }
-        console.log(this.selectedyAxis);
-      } else {
+      if(isArray(item.yAxis)){
+      this.selectedyAxis = item.yAxis;
+      console.log( this.selectedyAxis);
+      }
+      }else{
         this.selectedyAxis = [];
       }
-    } else {
-      this.selectedyAxis = [];
+      console.log(item);
     }
-    console.log(item);
-  }
 
-  dashbord1_Line = {
-    //model:JSON.stringify(this.da),
-    model: ''
-  }
+    dashbord1_Line = {
+      //model:JSON.stringify(this.da),
+      model:''
+      }
 
 
-  UpdateLine() {
+    UpdateLine()
+    {
     console.log('Add button clicked.......');
     console.log(this.dashboardArray);
     console.log(this.dashboardCollection);
     console.log(typeof this.dashboardCollection);
     console.log(this.id);
-    //this.dashbord1_Line.model = JSON.stringify(this.dashboardCollection);
+     //this.dashbord1_Line.model = JSON.stringify(this.dashboardCollection);
 
-    //https://www.w3schools.com/js/tryit.asp?filename=tryjson_stringify_function_tostring
+  //https://www.w3schools.com/js/tryit.asp?filename=tryjson_stringify_function_tostring
 
-    // First serialize the dashboard collection to ensure component names are properly set
-    this.serialize(this.dashboardCollection.dashboard);
-
-    let cmp = this.dashboardCollection.dashboard.forEach(dashboard => {
-      this.componentCollection.forEach(component => {
-        if (dashboard.name === component.name) {
-          dashboard.component = component.name;
-        }
-      })
-    })
-    console.log(cmp);
+let cmp=this.dashboardCollection.dashboard.forEach(dashboard=>{
+  this.componentCollection.forEach(component=>{
+    if (dashboard.name === component.name) {
+      dashboard.component = component.name;
+    }  })
+})
+console.log(cmp);
 
     let tmp = JSON.stringify(this.dashboardCollection);
-    //   var merged = this.dashboardArray.reduce((current, value, index) => {
-    //     if(index > 0)
-    //         current += ',';
+  //   var merged = this.dashboardArray.reduce((current, value, index) => {
+  //     if(index > 0)
+  //         current += ',';
 
-    //     return current + value.component;
-    // }, '');
+  //     return current + value.component;
+  // }, '');
 
-    //console.log(merged);
-    console.log("temp data", typeof tmp);
-    console.log(tmp);
+  //console.log(merged);
+     console.log("temp data",typeof tmp);
+     console.log(tmp);
+     let parsed= JSON.parse(tmp);
+     this.serialize(parsed.dashboard);
     this.dashbord1_Line.model = tmp;
 
-    // let obj = this.dashboardCollection;
-    // obj[1].component = obj[1].component.toString();
-    // let myJSON = JSON.stringify(obj);
-    // this.dashbord1_Line.model = myJSON;
+  // let obj = this.dashboardCollection;
+  // obj[1].component = obj[1].component.toString();
+  // let myJSON = JSON.stringify(obj);
+  // this.dashbord1_Line.model = myJSON;
 
-    console.log("line data in addgadget ", this.dashbord1_Line);
-    console.log("line data in addgadget type ", typeof this.dashbord1_Line);
-    console.log("line model data ", this.dashbord1_Line.model);
-    console.log("line model data type", typeof this.dashbord1_Line.model);
-    this.dashboardService.UpdateLineData(this.id, this.dashbord1_Line).subscribe(
-      (data: any) => {
-        console.log('Updation Successful...');
-        this.ngOnInit();
-        console.log(data);
-        this.router.navigate(["../../all"], { relativeTo: this.route })
-      }
-    );
-    // if (data) {
-    //   this.toastr.success('Updated successfully');
-    //       }
-  }
+    console.log("line data in addgadget ",this.dashbord1_Line);
+    console.log("line data in addgadget type ",typeof this.dashbord1_Line);
+    console.log("line model data ",this.dashbord1_Line.model);
+    console.log("line model data type",typeof this.dashbord1_Line.model);
+      this.dashboardService.UpdateLineData(this.id,this.dashbord1_Line).subscribe(
+        (data: any)=>{
+          console.log('Updation Successful...');
+          this.ngOnInit();
+      console.log(data);
+      this.router.navigate(["../../all"], { relativeTo: this.route })
+        }
+      );
+      // if (data) {
+      //   this.toastr.success('Updated successfully');
+      //       }
+    }
 
-  // Update the onSubmit method to properly save filter data
-  onSubmit(id) {
+    onSubmit(id)
+    {
     console.log(id);
-    
-    // Check if ID is valid, including handling NaN
-    if (id === null || id === undefined || isNaN(id)) {
-      console.warn('Chart ID is null, undefined, or NaN, using modelid instead:', this.modelid);
-      id = this.modelid;
-    }
-    
-    // Ensure we have a valid numeric ID
-    const numId = typeof id === 'number' ? id : parseInt(id, 10);
-    if (isNaN(numId)) {
-      console.error('Unable to determine valid chart ID, aborting onSubmit');
-      return;
-    }
-    
-    // Handle both array and string yAxis values
-    if (this.selectedyAxis !== undefined && this.selectedyAxis !== null && 
-        ((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) || 
-         (typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
-      console.log("get y-axis", this.selectedyAxis);
+    if (!isNullArray(this.selectedyAxis)) {
+      console.log("get y-axis array", this.selectedyAxis);
       this.entryForm.patchValue({ yAxis: this.selectedyAxis });
     }
     let formdata = this.entryForm.value;
-    let num = numId;
-    console.log(this.entryForm.value);
-    this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
-      if (item.chartid == num) {
-        // Preserve the component reference
-        const componentRef = item.component;
-        
-        //item["product_id"] = "thisistest";
-        const xyz = { ...item, ...formdata }
-        
-        // Restore the component reference
-        xyz.component = componentRef;
-        
-        // Explicitly ensure drilldown properties are preserved
-        xyz.drilldownEnabled = this.gadgetsEditdata.drilldownEnabled;
-        xyz.drilldownApiUrl = this.gadgetsEditdata.drilldownApiUrl;
-        xyz.drilldownXAxis = this.gadgetsEditdata.drilldownXAxis;
-        xyz.drilldownYAxis = this.gadgetsEditdata.drilldownYAxis;
-        xyz.drilldownParameter = this.gadgetsEditdata.drilldownParameter;
-        xyz.baseFilters = this.gadgetsEditdata.baseFilters; // Add base filters
-        xyz.drilldownFilters = this.gadgetsEditdata.drilldownFilters; // Add drilldown filters
-        xyz.drilldownLayers = this.gadgetsEditdata.drilldownLayers;
-        xyz.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property
-        
-        // For compact filter, preserve filter configuration properties
-        if (item.name === 'Compact Filter') {
-          xyz.filterKey = this.gadgetsEditdata.filterKey || '';
-          xyz.filterType = this.gadgetsEditdata.filterType || 'text';
-          xyz.filterLabel = this.gadgetsEditdata.filterLabel || '';
-          // Convert filterOptionsString to array
-          if (this.gadgetsEditdata.fieldName === 'Compact Filter') {
-            xyz.filterOptions = this.filterOptionsString.split(',').map(opt => opt.trim()).filter(opt => opt);
-          } else {
-            xyz.filterOptions = this.gadgetsEditdata.filterOptions || [];
-          }
-          xyz.table = this.gadgetsEditdata.table || '';
-          xyz.connection = this.gadgetsEditdata.connection || undefined;
-        }
-        
-        // For unified chart, preserve chart configuration properties
-        if (item.name === 'Unified Chart') {
-          xyz.chartType = this.gadgetsEditdata.chartType || 'bar';
-        }
-        
-        console.log(xyz);
-        return xyz;
-      }
-      return item
-    });
-    console.log('dashboard collection ', this.dashboardCollection.dashboard);
-    
-    // Force gridster to refresh by triggering change detection
-    if (this.options && this.options.api) {
-      this.options.api.optionsChanged();
-    }
-    
-    // Trigger change detection manually
-    // This is a workaround to ensure the gridster re-renders the components
-    setTimeout(() => {
-      // Force a refresh by temporarily setting dashboardArray to empty and then back
-      const tempArray = [...this.dashboardArray];
-      this.dashboardArray = [];
-      setTimeout(() => {
-        this.dashboardArray = tempArray;
-      }, 0);
-    }, 0);
-    
-    this.modeledit = false;
-
-    // this.entryForm.reset();
-
-  }
-
-  /**
-   * Extract only the relevant chart configuration properties to pass to chart components
-   * This prevents errors when trying to set properties that don't exist on the components
-   */
-  getChartInputs(item: any): any {
-    // For CompactFilterComponent, pass only filter configuration properties
-    if (item.name === 'Compact Filter') {
-      const filterInputs = {
-        filterKey: item['filterKey'] || '',
-        filterType: item['filterType'] || 'text',
-        filterLabel: item['filterLabel'] || '',
-        filterOptions: item['filterOptions'] || [],
-        apiUrl: item['table'] || '', // Use table as API URL
-        connectionId: item['connection'] ? parseInt(item['connection'], 10) : undefined
-      };
-      
-      // Preserve configuration in the item itself
-      item['filterKey'] = filterInputs['filterKey'];
-      item['filterType'] = filterInputs['filterType'];
-      item['filterLabel'] = filterInputs['filterLabel'];
-      item['filterOptions'] = filterInputs['filterOptions'];
-      item['table'] = filterInputs['apiUrl'];
-      item['connection'] = item['connection'];
-      
-      // Remove undefined properties to avoid passing unnecessary data
-      Object.keys(filterInputs).forEach(key => {
-        if (filterInputs[key] === undefined) {
-          delete filterInputs[key];
-        }
-      });
-      
-      return filterInputs;
-    }
-    
-    // For CommonFilterComponent, pass only filter-related properties
-    if (item.component && item.component.name === 'CommonFilterComponent') {
-      const commonFilterInputs = {
-        baseFilters: item['baseFilters'] || [],
-        drilldownFilters: item['drilldownFilters'] || [],
-        drilldownLayers: item['drilldownLayers'] || [],
-        fieldName: item['name'] || '',
-        connection: item['connection'] || undefined
-      };
-      
-      // Remove undefined properties to avoid passing unnecessary data
-      Object.keys(commonFilterInputs).forEach(key => {
-        if (commonFilterInputs[key] === undefined) {
-          delete commonFilterInputs[key];
-        }
-      });
-      
-      return commonFilterInputs;
-    }
-    
-    // For UnifiedChartComponent, pass chart properties with chartType
-    // Check if the component is UnifiedChartComponent dynamically
-    if (item.component === UnifiedChartComponent || 
-        (item.component && item.component.name === 'UnifiedChartComponent') ||
-        item.name === 'Unified Chart') {
-      const unifiedChartInputs = {
-        chartType: item.chartType || 'bar',
-        xAxis: item.xAxis,
-        yAxis: item.yAxis,
-        table: item.table,
-        datastore: item.datastore,
-        charttitle: item.charttitle,
-        chartlegend: item.chartlegend,
-        showlabel: item.showlabel,
-        chartcolor: item.chartcolor,
-        slices: item.slices,
-        donut: item.donut,
-        charturl: item.charturl,
-        chartparameter: item.chartparameter,
-        datasource: item.datasource,
-        fieldName: item.name, // Using item.name as fieldName
-        connection: item['connection'], // Add connection field using bracket notation
-        // Base drilldown configuration properties
-        drilldownEnabled: item['drilldownEnabled'],
-        drilldownApiUrl: item['drilldownApiUrl'],
-        // Removed drilldownParameterKey since we're using URL templates
-        drilldownXAxis: item['drilldownXAxis'],
-        drilldownYAxis: item['drilldownYAxis'],
-        drilldownParameter: item['drilldownParameter'], // Add drilldown parameter
-        baseFilters: item['baseFilters'] || [], // Add base filters
-        drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters
-        // Multi-layer drilldown configurations
-        drilldownLayers: item['drilldownLayers'] || []
-      };
-      
-      // Remove undefined properties to avoid passing unnecessary data
-      Object.keys(unifiedChartInputs).forEach(key => {
-        if (unifiedChartInputs[key] === undefined) {
-          delete unifiedChartInputs[key];
-        }
-      });
-      
-      return unifiedChartInputs;
-    }
-    
-    // For GridViewComponent, pass chart properties with drilldown support
-    if (item.component && item.component.name === 'GridViewComponent') {
-      const gridInputs = {
-        xAxis: item.xAxis,
-        yAxis: item.yAxis,
-        table: item.table,
-        datastore: item.datastore,
-        charttitle: item.charttitle,
-        chartlegend: item.chartlegend,
-        showlabel: item.showlabel,
-        chartcolor: item.chartcolor,
-        slices: item.slices,
-        donut: item.donut,
-        charturl: item.charturl,
-        chartparameter: item.chartparameter,
-        datasource: item.datasource,
-        fieldName: item.name, // Using item.name as fieldName
-        connection: item['connection'], // Add connection field using bracket notation
-        // Base drilldown configuration properties
-        drilldownEnabled: item['drilldownEnabled'],
-        drilldownApiUrl: item['drilldownApiUrl'],
-        // Removed drilldownParameterKey since we're using URL templates
-        drilldownXAxis: item['drilldownXAxis'],
-        drilldownYAxis: item['drilldownYAxis'],
-        drilldownParameter: item['drilldownParameter'], // Add drilldown parameter
-        baseFilters: item['baseFilters'] || [], // Add base filters
-        drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters
-        // Multi-layer drilldown configurations
-        drilldownLayers: item['drilldownLayers'] || []
-      };
-      
-      // Remove undefined properties to avoid passing unnecessary data
-      Object.keys(gridInputs).forEach(key => {
-        if (gridInputs[key] === undefined) {
-          delete gridInputs[key];
-        }
-      });
-      
-      return gridInputs;
-    }
-    
-    // For all other chart components, pass chart-specific properties
-    const chartInputs = {
-      xAxis: item.xAxis,
-      yAxis: item.yAxis,
-      table: item.table,
-      datastore: item.datastore,
-      charttitle: item.charttitle,
-      chartlegend: item.chartlegend,
-      showlabel: item.showlabel,
-      chartcolor: item.chartcolor,
-      slices: item.slices,
-      donut: item.donut,
-      charturl: item.charturl,
-      chartparameter: item.chartparameter,
-      datasource: item.datasource,
-      fieldName: item.name, // Using item.name as fieldName
-      connection: item['connection'], // Add connection field using bracket notation
-      // Base drilldown configuration properties
-      drilldownEnabled: item['drilldownEnabled'],
-      drilldownApiUrl: item['drilldownApiUrl'],
-      // Removed drilldownParameterKey since we're using URL templates
-      drilldownXAxis: item['drilldownXAxis'],
-      drilldownYAxis: item['drilldownYAxis'],
-      drilldownParameter: item['drilldownParameter'], // Add drilldown parameter
-      baseFilters: item['baseFilters'] || [], // Add base filters with type information
-      drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters with type information
-      // Multi-layer drilldown configurations
-      drilldownLayers: item['drilldownLayers'] || []
-    };
-    
-    // Remove undefined properties to avoid passing unnecessary data
-    Object.keys(chartInputs).forEach(key => {
-      if (chartInputs[key] === undefined) {
-        delete chartInputs[key];
-      }
-    });
-    
-    return chartInputs;
-  }
-
-  // Update the applyChanges method to properly save filter data
-  applyChanges(id) {
-    console.log('Apply changes for chart ID:', id);
-    
-    // Check if ID is valid, including handling NaN
-    if (id === null || id === undefined || isNaN(id)) {
-      console.warn('Chart ID is null, undefined, or NaN, using modelid instead:', this.modelid);
-      id = this.modelid;
-    }
-    
-    // Ensure we have a valid numeric ID
-    const numId = typeof id === 'number' ? id : parseInt(id, 10);
-    if (isNaN(numId)) {
-      console.error('Unable to determine valid chart ID, aborting applyChanges');
-      return;
-    }
-    
-    // Update the form with selected Y-axis values
-    // Handle both array and string yAxis values
-    if (this.selectedyAxis !== undefined && this.selectedyAxis !== null && 
-        ((Array.isArray(this.selectedyAxis) && this.selectedyAxis.length > 0) || 
-         (typeof this.selectedyAxis === 'string' && this.selectedyAxis !== ''))) {
-      console.log("get y-axis", this.selectedyAxis);
-      this.entryForm.patchValue({ yAxis: this.selectedyAxis });
-    }
-    
-    // Get form data
-    let formdata = this.entryForm.value;
     let num = id;
-    console.log('Form data:', this.entryForm.value);
-    
-    // Update the dashboard collection with the new configuration
-    this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
-      if (item.chartid == num) {
-        // Preserve the component reference
-        const componentRef = item.component;
-        
-        // Merge the existing item with the new form data
-        const updatedItem = { ...item, ...formdata }
-        
-        // Restore the component reference
-        updatedItem.component = componentRef;
-        
-        // Explicitly ensure drilldown properties are preserved
-        updatedItem.drilldownEnabled = this.gadgetsEditdata.drilldownEnabled;
-        updatedItem.drilldownApiUrl = this.gadgetsEditdata.drilldownApiUrl;
-        updatedItem.drilldownXAxis = this.gadgetsEditdata.drilldownXAxis;
-        updatedItem.drilldownYAxis = this.gadgetsEditdata.drilldownYAxis;
-        updatedItem.drilldownParameter = this.gadgetsEditdata.drilldownParameter;
-        updatedItem.baseFilters = this.gadgetsEditdata.baseFilters; // Add base filters
-        updatedItem.drilldownFilters = this.gadgetsEditdata.drilldownFilters; // Add drilldown filters
-        updatedItem.drilldownLayers = this.gadgetsEditdata.drilldownLayers;
-        updatedItem.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property
-        updatedItem.commonFilterEnabledDrilldown = this.gadgetsEditdata.commonFilterEnabledDrilldown; // Add drilldown common filter property
-        
-        // For compact filter, preserve filter configuration properties
-        if (item.name === 'Compact Filter') {
-          updatedItem.filterKey = this.gadgetsEditdata.filterKey || '';
-          updatedItem.filterType = this.gadgetsEditdata.filterType || 'text';
-          updatedItem.filterLabel = this.gadgetsEditdata.filterLabel || '';
-          // Convert filterOptionsString to array
-          if (this.gadgetsEditdata.fieldName === 'Compact Filter') {
-            updatedItem.filterOptions = this.filterOptionsString.split(',').map(opt => opt.trim()).filter(opt => opt);
-          } else {
-            updatedItem.filterOptions = this.gadgetsEditdata.filterOptions || [];
-          }
-          updatedItem.table = this.gadgetsEditdata.table || ''; // API URL
-          updatedItem.connection = this.gadgetsEditdata.connection || undefined; // Connection ID
-          
-          // Also preserve these properties in gadgetsEditdata for consistency
-          this.gadgetsEditdata.filterKey = updatedItem.filterKey;
-          this.gadgetsEditdata.filterType = updatedItem.filterType;
-          this.gadgetsEditdata.filterLabel = updatedItem.filterLabel;
-          this.gadgetsEditdata.filterOptions = updatedItem.filterOptions;
+    console.log(this.entryForm.value);
+      this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
+      if(item.chartid == num)
+        {
+        //item["product_id"] = "thisistest";
+        const xyz = {...item,...formdata}
+        console.log(xyz);
+        return xyz;
         }
-        
-        console.log('Updated item:', updatedItem);
-        return updatedItem;
-      }
-      return item
-    });
+        return item
+        });
+      console.log(this.dashboardCollection.dashboard);
+        this.modeledit = false;
+
+       // this.entryForm.reset();
+
+     }
+     goBack(){
+      this.router.navigate(["../../all"], { relativeTo: this.route })
+     }
+
+     onSchedule(){
+      this.router.navigate(['../../schedule/'+ this.editId],{relativeTo:this.route});
+     } 
+
     
-    console.log('Updated dashboard collection:', this.dashboardCollection.dashboard);
-    
-    // Update the dashboardArray to reflect changes immediately
-    // Create a new array with new object references to ensure change detection
-    this.dashboardArray = this.dashboardCollection.dashboard.map(item => {
-      // Preserve the component reference
-      const componentRef = item.component;
-      const newItem = { ...item };
-      // Restore the component reference
-      newItem.component = componentRef;
-      return newItem;
-    });
-    
-    // Force gridster to refresh by triggering change detection
-    if (this.options && this.options.api) {
-      this.options.api.optionsChanged();
+     ///////
+     storedata;
+     getStores(){
+       this.datastoreService.getAll().subscribe((data) => {
+         console.log(data);
+         this.storedata = data;
+       },(error) => {
+         console.log(error);
+       });
+     }
+
+     selectedStoreId;
+     storename(val){
+       console.log(val);
+       this.selectedStoreId = val;
+       this.getTables(this.selectedStoreId);
+     }
+
+     TableData;
+     getTables(id){
+       this.alertService.getTablefromstore(id).subscribe(gateway =>{
+         console.log(gateway);
+         this.TableData = gateway;
+       },(error)=>{
+         console.log(error);
+       });
+     }
+
+     tablename(val){
+      console.log(val);
+      this.getColumns(this.selectedStoreId,val);
     }
-    
-    // Trigger change detection manually
-    // This is a workaround to ensure the gridster re-renders the components
-    setTimeout(() => {
-      // Force a refresh by temporarily setting dashboardArray to empty and then back
-      const tempArray = [...this.dashboardArray];
-      this.dashboardArray = [];
-      setTimeout(() => {
-        this.dashboardArray = tempArray;
-      }, 0);
-    }, 0);
-    
-    // Note: We don't close the modal here, allowing the user to make additional changes
-    // The user can click "Save" when they're done with all changes
-    
-    // Reset the filter service to ensure clean state
-    this.filterService.resetFilters();
-  }
-
-  goBack() {
-    this.router.navigate(["../../all"], { relativeTo: this.route })
-  }
-
-  onSchedule() {
-    this.router.navigate(['../../schedule/' + this.editId], { relativeTo: this.route });
-  }
-
-
-  ///////
-  storedata;
-  getStores() {
-    this.datastoreService.getAll().subscribe((data) => {
-      console.log(data);
-      this.storedata = data;
-    }, (error) => {
-      console.log(error);
-    });
-  }
-
-  selectedStoreId;
-  storename(val) {
-    console.log(val);
-    this.selectedStoreId = val;
-    this.getTables(this.selectedStoreId);
-  }
-
-  TableData;
-  getTables(id) {
-    this.alertService.getTablefromstore(id).subscribe(gateway => {
-      console.log(gateway);
-      this.TableData = gateway;
-    }, (error) => {
-      console.log(error);
-    });
-  }
-
-  callApi(val) {
-    console.log(' api value ', val);
-    this.getColumns(this.selectedStoreId, val);
-  }
-  selectedyAxis;
-  columnData;
-
-  getColumns(id, table) {
-    const connectionId = this.gadgetsEditdata.connection ? parseInt(this.gadgetsEditdata.connection, 10) : undefined;
-    this.alertService.getColumnfromurl(table, connectionId).subscribe(data => {
-      console.log(' api data ', data);
-      this.columnData = data;
-    }, (error) => {
-      console.log(error);
-    });
-  }
-
-  // Add method to refresh drilldown columns
-  refreshDrilldownColumns() {
-    if (this.gadgetsEditdata.drilldownApiUrl) {
-      const connectionId = this.gadgetsEditdata.connection ? parseInt(this.gadgetsEditdata.connection, 10) : undefined;
-      this.alertService.getColumnfromurl(this.gadgetsEditdata.drilldownApiUrl, connectionId).subscribe(data => {
-        console.log('Drilldown column data:', data);
-        this.drilldownColumnData = data;
-      }, (error) => {
-        console.log('Error fetching drilldown columns:', error);
-        this.drilldownColumnData = [];
+    selectedyAxis;
+    columnData;
+    getColumns(id,table){
+      this.alertService.getColumnfromurl(table).subscribe(data =>{
+        console.log(data);
+        this.columnData = data;
+      },(error)=>{
+        console.log(error);
       });
     }
-  }
 
-  // Add method to reset drilldown configuration
-  resetDrilldownConfiguration() {
-    this.gadgetsEditdata.drilldownApiUrl = '';
-    // Removed drilldownParameterKey since we're using URL templates
-    this.gadgetsEditdata.drilldownXAxis = '';
-    this.gadgetsEditdata.drilldownYAxis = '';
-    this.gadgetsEditdata.drilldownParameter = ''; // Reset drilldown parameter
-    // Reset drilldown layers but preserve the array structure
-    this.gadgetsEditdata.drilldownLayers = this.gadgetsEditdata.drilldownLayers.map(layer => ({
-      ...layer,
-      enabled: false,
-      apiUrl: '',
-      xAxis: '',
-      yAxis: '',
-      parameter: '' // Reset parameter property
-    }));
-    this.drilldownColumnData = [];
-  }
-  
-  // Add method to add a new drilldown layer
-  addDrilldownLayer() {
-    const newLayer = {
-      enabled: false,
-      apiUrl: '',
-      // Removed parameterKey since we're using URL templates
-      xAxis: '',
-      yAxis: '',
-      parameter: '' // Add parameter property
-    };
-    this.gadgetsEditdata.drilldownLayers.push(newLayer);
-  }
-  
-  // Add method to remove a drilldown layer
-  removeDrilldownLayer(index: number) {
-    this.gadgetsEditdata.drilldownLayers.splice(index, 1);
-  }
-  
-  // Add method to refresh drilldown columns for a specific layer
-  refreshDrilldownLayerColumns(layerIndex: number) {
-    const layer = this.gadgetsEditdata.drilldownLayers[layerIndex];
-    if (layer && layer.apiUrl) {
-      const connectionId = this.gadgetsEditdata.connection ? parseInt(this.gadgetsEditdata.connection, 10) : undefined;
-      this.alertService.getColumnfromurl(layer.apiUrl, connectionId).subscribe(data => {
-        console.log(`Drilldown layer ${layerIndex} column data:`, data);
-        // Store layer column data in a separate property
-        if (!this.layerColumnData) {
-          this.layerColumnData = {};
-        }
-        this.layerColumnData[layerIndex] = data;
-      }, (error) => {
-        console.log(`Error fetching drilldown layer ${layerIndex} columns:`, error);
-        if (!this.layerColumnData) {
-          this.layerColumnData = {};
-        }
-        this.layerColumnData[layerIndex] = [];
-      });
-    }
-  }
-  
-  // Add method to refresh base drilldown columns
-  refreshBaseDrilldownColumns() {
-    if (this.gadgetsEditdata.drilldownApiUrl) {
-      const connectionId = this.gadgetsEditdata.connection ? parseInt(this.gadgetsEditdata.connection, 10) : undefined;
-      this.alertService.getColumnfromurl(this.gadgetsEditdata.drilldownApiUrl, connectionId).subscribe(data => {
-        console.log('Base drilldown column data:', data);
-        this.drilldownColumnData = data;
-      }, (error) => {
-        console.log('Error fetching base drilldown columns:', error);
-        this.drilldownColumnData = [];
-      });
-    }
-  }
-  
-  // Add method to build drilldown URL with template parameters using angle brackets
-  buildDrilldownUrl(baseUrl: string, parameterValue: string): string {
-    // If no base URL, return empty string
-    if (!baseUrl) {
-      return '';
-    }
-    
-    // If no parameter value, return the base URL as-is
-    if (!parameterValue) {
-      return baseUrl;
-    }
-    
-    // Check if the URL contains angle brackets for parameter replacement
-    const hasAngleBrackets = /<[^>]+>/.test(baseUrl);
-    
-    if (hasAngleBrackets) {
-      // Replace angle brackets placeholder with actual value
-      // Example: http://localhost:9292/State_ListFilter1/State_ListFilter11/<country>
-      // becomes: http://localhost:9292/State_ListFilter1/State_ListFilter11/india
-      const encodedValue = encodeURIComponent(parameterValue);
-      const urlWithReplacedParam = baseUrl.replace(/<[^>]+>/g, encodedValue);
-      return urlWithReplacedParam;
-    } else {
-      // No angle brackets, return the base URL as-is
-      // This handles normal API endpoints without parameter replacement
-      return baseUrl;
-    }
-  }
-  
-  // Add method to get the parameter key from URL template using angle brackets
-  getParameterKeyFromUrl(baseUrl: string): string {
-    if (!baseUrl) {
-      return '';
-    }
-    
-    // Extract parameter key from angle brackets
-    // Example: http://localhost:9292/State_ListFilter1/State_ListFilter11/<country>
-    // returns: country
-    const match = baseUrl.match(/<([^>]+)>/);
-    return match ? match[1] : '';
-  }
-  
-  // Add method to add a new filter field
-  addFilterField() {
-    // This method is no longer needed with the simplified approach
-    // We're now using addBaseFilter and addLayerFilter methods instead
-  }
-  
-  // Add method to remove a filter field
-  removeFilterField(index: number) {
-    // This method is no longer needed with the simplified approach
-    // We're now using removeBaseFilter and removeLayerFilter methods instead
-  }
-  
-  // Add method to handle base filter field change
-  onBaseFilterFieldChange(index: number, field: string) {
-    const filter = this.gadgetsEditdata.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.gadgetsEditdata.table) {
-        this.loadFilterValuesForField(
-          this.gadgetsEditdata.table, 
-          this.gadgetsEditdata.connection, 
-          field, 
-          index, 
-          'base'
-        );
-      }
-    }
-  }
 
-  // Add method to handle base filter type change
-  onBaseFilterTypeChange(index: number, type: string) {
-    const filter = this.gadgetsEditdata.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.gadgetsEditdata.table) {
-        this.loadFilterValuesForField(
-          this.gadgetsEditdata.table, 
-          this.gadgetsEditdata.connection, 
-          filter.field, 
-          index, 
-          'base'
-        );
-      }
-    }
-  }
+    // toggleAddToDashboard(item) {
+    //   item.addToDashboard = item.addToDashboard;
+    // }
 
-  // Add method to handle drilldown filter field change
-  onDrilldownFilterFieldChange(index: number, field: string) {
-    const filter = this.gadgetsEditdata.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.gadgetsEditdata.drilldownApiUrl) {
-        this.loadFilterValuesForField(
-          this.gadgetsEditdata.drilldownApiUrl, 
-          this.gadgetsEditdata.connection, 
-          field, 
-          index, 
-          'drilldown'
-        );
-      }
-    }
-  }
+    // getChartDataForToggleSwitchTrue() {
+    //   for (let i = 0; i < this.dashArr.length; i++) {
+    //     if (this.dashArr[i].addToDashboard) {
+    //       this.dashboardService.getChartData(
+    //         this.dashArr[i].charturl, // Assuming charturl is the correct property to pass as a string
+    //         true  // Pass true to indicate fetching charts with toggle switch set to true
+    //       ).subscribe(tData => {
+    //         console.log(tData);
+    //         // this.dashArr[i].featchData = tData;
+    //       });
+    //     }
+    //   }
+    // }
+    
 
-  // Add method to handle drilldown filter type change
-  onDrilldownFilterTypeChange(index: number, type: string) {
-    const filter = this.gadgetsEditdata.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.gadgetsEditdata.drilldownApiUrl) {
-        this.loadFilterValuesForField(
-          this.gadgetsEditdata.drilldownApiUrl, 
-          this.gadgetsEditdata.connection, 
-          filter.field, 
-          index, 
-          'drilldown'
-        );
-      }
-    }
-  }
-
-  // Add method to handle layer filter field change
-  onLayerFilterFieldChange(layerIndex: number, filterIndex: number, field: string) {
-    const layer = this.gadgetsEditdata.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) {
-          this.loadFilterValuesForField(
-            layer.apiUrl, 
-            this.gadgetsEditdata.connection, 
-            field, 
-            filterIndex, 
-            'layer',
-            layerIndex
-          );
-        }
-      }
-    }
-  }
-
-  // Add method to handle layer filter type change
-  onLayerFilterTypeChange(layerIndex: number, filterIndex: number, type: string) {
-    const layer = this.gadgetsEditdata.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.gadgetsEditdata.connection, 
-            filter.field, 
-            filterIndex, 
-            'layer',
-            layerIndex
-          );
-        }
-      }
-    }
-  }
-
-  // Add method to load filter values for a specific field
-  loadFilterValuesForField(
-    apiUrl: string, 
-    connectionId: string | undefined, 
-    field: string, 
-    filterIndex: number, 
-    filterType: 'base' | 'drilldown' | 'layer',
-    layerIndex?: number
-  ) {
-    if (apiUrl && field) {
-      const connectionIdNum = connectionId ? parseInt(connectionId, 10) : undefined;
-      this.alertService.getValuesFromUrl(apiUrl, connectionIdNum, field).subscribe(
-        (values: string[]) => {
-          // Update the filter with available values
-          if (filterType === 'base') {
-            const filter = this.gadgetsEditdata.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.gadgetsEditdata.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.gadgetsEditdata.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);
-        }
-      );
-    }
-  }
-
-  // Add method to add a base filter with default properties
-  addBaseFilter() {
-    const newFilter = {
-      field: '',
-      value: '',
-      type: 'text',
-      options: '',
-      availableValues: ''
-    };
-    this.gadgetsEditdata.baseFilters.push(newFilter);
-  }
-
-  // Add method to add a drilldown filter with default properties
-  addDrilldownFilter() {
-    const newFilter = {
-      field: '',
-      value: '',
-      type: 'text',
-      options: '',
-      availableValues: ''
-    };
-    this.gadgetsEditdata.drilldownFilters.push(newFilter);
-  }
-
-  // Add method to add a layer filter with default properties
-  addLayerFilter(layerIndex: number) {
-    const newFilter = {
-      field: '',
-      value: '',
-      type: 'text',
-      options: '',
-      availableValues: ''
-    };
-    if (!this.gadgetsEditdata.drilldownLayers[layerIndex].filters) {
-      this.gadgetsEditdata.drilldownLayers[layerIndex].filters = [];
-    }
-    this.gadgetsEditdata.drilldownLayers[layerIndex].filters.push(newFilter);
-  }
-  
-  // Add method to remove a base filter
-  removeBaseFilter(index: number) {
-    this.gadgetsEditdata.baseFilters.splice(index, 1);
-  }
-  
-  // Add method to remove a drilldown filter
-  removeDrilldownFilter(index: number) {
-    this.gadgetsEditdata.drilldownFilters.splice(index, 1);
-  }
-  
-  // Add method to remove a layer filter
-  removeLayerFilter(layerIndex: number, filterIndex: number) {
-    this.gadgetsEditdata.drilldownLayers[layerIndex].filters.splice(filterIndex, 1);
-  }
-  
-  // Add method to open common filter modal
-  openCommonFilterModal() {
-    this.commonFilterModalOpen = true;
-  }
-  
-  // Add method to add a common filter
-  addCommonFilter() {
-    const newFilter = {
-      field: '',
-      value: ''
-    };
-    this.commonFilterData.filters.push(newFilter);
-  }
-  
-  // Add method to remove a common filter
-  removeCommonFilter(index: number) {
-    this.commonFilterData.filters.splice(index, 1);
-  }
-  
-  // Add method to refresh common filter columns
-  refreshCommonFilterColumns() {
-    if (this.commonFilterData.apiUrl) {
-      const connectionId = this.commonFilterData.connection ? parseInt(this.commonFilterData.connection, 10) : undefined;
-      this.alertService.getColumnfromurl(this.commonFilterData.apiUrl, connectionId).subscribe(data => {
-        console.log('Common filter column data:', data);
-        this.commonFilterColumnData = data;
-      }, (error) => {
-        console.log('Error fetching common filter columns:', error);
-        this.commonFilterColumnData = [];
-      });
-    }
-  }
-  
-  // Add method to save common filter
-  saveCommonFilter() {
-    // Here we would typically make an API call to save the common filter
-    // For now, we'll just close the modal
-    console.log('Saving common filter:', this.commonFilterData);
-    
-    // Update all charts that have common filter enabled
-    this.updateChartsWithCommonFilter();
-    
-    this.commonFilterModalOpen = false;
-  }
-  
-  // Add method to update charts with common filter data
-  updateChartsWithCommonFilter() {
-    // This method will be called when common filter is saved
-    // It will update all charts that have common filter enabled
-    console.log('Updating charts with common filter data');
-    
-    // Update the dashboardArray to reflect changes
-    this.dashboardArray = this.dashboardArray.map(item => {
-      if (item.commonFilterEnabled) {
-        // Preserve the component reference
-        const componentRef = item.component;
-        
-        // Update the chart with common filter data
-        const updatedItem = {
-          ...item,
-          table: this.commonFilterData.apiUrl,
-          connection: this.commonFilterData.connection,
-          baseFilters: [...this.commonFilterData.filters]
-        };
-        
-        // Restore the component reference
-        updatedItem.component = componentRef;
-        
-        return updatedItem;
-      }
-      return item;
-    });
-    
-    // Also update the dashboardCollection to persist changes
-    this.dashboardCollection.dashboard = this.dashboardCollection.dashboard.map(item => {
-      if (item.commonFilterEnabled) {
-        // Preserve the component reference
-        const componentRef = item.component;
-        
-        // Update the chart with common filter data
-        const updatedItem = {
-          ...item,
-          table: this.commonFilterData.apiUrl,
-          connection: this.commonFilterData.connection,
-          baseFilters: [...this.commonFilterData.filters]
-        } as DashboardContentModel;
-        
-        // Restore the component reference
-        updatedItem.component = componentRef;
-        
-        return updatedItem;
-      }
-      return item;
-    });
-  }
-  
-  // Add method to handle common filter toggle
-  onCommonFilterToggle() {
-    console.log('Common filter toggled:', this.gadgetsEditdata.commonFilterEnabled);
-    
-    if (this.gadgetsEditdata.commonFilterEnabled) {
-      // When enabling common filter, save current values and apply common filter data
-      this.gadgetsEditdata.table = this.commonFilterData.apiUrl;
-      this.gadgetsEditdata.connection = this.commonFilterData.connection;
-      this.gadgetsEditdata.baseFilters = [...this.commonFilterData.filters];
-    }
-    // When disabling, the user can edit the filters normally
-  }
-  
-  // Add method to handle common filter toggle for base drilldown
-  onCommonFilterToggleDrilldown() {
-    console.log('Common filter drilldown toggled:', this.gadgetsEditdata.commonFilterEnabledDrilldown);
-    
-    if (this.gadgetsEditdata.commonFilterEnabledDrilldown) {
-      // When enabling common filter, save current values and apply common filter data
-      this.gadgetsEditdata.drilldownFilters = [...this.commonFilterData.filters];
-    }
-    // When disabling, the user can edit the filters normally
-  }
-  
-  // Add method to handle common filter toggle for drilldown layers
-  onCommonFilterToggleLayer(layerIndex: number) {
-    const layer = this.gadgetsEditdata.drilldownLayers[layerIndex];
-    if (layer) {
-      console.log(`Common filter layer ${layerIndex} toggled:`, layer.commonFilterEnabled);
-      
-      if (layer.commonFilterEnabled) {
-        // When enabling common filter, save current values and apply common filter data
-        layer.filters = [...this.commonFilterData.filters];
-      }
-      // When disabling, the user can edit the filters normally
-    }
-  }
-  
-  // Add method to handle item resize events
-  itemResize(item: any, itemComponent: any) {
-    console.log('Item resized:', item);
-    // Trigger a window resize event to notify charts to resize
-    window.dispatchEvent(new Event('resize'));
-    
-    // Also try to directly notify the chart component if possible
-    if (itemComponent && itemComponent.item && itemComponent.item.component) {
-      // If the resized item contains a chart, we could try to call its resize method directly
-      // This would require the chart component to have a public resize method
-    }
-  }
-  
-  // Add method to load available keys for compact filter
-  loadAvailableKeys(apiUrl: string, connectionId: string | undefined) {
-    if (apiUrl) {
-      const connectionIdNum = connectionId ? parseInt(connectionId, 10) : undefined;
-      this.alertService.getColumnfromurl(apiUrl, connectionIdNum).subscribe(
-        (keys: string[]) => {
-          this.availableKeys = keys;
-        },
-        (error) => {
-          console.error('Error loading available keys:', error);
-          this.availableKeys = [];
-        }
-      );
-    }
-  }
-
-  // Add method to load available values for a specific key
-  loadAvailableValues(key: string) {
-    if (key && this.gadgetsEditdata['table']) {
-      const connectionIdNum = this.gadgetsEditdata['connection'] ? 
-        parseInt(this.gadgetsEditdata['connection'], 10) : undefined;
-      this.alertService.getValuesFromUrl(this.gadgetsEditdata['table'], connectionIdNum, key).subscribe(
-        (values: string[]) => {
-          // Update filter options string for dropdown/multiselect
-          if (this.gadgetsEditdata['filterType'] === 'dropdown' || 
-              this.gadgetsEditdata['filterType'] === 'multiselect') {
-            this.filterOptionsString = values.join(', ');
-            // Also update the gadgetsEditdata filterOptions array
-            this.gadgetsEditdata['filterOptions'] = values;
-          }
-        },
-        (error) => {
-          console.error('Error loading available values:', error);
-        }
-      );
-    }
-  }
-
-  // Add method to handle filter key change
-  onFilterKeyChange(key: string) {
-    this.gadgetsEditdata['filterKey'] = key;
-    // Load available values when filter key changes
-    if (key && (this.gadgetsEditdata['filterType'] === 'dropdown' || 
-                this.gadgetsEditdata['filterType'] === 'multiselect')) {
-      this.loadAvailableValues(key);
-    }
-  }
-
-  // Add method to handle filter type change
-  onFilterTypeChange(type: string) {
-    this.gadgetsEditdata['filterType'] = type;
-    // Load available values when filter type changes to dropdown or multiselect
-    if ((type === 'dropdown' || type === 'multiselect') && this.gadgetsEditdata['filterKey']) {
-      this.loadAvailableValues(this.gadgetsEditdata['filterKey']);
-    }
-  }
-
-  // Add method to handle API URL change for compact filter
-  onCompactFilterApiUrlChange(url: string) {
-    this.gadgetsEditdata['table'] = url;
-    // Load available keys when API URL changes
-    if (url) {
-      this.loadAvailableKeys(url, this.gadgetsEditdata['connection']);
-    }
-  }
-
-  // Add method to handle connection change for compact filter
-  onCompactFilterConnectionChange(connectionId: string) {
-    this.gadgetsEditdata['connection'] = connectionId;
-    // Reload available keys when connection changes
-    if (this.gadgetsEditdata['table']) {
-      this.loadAvailableKeys(this.gadgetsEditdata['table'], connectionId);
-    }
-  }
-
-  // Add method to apply dynamic template to a chart
-  applyDynamicTemplate(chartItem: any, template: any) {
-    console.log('Applying dynamic template to chart:', chartItem, template);
-    
-    // Apply HTML template
-    if (template.templateHtml) {
-      // In a real implementation, you would dynamically render the HTML template
-      // For now, we'll just log it
-      console.log('HTML Template:', template.templateHtml);
-    }
-    
-    // Apply CSS styles
-    if (template.templateCss) {
-      // In a real implementation, you would dynamically apply the CSS styles
-      // For now, we'll just log it
-      console.log('CSS Template:', template.templateCss);
-    }
-    
-    // Return the chart item with template applied
-    return {
-      ...chartItem,
-      template: template
-    };
-  }
-  
-  // Add method to test dynamic chart creation
-  testDynamicChartCreation() {
-    console.log('Testing dynamic chart creation');
-    
-    // Show a success message to the user
-    alert('Dynamic chart test started. Check the browser console for detailed output.');
-    
-    // Load all chart types
-    this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
-      next: (chartTypes) => {
-        console.log('Loaded chart types:', chartTypes);
-        
-        // Find bar chart type
-        const barChartType = chartTypes.find((ct: any) => ct.name === 'bar');
-        if (barChartType) {
-          console.log('Found bar chart type:', barChartType);
-          
-          // Load configuration for bar chart
-          this.dynamicChartLoader.loadChartConfiguration(barChartType.id).subscribe({
-            next: (config) => {
-              console.log('Loaded bar chart configuration:', config);
-              
-              // Create a test chart item
-              const chartItem = {
-                cols: 5,
-                rows: 6,
-                x: 0,
-                y: 0,
-                chartid: 100,
-                component: UnifiedChartComponent,
-                name: 'Test Dynamic Bar Chart',
-                chartType: 'bar',
-                xAxis: '',
-                yAxis: '',
-                table: '',
-                connection: undefined,
-                // Add dynamic fields from configuration
-                dynamicFields: config.dynamicFields || []
-              };
-              
-              console.log('Created test chart item:', chartItem);
-              
-              // If we have templates, apply the default one
-              if (config.templates && config.templates.length > 0) {
-                const defaultTemplate = config.templates.find((t: any) => t.isDefault) || config.templates[0];
-                if (defaultTemplate) {
-                  console.log('Applying default template:', defaultTemplate);
-                  const chartWithTemplate = this.applyDynamicTemplate(chartItem, defaultTemplate);
-                  console.log('Chart with template:', chartWithTemplate);
-                  
-                  // Show success message
-                  alert('Dynamic chart test completed successfully! Check console for details.');
-                }
-              } else {
-                // Show success message even without templates
-                alert('Dynamic chart test completed successfully! No templates found. Check console for details.');
-              }
-            },
-            error: (error) => {
-              console.error('Error loading bar chart configuration:', error);
-              alert('Error loading bar chart configuration. Check console for details.');
-            }
-          });
-        } else {
-          console.warn('Bar chart type not found');
-          alert('Bar chart type not found in the database.');
-        }
-      },
-      error: (error) => {
-        console.error('Error loading chart types:', error);
-        alert('Error loading chart types. Check console for details.');
-      }
-    });
-  }
-
-  // Add method to load dynamic chart configuration
-  loadDynamicChartConfiguration(chartTypeId: number) {
-    console.log(`Loading dynamic chart configuration for chart type ${chartTypeId}`);
-    this.dynamicChartLoader.loadChartConfiguration(chartTypeId).subscribe({
-      next: (config) => {
-        console.log('Loaded dynamic chart configuration:', config);
-        // Here you would apply the configuration to the UI
-        // For example, populate form fields, set up templates, etc.
-      },
-      error: (error) => {
-        console.error('Error loading dynamic chart configuration:', error);
-      }
-    });
-  }
-
-  
-
-  // Add method to create a dynamic chart with configuration from database
-  createDynamicChart = (chartTypeName: string, maxChartId: number) => {
-    console.log(`Creating dynamic chart of type: ${chartTypeName}`);
-    
-    // First, get the chart type by name
-    this.dynamicChartLoader.getChartTypeByName(chartTypeName).subscribe({
-      next: (chartType) => {
-        if (chartType) {
-          console.log(`Found chart type:`, chartType);
-          
-          // Load the complete configuration for this chart type
-          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
-            next: (config) => {
-              console.log(`Loaded configuration for ${chartTypeName}:`, config);
-              
-              // Create the chart item with dynamic configuration
-              const chartItem = {
-                cols: 5,
-                rows: 6,
-                x: 0,
-                y: 0,
-                chartid: maxChartId + 1,
-                component: UnifiedChartComponent,
-                name: chartType.displayName || chartTypeName,
-                chartType: chartType.name,
-                xAxis: '',
-                yAxis: '',
-                table: '',
-                connection: undefined,
-                // Add any dynamic fields from the configuration
-                dynamicFields: config.dynamicFields || []
-              };
-              
-              // Add UI components as configuration properties
-              if (config.uiComponents && config.uiComponents.length > 0) {
-                config.uiComponents.forEach(component => {
-                  chartItem[component.componentName] = '';
-                });
-              }
-              
-              this.dashboardArray.push(chartItem);
-              console.log(`Created dynamic chart:`, chartItem);
-            },
-            error: (error) => {
-              console.error(`Error loading configuration for ${chartTypeName}:`, error);
-              // Fallback to default configuration
-              this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
-            }
-          });
-        } else {
-          console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
-          this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
-        }
-      },
-      error: (error) => {
-        console.error('Error loading configuration for chart type:', error);
-        // Fallback to default configuration
-        this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
-      }
-    });
-  }
-  
-  // Fallback method to create default chart configuration
-  createDefaultChart = (chartTypeName: string, chartDisplayName: string) => {
-    console.log(`Creating default chart for ${chartTypeName}`);
-    
-    // Map chart type names to chart types - making it fully dynamic
-    const chartTypeMap = {
-      'bar': 'bar',
-      'line': 'line',
-      'pie': 'pie',
-      'doughnut': 'doughnut',
-      'radar': 'radar',
-      'polar': 'polar',
-      'bubble': 'bubble',
-      'scatter': 'scatter'
-      // Removed hardcoded heatmap entry to make it fully dynamic
-    };
-    
-    // Get the chart type from the name - default to bubble for unknown chart types
-    const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bubble';
-    
-    // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
-    let maxChartId = 0;
-    if (this.dashboardArray && this.dashboardArray.length > 0) {
-      const validChartIds = this.dashboardArray
-        .map(item => item.chartid)
-        .filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
-      
-      if (validChartIds.length > 0) {
-        maxChartId = Math.max(...validChartIds);
-      }
-    }
-    
-    const chartItem = {
-      cols: 5,
-      rows: 6,
-      x: 0,
-      y: 0,
-      chartid: maxChartId + 1,
-      component: UnifiedChartComponent,
-      name: chartDisplayName,
-      chartType: chartType,
-      xAxis: '',
-      yAxis: '',
-      table: '',
-      connection: undefined
-    };
-    
-    this.dashboardArray.push(chartItem);
-    console.log('Created default chart:', chartItem);
-    
-    // Update the dashboard collection
-    this.dashboardCollection.dashboard = this.dashboardArray.slice();
-    
-    // Force gridster to refresh
-    if (this.options && this.options.api) {
-      this.options.api.optionsChanged();
-    }
-  }
-
-  // Helper method to get display name for chart type - making it fully dynamic
-  getChartDisplayName = (chartTypeName: string): string => {
-    const displayNameMap = {
-      'bar': 'Bar Chart',
-      'line': 'Line Chart',
-      'pie': 'Pie Chart',
-      'doughnut': 'Doughnut Chart',
-      'radar': 'Radar Chart',
-      'polar': 'Polar Area Chart',
-      'bubble': 'Bubble Chart',
-      'scatter': 'Scatter Chart'
-      // Removed hardcoded heatmap entry to make it fully dynamic
-    };
-    
-    // For unknown chart types, create a display name by capitalizing the first letter and adding ' Chart'
-    const displayName = displayNameMap[chartTypeName.toLowerCase()];
-    if (displayName) {
-      return displayName;
-    } else {
-      // Capitalize first letter and add ' Chart'
-      return chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
-    }
-  }
 
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/DRILLDOWN_CONFIGURATION.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/DRILLDOWN_CONFIGURATION.md
deleted file mode 100644
index 7beeabc..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/DRILLDOWN_CONFIGURATION.md
+++ /dev/null
@@ -1,283 +0,0 @@
-# Drilldown Configuration Implementation
-
-## Overview
-This document describes the drilldown configuration implementation applied to all chart components in the dashboard system. The implementation provides multi-layer drilldown functionality with parameter passing capabilities, allowing users to navigate through hierarchical data structures.
-
-## Components with Drilldown Support
-
-The following chart components have drilldown functionality implemented:
-
-1. Bar Chart (`bar-chart`)
-2. Line Chart (`line-chart`)
-3. Pie Chart (`pie-chart`)
-4. Bubble Chart (`bubble-chart`)
-5. Doughnut Chart (`doughnut-chart`)
-6. Polar Chart (`polar-chart`)
-7. Radar Chart (`radar-chart`)
-8. Scatter Chart (`scatter-chart`)
-9. Financial Chart (`financial-chart`)
-10. Dynamic Chart (`dynamic-chart`)
-
-## Drilldown Configuration Properties
-
-Each chart component includes the following drilldown configuration inputs:
-
-```typescript
-// Drilldown configuration inputs
-@Input() drilldownEnabled: boolean = false;
-@Input() drilldownApiUrl: string;
-@Input() drilldownXAxis: string;
-@Input() drilldownYAxis: string;
-@Input() drilldownParameter: string;
-
-// Multi-layer drilldown configuration inputs
-@Input() drilldownLayers: any[] = [];
-```
-
-## Implementation Details
-
-### 1. State Management
-
-Each component maintains drilldown state through the following properties:
-
-```typescript
-// Multi-layer drilldown state tracking
-drilldownStack: any[] = []; // Stack to track drilldown navigation history
-currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-
-// Original data storage for navigation
-originalChartLabels: string[] = []; // Stores original labels
-originalChartData: any[] = []; // Stores original data
-```
-
-### 2. Core Methods
-
-#### fetchDrilldownData()
-Fetches data for the current drilldown level based on configuration:
-
-```typescript
-fetchDrilldownData(): void {
-  // Determine drilldown configuration based on 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;
-    if (layerIndex >= 0 && layerIndex < this.drilldownLayers.length) {
-      drilldownConfig = this.drilldownLayers[layerIndex];
-    }
-  }
-  
-  // Get parameter value from drilldown stack
-  let parameterValue = '';
-  if (this.drilldownStack.length > 0) {
-    const lastEntry = this.drilldownStack[this.drilldownStack.length - 1];
-    parameterValue = lastEntry.clickedValue || '';
-  }
-  
-  // Replace parameter placeholders in API URL
-  let actualApiUrl = drilldownConfig.apiUrl;
-  if (parameterValue) {
-    const encodedValue = encodeURIComponent(parameterValue);
-    actualApiUrl = actualApiUrl.replace(/<[^>]+>/g, encodedValue);
-  }
-  
-  // Fetch data from service
-  this.dashboardService.getChartData(
-    actualApiUrl, 
-    chartType, 
-    drilldownConfig.xAxis, 
-    drilldownConfig.yAxis, 
-    this.connection, 
-    drilldownConfig.parameter, 
-    parameterValue
-  ).subscribe(...);
-}
-```
-
-#### chartClicked()
-Handles chart click events to initiate drilldown navigation:
-
-```typescript
-public chartClicked(e: any): void {
-  // Check if drilldown is enabled and we have a valid click event
-  if (this.drilldownEnabled && e.active && e.active.length > 0) {
-    // Get clicked element details
-    const clickedIndex = e.active[0].index;
-    const clickedLabel = this.chartLabels[clickedIndex];
-    
-    // Store original data if we're at base level
-    if (this.currentDrilldownLevel === 0) {
-      this.originalChartLabels = [...this.chartLabels];
-      this.originalChartData = [...this.chartData];
-    }
-    
-    // Determine next drilldown level
-    const nextDrilldownLevel = this.currentDrilldownLevel + 1;
-    
-    // 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;
-      if (layerIndex < this.drilldownLayers.length) {
-        drilldownConfig = this.drilldownLayers[layerIndex];
-        hasDrilldownConfig = drilldownConfig.enabled &&
-                            !!drilldownConfig.apiUrl && 
-                            !!drilldownConfig.xAxis && 
-                            !!drilldownConfig.yAxis;
-      }
-    }
-    
-    // Proceed with drilldown if configuration exists
-    if (hasDrilldownConfig) {
-      // Add click to drilldown stack
-      const stackEntry = {
-        level: nextDrilldownLevel,
-        clickedIndex: clickedIndex,
-        clickedLabel: clickedLabel,
-        clickedValue: clickedLabel
-      };
-      
-      this.drilldownStack.push(stackEntry);
-      this.currentDrilldownLevel = nextDrilldownLevel;
-      
-      // Fetch drilldown data
-      this.fetchDrilldownData();
-    }
-  }
-}
-```
-
-#### navigateBack()
-Navigates back to the previous drilldown level:
-
-```typescript
-navigateBack(): void {
-  if (this.drilldownStack.length > 0) {
-    // Remove last entry from stack
-    this.drilldownStack.pop();
-    this.currentDrilldownLevel = this.drilldownStack.length;
-    
-    if (this.drilldownStack.length > 0) {
-      // Fetch data for previous level
-      this.fetchDrilldownData();
-    } else {
-      // Back to base level
-      this.resetToOriginalData();
-    }
-  } else {
-    // Already at base level
-    this.resetToOriginalData();
-  }
-}
-```
-
-#### resetToOriginalData()
-Resets the chart to its original data:
-
-```typescript
-resetToOriginalData(): void {
-  this.currentDrilldownLevel = 0;
-  this.drilldownStack = [];
-  
-  if (this.originalChartLabels.length > 0) {
-    this.chartLabels = [...this.originalChartLabels];
-  }
-  if (this.originalChartData.length > 0) {
-    this.chartData = [...this.originalChartData];
-  }
-  
-  // Re-fetch original data
-  this.fetchChartData();
-}
-```
-
-## Multi-Layer Drilldown Support
-
-The implementation supports multiple drilldown layers through the `drilldownLayers` array. Each layer can have its own configuration:
-
-```typescript
-drilldownLayers: [
-  {
-    enabled: true,
-    apiUrl: "second-level-endpoint/<parameter>",
-    xAxis: "column1",
-    yAxis: "column2",
-    parameter: "selectedColumn"
-  },
-  {
-    enabled: true,
-    apiUrl: "third-level-endpoint/<parameter>",
-    xAxis: "column3",
-    yAxis: "column4",
-    parameter: "selectedColumn"
-  }
-]
-```
-
-## Parameter Passing
-
-The drilldown implementation supports parameter passing by replacing placeholders in the API URL:
-
-1. URL templates use angle brackets for parameter placeholders: `endpoint/<parameter>`
-2. When navigating, the clicked value replaces the placeholder
-3. Parameters are properly encoded using `encodeURIComponent`
-
-## Data Flow
-
-1. **Initial Load**: Chart loads with base data using `fetchChartData()`
-2. **Drilldown Initiation**: User clicks on chart element, triggering `chartClicked()`
-3. **Data Fetch**: New data is fetched using `fetchDrilldownData()` with parameter replacement
-4. **Navigation**: User can navigate back using `navigateBack()` or reset using `resetToOriginalData()`
-5. **State Management**: All navigation is tracked in `drilldownStack` with level management
-
-## Error Handling
-
-The implementation includes error handling for:
-
-1. Missing drilldown configuration
-2. API call failures
-3. Invalid data structures
-4. Null responses from backend
-
-In case of errors, the chart maintains its current data and displays appropriate warnings in the console.
-
-## UI Integration
-
-Components with drilldown support should include UI elements for:
-
-1. **Back Button**: To navigate to previous drilldown level
-2. **Reset Button**: To return to original data
-3. **Navigation Indicators**: To show current drilldown level
-
-Example HTML structure:
-
-```html
-<div *ngIf="drilldownEnabled && currentDrilldownLevel > 0" class="drilldown-controls">
-  <button (click)="navigateBack()" class="btn btn-secondary">
-    ← Back to Level {{ currentDrilldownLevel - 1 }}
-  </button>
-  <button (click)="resetToOriginalData()" class="btn btn-outline">
-    ↺ Reset to Original
-  </button>
-</div>
-```
\ No newline at end of file
diff --git 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
deleted file mode 100644
index bf020b9..0000000
Binary files a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart.zip and /dev/null differ
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/FILTER_CONFIGURATION.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/FILTER_CONFIGURATION.md
deleted file mode 100644
index ecf71b6..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/FILTER_CONFIGURATION.md
+++ /dev/null
@@ -1,142 +0,0 @@
-# Bar Chart Filter Configuration
-
-## Overview
-This document describes the filter configuration implementation for the Bar Chart component. The implementation provides multiple filter capabilities allowing users to dynamically filter chart data.
-
-## Filter Configuration Properties
-
-The Bar Chart component includes the following filter configuration inputs:
-
-```typescript
-// Filter configuration inputs
-@Input() filterFields: any[] = []; // Array of filter field configurations
-@Input() enableFilters: boolean = false; // Enable/disable filter functionality
-```
-
-## Filter Field Configuration
-
-Each filter field in the `filterFields` array should have the following structure:
-
-```typescript
-{
-  field: string,        // The field name to filter on
-  label?: string,       // Optional label to display (defaults to field name)
-  type: string,         // Filter type: 'text', 'dropdown', 'number-range'
-  options?: any[]       // Options for dropdown filters (optional)
-}
-```
-
-### Filter Types
-
-1. **Text Filter** (`type: 'text'`)
-   - Simple text input field
-   - Allows users to enter text to filter data
-
-2. **Dropdown Filter** (`type: 'dropdown'`)
-   - Dropdown selection field
-   - Requires `options` array with values
-
-3. **Number Range Filter** (`type: 'number-range'`)
-   - Two number input fields (min and max)
-   - Allows users to filter by numeric ranges
-
-## Programmatic Filter Methods
-
-The Bar Chart component provides several methods for programmatic filter control:
-
-### setFilterOptions(field: string, options: any[])
-Sets filter options for a dropdown filter field.
-
-### getFilterValues(): any
-Returns current filter values as an object.
-
-### setFilterValues(filterValues: any)
-Sets filter values programmatically and refreshes the chart.
-
-### updateFilter(field: string, value: string)
-Updates a specific filter value and refreshes the chart.
-
-### clearFilters()
-Clears all filter values and refreshes the chart.
-
-## Usage Examples
-
-### Enable Filters
-```html
-<app-bar-chart 
-  [enableFilters]="true"
-  [filterFields]="[
-    { field: 'category', label: 'Category', type: 'dropdown', options: ['A', 'B', 'C'] },
-    { field: 'name', label: 'Name', type: 'text' },
-    { field: 'amount', label: 'Amount', type: 'number-range' }
-  ]"
-  [table]="'sales_data'"
-  [xAxis]="'product'"
-  [yAxis]="'amount'">
-</app-bar-chart>
-```
-
-### Programmatic Filter Control
-```typescript
-// Set filter options
-chartComponent.setFilterOptions('category', [
-  { value: 'A', label: 'Category A' },
-  { value: 'B', label: 'Category B' },
-  { value: 'C', label: 'Category C' }
-]);
-
-// Set filter values
-chartComponent.setFilterValues({
-  'category': 'A',
-  'name': 'Product 1'
-});
-
-// Get current filter values
-const currentFilters = chartComponent.getFilterValues();
-console.log(currentFilters);
-
-// Clear all filters
-chartComponent.clearFilters();
-```
-
-### Filter Options Format
-For dropdown filters, options can be provided in multiple formats:
-
-1. Simple array of strings:
-```javascript
-options: ['Option 1', 'Option 2', 'Option 3']
-```
-
-2. Array of objects with value/label:
-```javascript
-options: [
-  { value: 'opt1', label: 'Option 1' },
-  { value: 'opt2', label: 'Option 2' },
-  { value: 'opt3', label: 'Option 3' }
-]
-```
-
-## Backend Integration
-
-Filters are passed to the backend API as query parameters with the prefix `filter_`. For example:
-- Text filter: `filter_name=John`
-- Dropdown filter: `filter_category=A`
-- Number range filter: `filter_amount_min=100&filter_amount_max=500`
-
-The backend should implement logic to filter data based on these parameters.
-
-## UI Features
-
-1. **Filter Controls Panel**: Appears at the top of the chart when filters are enabled
-2. **Clear Filters Button**: Resets all filters to their default state
-3. **Responsive Layout**: Filter controls automatically wrap on smaller screens
-4. **Real-time Updates**: Chart updates immediately when filter values change
-
-## Implementation Details
-
-The filter implementation includes:
-- Two-way data binding for filter values
-- Dynamic filter control generation based on configuration
-- Filter parameter building for API calls
-- Filter state management
-- Integration with existing drilldown functionality
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/FILTER_IMPLEMENTATION_SUMMARY.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/FILTER_IMPLEMENTATION_SUMMARY.md
deleted file mode 100644
index 0cc17b8..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/FILTER_IMPLEMENTATION_SUMMARY.md
+++ /dev/null
@@ -1,116 +0,0 @@
-# Bar Chart Filter Implementation Summary
-
-## Overview
-This document summarizes the implementation of filter functionality for the Bar Chart component, allowing users to dynamically filter chart data using multiple filter types.
-
-## Files Modified
-
-### 1. Bar Chart Component (bar-chart.component.ts)
-- Added filter configuration inputs: `filterFields` and `enableFilters`
-- Added filter state properties: `activeFilters` and `filterOptions`
-- Implemented filter initialization method
-- Added methods for programmatic filter control:
-  - `setFilterOptions()`
-  - `getFilterValues()`
-  - `setFilterValues()`
-  - `updateFilter()`
-  - `clearFilters()`
-- Implemented `buildFilterParameters()` method to construct API query parameters
-- Updated `fetchChartData()` and `fetchDrilldownData()` to include filter parameters
-- Integrated filter functionality with existing drilldown implementation
-
-### 2. Bar Chart Template (bar-chart.component.html)
-- Added filter controls panel that appears when filters are enabled
-- Implemented dynamic filter control generation based on `filterFields` configuration
-- Added support for three filter types:
-  - Text input filters
-  - Dropdown filters
-  - Number range filters (min/max)
-- Added "Clear Filters" button
-- Implemented responsive layout for filter controls
-
-### 3. Dashboard Service (dashboard3.service.ts)
-- No changes needed as filter parameters are passed as query string parameters
-
-## New Features
-
-### Filter Configuration
-- Enable/disable filter functionality with `enableFilters` input
-- Configure filter fields with `filterFields` input array
-- Support for multiple filter types: text, dropdown, number range
-
-### UI Components
-- Filter controls panel at the top of the chart
-- Dynamic filter control generation
-- Responsive layout that adapts to screen size
-- Clear filters button
-
-### Programmatic Control
-- Methods to set/get filter values programmatically
-- Method to set filter options for dropdown filters
-- Method to clear all filters
-
-### Backend Integration
-- Filter parameters passed as query string parameters with `filter_` prefix
-- Support for range filters with `_min` and `_max` suffixes
-- Compatible with existing drilldown functionality
-
-## Usage Examples
-
-### Basic Implementation
-```html
-<app-bar-chart
-  [enableFilters]="true"
-  [filterFields]="[
-    { field: 'category', label: 'Category', type: 'dropdown', options: ['A', 'B', 'C'] },
-    { field: 'name', label: 'Name', type: 'text' },
-    { field: 'amount', label: 'Amount', type: 'number-range' }
-  ]"
-  [table]="'sales_data'"
-  [xAxis]="'product'"
-  [yAxis]="'amount'">
-</app-bar-chart>
-```
-
-### Programmatic Control
-```typescript
-// Set filter options
-chartComponent.setFilterOptions('category', [
-  { value: 'A', label: 'Category A' },
-  { value: 'B', label: 'Category B' }
-]);
-
-// Set filter values
-chartComponent.setFilterValues({
-  'category': 'A',
-  'name': 'Product 1'
-});
-
-// Clear all filters
-chartComponent.clearFilters();
-```
-
-## API Integration
-
-Filters are passed to the backend as query parameters:
-- Text filter: `filter_name=John`
-- Dropdown filter: `filter_category=A`
-- Number range filter: `filter_amount_min=100&filter_amount_max=500`
-
-The backend should implement logic to filter data based on these parameters.
-
-## Compatibility
-
-- Fully compatible with existing drilldown functionality
-- Works with all existing chart configuration options
-- No breaking changes to existing API
-- Backward compatible - filters are disabled by default
-
-## Testing
-
-The implementation has been tested with:
-- All filter types (text, dropdown, number range)
-- Multiple simultaneous filters
-- Integration with drilldown functionality
-- Programmatic filter control
-- Responsive layout on different screen sizes
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/USAGE_EXAMPLE.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/USAGE_EXAMPLE.md
deleted file mode 100644
index 17a1873..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/USAGE_EXAMPLE.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Bar Chart Filter Usage Example
-
-## Overview
-This document provides examples of how to use the new filter functionality in the Bar Chart component.
-
-## Basic Filter Example
-
-```html
-<app-bar-chart
-  [enableFilters]="true"
-  [filterFields]="[
-    { field: 'region', label: 'Region', type: 'dropdown', options: ['North', 'South', 'East', 'West'] },
-    { field: 'product', label: 'Product', type: 'text' },
-    { field: 'sales', label: 'Sales Amount', type: 'number-range' }
-  ]"
-  [table]="'sales_data'"
-  [xAxis]="'product'"
-  [yAxis]="'amount'"
-  [charttitle]="'Sales by Product'">
-</app-bar-chart>
-```
-
-## Filter Types
-
-### 1. Text Filter
-```javascript
-{ field: 'name', label: 'Name', type: 'text' }
-```
-
-### 2. Dropdown Filter
-```javascript
-{ field: 'category', label: 'Category', type: 'dropdown', options: ['A', 'B', 'C'] }
-```
-
-### 3. Number Range Filter
-```javascript
-{ field: 'amount', label: 'Amount', type: 'number-range' }
-```
-
-## Advanced Example with Drilldown
-
-```html
-<app-bar-chart
-  [enableFilters]="true"
-  [filterFields]="[
-    { field: 'year', label: 'Year', type: 'dropdown', options: ['2020', '2021', '2022', '2023'] },
-    { field: 'region', label: 'Region', type: 'text' }
-  ]"
-  [table]="'sales_summary'"
-  [xAxis]="'category'"
-  [yAxis]="'revenue'"
-  [charttitle]="'Revenue by Category'"
-  [drilldownEnabled]="true"
-  [drilldownApiUrl]="'sales_detail/<category>'"
-  [drilldownXAxis]="'product'"
-  [drilldownYAxis]="'amount'"
-  [drilldownParameter]="'category'">
-</app-bar-chart>
-```
-
-## Backend Integration
-
-Filters are passed to the backend API as query parameters:
-- Text filter: `filter_name=John`
-- Dropdown filter: `filter_category=A`
-- Number range filter: `filter_amount_min=100&filter_amount_max=500`
-
-The backend should implement logic to filter data based on these parameters.
-
-## Filter Options Format
-
-For dropdown filters, options can be provided in multiple formats:
-
-1. Simple array:
-```javascript
-options: ['Option 1', 'Option 2', 'Option 3']
-```
-
-2. Array of objects:
-```javascript
-options: [
-  { value: 'opt1', label: 'Option 1' },
-  { value: 'opt2', label: 'Option 2' },
-  { value: 'opt3', label: 'Option 3' }
-]
-```
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart-example.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart-example.component.ts
deleted file mode 100644
index 4505243..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart-example.component.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-bar-chart-example',
-  template: `
-    <div style="padding: 20px;">
-      <h2>Bar Chart with Filter Example</h2>
-      
-      <!-- Example 1: Bar chart with text and dropdown filters -->
-      <div style="margin-bottom: 30px;">
-        <h3>Example 1: Sales Data with Filters</h3>
-        <app-bar-chart
-          [enableFilters]="true"
-          [filterFields]="[
-            { field: 'region', label: 'Region', type: 'dropdown', options: ['North', 'South', 'East', 'West'] },
-            { field: 'product', label: 'Product', type: 'text' },
-            { field: 'sales', label: 'Sales Amount', type: 'number-range' }
-          ]"
-          [table]="'sales_data'"
-          [xAxis]="'product'"
-          [yAxis]="'amount'"
-          [charttitle]="'Sales by Product'"
-          [chartlegend]="true"
-          [showlabel]="true">
-        </app-bar-chart>
-      </div>
-      
-      <!-- Example 2: Bar chart with drilldown and filters -->
-      <div style="margin-bottom: 30px;">
-        <h3>Example 2: Sales Data with Drilldown and Filters</h3>
-        <app-bar-chart
-          [enableFilters]="true"
-          [filterFields]="[
-            { field: 'year', label: 'Year', type: 'dropdown', options: ['2020', '2021', '2022', '2023'] },
-            { field: 'category', label: 'Category', type: 'text' }
-          ]"
-          [table]="'sales_summary'"
-          [xAxis]="'category'"
-          [yAxis]="'revenue'"
-          [charttitle]="'Revenue by Category'"
-          [drilldownEnabled]="true"
-          [drilldownApiUrl]="'sales_detail/<category>'"
-          [drilldownXAxis]="'product'"
-          [drilldownYAxis]="'amount'"
-          [drilldownParameter]="'category'">
-        </app-bar-chart>
-      </div>
-    </div>
-  `
-})
-export class BarChartExampleComponent {
-  constructor() { }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart-test.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart-test.component.ts
deleted file mode 100644
index ee9beca..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart-test.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-bar-chart-test',
-  template: `
-    <div style="padding: 20px;">
-      <h2>Bar Chart Filter Test</h2>
-      
-      <app-bar-chart
-        [enableFilters]="true"
-        [filterFields]="[
-          { field: 'region', label: 'Region', type: 'dropdown', options: ['North', 'South', 'East', 'West'] },
-          { field: 'product', label: 'Product', type: 'text' },
-          { field: 'sales', label: 'Sales Amount', type: 'number-range' }
-        ]"
-        [table]="'sales_data'"
-        [xAxis]="'product'"
-        [yAxis]="'amount'"
-        [charttitle]="'Sales by Product'"
-        [chartlegend]="true"
-        [showlabel]="true">
-      </app-bar-chart>
-    </div>
-  `
-})
-export class BarChartTestComponent {
-  constructor() { }
-}
\ No newline at end of file
diff --git 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
index 4c1ba64..0fa4df5 100644
--- 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,334 +1,9 @@
-<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">
-    <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]="isLoading">
-     
-      <div *ngIf="noDataAvailable" class="no-data-message">
-        No data available
-      </div>
-      
-    
-      <div *ngIf="!noDataAvailable" class="chart-display">
-        <canvas baseChart
-          [datasets]="barChartData"
-          [labels]="barChartLabels"
-          [type]="barChartType"
-          [options]="barChartOptions"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)">
-        </canvas>
-      </div>
-      
-      <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>
\ No newline at end of file
+<div style="display: block">
+  <canvas baseChart
+  [datasets]="barChartData"
+  [labels]="barChartLabels"
+  [type]="barChartType"
+  (chartHover)="chartHovered($event)"
+  (chartClick)="chartClicked($event)">
+</canvas>
+</div>
diff --git 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
index c70fd33..e69de29 100644
--- 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,278 +0,0 @@
-// Chart container structure
-.chart-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  // Filter section styling
-  .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;
-    }
-  }
-  
-  // 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: #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;
-        }
-      }
-    }
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-// Responsive design
-@media (max-width: 768px) {
-  .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; // Adjust for mobile
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index 292f9ea..1d2c277 100644
--- 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
@@ -1,1040 +1,33 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
-import { Dashboard3Service } from '../../../../../../services/builder/dashboard3.service';
-import { Subscription } from 'rxjs';
-import { FilterService } from '../../common-filter/filter.service';
-// Add BaseChartDirective import for chart resizing
-import { BaseChartDirective } from 'ng2-charts';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-bar-chart',
   templateUrl: './bar-chart.component.html',
   styleUrls: ['./bar-chart.component.scss']
 })
-export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class BarChartComponent implements OnInit {
 
-  // Add ViewChild to access the chart directive
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  constructor() { }
 
+  ngOnInit(): void {
+  }
   barChartLabels: string[] = ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'];
   barChartType: string = 'bar';
+ // barChartLegend = true;
   barChartPlugins = [];
   barChartData: any[] = [
     { data: [45, 37, 60, 70, 46, 33], label: 'Best Fruits' }
   ];
-  barChartLegend: boolean = true;
-  
-  // Add responsive chart options
-  barChartOptions: any = {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      x: {
-        ticks: {
-          autoSkip: false,
-          maxRotation: 45,
-          minRotation: 45,
-          padding: 15,
-          font: {
-            size: 12
-          }
-        },
-        grid: {
-          display: false
-        }
-      },
-      y: {
-        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
-      }
-    }
-  };
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalBarChartLabels: string[] = [];
-  originalBarChartData: any[] = [];
-  
-  // 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
-  ) { }
-
-  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();
-  }
-
-  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      this.fetchChartData();
-    }
-    
-    // Update legend visibility if it changed
-    if (changes.chartlegend !== undefined) {
-      this.barChartLegend = changes.chartlegend.currentValue;
-      this.barChartOptions.plugins.legend.display = this.barChartLegend;
-      console.log('Chart legend changed to:', this.barChartLegend);
-    }
-  }
-
-  // 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 flags after fetching
-      this.isFetchingData = false;
-      this.isLoading = false;
-      return;
-    }
-    
-    // If we have the necessary data, fetch chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('=== BAR CHART 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;
-      console.log('Y-Axis String:', yAxisString);
-      
-      // 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/bar?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
-      console.log('Bar chart data URL:', url);
-      
-      // Convert baseFilters to filter parameters
-      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
-      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 filterParams = '';
-      if (Object.keys(filterObj).length > 0) {
-        filterParams = JSON.stringify(filterObj);
-      }
-      
-      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(
-        (data: any) => {
-          console.log('=== BAR CHART DATA RESPONSE ===');
-          console.log('Received bar chart data:', data);
-          if (data === null) {
-            console.warn('Bar chart API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.barChartLabels = [];
-            this.barChartData = [];
-            // 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) {
-            // Backend has already filtered the data, just display it
-            this.noDataAvailable = data.chartLabels.length === 0;
-            this.barChartLabels = data.chartLabels;
-            this.barChartData = data.chartData;
-            // Trigger change detection
-            // this.barChartData = [...this.barChartData];
-            console.log('Updated bar chart with data:', { labels: this.barChartLabels, data: this.barChartData });
-            console.log('=== CHART UPDATED SUCCESSFULLY ===');
-          } 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;
-            // Trigger change detection
-            // this.barChartData = [...this.barChartData];
-            console.log('Updated bar chart with legacy data format:', { labels: this.barChartLabels, data: this.barChartData });
-            console.log('=== CHART UPDATED SUCCESSFULLY (LEGACY) ===');
-          } else {
-            console.warn('Bar chart received data does not have expected structure', data);
-            this.noDataAvailable = true;
-            this.barChartLabels = [];
-            this.barChartData = [];
-          }
-          // Reset flags after fetching
-          this.isFetchingData = false;
-          this.isLoading = false;
-        },
-        (error) => {
-          console.error('=== BAR CHART ERROR ===');
-          console.error('Error fetching bar chart data:', error);
-          this.noDataAvailable = true;
-          this.barChartLabels = [];
-          this.barChartData = [];
-          // Reset flags after fetching
-          this.isFetchingData = false;
-          this.isLoading = false;
-          // Keep default data in case of error
-        }
-      );
-      
-      // Add subscription to array for cleanup
-      this.subscriptions.push(subscription);
-    } else {
-      console.log('Missing required data for bar chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      this.noDataAvailable = true;
-      this.barChartLabels = [];
-      this.barChartData = [];
-      // Reset flags after fetching
-      this.isFetchingData = false;
-      this.isLoading = 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.noDataAvailable = true;
-        this.barChartLabels = [];
-        this.barChartData = [];
-        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.noDataAvailable = true;
-      this.barChartLabels = [];
-      this.barChartData = [];
-      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/bar?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
-    const subscription = this.dashboardService.getChartData(
-      drilldownConfig.apiUrl, 'bar', 
-      this.drilldownXAxis, this.drilldownYAxis, 
-      this.connection, 
-      '', 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.noDataAvailable = true;
-          this.barChartLabels = [];
-          this.barChartData = [];
-          return;
-        }
-        
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Backend has already filtered the data, just display it
-          this.noDataAvailable = data.chartLabels.length === 0;
-          this.barChartLabels = data.chartLabels;
-          this.barChartData = data.chartData;
-          // 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) => {
-        console.error('Error fetching drilldown data:', error);
-        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)
-  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.originalBarChartLabels.length > 0) {
-      // Create a deep copy to avoid reference issues
-      this.barChartLabels = JSON.parse(JSON.stringify(this.originalBarChartLabels));
-      console.log('Restored original labels');
-    }
-    if (this.originalBarChartData.length > 0) {
-      // Create a deep copy to avoid reference issues
-      this.barChartData = JSON.parse(JSON.stringify(this.originalBarChartData));
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.barChartLabels);
-    console.log('After reset - data:', this.barChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // Public method to refresh data when filters change
-  refreshData(): void {
-    this.fetchChartData();
-  }
-  
-  // Method to handle window resize events
-  onResize(): void {
-    if (this.chart) {
-      this.chart.chart?.resize();
-    }
-  }
-  
-  // Ensure labels and data arrays have the same length
-  private syncLabelAndDataArrays(): void {
-    // For bar charts, we need to ensure all datasets have the same number of data points
-    if (this.barChartData && this.barChartData.length > 0 && this.barChartLabels) {
-      const labelCount = this.barChartLabels.length;
-      
-      this.barChartData.forEach(dataset => {
-        if (dataset.data) {
-          // If dataset has more data points than labels, truncate the data
-          if (dataset.data.length > labelCount) {
-            dataset.data = dataset.data.slice(0, labelCount);
-          }
-          // If dataset has fewer data points than labels, pad with zeros
-          else if (dataset.data.length < labelCount) {
-            while (dataset.data.length < labelCount) {
-              dataset.data.push(0);
-            }
-          }
-        }
-      });
-    }
-  }
 
   // events
-  public chartClicked(e: any): void {
-    console.log('Bar chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.barChartLabels[clickedIndex];
-      
-      console.log('Clicked on bar:', { 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
-        // Create a deep copy to avoid reference issues
-        this.originalBarChartLabels = JSON.parse(JSON.stringify(this.barChartLabels));
-        // Create a deep copy to avoid reference issues
-        this.originalBarChartData = JSON.parse(JSON.stringify(this.barChartData));
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
+	public chartClicked(e: any): void {
+		console.log(e);
+	}
 
-  public chartHovered(e: any): void {
-    console.log(e);
-  }
-  
-  ngOnDestroy() {
-    // Unsubscribe from all subscriptions to prevent memory leaks
-    console.log('BarChartComponent 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.barChartLabels = [];
-    this.barChartData = [];
-    this.drilldownStack = [];
-    this.originalBarChartLabels = [];
-    this.originalBarChartData = [];
-    
-    // Clear multiselect tracking
-    this.openMultiselects.clear();
-    
-    // Remove document click handler
-    this.removeDocumentClickHandler();
-    
-    console.log('BarChartComponent destroyed and cleaned up');
-  }
-}
\ No newline at end of file
+	public chartHovered(e: any): void {
+		console.log(e);
+	}
+
+}
diff --git 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
index e2c52aa..5f6157d 100644
--- 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,310 +1,9 @@
-<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 || '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>
-  
-  <!-- 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)"
-    [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>
\ No newline at end of file
+<div style="display:block">
+  <canvas baseChart
+  [datasets]="bubbleChartData"
+  [type]="bubbleChartType"
+  [options]="bubbleChartOptions"
+  (chartHover)="chartHovered($event)"
+  (chartClick)="chartClicked($event)">
+</canvas>
+</div>
diff --git 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
index a9282e4..e69de29 100644
--- 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
@@ -1,192 +0,0 @@
-.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;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index bd9d0fc..b01a8b0 100644
--- 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
@@ -1,1328 +1,98 @@
-import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { ChartConfiguration, 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';
-
+import { Component, OnInit } from '@angular/core';
+import { ChartConfiguration,  ChartDataset,  ChartOptions } from 'chart.js';
 @Component({
   selector: 'app-bubble-chart',
   templateUrl: './bubble-chart.component.html',
   styleUrls: ['./bubble-chart.component.scss']
 })
-export class BubbleChartComponent implements OnInit, OnChanges {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class BubbleChartComponent implements OnInit {
 
+  constructor() { }
+
+  ngOnInit(): void {
+  }
   public bubbleChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      x: {
-        beginAtZero: true,
-        title: {
-          display: true,
-          text: 'X Axis'
-        },
-        ticks: {
-          autoSkip: false,
-          maxRotation: 45,
-          minRotation: 45
-        }
-      },
-      y: {
-        beginAtZero: true,
-        title: {
-          display: true,
-          text: 'Y Axis'
-        }
-      }
-    },
-    plugins: {
-      legend: {
-        display: true,
-        position: 'top',
-      },
-      tooltip: {
-        enabled: true,
-        mode: 'point',
-        intersect: false,
-        callbacks: {
-          label: function(context: any) {
-            const point: any = context.raw;
-            if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
-              const yValue = parseFloat(point.y);
-              const rValue = parseFloat(point.r);
-              if (!isNaN(yValue) && !isNaN(rValue)) {
-                return `Value: ${yValue.toFixed(2)}, Size: ${rValue.toFixed(1)}`;
-              }
-            }
-            return context.dataset.label || '';
-          }
-        }
-      }
-    },
-    animation: {
-      duration: 800,
-      easing: 'easeInOutQuart'
-    },
-    // Enable individual point styling
-    elements: {
-      point: {
-        hoverRadius: 12,
-        hoverBorderWidth: 3
-      }
-    },
-    // Add padding to ensure x-axis labels are visible
-    layout: {
-      padding: {
-        left: 10,
-        right: 10,
-        top: 10,
-        bottom: 30
-      }
-    }
+    // scales: {
+    //   x: {
+    //     min: 0,
+    //     max: 30,
+    //     ticks: {}
+    //   },
+    //   y: {
+    //     min: 0,
+    //     max: 30,
+    //     ticks: {}
+    //   },
+    //   plugins: {
+    //     title: {
+    //       display: true,
+    //       text: 'Bubble Chart'
+    //     }
+    //   }
+    // }
   };
 
   public bubbleChartType: string = 'bubble';
-  public bubbleChartData: ChartDataset[] = [];
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalBubbleChartData: ChartDataset[] = [];
-  
-  // No data state
-  noDataAvailable: boolean = false;
-  dataLoaded: boolean = false; // Track if data has been loaded
-  
-  // Flag to prevent infinite loops
-  private isFetchingData: boolean = false;
-  
-  // Subscriptions to unsubscribe on destroy
-  private subscriptions: Subscription[] = [];
+ // public bubbleChartLegend = true;
+  public bubbleChartData: ChartDataset[] = [
+    {
+      data: [
+        { x: 10, y: 10, r: 10 },
+        { x: 15, y: 5, r: 15 },
+        { x: 26, y: 12, r: 23 },
+        { x: 7, y: 8, r: 8 },
+      ],
+      label: 'Investment Equities',
+      backgroundColor: 'rgba(255, 0, 0, 0.6)', // Red
+      borderColor: 'blue',
+      hoverBackgroundColor: 'purple',
+      hoverBorderColor: 'red',
+    },
+    {
+      data: [
+        { x: 5, y: 15, r: 12 },
+        { x: 20, y: 7, r: 8 },
+        { x: 12, y: 18, r: 15 },
+        { x: 8, y: 6, r: 10 },
+      ],
+      label: 'Investment Bonds',
+      backgroundColor: 'rgba(0, 255, 0, 0.6)', // Green
+      borderColor: 'green',
+      hoverBackgroundColor: 'yellow',
+      hoverBorderColor: 'blue',
+    },
+    // {
+    //   data: [
+    //     { x: 10, y: 10, r: 10 },
+    //     { x: 15, y: 5, r: 15 },
+    //     { x: 26, y: 12, r: 23 },
+    //     { x: 7, y: 8, r: 8 },
+    //   ],
+    //   label: 'Investment Equities',
+    //   backgroundColor: [
+    //     'red',
+    //     'green',
+    //     'blue',
+    //     'purple',
+    //     'yellow',
+    //     'brown',
+    //     'magenta',
+    //     'cyan',
+    //     'orange',
+    //     'pink'
+    //   ],
+    //   borderColor: 'blue',
+    //   hoverBackgroundColor: 'purple',
+    //   hoverBorderColor: 'red',
+    // },
+  ];
 
-  // 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;
+   // events
+	public chartClicked(e: any): void {
+		console.log(e);
+	}
 
-  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('BubbleChartComponent 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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      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();
-  }
-  
-  // Helper function to replace alpha value in RGBA color string
-  private replaceAlpha(color: string, newAlpha: number): string {
-    // Match rgba(r, g, b, a) format and replace alpha value
-    return color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, `rgba($1, $2, $3, ${newAlpha})`);
-  }
-  
-  // Function to generate different colors for bubbles
-  private generateBubbleColor(index: number, value: number, total: number): string {
-    // Generate colors based on index or value
-    // Using HSL color model for better color distribution
-    const hue = (index * 137.508) % 360; // Golden angle approximation for good distribution
-    const saturation = 80 + (index % 20); // High saturation for vibrant colors
-    const lightness = 40 + (index % 30); // Vary lightness for contrast
-    
-    // Convert HSL to RGB
-    const h = hue / 360;
-    const s = saturation / 100;
-    const l = lightness / 100;
-    
-    const rgb = this.hslToRgb(h, s, l);
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)`;
-  }
-  
-  // Helper function to convert HSL to RGB
-  private hslToRgb(h: number, s: number, l: number): { r: number, g: number, b: number } {
-    let r, g, b;
-    
-    if (s === 0) {
-      r = g = b = l; // achromatic
-    } else {
-      const hue2rgb = (p: number, q: number, t: number) => {
-        if (t < 0) t += 1;
-        if (t > 1) t -= 1;
-        if (t < 1/6) return p + (q - p) * 6 * t;
-        if (t < 1/2) return q;
-        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
-        return p;
-      };
-      
-      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1/3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1/3);
-    }
-    
-    return {
-      r: Math.round(r * 255),
-      g: Math.round(g * 255),
-      b: Math.round(b * 255)
-    };
-  }
-  
-  // Helper function to calculate logarithmic scaling
-  private logScale(value: number, min: number, max: number, minRadius: number, maxRadius: number): number {
-    if (min === max) return (minRadius + maxRadius) / 2;
-    
-    // Normalize value to 0-1 range
-    const normalized = (value - min) / (max - min);
-    
-    // Apply logarithmic scaling (base 10)
-    // Add 1 to avoid log(0) and scale to 1-10 range
-    const logValue = Math.log10(normalized * 9 + 1);
-    
-    // Scale to desired radius range
-    return minRadius + (logValue / Math.log10(10)) * (maxRadius - minRadius);
-  }
-  
-  // Transform data to bubble chart format
-  private transformToBubbleData(labels: any[], data: any[]): ChartDataset[] {
-    // For bubble charts, we need to transform the data into bubble format
-    // Bubble charts expect data in the format: {x: number, y: number, r: number}
-    console.log('Transforming data to bubble format:', { labels, data });
-    
-    // Handle null/undefined data
-    if (!labels || !data) {
-      console.log('Labels or data is null/undefined, returning empty dataset');
-      return [];
-    }
-    
-    // If we have the expected bubble 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') && data[0].data[0].hasOwnProperty('r')) {
-      console.log('Data is already in bubble format, returning as is');
-      return data;
-    }
-    
-    // Transform the data properly for bubble chart
-    // Assuming labels are x-values and data[0].data are y-values
-    if (labels && data && data.length > 0 && data[0].data) {
-      console.log('Transforming regular data to bubble format');
-      const yValues = data[0].data;
-      const label = data[0].label || 'Dataset 1';
-      
-      // Handle case where yValues might not be an array
-      if (!Array.isArray(yValues)) {
-        console.log('yValues is not an array, returning empty dataset');
-        return [];
-      }
-      
-      console.log('yValues type:', typeof yValues);
-      console.log('yValues length:', yValues.length);
-      console.log('First few yValues:', yValues.slice(0, 5));
-      
-      // Find min and max values for scaling
-      let minValue = Infinity;
-      let maxValue = -Infinity;
-      const validYValues = [];
-      
-      // First pass: collect valid values and find min/max
-      for (let i = 0; i < yValues.length; i++) {
-        let y;
-        if (typeof yValues[i] === 'string') {
-          y = parseFloat(yValues[i]);
-        } else {
-          y = yValues[i];
-        }
-        
-        if (!isNaN(y)) {
-          validYValues.push(y);
-          minValue = Math.min(minValue, y);
-          maxValue = Math.max(maxValue, y);
-        }
-      }
-      
-      console.log('Value range:', { minValue, maxValue });
-      
-      // Adjust radius range based on number of data points
-      // For fewer points, we can use larger bubbles; for more points, smaller bubbles to prevent overlap
-      const dataPointCount = Math.min(labels.length, yValues.length);
-      let minRadius = 3;
-      let maxRadius = 30;
-      
-      // Adjust radius range based on data point count
-      if (dataPointCount > 50) {
-        minRadius = 2;
-        maxRadius = 20;
-      } else if (dataPointCount > 20) {
-        minRadius = 3;
-        maxRadius = 25;
-      }
-      
-      console.log('Radius range:', { minRadius, maxRadius, dataPointCount });
-      
-      // Create bubble points from labels (x) and data (y)
-      const bubblePoints = [];
-      const bubbleColors = [];
-      const minLength = Math.min(labels.length, yValues.length);
-      
-      console.log('Processing data points:', { labels, yValues, minLength });
-      
-      for (let i = 0; i < minLength; i++) {
-        // Log each point for debugging
-        console.log(`Processing point ${i}: label=${labels[i]}, yValue=${yValues[i]}, type=${typeof yValues[i]}`);
-        
-        // Convert y to number if it's a string
-        let y;
-        if (typeof yValues[i] === 'string') {
-          y = parseFloat(yValues[i]);
-          console.log(`Converted string yValue to number: ${yValues[i]} -> ${y}`);
-        } else {
-          y = yValues[i];
-        }
-        
-        // Handle NaN values
-        if (isNaN(y)) {
-          console.log(`Skipping point ${i} due to NaN y value: ${yValues[i]}`);
-          continue;
-        }
-        
-        // Calculate radius based on the y-value with logarithmic scaling
-        const r = this.logScale(y, minValue, maxValue, minRadius, maxRadius);
-        
-        console.log(`Value: ${y}, Radius: ${r}`);
-        
-        // For x-value, we'll use the index position since labels are strings
-        const x = i;
-        
-        // Generate a unique color for this bubble
-        const backgroundColor = this.generateBubbleColor(i, y, minLength);
-        
-        // Store the color for the dataset
-        bubbleColors.push(backgroundColor);
-        
-        // Add the point
-        const point = { 
-          x, 
-          y, 
-          r
-        };
-        console.log(`Adding point ${i}:`, point);
-        bubblePoints.push(point);
-      }
-      
-      console.log('Generated bubble points:', bubblePoints);
-      console.log('Generated bubble points count:', bubblePoints.length);
-      console.log('Generated bubble colors count:', bubbleColors.length);
-      
-      // If we have no valid points, return empty array
-      if (bubblePoints.length === 0) {
-        console.log('No valid bubble points generated, returning empty dataset');
-        return [];
-      }
-      
-      // Create a single dataset with all bubble points
-      const bubbleDatasets: ChartDataset[] = [
-        {
-          data: bubblePoints,
-          label: label,
-          backgroundColor: bubbleColors,
-          borderColor: bubbleColors.map(color => this.replaceAlpha(color, 1)), // Slightly more opaque border
-          hoverBackgroundColor: bubbleColors.map(color => this.replaceAlpha(color, 0.9)),
-          hoverBorderColor: 'rgba(255, 255, 255, 1)',
-          borderWidth: 2,
-          pointHoverRadius: 10,
-        }
-      ];
-      
-      console.log('Transformed bubble data:', bubbleDatasets);
-      return bubbleDatasets;
-    }
-    
-    console.log('Could not transform data, returning empty dataset');
-    // Return empty dataset instead of default data
-    return [];
-  }
-
-  fetchChartData(): void {
-    // Set flag to prevent recursive calls
-    this.isFetchingData = true;
-    this.dataLoaded = false; // Mark data as not loaded yet
-    this.noDataAvailable = false; // Reset no data flag
-    
-    console.log('Starting fetchChartData, current state:', {
-      table: this.table,
-      xAxis: this.xAxis,
-      yAxis: this.yAxis,
-      connection: this.connection
-    });
-    
-    // If we're in drilldown mode, fetch the appropriate drilldown data
-    if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
-      console.log('Fetching drilldown data');
-      this.fetchDrilldownData();
-      // Reset flag after fetching
-      this.isFetchingData = false;
-      return;
-    }
-    
-    // If we have the necessary data, fetch chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching bubble chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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/bubble?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
-      console.log('Bubble 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
-      this.dashboardService.getChartData(this.table, 'bubble', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received bubble chart data:', data);
-          
-          // Reset chart data to empty first
-          this.bubbleChartData = [];
-          
-          if (data === null || data === undefined) {
-            console.warn('Bubble chart API returned null/undefined data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-          } else if (data && data.chartLabels && data.chartData) {
-            // For bubble charts, we need to transform the data into bubble format
-            // Bubble charts expect data in the format: {x: number, y: number, r: number}
-            console.log('Processing chartLabels and chartData format');
-            const transformedData = this.transformToBubbleData(data.chartLabels, data.chartData);
-            console.log('Transformed data:', transformedData);
-            
-            // Check if we have valid data
-            let hasValidData = false;
-            if (transformedData && transformedData.length > 0) {
-              for (const dataset of transformedData) {
-                if (dataset.data && dataset.data.length > 0) {
-                  hasValidData = true;
-                  break;
-                }
-              }
-            }
-            
-            if (hasValidData) {
-              // Create a new array reference to trigger change detection
-              this.bubbleChartData = [...transformedData];
-              this.noDataAvailable = false;
-              console.log('Updated bubble chart with data:', this.bubbleChartData);
-            } else {
-              console.log('No valid data after transformation');
-              this.noDataAvailable = true;
-            }
-          } else if (data && data.labels && data.datasets) {
-            // Handle the original expected format as fallback
-            console.log('Processing labels and datasets format');
-            // Check if we have valid data
-            let hasValidData = false;
-            if (data.datasets && data.datasets.length > 0) {
-              for (const dataset of data.datasets) {
-                if (dataset.data && dataset.data.length > 0) {
-                  hasValidData = true;
-                  break;
-                }
-              }
-            }
-            
-            if (hasValidData) {
-              // Create a new array reference to trigger change detection
-              this.bubbleChartData = [...data.datasets];
-              this.noDataAvailable = false;
-              console.log('Updated bubble chart with legacy data format:', this.bubbleChartData);
-            } else {
-              console.log('No valid data in legacy format');
-              this.noDataAvailable = true;
-            }
-          } else {
-            console.warn('Bubble chart received data does not have expected structure', data);
-            this.noDataAvailable = true;
-          }
-          
-          this.dataLoaded = true; // Mark data as loaded
-          
-          console.log('Final state after data fetch:', {
-            noDataAvailable: this.noDataAvailable,
-            dataLoaded: this.dataLoaded,
-            bubbleChartDataLength: this.bubbleChartData.length,
-            isChartDataValid: this.isChartDataValid()
-          });
-          
-          // Trigger change detection with a small delay to ensure proper rendering
-          setTimeout(() => {
-            this.forceChartUpdate();
-          }, 100);
-          
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        },
-        (error) => {
-          console.error('Error fetching bubble chart data:', error);
-          this.noDataAvailable = true;
-          this.bubbleChartData = [];
-          this.dataLoaded = true;
-          // Trigger change detection
-          setTimeout(() => {
-            this.forceChartUpdate();
-          }, 100);
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        }
-      );
-    } else {
-      console.log('Missing required data for bubble chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      this.noDataAvailable = true;
-      this.bubbleChartData = [];
-      this.dataLoaded = true;
-      // Trigger change detection
-      setTimeout(() => {
-        this.forceChartUpdate();
-      }, 100);
-      // 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.noDataAvailable = true;
-        this.bubbleChartData = [];
-        this.dataLoaded = true;
-        setTimeout(() => {
-          this.forceChartUpdate();
-        }, 100);
-        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.noDataAvailable = true;
-      this.bubbleChartData = [];
-      this.dataLoaded = true;
-      setTimeout(() => {
-        this.forceChartUpdate();
-      }, 100);
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // 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/bubble?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
-    console.log('Drilldown data URL:', url);
-    
-    // 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, 'bubble', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
-      (data: any) => {
-        console.log('Received drilldown data:', data);
-        
-        // Reset chart data to empty first
-        this.bubbleChartData = [];
-        
-        if (data === null || data === undefined) {
-          console.warn('Drilldown API returned null/undefined data. Check if the API endpoint is working correctly.');
-          this.noDataAvailable = true;
-        } else if (data && data.chartLabels && data.chartData) {
-          // For bubble charts, we need to transform the data into bubble format
-          const transformedData = this.transformToBubbleData(data.chartLabels, data.chartData);
-          
-          // Check if we have valid data
-          let hasValidData = false;
-          if (transformedData && transformedData.length > 0) {
-            for (const dataset of transformedData) {
-              if (dataset.data && dataset.data.length > 0) {
-                hasValidData = true;
-                break;
-              }
-            }
-          }
-          
-          if (hasValidData) {
-            this.bubbleChartData = transformedData;
-            this.noDataAvailable = false;
-            console.log('Updated bubble chart with drilldown data:', this.bubbleChartData);
-          } else {
-            console.log('No valid data after transformation in drilldown');
-            this.noDataAvailable = true;
-          }
-        } else if (data && data.labels && data.datasets) {
-          // Handle the original expected format as fallback
-          // Check if we have valid data
-          let hasValidData = false;
-          if (data.datasets && data.datasets.length > 0) {
-            for (const dataset of data.datasets) {
-              if (dataset.data && dataset.data.length > 0) {
-                hasValidData = true;
-                break;
-              }
-            }
-          }
-          
-          if (hasValidData) {
-            this.bubbleChartData = data.datasets;
-            this.noDataAvailable = false;
-            console.log('Updated bubble chart with drilldown legacy data format:', this.bubbleChartData);
-          } else {
-            console.log('No valid data in legacy format in drilldown');
-            this.noDataAvailable = true;
-          }
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-        }
-        
-        this.dataLoaded = true; // Mark data as loaded
-        
-        console.log('Final state after drilldown data fetch:', {
-          noDataAvailable: this.noDataAvailable,
-          dataLoaded: this.dataLoaded,
-          bubbleChartDataLength: this.bubbleChartData.length,
-          isChartDataValid: this.isChartDataValid()
-        });
-        
-        // Trigger change detection
-        setTimeout(() => {
-          this.forceChartUpdate();
-        }, 100);
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.bubbleChartData = [];
-        this.dataLoaded = true;
-        setTimeout(() => {
-          this.forceChartUpdate();
-        }, 100);
-      }
-    );
-  }
-  
-  // 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.originalBubbleChartData.length > 0) {
-      this.bubbleChartData = [...this.originalBubbleChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - data:', this.bubbleChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // events
-  public chartClicked(e: any): void {
-    console.log('Bubble chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the dataset index
-      const datasetIndex = e.active[0].datasetIndex;
-      
-      // Get the data point
-      const dataPoint = this.bubbleChartData[datasetIndex].data[clickedIndex];
-      
-      console.log('Clicked on bubble:', { 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.originalBubbleChartData = JSON.parse(JSON.stringify(this.bubbleChartData));
-        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,
-          datasetIndex: datasetIndex,
-          clickedIndex: clickedIndex,
-          dataPoint: dataPoint,
-          clickedValue: dataPoint // Using data point as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
-
-  public chartHovered(e: any): void {
-    console.log('Bubble chart hovered:', e);
-  }
-
-  // Method to check if chart data is valid
-  public isChartDataValid(): boolean {
-    console.log('Checking if chart data is valid:', this.bubbleChartData);
-    if (!this.bubbleChartData || this.bubbleChartData.length === 0) {
-      console.log('Chart data is null or empty');
-      return false;
-    }
-    
-    // Check if any dataset has data
-    for (const dataset of this.bubbleChartData) {
-      console.log('Checking dataset:', dataset);
-      if (dataset.data && dataset.data.length > 0) {
-        console.log('Dataset has data, length:', dataset.data.length);
-        // For bubble charts, check if data points have x, y, r properties
-        for (const point of dataset.data) {
-          console.log('Checking point:', point);
-          if (typeof point === 'object' && point.hasOwnProperty('x') && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
-            // Valid bubble point
-            console.log('Found valid bubble point');
-            return true;
-          }
-        }
-      }
-    }
-    
-    console.log('No valid chart data found');
-    return false;
-  }
-
-  // Method to force chart update
-  private forceChartUpdate(): void {
-    console.log('Forcing chart update');
-    console.log('Current bubbleChartData:', this.bubbleChartData);
-    console.log('Current bubbleChartData length:', this.bubbleChartData ? this.bubbleChartData.length : 0);
-    if (this.bubbleChartData && this.bubbleChartData.length > 0) {
-      console.log('First dataset data length:', this.bubbleChartData[0].data ? this.bubbleChartData[0].data.length : 0);
-    }
-    // Create a new reference to trigger change detection
-    if (this.bubbleChartData) {
-      this.bubbleChartData = [...this.bubbleChartData];
-    }
-    // Also update noDataAvailable to trigger UI changes
-    this.noDataAvailable = this.noDataAvailable;
-    console.log('Chart update forced, noDataAvailable:', this.noDataAvailable);
-    console.log('Chart update forced, bubbleChartData length:', this.bubbleChartData ? this.bubbleChartData.length : 0);
-    console.log('Chart update forced, isChartDataValid:', this.isChartDataValid());
-  }
-}
\ No newline at end of file
+	public chartHovered(e: any): void {
+		console.log(e);
+	}
+}
diff --git 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
index 1acc617..cab5b29 100644
--- 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,315 +1,8 @@
-<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">
-    <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]="isLoading">
-      <!-- Show no data message -->
-      <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 
-        [datasets]="doughnutChartData" 
-        [labels]="doughnutChartLabels" 
-        [type]="doughnutChartType"
-        [options]="doughnutChartOptions"
-        (chartHover)="chartHovered($event)"
-        (chartClick)="chartClicked($event)">
-      </canvas>
-      
-      <!-- Loading overlay -->
-      <div class="loading-overlay" *ngIf="isLoading">
-        <div class="shimmer-donut"></div>
-      </div>
-    </div>
-  </div>
-  
-  <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[0] && doughnutChartData[0].data && doughnutChartData[0].data[i] !== undefined ? doughnutChartData[0].data[i] : 0 }}</span>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+<div style="display: block">
+	<canvas baseChart 
+	[data]="doughnutChartData" 
+	[labels]="doughnutChartLabels" 
+	[type]="doughnutChartType" 
+	(chartHover)="chartHovered($event)"
+	(chartClick)="chartClicked($event)"></canvas>
+</div>
diff --git 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
index f682297..e69de29 100644
--- 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,343 +0,0 @@
-// Chart container structure - simplified to match shield dashboard
-.chart-container {
-  height: 100%;
-  min-height: 400px; // Ensure minimum height
-  display: flex;
-  flex-direction: column;
-  
-  // Filter section styling
-  .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;
-    }
-  }
-  
-  // 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 {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-// Responsive design
-@media (max-width: 768px) {
-  .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
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index 09fc78e..137455b 100644
--- 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
@@ -1,1132 +1,30 @@
-import { Component, OnInit, Input, OnChanges, SimpleChanges, AfterViewChecked, OnDestroy } from '@angular/core';
-import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
-import { FilterService } from '../../common-filter/filter.service';
-import { Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-doughnut-chart',
   templateUrl: './doughnut-chart.component.html',
   styleUrls: ['./doughnut-chart.component.scss']
 })
-export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class DoughnutChartComponent implements OnInit {
+  public doughnutChartLabels: string[] = [
+		"Download Sales",
+		"In-Store Sales",
+		"Mail-Order Sales"
+	];
+	public doughnutChartData: number[] = [350, 450, 100];
+	public doughnutChartType: string = "doughnut";
 
-  public doughnutChartLabels: string[] = ["Category A", "Category B", "Category C"];
-  public doughnutChartData: any[] = [
-    {
-      data: [30, 50, 20],
-      backgroundColor: [
-        '#FF6384',
-        '#36A2EB',
-        '#FFCE56'
-      ],
-      hoverBackgroundColor: [
-        '#FF6384',
-        '#36A2EB',
-        '#FFCE56'
-      ]
-    }
-  ];
-  public doughnutChartType: string = "doughnut";
-  public doughnutChartOptions: any = {
-    responsive: true,
-    maintainAspectRatio: false,
-    cutout: '60%', // This creates the doughnut effect (Chart.js v3+ syntax)
-    plugins: {
-      legend: {
-        display: false // We'll create our own legend
-      },
-      tooltip: {
-        enabled: true,
-        mode: 'index',
-        intersect: false,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        titleFont: {
-          size: 16,
-          color: '#fff'
-        },
-        bodyFont: {
-          size: 14,
-          color: '#fff'
-        },
-        cornerRadius: 4,
-        displayColors: false
-      }
-    },
-    animation: {
-      animateRotate: true,
-      animateScale: false
-    },
-    elements: {
-      arc: {
-        borderWidth: 2,
-        borderColor: '#fff'
-      }
-    },
-    layout: {
-      padding: {
-        top: 20,
-        bottom: 20,
-        left: 20,
-        right: 20
-      }
-    }
-  };
-  
-  // Chart colors for consistent styling
-  private chartColors: string[] = [
-    '#FF6384',
-    '#36A2EB',
-    '#FFCE56',
-    '#4BC0C0',
-    '#9966FF',
-    '#FF9F40',
-    '#FF6384',
-    '#C9CBCF'
-  ];
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalDoughnutChartLabels: string[] = [];
-  originalDoughnutChartData: number[] = [];
-  
-  // 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[] = [];
+	// events
+	public chartClicked(e: any): void {
+		console.log(e);
+	}
 
-  // 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
-  ) { }
+	public chartHovered(e: any): void {
+		console.log(e);
+	}
+  constructor() { }
 
   ngOnInit(): void {
-    // Subscribe to filter changes
-    this.subscriptions.push(
-      this.filterService.filterState$.subscribe(filters => {
-        // When filters change, refresh the chart data
-        this.fetchChartData();
-      })
-    );
-    
-    // Validate initial data
-    this.validateChartData();
-    // Only fetch data if we have the required inputs, otherwise show default data
-    if (this.table && this.xAxis && this.yAxis) {
-      this.fetchChartData();
-    }
-  }
-  
-  /**
-   * Validate and sanitize chart data
-   */
-  private validateChartData(): void {
-    // Ensure we have valid arrays
-    if (!Array.isArray(this.doughnutChartLabels)) {
-      this.doughnutChartLabels = [];
-    }
-    
-    if (!Array.isArray(this.doughnutChartData)) {
-      this.doughnutChartData = [];
-    }
-    
-    // Ensure we have some data to display
-    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 = [
-        {
-          data: [30, 50, 20],
-          backgroundColor: [
-            '#FF6384',
-            '#36A2EB',
-            '#FFCE56'
-          ],
-          hoverBackgroundColor: [
-            '#FF6384',
-            '#36A2EB',
-            '#FFCE56'
-          ]
-        }
-      ];
-    }
-    
-    // Ensure we have matching arrays
-    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}`);
-      }
-      if (this.doughnutChartData[0]) {
-        while (this.doughnutChartData[0].data.length < maxLength) {
-          this.doughnutChartData[0].data.push(0);
-        }
-      }
-    }
-  }
-  
-  /**
-   * Force chart redraw
-   */
-  public redrawChart(): void {
-    // This method can be called to force a chart redraw if needed
-    console.log('Redrawing doughnut chart');
   }
 
-  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      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() {
-    // Debugging: Log component state after view checks
-    console.log('DoughnutChartComponent state:', {
-      labels: this.doughnutChartLabels,
-      data: this.doughnutChartData,
-      hasData: this.doughnutChartLabels.length > 0 && this.doughnutChartData.length > 0
-    });
-  }
-
-  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
-  refreshData(): void {
-    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 flags after fetching
-      this.isFetchingData = false;
-      this.isLoading = false;
-      return;
-    }
-    
-    // If we have the necessary data, fetch chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching doughnut chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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/doughnut?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
-      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
-      this.dashboardService.getChartData(this.table, 'doughnut', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received doughnut chart data:', data);
-          if (data === null) {
-            console.warn('API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.doughnutChartLabels = [];
-            this.doughnutChartData = [];
-            // 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) {
-            // Backend has already filtered the data, just display it
-            this.noDataAvailable = data.chartLabels.length === 0;
-            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 {
-              chartDataValues = [data.chartData];
-            }
-            
-            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.datasets) {
-            // Backend has already filtered the data, just display it
-            this.noDataAvailable = data.labels.length === 0;
-            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('Received data does not have expected structure', data);
-            this.noDataAvailable = true;
-            // 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 flags after fetching
-          this.isFetchingData = false;
-          this.isLoading = false;
-        },
-        (error) => {
-          console.error('Error fetching doughnut chart data:', error);
-          this.noDataAvailable = true;
-          // 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 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;
-    }
-  }
-  
-  // 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.noDataAvailable = true;
-        this.doughnutChartLabels = [];
-        this.doughnutChartData = [];
-        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.noDataAvailable = true;
-      this.doughnutChartLabels = [];
-      this.doughnutChartData = [];
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // 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);
-    
-    // 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, 'doughnut', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).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.noDataAvailable = true;
-          this.doughnutChartLabels = [];
-          this.doughnutChartData = [];
-          return;
-        }
-        
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Backend has already filtered the data, just display it
-          this.noDataAvailable = data.chartLabels.length === 0;
-          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 {
-            chartDataValues = [data.chartData];
-          }
-          
-          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 });
-          // 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.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;
-          // 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;
-        // 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)
-  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.originalDoughnutChartLabels.length > 0) {
-      this.doughnutChartLabels = [...this.originalDoughnutChartLabels];
-      console.log('Restored original labels');
-    }
-    if (this.originalDoughnutChartData.length > 0) {
-      this.doughnutChartData = JSON.parse(JSON.stringify(this.originalDoughnutChartData));
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.doughnutChartLabels);
-    console.log('After reset - data:', this.doughnutChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // Get legend color for a specific index
-  getLegendColor(index: number): string {
-    return this.chartColors[index % this.chartColors.length];
-  }
-
-  // events
-  public chartClicked(e: any): void {
-    console.log('Doughnut chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.doughnutChartLabels[clickedIndex];
-      
-      console.log('Clicked on doughnut slice:', { 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.originalDoughnutChartLabels = [...this.doughnutChartLabels];
-        this.originalDoughnutChartData = [...this.doughnutChartData];
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
-
-  public chartHovered(e: any): void {
-    console.log('Doughnut chart hovered:', e);
-  }
-}
\ No newline at end of file
+}
diff --git 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
index b49f170..e00b379 100644
--- 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,319 +1,10 @@
-<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>
-    <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>
-  
-  <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
-  <div class="chart-wrapper">
-    <!-- Show loading indicator -->
-    <div class="loading-indicator" *ngIf="dynamicChartLabels.length === 0 && dynamicChartData.length === 0 && !noDataAvailable">
-      <div class="spinner"></div>
-      <p>Loading chart data...</p>
-    </div>
-    
-    <!-- Show no data message -->
-    <div class="no-data-message" *ngIf="noDataAvailable">
-      <p>No chart data available</p>
-    </div>
-    
-    <!-- Show chart when data is available -->
-    <canvas baseChart 
-      *ngIf="!noDataAvailable && dynamicChartLabels.length > 0 && dynamicChartData.length > 0"
-      [datasets]="dynamicChartData"
-      [options]="barChartOptions"
-      [type]="barChartType"
-      [labels]="dynamicChartLabels"
-      (chartHover)="chartHovered($event)"
-      (chartClick)="chartClicked($event)">
-    </canvas>
-  </div>
-  <button class="btn btn-primary" (click)="randomize()">Update</button>
-</div>
\ No newline at end of file
+<div style="display: block">
+  <canvas baseChart [datasets]="dynamicChartData"
+  [options]="barChartOptions"
+    [type]="barChartType"
+    [labels]="dynamicChartLabels"
+    (chartHover)="chartHovered($event)"
+    (chartClick)="chartClicked($event)">
+  </canvas>
+</div>
+<button class="btn btn-primary" (click)="randomize()">Update</button>
diff --git 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
index a9282e4..e69de29 100644
--- 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
@@ -1,192 +0,0 @@
-.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;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index 646685e..2173924 100644
--- 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
@@ -1,93 +1,18 @@
-import { Component, OnInit, ViewChild, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { ChartConfiguration, ChartData, ChartDataset } from 'chart.js';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ChartConfiguration, ChartData,  } 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',
   templateUrl: './dynamic-chart.component.html',
   styleUrls: ['./dynamic-chart.component.scss']
 })
-export class DynamicChartComponent implements OnInit, OnChanges {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class DynamicChartComponent implements OnInit {
 
-  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
-
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService
-  ) { }
+  constructor() { }
 
   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();
-  }
-  
-  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      this.fetchChartData();
-    }
   }
+  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
 
   public barChartOptions: ChartConfiguration['options'] = {
     elements: {
@@ -109,786 +34,37 @@ export class DynamicChartComponent implements OnInit, OnChanges {
   public dynamicChartLabels: string[] = [ '2006', '2007', '2008', '2009', '2010', '2011', '2012' ];
   public barChartType: string = 'bar';
 
+  // public barChartData: ChartData<'bar'> = {
+  //   labels: this.barChartLabels,
+  //   datasets: [
+  //     { data: [ 65, 59, 80, 81, 56, 55, 40 ], label: 'Series A' },
+  //     { data: [ 28, 48, 40, 19, 86, 27, 90 ], label: 'Series B' }
+  //   ]
+  // };
+
+
 	public dynamicChartData: any = [
 		{ data: [65, 59, 90, 81, 56, 55, 40], label: "Series A" },
 		{ data: [28, 48, 40, 19, 96, 27, 100], label: "Series B" }
 	];
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalDynamicChartLabels: string[] = [];
-  originalDynamicChartData: any = [];
-  
-  // No data state
-  noDataAvailable: boolean = false;
-  
-  // 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;
-    
-    // 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 chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching dynamic chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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}` : ''}`;
-      console.log('Dynamic 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
-      this.dashboardService.getChartData(this.table, 'dynamic', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received dynamic chart data:', data);
-          if (data === null) {
-            console.warn('Dynamic chart API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.dynamicChartLabels = [];
-            this.dynamicChartData = [];
-            // Reset flag after fetching
-            this.isFetchingData = false;
-            return;
-          }
-          
-          // Handle the actual data structure returned by the API
-          if (data && data.chartLabels && data.chartData) {
-            // Map the API response to the format expected by the chart
-            this.noDataAvailable = data.chartLabels.length === 0;
-            this.dynamicChartLabels = data.chartLabels;
-            this.dynamicChartData = data.chartData;
-            // Trigger change detection
-            this.dynamicChartData = [...this.dynamicChartData];
-            console.log('Updated dynamic chart with data:', { labels: this.dynamicChartLabels, data: this.dynamicChartData });
-          } else if (data && data.labels && data.datasets) {
-            // Handle the original expected format as fallback
-            this.noDataAvailable = data.labels.length === 0;
-            this.dynamicChartLabels = data.labels;
-            this.dynamicChartData = data.datasets;
-            // Trigger change detection
-            this.dynamicChartData = [...this.dynamicChartData];
-            console.log('Updated dynamic chart with legacy data format:', { labels: this.dynamicChartLabels, data: this.dynamicChartData });
-          } else {
-            console.warn('Dynamic chart received data does not have expected structure', data);
-            this.noDataAvailable = true;
-            this.dynamicChartLabels = [];
-            this.dynamicChartData = [];
-          }
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        },
-        (error) => {
-          console.error('Error fetching dynamic chart data:', error);
-          this.noDataAvailable = true;
-          this.dynamicChartLabels = [];
-          this.dynamicChartData = [];
-          // Reset flag after fetching
-          this.isFetchingData = false;
-          // Keep default data in case of error
-        }
-      );
-    } else {
-      console.log('Missing required data for dynamic chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      this.noDataAvailable = true;
-      this.dynamicChartLabels = [];
-      this.dynamicChartData = [];
-      // 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.noDataAvailable = true;
-        this.dynamicChartLabels = [];
-        this.dynamicChartData = [];
-        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.noDataAvailable = true;
-      this.dynamicChartLabels = [];
-      this.dynamicChartData = [];
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // Log the URL that will be called
-    const url = `chart/getdashjson/dynamic?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
-    console.log('Drilldown data URL:', url);
-    
-    // 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, 'dynamic', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).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.noDataAvailable = true;
-          this.dynamicChartLabels = [];
-          this.dynamicChartData = [];
-          return;
-        }
-        
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Map the API response to the format expected by the chart
-          this.noDataAvailable = data.chartLabels.length === 0;
-          this.dynamicChartLabels = data.chartLabels;
-          this.dynamicChartData = data.chartData;
-          // Trigger change detection
-          this.dynamicChartData = [...this.dynamicChartData];
-          console.log('Updated dynamic chart with drilldown data:', { labels: this.dynamicChartLabels, data: this.dynamicChartData });
-        } else if (data && data.labels && data.datasets) {
-          // Handle the original expected format as fallback
-          this.noDataAvailable = data.labels.length === 0;
-          this.dynamicChartLabels = data.labels;
-          this.dynamicChartData = data.datasets;
-          // Trigger change detection
-          this.dynamicChartData = [...this.dynamicChartData];
-          console.log('Updated dynamic chart with drilldown legacy data format:', { labels: this.dynamicChartLabels, data: this.dynamicChartData });
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-          this.dynamicChartLabels = [];
-          this.dynamicChartData = [];
-        }
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.dynamicChartLabels = [];
-        this.dynamicChartData = [];
-        // Keep current data in case of error
-      }
-    );
-  }
-  
-  // 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.originalDynamicChartLabels.length > 0) {
-      this.dynamicChartLabels = [...this.originalDynamicChartLabels];
-      console.log('Restored original labels');
-    }
-    if (this.originalDynamicChartData.length > 0) {
-      this.dynamicChartData = [...this.originalDynamicChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.dynamicChartLabels);
-    console.log('After reset - data:', this.dynamicChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
 
   // events
   public chartClicked(e: any): void {
-    console.log('Dynamic chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.dynamicChartLabels[clickedIndex];
-      
-      console.log('Clicked on dynamic chart 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.originalDynamicChartLabels = [...this.dynamicChartLabels];
-        this.originalDynamicChartData = [...this.dynamicChartData];
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
+		console.log(e);
+	}
+
+	public chartHovered(e: any): void {
+		console.log(e);
+	}
+  // public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
+  //   console.log(event, active);
+  // }
+
+  // public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
+  //   console.log(event, active);
+  // }
 
-  public chartHovered(e: any): void {
-    console.log(e);
-  }
-  
   public randomize(): void {
-    let _dynamicChartData: Array<any> = new Array(this.dynamicChartData.length);
-    for (let i = 0; i < this.dynamicChartData.length; i++) {
-      _dynamicChartData[i] = {data: new Array(this.dynamicChartData[i].data.length), label: this.dynamicChartData[i].label};
-      for (let j = 0; j < this.dynamicChartData[i].data.length; j++) {
-        _dynamicChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
-      }
-    }
-    this.dynamicChartData = _dynamicChartData;
+    this.barChartType = this.barChartType === 'bar' ? 'line' : 'bar';
   }
-  
-  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();
-  }
-}
\ No newline at end of file
+}
diff --git 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
index e4b9c59..56547d5 100644
--- 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,317 +1 @@
-<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>
-    <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>
-  
-  <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
-  <div class="chart-wrapper">
-    <!-- Show loading indicator -->
-    <div class="loading-indicator" *ngIf="financialChartLabels.length === 0 && financialChartData.length === 0 && !noDataAvailable">
-      <div class="spinner"></div>
-      <p>Loading chart data...</p>
-    </div>
-    
-    <!-- Show no data message -->
-    <div class="no-data-message" *ngIf="noDataAvailable">
-      <p>No chart data available</p>
-    </div>
-    
-    <!-- Show chart when data is available -->
-    <canvas baseChart 
-      *ngIf="!noDataAvailable && financialChartLabels.length > 0 && financialChartData.length > 0"
-      [datasets]="financialChartData"
-      [labels]="financialChartLabels"
-      [type]="financialChartType"
-      (chartHover)="chartHovered($event)"
-      (chartClick)="chartClicked($event)">
-    </canvas>
-  </div>
-</div>
\ No newline at end of file
+<p>financial-chart works!</p>
diff --git 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
index a9282e4..e69de29 100644
--- 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,192 +0,0 @@
-.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;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index 2528fba..664e7cd 100644
--- 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,1088 +1,15 @@
-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';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-financial-chart',
   templateUrl: './financial-chart.component.html',
   styleUrls: ['./financial-chart.component.scss']
 })
-export class FinancialChartComponent implements OnInit, OnChanges {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class FinancialChartComponent implements OnInit {
 
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService,
-    private alertService: AlertsService
-  ) { }
+  constructor() { }
 
   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();
-  }
-  
-  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      this.fetchChartData();
-    }
-  }
-  
-  // Default financial chart data
-  public financialChartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  public financialChartData: any[] = [
-    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Revenue' },
-    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Expenses' }
-  ];
-  public financialChartType: string = 'line';
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalFinancialChartLabels: string[] = [];
-  originalFinancialChartData: any[] = [];
-  
-  // No data state
-  noDataAvailable: boolean = false;
-  
-  // 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;
-    
-    // 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 chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching financial chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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}` : ''}`;
-      console.log('Financial 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
-      this.dashboardService.getChartData(this.table, 'financial', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received financial chart data:', data);
-          if (data === null) {
-            console.warn('Financial chart API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.financialChartLabels = [];
-            this.financialChartData = [];
-            // Reset flag after fetching
-            this.isFetchingData = false;
-            return;
-          }
-          
-          // Handle the actual data structure returned by the API
-          if (data && data.chartLabels && data.chartData) {
-            // Map the API response to the format expected by the chart
-            this.noDataAvailable = data.chartLabels.length === 0;
-            this.financialChartLabels = data.chartLabels;
-            this.financialChartData = data.chartData.map(dataset => ({
-              ...dataset,
-              data: dataset.data ? dataset.data.map(value => {
-                // Convert to number if it's not already
-                return isNaN(Number(value)) ? 0 : Number(value);
-              }) : []
-            }));
-            // Trigger change detection
-            this.financialChartData = [...this.financialChartData];
-            console.log('Updated financial chart with data:', { labels: this.financialChartLabels, data: this.financialChartData });
-          } else if (data && data.labels && data.datasets) {
-            // Handle the original expected format as fallback
-            this.noDataAvailable = data.labels.length === 0;
-            this.financialChartLabels = data.labels;
-            this.financialChartData = data.datasets.map(dataset => ({
-              ...dataset,
-              data: dataset.data ? dataset.data.map(value => {
-                // Convert to number if it's not already
-                return isNaN(Number(value)) ? 0 : Number(value);
-              }) : []
-            }));
-            // Trigger change detection
-            this.financialChartData = [...this.financialChartData];
-            console.log('Updated financial chart with legacy data format:', { labels: this.financialChartLabels, data: this.financialChartData });
-          } else {
-            console.warn('Financial chart received data does not have expected structure', data);
-            this.noDataAvailable = true;
-            this.financialChartLabels = [];
-            this.financialChartData = [];
-          }
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        },
-        (error) => {
-          console.error('Error fetching financial chart data:', error);
-          this.noDataAvailable = true;
-          this.financialChartLabels = [];
-          this.financialChartData = [];
-          // Reset flag after fetching
-          this.isFetchingData = false;
-          // Keep default data in case of error
-        }
-      );
-    } else {
-      console.log('Missing required data for financial chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      this.noDataAvailable = true;
-      this.financialChartLabels = [];
-      this.financialChartData = [];
-      // 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.noDataAvailable = true;
-        this.financialChartLabels = [];
-        this.financialChartData = [];
-        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.noDataAvailable = true;
-      this.financialChartLabels = [];
-      this.financialChartData = [];
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // Log the URL that will be called
-    const url = `chart/getdashjson/financial?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
-    console.log('Drilldown data URL:', url);
-    
-    // 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, 'financial', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).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.noDataAvailable = true;
-          this.financialChartLabels = [];
-          this.financialChartData = [];
-          return;
-        }
-        
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Map the API response to the format expected by the chart
-          this.noDataAvailable = data.chartLabels.length === 0;
-          this.financialChartLabels = data.chartLabels;
-          this.financialChartData = data.chartData.map(dataset => ({
-            ...dataset,
-            data: dataset.data ? dataset.data.map(value => {
-              // Convert to number if it's not already
-              return isNaN(Number(value)) ? 0 : Number(value);
-            }) : []
-          }));
-          // Trigger change detection
-          this.financialChartData = [...this.financialChartData];
-          console.log('Updated financial chart with drilldown data:', { labels: this.financialChartLabels, data: this.financialChartData });
-        } else if (data && data.labels && data.datasets) {
-          // Handle the original expected format as fallback
-          this.noDataAvailable = data.labels.length === 0;
-          this.financialChartLabels = data.labels;
-          this.financialChartData = data.datasets.map(dataset => ({
-            ...dataset,
-            data: dataset.data ? dataset.data.map(value => {
-              // Convert to number if it's not already
-              return isNaN(Number(value)) ? 0 : Number(value);
-            }) : []
-          }));
-          // Trigger change detection
-          this.financialChartData = [...this.financialChartData];
-          console.log('Updated financial chart with drilldown legacy data format:', { labels: this.financialChartLabels, data: this.financialChartData });
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-          this.financialChartLabels = [];
-          this.financialChartData = [];
-        }
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.financialChartLabels = [];
-        this.financialChartData = [];
-        // Keep current data in case of error
-      }
-    );
-  }
-  
-  // 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.originalFinancialChartLabels.length > 0) {
-      this.financialChartLabels = [...this.originalFinancialChartLabels];
-      console.log('Restored original labels');
-    }
-    if (this.originalFinancialChartData.length > 0) {
-      this.financialChartData = [...this.originalFinancialChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.financialChartLabels);
-    console.log('After reset - data:', this.financialChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
   }
 
-  // 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();
-    }
-  }
-
-  // events
-  public chartClicked(e: any): void {
-    console.log('Financial chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.financialChartLabels[clickedIndex];
-      
-      console.log('Clicked on financial chart 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.originalFinancialChartLabels = [...this.financialChartLabels];
-        this.originalFinancialChartData = [...this.financialChartData];
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
-
-  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);
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
+}
diff --git 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
index 67590d9..94c1edc 100644
--- 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,306 +1,62 @@
 <div style="display: block;">
-  <div class="dg-wrapper">
-    <!-- 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="dg-wrapper">
     <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 class="clr-col-8">
+        <h3>User Group Maintenance</h3>
       </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>
-        <div *ngIf="error;else loadingSpinner">{{error}}</div>
-      </clr-dg-placeholder>
-
-      <!-- Dynamic columns based on response keys -->
-      <clr-dg-column *ngFor="let header of dynamicHeaders" [clrDgField]="header.key"> 
-        <ng-container *clrDgHideableColumn="{hidden: false}">
-          {{header.displayName}}
-        </ng-container>
-      </clr-dg-column>
-
-      <clr-dg-row *clrDgItems="let item of givendata" [clrDgItem]="item">
-        <!-- Dynamic cells based on response keys -->
-        <clr-dg-cell *ngFor="let header of dynamicHeaders" (click)="onRowClick(item, header.key)">
-          {{item[header.key]}}
-        </clr-dg-cell>
+      <clr-dg-placeholder> <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+        <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
+  
+      <clr-dg-column [clrDgField]="'usrGrp'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        User Group No
+      </ng-container></clr-dg-column>
+      <clr-dg-column [clrDgField]="'groupName'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Group Name
+      </ng-container></clr-dg-column>
+      <clr-dg-column [clrDgField]="'groupDesc'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        Description
+        </ng-container></clr-dg-column >
+      <clr-dg-column [clrDgField]="'groupLevel'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Group Level
+      </ng-container></clr-dg-column>
+      <clr-dg-column [clrDgField]="'status'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Status
+      </ng-container></clr-dg-column>
+      <!-- <clr-dg-column [clrDgField]="'usrGrp'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        User Group
+      </ng-container></clr-dg-column> -->
+      <clr-dg-column [clrDgField]="'updateDateFormated'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Updated Date
+      </ng-container></clr-dg-column>
+  
+  
+      <clr-dg-row *clrDgItems="let user of givendata?.slice()?.reverse();let i = index" [clrDgItem]="user">
+        <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell>
+        <clr-dg-cell>{{user.groupName}}</clr-dg-cell>
+        <clr-dg-cell >{{user.groupDesc}}</clr-dg-cell>
+        <clr-dg-cell>{{user.groupLevel}}</clr-dg-cell>
+        <clr-dg-cell>{{user.status}}</clr-dg-cell>
+        <!-- <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell> -->
+        <clr-dg-cell>{{user.updateDateFormated}}</clr-dg-cell>
+  
+        <!-- <clr-dg-action-overflow>
+  
+        </clr-dg-action-overflow> -->
+  
+        <!-- <clr-dg-row-detail *clrIfExpanded>
+          <table class="table">
+            <tr>
+              <td class="td-title">username</td>
+              <td class="td-content">{{user.groupName}}</td>
+            </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]">Record per page</clr-dg-page-size>
@@ -309,5 +65,5 @@
         </clr-dg-pagination>
       </clr-dg-footer>
     </clr-datagrid>
-  </div>
-</div>
\ No newline at end of file
+</div>
+  </div>
\ No newline at end of file
diff --git 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
index a2d9ba4..99c5f44 100644
--- 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,180 +1,12 @@
-.filter-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background-color: #f9f9f9;
+@import '../../../../../../../styles1.scss';
+input.ng-invalid.ng-touched {
+  border-color: red;
 }
 
-.filter-group {
-  margin-bottom: 15px;
-  
-  h4 {
-    margin-top: 0;
-    margin-bottom: 10px;
-    color: #333;
-    font-weight: 600;
-  }
+.error_mess {
+  color: red;
 }
-
-.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;
+clr-datagrid{
+    height: 400px; /* Adjust the height as needed */
   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%;
-  }
 }
\ No newline at end of file
diff --git 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
index bccaa81..dfb2de1 100644
--- 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,980 +1,54 @@
-import { Component, OnInit, Input, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ExcelService } from 'src/app/services/excel.service';
+import * as moment from 'moment';
 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';
-
+import { ToastrService } from 'ngx-toastr';
+import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
 @Component({
   selector: 'app-grid-view',
   templateUrl: './grid-view.component.html',
   styleUrls: ['./grid-view.component.scss']
 })
-export class GridViewComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
-
+export class GridViewComponent implements OnInit {
   loading = false;
-  givendata: any[] = [];
+  public entryForm: FormGroup;
+  givendata;
   orders;
-  error: string;
-  modalAdd = false;
-  modaledit = false;
-  modaldelete = false;
-  rowSelected: any = {};
+  error;
+  modalAdd= false;
+  modaledit=false;
+  modaldelete=false;
+  rowSelected :any= {};
   mcreate;
   medit;
   showdata;
-  submitted = false;
-  dynamicHeaders: any[] = [];
-
-  // 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;
+  submitted=false;
 
   constructor(
-    private mainservice: UsergrpmaintainceService,
-    private dashboardService: Dashboard3Service,
-    // Add FilterService to constructor
-    private filterService: FilterService
+    private excel: ExcelService,
+    private toastr:ToastrService,
+    private _fb: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private menuGroupService: MenuGroupService,
+    private mainservice:UsergrpmaintainceService,
   ) { }
 
   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();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log('GridViewComponent input changes:', changes);
-
-    // Check if any of the key properties have changed
-    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;
-    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 (!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
+    this.mainservice.getAll().subscribe((data) => {
+      console.log(data);
+      this.givendata = data;
+      if(this.givendata.length==0){
+        this.error="No data Available";
+        console.log(this.error)
+      }
+    },(error) => {
+      console.log(error);
+      if(error){
+       this.error="Server Error";
+     }
     });
   }
-
-  // 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) {
-    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, '', '', 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
-      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;
-          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
-   */
-  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>();
-      dataArray.forEach(item => {
-        if (item && typeof item === 'object') {
-          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
-   */
-  private formatHeader(key: string): string {
-    // Convert camelCase to Title Case
-    return key
-      .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');
-  }
-}
\ No newline at end of file
+}
diff --git 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
index 8d9331b..18c620d 100644
--- 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,299 +1,12 @@
-<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 -->
-  <div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;">
-    No data available
-  </div>
-  
-  <!-- Chart display -->
-  <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)"
-                (chartClick)="chartClicked($event)"></canvas>
-  </div>
+<div style="display: block;">
+  <canvas baseChart
+              [datasets]="lineChartData"
+              [labels]="lineChartLabels"
+              [options]="lineChartOptions"
+         
+              [legend]="lineChartLegend"
+              [type]="lineChartType"
+              (chartHover)="chartHovered($event)"
+              (chartClick)="chartClicked($event)"></canvas>
 </div>
 <!--     [color]="lineChartColors"-->
\ No newline at end of file
diff --git 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
index a9282e4..e69de29 100644
--- 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
@@ -1,192 +0,0 @@
-.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;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index bdee0d6..3eaad81 100644
--- 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
@@ -1,964 +1,71 @@
-import { Component, OnInit, Input, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
-import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
-import { FilterService } from '../../common-filter/filter.service';
-import { Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-line-chart',
   templateUrl: './line-chart.component.html',
   styleUrls: ['./line-chart.component.scss']
 })
-export class LineChartComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class LineChartComponent implements OnInit {
+  public lineChartData:Array<any> = [
+		{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
+		{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
+		{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
+	  ];
+	  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+	  public lineChartOptions:any = {
+		responsive: true
+	  };
+	  public lineChartColors:Array<any> = [
+		{ // grey
+		  backgroundColor: 'rgba(148,159,177,0.2)',
+		  borderColor: 'rgba(148,159,177,1)',
+		  pointBackgroundColor: 'rgba(148,159,177,1)',
+		  pointBorderColor: '#fff',
+		  pointHoverBackgroundColor: '#fff',
+		  pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+		},
+		{ // dark grey
+		  backgroundColor: 'rgba(77,83,96,0.2)',
+		  borderColor: 'rgba(77,83,96,1)',
+		  pointBackgroundColor: 'rgba(77,83,96,1)',
+		  pointBorderColor: '#fff',
+		  pointHoverBackgroundColor: '#fff',
+		  pointHoverBorderColor: 'rgba(77,83,96,1)'
+		},
+		{ // grey
+		  backgroundColor: 'rgba(148,159,177,0.2)',
+		  borderColor: 'rgba(148,159,177,1)',
+		  pointBackgroundColor: 'rgba(148,159,177,1)',
+		  pointBorderColor: '#fff',
+		  pointHoverBackgroundColor: '#fff',
+		  pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+		}
+	  ];
+	  public lineChartLegend:boolean = true;
+	  public lineChartType:string = 'line';
 
-  public lineChartData: Array<any> = [
-    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
-    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
-    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
-  ];
-  public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  public lineChartOptions: any = {
-    responsive: true
-  };
-  public lineChartColors: Array<any> = [
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
-    },
-    { // dark grey
-      backgroundColor: 'rgba(77,83,96,0.2)',
-      borderColor: 'rgba(77,83,96,1)',
-      pointBackgroundColor: 'rgba(77,83,96,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(77,83,96,1)'
-    },
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
-    }
-  ];
-  public lineChartLegend: boolean = true;
-  public lineChartType: string = 'line';
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalLineChartLabels: Array<any> = [];
-  originalLineChartData: Array<any> = [];
-  
-  // No data state
-  noDataAvailable: boolean = false;
-  
-  // Flag to prevent infinite loops
-  private isFetchingData: boolean = false;
-  
-  // Subscriptions to unsubscribe on destroy
-  private subscriptions: Subscription[] = [];
+	  public randomize():void {
+		let _lineChartData:Array<any> = new Array(this.lineChartData.length);
+		for (let i = 0; i < this.lineChartData.length; i++) {
+		  _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
+		  for (let j = 0; j < this.lineChartData[i].data.length; j++) {
+			_lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
+		  }
+		}
+		this.lineChartData = _lineChartData;
+	  }
 
-  // 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;
+	  // events
+	  public chartClicked(e:any):void {
+		console.log(e);
+	  }
 
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService
-  ) { }
+	  public chartHovered(e:any):void {
+		console.log(e);
+	  }
+  constructor() { }
 
   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();
   }
 
-  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      this.fetchChartData();
-    }
-    
-    // Update legend visibility if it changed
-    if (changes.chartlegend !== undefined) {
-      this.lineChartLegend = changes.chartlegend.currentValue;
-      console.log('Chart legend changed to:', this.lineChartLegend);
-    }
-  }
-
-  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
-  refreshData(): void {
-    this.fetchChartData();
-  }
-  
-  fetchChartData(): 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 chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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/line?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
-      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
-      this.dashboardService.getChartData(this.table, 'line', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received chart data:', data);
-          if (data === null) {
-            console.warn('API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.lineChartLabels = [];
-            this.lineChartData = [];
-            // Reset flag after fetching
-            this.isFetchingData = false;
-            return;
-          }
-          
-          // Handle the actual data structure returned by the API
-          if (data && data.chartLabels && data.chartData) {
-            // Backend has already filtered the data, just display it
-            this.noDataAvailable = data.chartLabels.length === 0;
-            this.lineChartLabels = data.chartLabels;
-            this.lineChartData = data.chartData;
-            // Trigger change detection
-            this.lineChartData = [...this.lineChartData];
-            console.log('Updated line chart with data:', { labels: this.lineChartLabels, data: this.lineChartData });
-          } else if (data && data.labels && data.datasets) {
-            // Backend has already filtered the data, just display it
-            this.noDataAvailable = data.labels.length === 0;
-            this.lineChartLabels = data.labels;
-            this.lineChartData = data.datasets;
-            // Trigger change detection
-            this.lineChartData = [...this.lineChartData];
-            console.log('Updated line chart with legacy data format:', { labels: this.lineChartLabels, data: this.lineChartData });
-          } else {
-            console.warn('Received data does not have expected structure', data);
-            this.noDataAvailable = true;
-            this.lineChartLabels = [];
-            this.lineChartData = [];
-          }
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        },
-        (error) => {
-          console.error('Error fetching chart data:', error);
-          this.noDataAvailable = true;
-          this.lineChartLabels = [];
-          this.lineChartData = [];
-          // Reset flag after fetching
-          this.isFetchingData = false;
-          // Keep default data in case of error
-        }
-      );
-    } else {
-      console.log('Missing required data for chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      this.noDataAvailable = true;
-      this.lineChartLabels = [];
-      this.lineChartData = [];
-      // 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.noDataAvailable = true;
-        this.lineChartLabels = [];
-        this.lineChartData = [];
-        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.noDataAvailable = true;
-      this.lineChartLabels = [];
-      this.lineChartData = [];
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // 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/line?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
-    console.log('Drilldown data URL:', url);
-    
-    // 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, 'line', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).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.noDataAvailable = true;
-          this.lineChartLabels = [];
-          this.lineChartData = [];
-          return;
-        }
-        
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Backend has already filtered the data, just display it
-          this.noDataAvailable = data.chartLabels.length === 0;
-          this.lineChartLabels = data.chartLabels;
-          this.lineChartData = data.chartData;
-          // Trigger change detection
-          this.lineChartData = [...this.lineChartData];
-          console.log('Updated line chart with drilldown data:', { labels: this.lineChartLabels, data: this.lineChartData });
-        } else if (data && data.labels && data.datasets) {
-          // Backend has already filtered the data, just display it
-          this.noDataAvailable = data.labels.length === 0;
-          this.lineChartLabels = data.labels;
-          this.lineChartData = data.datasets;
-          // Trigger change detection
-          this.lineChartData = [...this.lineChartData];
-          console.log('Updated line chart with drilldown legacy data format:', { labels: this.lineChartLabels, data: this.lineChartData });
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-          this.lineChartLabels = [];
-          this.lineChartData = [];
-        }
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.lineChartLabels = [];
-        this.lineChartData = [];
-        // Keep current data in case of error
-      }
-    );
-  }
-  
-  // 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.originalLineChartLabels.length > 0) {
-      this.lineChartLabels = [...this.originalLineChartLabels];
-      console.log('Restored original labels');
-    }
-    if (this.originalLineChartData.length > 0) {
-      this.lineChartData = [...this.originalLineChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.lineChartLabels);
-    console.log('After reset - data:', this.lineChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // Ensure labels and data arrays have the same length
-  private syncLabelAndDataArrays(): void {
-    // For line charts, we need to ensure all datasets have the same number of data points
-    if (this.lineChartData && this.lineChartData.length > 0 && this.lineChartLabels) {
-      const labelCount = this.lineChartLabels.length;
-      
-      this.lineChartData.forEach(dataset => {
-        if (dataset.data) {
-          // If dataset has more data points than labels, truncate the data
-          if (dataset.data.length > labelCount) {
-            dataset.data = dataset.data.slice(0, labelCount);
-          }
-          // If dataset has fewer data points than labels, pad with zeros
-          else if (dataset.data.length < labelCount) {
-            while (dataset.data.length < labelCount) {
-              dataset.data.push(0);
-            }
-          }
-        }
-      });
-    }
-  }
-
-  public randomize(): void {
-    let _lineChartData: Array<any> = new Array(this.lineChartData.length);
-    for (let i = 0; i < this.lineChartData.length; i++) {
-      _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
-      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
-        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
-      }
-    }
-    this.lineChartData = _lineChartData;
-  }
-
-  // events
-  public chartClicked(e: any): void {
-    console.log('Line chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.lineChartLabels[clickedIndex];
-      
-      console.log('Clicked on line 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.originalLineChartLabels = [...this.lineChartLabels];
-        this.originalLineChartData = [...this.lineChartData];
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
-
-  public chartHovered(e: any): void {
-    console.log(e);
-  }
-}
\ No newline at end of file
+}
diff --git 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
index 0e9c001..ef42eed 100644
--- 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,312 +1,9 @@
-<div class="pie-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" *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 class="chart-wrapper">
-    <!-- Show loading indicator -->
-    <div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable && !isFetchingData">
-      <div class="spinner"></div>
-      <p>Loading chart data...</p>
-    </div>
-    
-    <!-- Show no data message -->
-    <div class="no-data-message" *ngIf="noDataAvailable && pieChartLabels.length === 0">
-      <p>No chart data available</p>
-    </div>
-    
-    <!-- Show chart when data is available or show default data -->
-    <canvas baseChart 
-      [datasets]="pieChartDatasets" 
-      [labels]="pieChartLabels" 
-      [type]="pieChartType"
-      [options]="pieChartOptions"
-      (chartHover)="chartHovered($event)"
-      (chartClick)="chartClicked($event)"
-      [style.display]="shouldShowChart() ? 'block' : 'none'">
-    </canvas>
-  </div>
-  <div class="chart-legend" *ngIf="showlabel && pieChartLabels && pieChartLabels.length > 0">
-    <div class="legend-item" *ngFor="let label of pieChartLabels; let i = index">
-      <span class="legend-color" [style.background-color]="getLegendColor(i)"></span>
-      <span class="legend-label">{{ label }}</span>
-      <span class="legend-value">{{ pieChartData && pieChartData[i] !== undefined ? pieChartData[i] : 0 }}</span>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+<div style="display: block;">
+  <canvas baseChart
+  [data]="pieChartData"
+  [labels]="pieChartLabels"
+  [type]="pieChartType"
+  (chartHover)="chartHovered($event)"
+  (chartClick)="chartClicked($event)">
+</canvas>
+</div>
diff --git 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
index de8a953..e69de29 100644
--- 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
@@ -1,378 +0,0 @@
-.pie-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;
-}
-
-.pie-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;
-  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);
-}
-
-.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-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);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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); }
-}
-
-// 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 {
-    font-size: 20px;
-    margin-bottom: 15px;
-  }
-  
-  .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;
-  }
-  
-  .filter-controls {
-    flex-direction: column;
-  }
-  
-  .filter-item {
-    min-width: 100%;
-  }
-  
-  .header-row {
-    .chart-title {
-      font-size: 16px;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index eabb63c..a6647a6 100644
--- 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
@@ -1,1058 +1,27 @@
-import { Component, OnInit, Input, OnChanges, SimpleChanges, AfterViewChecked, OnDestroy } from '@angular/core';
-import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
-import { FilterService } from '../../common-filter/filter.service';
-import { Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-pie-chart',
   templateUrl: './pie-chart.component.html',
   styleUrls: ['./pie-chart.component.scss']
 })
-export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class PieChartComponent implements OnInit {
 
-  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,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: false // We'll create our own legend
-      },
-      tooltip: {
-        enabled: true,
-        mode: 'index',
-        intersect: false,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        titleFont: {
-          size: 16,
-          color: '#fff'
-        },
-        bodyFont: {
-          size: 14,
-          color: '#fff'
-        },
-        cornerRadius: 4,
-        displayColors: false
-      }
-    },
-    animation: {
-      animateRotate: true,
-      animateScale: false
-    },
-    elements: {
-      arc: {
-        borderWidth: 2,
-        borderColor: '#fff'
-      }
-    }
-  };
-  
-  // Chart colors for consistent styling
-  private chartColors: string[] = [
-    '#FF6384',
-    '#36A2EB',
-    '#FFCE56',
-    '#4BC0C0',
-    '#9966FF',
-    '#FF9F40',
-    '#FF6384',
-    '#C9CBCF'
-  ];
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalPieChartLabels: string[] = [];
-  originalPieChartData: number[] = [];
-  
-  // No data state
-  noDataAvailable: boolean = false;
-  
-  // Flag to prevent infinite loops
-   isFetchingData: boolean = false;
-  
-  // Subscriptions to unsubscribe on destroy
-  private subscriptions: Subscription[] = [];
+  constructor() { }
 
-  // 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
-  ) { }
-
-  /**
-   * Force chart redraw
-   */
-  public redrawChart(): void {
-    // This method can be called to force a chart redraw if needed
-    console.log('Redrawing pie chart');
-    this.pieChartData = [...this.pieChartData];
-  }
-  
   ngOnInit(): void {
-    // Subscribe to filter changes
-    this.subscriptions.push(
-      this.filterService.filterState$.subscribe(filters => {
-        // When filters change, refresh the chart data
-        this.fetchChartData();
-      })
-    );
-    
-    console.log('PieChartComponent initialized with default data:', { labels: this.pieChartLabels, data: this.pieChartData });
-    // Validate initial data
-    this.validateChartData();
-    // 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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      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
-  refreshData(): void {
-    this.fetchChartData();
-  }
-  
-  fetchChartData(): 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 chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching pie chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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/pie?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
-      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
-      this.dashboardService.getChartData(this.table, 'pie', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received pie chart data:', data);
-          if (data === null) {
-            console.warn('API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            // Reset flag after fetching
-            this.isFetchingData = false;
-            return;
-          }
-          
-          // Handle the actual data structure returned by the API
-          if (data && data.chartLabels && data.chartData) {
-            // Backend has already filtered the data, just display it
-            this.noDataAvailable = data.chartLabels.length === 0;
-            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 = [];
-            }
-            
-            // 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.datasets) {
-            // Backend has already filtered the data, just display it
-            this.noDataAvailable = data.labels.length === 0;
-            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('Received data does not have expected structure', data);
-            this.noDataAvailable = true;
-            // 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;
-        },
-        (error) => {
-          console.error('Error fetching pie chart data:', error);
-          this.noDataAvailable = true;
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        }
-      );
-    } else {
-      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;
-    }
-  }
-  
-  // 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.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.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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // 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/pie?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
-    console.log('Drilldown data URL:', url);
-    
-    // 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, 'pie', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).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.noDataAvailable = true;
-          return;
-        }
-        
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Backend has already filtered the data, just display it
-          this.noDataAvailable = data.chartLabels.length === 0;
-          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 = [];
-          }
-          
-          // 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.datasets) {
-          // Backend has already filtered the data, just display it
-          this.noDataAvailable = data.labels.length === 0;
-          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;
-          // Keep current data if no data is available
-        }
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        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.originalPieChartLabels.length > 0) {
-      this.pieChartLabels = [...this.originalPieChartLabels];
-      console.log('Restored original labels');
-    }
-    if (this.originalPieChartData.length > 0) {
-      this.pieChartData = [...this.originalPieChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.pieChartLabels);
-    console.log('After reset - data:', this.pieChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // 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);
-        }
-      }
-    }
-  }
-
-  // Get legend color for a specific index
-  getLegendColor(index: number): string {
-    return this.chartColors[index % this.chartColors.length];
-  }
-  
-  // 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;
-    }
-    
-    // Show chart if we're still fetching data
-    if (this.isFetchingData) {
-      return true;
-    }
-    
-    // Show chart if we have default data
-    if (this.pieChartLabels.length > 0 && this.originalPieChartLabels.length > 0) {
-      return true;
-    }
-    
-    return false;
   }
+  public pieChartLabels: string[] = ['SciFi', 'Drama', 'Comedy'];
+  public pieChartData: number[] = [30, 50, 20];
+  public pieChartType: string = 'pie';
 
   // events
-  public chartClicked(e: any): void {
-    console.log('Pie chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.pieChartLabels[clickedIndex];
-      
-      console.log('Clicked on pie slice:', { 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.originalPieChartLabels = [...this.pieChartLabels];
-        this.originalPieChartData = [...this.pieChartData];
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
+	public chartClicked(e: any): void {
+		console.log(e);
+	}
 
-  public chartHovered(e: any): void {
-    console.log('Pie chart hovered:', e);
-  }
+	public chartHovered(e: any): void {
+		console.log(e);
+	}
 
-  ngAfterViewChecked(): void {
-    // This lifecycle hook can be used if needed for post-render operations
-  }
-}    
\ No newline at end of file
+}
diff --git 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
index 080c7c4..421e078 100644
--- 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,292 +1,10 @@
-<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>
\ No newline at end of file
+
+<div style="display: block">
+  <canvas baseChart
+    [datasets]="polarAreaChartData"
+    [labels]="polarAreaChartLabels"
+    [type]="polarAreaChartType"
+    (chartHover)="chartHovered($event)"
+   (chartClick)="chartClicked($event)">
+  </canvas>
+</div>
diff --git 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
index a9282e4..e69de29 100644
--- 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,192 +0,0 @@
-.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;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index 18f6ee6..56652fe 100644
--- 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,1018 +1,37 @@
-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 { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-polar-chart',
   templateUrl: './polar-chart.component.html',
   styleUrls: ['./polar-chart.component.scss']
 })
-export class PolarChartComponent implements OnInit, OnChanges {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class PolarChartComponent implements OnInit {
 
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService
-  ) { }
+  constructor() { }
 
   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();
   }
-  
-  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      this.fetchChartData();
-    }
-  }
-  
   public polarAreaChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales' ];
   public polarAreaChartData: any = [
     { 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
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalPolarAreaChartLabels: string[] = [];
-  originalPolarAreaChartData: any = [];
-  
-  // No data state
-  noDataAvailable: 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;
-  
-  // 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;
-    
-    // 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 chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching polar chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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}` : ''}`;
-      console.log('Polar 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
-      this.dashboardService.getChartData(this.table, 'polar', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received polar chart data:', data);
-          if (data === null) {
-            console.warn('Polar chart API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.polarAreaChartLabels = [];
-            this.polarAreaChartData = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-            // Reset flag after fetching
-            this.isFetchingData = false;
-            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) {
-              // 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 = [
-                {
-                  data: [],
-                  label: 'Dataset 1'
-                }
-              ];
-            }
-            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;
-            // 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'
-              }
-            ];
-            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 = [
-              {
-                data: [],
-                label: 'Dataset 1'
-              }
-            ];
-          }
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        },
-        (error) => {
-          console.error('Error fetching polar chart data:', error);
-          this.noDataAvailable = true;
-          this.polarAreaChartLabels = [];
-          this.polarAreaChartData = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-          // Reset flag after fetching
-          this.isFetchingData = false;
-          // Keep default data in case of error
-        }
-      );
-    } else {
-      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 = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-      // 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.noDataAvailable = true;
-        this.polarAreaChartLabels = [];
-        this.polarAreaChartData = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-        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.noDataAvailable = true;
-      this.polarAreaChartLabels = [];
-      this.polarAreaChartData = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // 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);
-    
-    // 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, 'polar', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).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.noDataAvailable = true;
-          this.polarAreaChartLabels = [];
-          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
-          this.noDataAvailable = data.chartLabels.length === 0;
-          this.polarAreaChartLabels = data.chartLabels;
-          if (data.chartData && data.chartData.length > 0) {
-            // 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 = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-          }
-          // Trigger change detection
-          this.polarAreaChartData = [...this.polarAreaChartData];
-          console.log('Updated polar chart with drilldown 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;
-          // 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 });
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-          this.polarAreaChartLabels = [];
-          this.polarAreaChartData = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-        }
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.polarAreaChartLabels = [];
-        this.polarAreaChartData = [
-            {
-              data: [],
-              label: 'Dataset 1'
-            }
-          ];
-        // Keep current data in case of error
-      }
-    );
-  }
-  
-  // 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.originalPolarAreaChartLabels.length > 0) {
-      this.polarAreaChartLabels = [...this.originalPolarAreaChartLabels];
-      console.log('Restored original labels');
-    }
-    if (this.originalPolarAreaChartData.length > 0) {
-      this.polarAreaChartData = [...this.originalPolarAreaChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.polarAreaChartLabels);
-    console.log('After reset - data:', this.polarAreaChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
+	// public radarChartData: any = [
+	// 	{ data: [65, 59, 90, 81, 56, 55, 40], label: "Series A" },
+	// 	{ data: [28, 48, 40, 19, 96, 27, 100], label: "Series B" }
+	// ];
 
   // events
-  public chartClicked(e: any): void {
-    console.log('Polar chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.polarAreaChartLabels[clickedIndex];
-      
-      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 = JSON.parse(JSON.stringify(this.polarAreaChartData));
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
+	public chartClicked(e: any): void {
+		console.log(e);
+	}
 
-  public chartHovered(e: any): void {
-    console.log('Polar chart hovered:', e);
-  }
+	public chartHovered(e: any): void {
+		console.log(e);
+	}
 
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-    // Clean up document click handler
-    this.removeDocumentClickHandler();
-  }
-}      
\ No newline at end of file
+}
diff --git 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
index fca1ae0..3b26b0a 100644
--- 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,297 +1,8 @@
-<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 -->
-  <div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;">
-    No data available
-  </div>
-  
-  <!-- Chart display -->
-  <div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 50px);">
-    <canvas baseChart
-      [datasets]="radarChartData"
-      [labels]="radarChartLabels"
-      [type]="radarChartType"
-      (chartHover)="chartHovered($event)"
-      (chartClick)="chartClicked($event)">
-    </canvas>
-  </div>
-</div>
\ No newline at end of file
+<div style="display: block">
+	<canvas baseChart 
+	[datasets]="radarChartData" 
+	[labels]="radarChartLabels" 
+	[type]="radarChartType" 
+	(chartHover)="chartHovered($event)"
+	(chartClick)="chartClicked($event)"></canvas>
+</div>
diff --git 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
index a9282e4..e69de29 100644
--- 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
@@ -1,192 +0,0 @@
-.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;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index a2637a2..3c23092 100644
--- 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,923 +1,39 @@
-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 { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-radar-chart',
   templateUrl: './radar-chart.component.html',
   styleUrls: ['./radar-chart.component.scss']
 })
-export class RadarChartComponent implements OnInit, OnChanges {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class RadarChartComponent implements OnInit {
+// Radar
+public radarChartLabels: string[] = [
+  "Eating",
+  "Drinking",
+  "Sleeping",
+  "Designing",
+  "Coding",
+  "Cycling",
+  "Running"
+];
 
-  // Radar
-  public radarChartLabels: string[] = [
-    "Eating",
-    "Drinking",
-    "Sleeping",
-    "Designing",
-    "Coding",
-    "Cycling",
-    "Running"
-  ];
+public radarChartData: any = [
+  { data: [65, 59, 90, 81, 56, 55, 40], label: "Series A" },
+  { data: [28, 48, 40, 19, 96, 27, 100], label: "Series B" }
+];
+public radarChartType: string = "radar";
 
-  public radarChartData: any = [
-    { data: [65, 59, 90, 81, 56, 55, 40], label: "Series A" },
-    { data: [28, 48, 40, 19, 96, 27, 100], label: "Series B" }
-  ];
-  public radarChartType: string = "radar";
-  
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalRadarChartLabels: string[] = [];
-  originalRadarChartData: any = [];
-  
-  // No data state
-  noDataAvailable: boolean = false;
-  
-  // Flag to prevent infinite loops
-  private isFetchingData: boolean = false;
-  
-  // Subscriptions to unsubscribe on destroy
-  private subscriptions: Subscription[] = [];
+// events
+public chartClicked(e: any): void {
+  console.log(e);
+}
 
-  // 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
-  ) { }
+public chartHovered(e: any): void {
+  console.log(e);
+}
+  constructor() { }
 
   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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      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;
-    
-    // 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 chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching radar chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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}` : ''}`;
-      console.log('Radar 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
-      this.dashboardService.getChartData(this.table, 'radar', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received radar chart data:', data);
-          if (data === null) {
-            console.warn('Radar chart API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.radarChartLabels = [];
-            this.radarChartData = [];
-            // Reset flag after fetching
-            this.isFetchingData = false;
-            return;
-          }
-          
-          // Handle the actual data structure returned by the API
-          if (data && data.chartLabels && data.chartData) {
-            // Map the API response to the format expected by the chart
-            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 => {
-                // Convert to number if it's not already
-                return isNaN(Number(value)) ? 0 : Number(value);
-              }) : []
-            }));
-            // Trigger change detection
-            this.radarChartData = [...this.radarChartData];
-            console.log('Updated radar chart with data:', { labels: this.radarChartLabels, data: this.radarChartData });
-          } else if (data && data.labels && data.datasets) {
-            // Handle the original expected format as fallback
-            this.noDataAvailable = data.labels.length === 0;
-            this.radarChartLabels = data.labels;
-            this.radarChartData = data.datasets.map(dataset => ({
-              ...dataset,
-              data: dataset.data ? dataset.data.map(value => {
-                // Convert to number if it's not already
-                return isNaN(Number(value)) ? 0 : Number(value);
-              }) : []
-            }));
-            // Trigger change detection
-            this.radarChartData = [...this.radarChartData];
-            console.log('Updated radar chart with legacy data format:', { labels: this.radarChartLabels, data: this.radarChartData });
-          } else {
-            console.warn('Radar chart received data does not have expected structure', data);
-            this.noDataAvailable = true;
-            this.radarChartLabels = [];
-            this.radarChartData = [];
-          }
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        },
-        (error) => {
-          console.error('Error fetching radar chart data:', error);
-          this.noDataAvailable = true;
-          this.radarChartLabels = [];
-          this.radarChartData = [];
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        }
-      );
-    } else {
-      console.log('Missing required data for radar chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      this.noDataAvailable = true;
-      this.radarChartLabels = [];
-      this.radarChartData = [];
-      // 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.noDataAvailable = true;
-        this.radarChartLabels = [];
-        this.radarChartData = [];
-        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.noDataAvailable = true;
-      this.radarChartLabels = [];
-      this.radarChartData = [];
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // 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);
-    
-    // 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, 'radar', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).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.noDataAvailable = true;
-          this.radarChartLabels = [];
-          this.radarChartData = [];
-          return;
-        }
-        
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Map the API response to the format expected by the chart
-          this.noDataAvailable = data.chartLabels.length === 0;
-          this.radarChartLabels = data.chartLabels;
-          // For radar charts, we need to ensure the data is properly formatted
-          this.radarChartData = data.chartData.map(dataset => ({
-            ...dataset,
-            data: dataset.data ? dataset.data.map(value => {
-              // Convert to number if it's not already
-              return isNaN(Number(value)) ? 0 : Number(value);
-            }) : []
-          }));
-          // Trigger change detection
-          this.radarChartData = [...this.radarChartData];
-          console.log('Updated radar chart with drilldown data:', { labels: this.radarChartLabels, data: this.radarChartData });
-        } else if (data && data.labels && data.datasets) {
-          // Handle the original expected format as fallback
-          this.noDataAvailable = data.labels.length === 0;
-          this.radarChartLabels = data.labels;
-          this.radarChartData = data.datasets.map(dataset => ({
-            ...dataset,
-            data: dataset.data ? dataset.data.map(value => {
-              // Convert to number if it's not already
-              return isNaN(Number(value)) ? 0 : Number(value);
-            }) : []
-          }));
-          // Trigger change detection
-          this.radarChartData = [...this.radarChartData];
-          console.log('Updated radar chart with drilldown legacy data format:', { labels: this.radarChartLabels, data: this.radarChartData });
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-          this.radarChartLabels = [];
-          this.radarChartData = [];
-        }
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.radarChartLabels = [];
-        this.radarChartData = [];
-        // Keep current data in case of error
-      }
-    );
-  }
-  
-  // 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.originalRadarChartLabels.length > 0) {
-      this.radarChartLabels = [...this.originalRadarChartLabels];
-      console.log('Restored original labels');
-    }
-    if (this.originalRadarChartData.length > 0) {
-      this.radarChartData = [...this.originalRadarChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - labels:', this.radarChartLabels);
-    console.log('After reset - data:', this.radarChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // events
-  public chartClicked(e: any): void {
-    console.log('Radar chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the label of the clicked element
-      const clickedLabel = this.radarChartLabels[clickedIndex];
-      
-      console.log('Clicked on radar 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.originalRadarChartLabels = [...this.radarChartLabels];
-        this.originalRadarChartData = JSON.parse(JSON.stringify(this.radarChartData));
-        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,
-          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
-
-  public chartHovered(e: any): void {
-    console.log('Radar chart hovered:', e);
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-    // Clean up document click handler
-    this.removeDocumentClickHandler();
-  }
-}
\ No newline at end of file
+}
diff --git 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
index 1da95d9..e0b67e3 100644
--- 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,297 +1,8 @@
-<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 -->
-  <div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;">
-    No data available
-  </div>
-  
-  <!-- Chart display -->
-  <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)">
-    </canvas>
-  </div>
-</div>
\ No newline at end of file
+<div style="display: block">
+  <canvas baseChart
+    [datasets]="scatterChartData"
+    [type]="scatterChartType"
+    (chartHover)="chartHovered($event)"
+  (chartClick)="chartClicked($event)">
+  </canvas>
+</div>
diff --git 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
index a9282e4..e69de29 100644
--- 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
@@ -1,192 +0,0 @@
-.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;
-    }
-  }
-}
\ No newline at end of file
diff --git 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
index 97bd14a..1af87bc 100644
--- 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,94 +1,44 @@
-import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-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';
+import { Component, OnInit } from '@angular/core';
+import { ChartData,ChartDataset } from 'chart.js';
 
 @Component({
   selector: 'app-scatter-chart',
   templateUrl: './scatter-chart.component.html',
   styleUrls: ['./scatter-chart.component.scss']
 })
-export class ScatterChartComponent implements OnInit, OnChanges {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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
+export class ScatterChartComponent implements OnInit {
 
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService
-  ) { }
+  constructor() { }
 
   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();
   }
-  
-  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-    
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-        drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-        drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      this.fetchChartData();
-    }
-  }
-
   public scatterChartLabels: string[] = [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ];
 
   public scatterChartData: ChartDataset[] = [
+  //   {
+  //   data: [
+  //     { x: 1, y: 1 },
+  //     { x: 2, y: 3 },
+  //     { x: 3, y: -2 },
+  //     { x: 4, y: 4 },
+  //     { x: 5, y: -3, r: 20 },
+  //   ],
+  //   label: 'Series A',
+  //   pointRadius: 10,
+  //   backgroundColor: 'red',
+  // },
+  // {
+  //   data: [
+  //     { x: 2, y: 2 },
+  //     { x: 3, y: 1 },
+  //     { x: 4, y: 3 },
+  //     { x: 5, y: 2 },
+  //     { x: 6, y: 4, r: 15 },
+  //   ],
+  //   label: 'Series B',
+  //   pointRadius: 8,
+  //   backgroundColor: 'green',
+  // },
     {
       data: [
         { x: 1, y: 1 },
@@ -113,974 +63,15 @@ 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
-  drilldownStack: any[] = []; // Stack to track drilldown navigation history
-  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
-  originalScatterChartData: ChartDataset[] = [];
-  
-  // No data state
-  noDataAvailable: 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;
-  
-  // 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();
-  }
+   // events
+	public chartClicked(e: any): void {
+		console.log(e);
+	}
 
-  // 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;
-    
-    // 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 chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching scatter chart data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-      
-      // 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);
-        }
-      }
-      
-      // 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}` : ''}`;
-      console.log('Scatter 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
-      this.dashboardService.getChartData(this.table, 'scatter', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
-        (data: any) => {
-          console.log('Received scatter chart data:', data);
-          if (data === null) {
-            console.warn('Scatter chart API returned null data. Check if the API endpoint is working correctly.');
-            this.noDataAvailable = true;
-            this.scatterChartData = [];
-            // Reset flag after fetching
-            this.isFetchingData = false;
-            return;
-          }
-          
-          // 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);
-            
-            // 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);
-            this.noDataAvailable = true;
-            this.scatterChartData = [];
-          }
-          // Reset flag after fetching
-          this.isFetchingData = false;
-        },
-        (error) => {
-          console.error('Error fetching scatter chart data:', error);
-          this.noDataAvailable = true;
-          this.scatterChartData = [];
-          // Reset flag after fetching
-          this.isFetchingData = false;
-          // Keep default data in case of error
-        }
-      );
-    } else {
-      console.log('Missing required data for scatter chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      this.noDataAvailable = true;
-      this.scatterChartData = [];
-      // Reset flag after fetching
-      this.isFetchingData = false;
-    }
-  }
-  
-  // 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);
-    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.noDataAvailable = true;
-        this.scatterChartData = [];
-        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.noDataAvailable = true;
-      this.scatterChartData = [];
-      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);
-    }
-    
-    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
-    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);
-      }
-    }
-    
-    // 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/scatter?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
-    console.log('Drilldown data URL:', url);
-    
-    // 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, filterParams).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.noDataAvailable = true;
-          this.scatterChartData = [];
-          return;
-        }
-        
-        // 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
-          this.noDataAvailable = data.chartLabels.length === 0;
-          this.scatterChartData = this.transformToScatterData(data.chartLabels, data.chartData);
-          console.log('Updated scatter chart with drilldown 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;
-          console.log('Updated scatter chart with drilldown legacy data format:', this.scatterChartData);
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-          this.scatterChartData = [];
-        }
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.scatterChartData = [];
-        // Keep current data in case of error
-      }
-    );
-  }
-  
-  // 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.originalScatterChartData.length > 0) {
-      this.scatterChartData = [...this.originalScatterChartData];
-      console.log('Restored original data');
-    }
-    
-    console.log('After reset - data:', this.scatterChartData);
-    
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // events
-  public chartClicked(e: any): void {
-    console.log('Scatter chart clicked:', e);
-    
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-      
-      // Get the dataset index
-      const datasetIndex = e.active[0].datasetIndex;
-      
-      // 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 = JSON.parse(JSON.stringify(this.scatterChartData));
-        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,
-          datasetIndex: datasetIndex,
-          clickedIndex: clickedIndex,
-          dataPoint: dataPoint,
-          clickedValue: dataPoint // Using data point as value for now
-        };
-        
-        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 or invalid click event');
-    }
-  }
-
-  public chartHovered(e: any): void {
-    console.log('Scatter chart hovered:', e);
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-    // Clean up document click handler
-    this.removeDocumentClickHandler();
-  }
+	public chartHovered(e: any): void {
+		console.log(e);
+	}
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/README.md b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/README.md
deleted file mode 100644
index beb38a0..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/README.md
+++ /dev/null
@@ -1,125 +0,0 @@
-# Shield Dashboard
-
-A professional analytics dashboard UI similar to the "Shield Overall Dashboard" design.
-
-## Components
-
-### Layout
-- **Left Sidebar**: Contains application name, KPI metrics, and filter controls
-- **Main Dashboard Area**: Grid-based responsive layout with various data visualization components
-
-### Components
-
-1. **Sidebar Filters**
-   - Application header with title
-   - KPI metrics display (Total Leads, Total Deals)
-   - Filter controls (Sales Rep, Partner, Traction Channel, Sub Product Line)
-   - Reset filters button
-
-2. **Bar Chart**
-   - Title: "Deal Stage Wise Progress"
-   - Visualizes deal progress across different stages
-   - Responsive design with loading shimmer effect
-
-3. **Donut Charts**
-   - End Customer Stage Split
-   - Segment Penetration
-   - Interactive with tooltips
-
-4. **Map Chart**
-   - Dealer locations with colored markers
-   - Interactive hover tooltips showing dealer status
-   - Legend for status colors
-
-5. **Data Table**
-   - Cross/Up Selling Scope
-   - Scrollable with sticky header
-   - Alternating row colors
-   - Sortable columns
-   - Probability bars with color coding
-
-6. **Deal Details Card**
-   - Company Name, Stage, Description, Amount, Stage Days
-   - Color-coded deal stages
-   - Responsive grid layout
-
-7. **Quarterwise Flow**
-   - Placeholder for chart configuration
-   - "Chart configuration incomplete" message
-
-## Features
-
-### Responsiveness
-- Grid-based layout adapts to different screen sizes
-- Mobile-friendly design with stacked layout on small screens
-- Flexible components that resize appropriately
-
-### Filter Functionality
-- Global filters that affect all dashboard components
-- Shared state management using BehaviorSubject
-- Real-time updates when filters change
-- Reset filters functionality
-
-### Visual Design
-- Dark Navy Blue for headers and bars
-- Bright Orange for highlights and KPI boxes
-- White background for charts and tables
-- Modern color scheme with consistent styling
-
-### Interactive Elements
-- Chart tooltips on hover
-- Interactive map with dealer status information
-- Sortable data table
-- Loading shimmer effects during data updates
-
-## Technical Implementation
-
-### Technologies Used
-- Angular 16
-- Chart.js with ng2-charts
-- Clarity Design System
-- SCSS for styling
-
-### State Management
-- Shared service using BehaviorSubject for filter state
-- Reactive components that update based on filter changes
-- Simulated data updates (no backend integration)
-
-### Responsive Design
-- CSS Grid and Flexbox layouts
-- Media queries for different screen sizes
-- Relative units for scalable components
-
-## Component Structure
-
-```
-shield-dashboard/
-├── shield-dashboard.component.ts|.html|.scss
-├── services/
-│   └── dashboard-filter.service.ts
-├── components/
-│   ├── sidebar-filters/
-│   │   ├── sidebar-filters.component.ts|.html|.scss
-│   ├── bar-chart/
-│   │   ├── bar-chart.component.ts|.html|.scss
-│   ├── donut-chart/
-│   │   ├── donut-chart.component.ts|.html|.scss
-│   ├── map-chart/
-│   │   ├── map-chart.component.ts|.html|.scss
-│   ├── data-table/
-│   │   ├── data-table.component.ts|.html|.scss
-│   ├── deal-details-card/
-│   │   ├── deal-details-card.component.ts|.html|.scss
-│   ├── quarterwise-flow/
-│   │   ├── quarterwise-flow.component.ts|.html|.scss
-│   └── loading-shimmer/
-│       ├── loading-shimmer.component.ts|.html|.scss
-└── shield-dashboard-routing.module.ts
-```
-
-## Usage
-
-To navigate to the Shield Dashboard, visit:
-`/cns-portal/shield-dashboard`
-
-The dashboard is fully responsive and will adapt to different screen sizes. All components are interconnected through the shared filter service, so changing any filter will update all visualizations in real-time.
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.html
deleted file mode 100644
index 39f22df..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.scss
deleted file mode 100644
index 0f2b47c..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.chart-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .chart-header {
-    margin-bottom: 20px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #0a192f;
-      margin: 0;
-    }
-  }
-  
-  .chart-wrapper {
-    flex: 1;
-    position: relative;
-    
-    .chart-content {
-      position: relative;
-      height: 100%;
-      
-      &.loading {
-        opacity: 0.7;
-        
-        canvas {
-          filter: blur(2px);
-        }
-      }
-      
-      canvas {
-        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;
-        }
-      }
-    }
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.ts
deleted file mode 100644
index 8ed0664..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/bar-chart/bar-chart.component.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
-import { BaseChartDirective } from 'ng2-charts';
-import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
-import { DashboardFilterService } from '../../services/dashboard-filter.service';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'app-shield-bar-chart',
-  templateUrl: './bar-chart.component.html',
-  styleUrls: ['./bar-chart.component.scss']
-})
-export class BarChartComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
-  
-  private filterSubscription: Subscription = new Subscription();
-  
-  // Loading state
-  isLoading: boolean = false;
-
-  public barChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      x: {
-        grid: {
-          color: 'rgba(0, 0, 0, 0.05)'
-        },
-        ticks: {
-          color: '#64748b'
-        }
-      },
-      y: {
-        beginAtZero: true,
-        grid: {
-          color: 'rgba(0, 0, 0, 0.05)'
-        },
-        ticks: {
-          color: '#64748b'
-        }
-      }
-    },
-    plugins: {
-      legend: {
-        display: false
-      },
-      tooltip: {
-        backgroundColor: 'rgba(10, 25, 47, 0.9)',
-        titleColor: '#ff6b35',
-        bodyColor: '#ffffff',
-        borderColor: 'rgba(255, 107, 53, 0.3)',
-        borderWidth: 1,
-        cornerRadius: 6
-      }
-    }
-  };
-
-  public barChartType: ChartType = 'bar';
-  public barChartPlugins = [];
-
-  public barChartData: ChartData<'bar'> = {
-    labels: ['Prospecting', 'Qualification', 'Needs Analysis', 'Value Proposition', 'Decision Making', 'Negotiation'],
-    datasets: [
-      {
-        data: [65, 59, 80, 81, 56, 55],
-        label: 'Deal Progress',
-        backgroundColor: '#0a192f',
-        borderColor: '#0a192f',
-        borderWidth: 1,
-        borderRadius: 4
-      }
-    ]
-  };
-
-  constructor(private filterService: DashboardFilterService) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.filterSubscription.add(
-      this.filterService.filterState$.subscribe(filters => {
-        this.updateChartData(filters);
-      })
-    );
-  }
-
-  ngAfterViewInit(): void {
-    // Initial chart render
-    this.updateChart();
-  }
-  
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this.filterSubscription.unsubscribe();
-  }
-
-  // Update chart data based on filters
-  updateChartData(filters: any): void {
-    // Show loading state
-    this.isLoading = true;
-    
-    // Simulate data change based on filters
-    // In a real implementation, this would fetch new data from an API
-    const baseData = [65, 59, 80, 81, 56, 55];
-    
-    // Apply filter effects (simplified logic)
-    let multiplier = 1;
-    if (filters.salesRep) multiplier *= 0.9;
-    if (filters.partner) multiplier *= 0.85;
-    if (filters.tractionChannel) multiplier *= 0.95;
-    if (filters.subProductLine) multiplier *= 0.8;
-    
-    // Add a small delay to simulate loading
-    setTimeout(() => {
-      this.barChartData.datasets[0].data = baseData.map(value => 
-        Math.floor(value * multiplier)
-      );
-      
-      // Update chart
-      this.updateChart();
-      
-      // Hide loading state
-      this.isLoading = false;
-    }, 300);
-  }
-
-  // Update chart with new data
-  updateChart(): void {
-    if (this.chart) {
-      this.chart.update();
-    }
-  }
-
-  // events
-  public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
-    console.log(event, active);
-  }
-
-  public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
-    console.log(event, active);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.html
deleted file mode 100644
index b637376..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<div class="table-container">
-  <div class="table-header">
-    <h3>Cross/Up Selling Scope</h3>
-  </div>
-  <div class="table-wrapper">
-    <table class="data-table">
-      <thead>
-        <tr>
-          <th (click)="sortTable('companyName')" class="sortable">
-            Company Name
-            <span class="sort-indicator" *ngIf="sortColumn === 'companyName'">
-              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
-              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
-            </span>
-          </th>
-          <th (click)="sortTable('contactPerson')" class="sortable">
-            Contact Person
-            <span class="sort-indicator" *ngIf="sortColumn === 'contactPerson'">
-              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
-              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
-            </span>
-          </th>
-          <th (click)="sortTable('product')" class="sortable">
-            Product
-            <span class="sort-indicator" *ngIf="sortColumn === 'product'">
-              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
-              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
-            </span>
-          </th>
-          <th (click)="sortTable('potentialValue')" class="sortable">
-            Potential Value
-            <span class="sort-indicator" *ngIf="sortColumn === 'potentialValue'">
-              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
-              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
-            </span>
-          </th>
-          <th (click)="sortTable('probability')" class="sortable">
-            Probability
-            <span class="sort-indicator" *ngIf="sortColumn === 'probability'">
-              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
-              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
-            </span>
-          </th>
-          <th (click)="sortTable('nextAction')" class="sortable">
-            Next Action
-            <span class="sort-indicator" *ngIf="sortColumn === 'nextAction'">
-              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
-              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
-            </span>
-          </th>
-          <th (click)="sortTable('actionDate')" class="sortable">
-            Action Date
-            <span class="sort-indicator" *ngIf="sortColumn === 'actionDate'">
-              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
-              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let item of crossSellingData; let i = index" [class.even]="i % 2 === 0">
-          <td>{{ item.companyName }}</td>
-          <td>{{ item.contactPerson }}</td>
-          <td>{{ item.product }}</td>
-          <td>{{ formatCurrency(item.potentialValue) }}</td>
-          <td>
-            <div class="probability-bar">
-              <div class="probability-fill" [style.width.%]="item.probability" [style.background-color]="item.probability > 70 ? '#0a192f' : item.probability > 50 ? '#ff6b35' : '#64748b'"></div>
-              <span class="probability-text">{{ formatProbability(item.probability) }}</span>
-            </div>
-          </td>
-          <td>{{ item.nextAction }}</td>
-          <td>{{ item.actionDate }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.scss
deleted file mode 100644
index 59a1454..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.table-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .table-header {
-    margin-bottom: 20px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #0a192f;
-      margin: 0;
-    }
-  }
-  
-  .table-wrapper {
-    flex: 1;
-    overflow: auto;
-    
-    .data-table {
-      width: 100%;
-      border-collapse: collapse;
-      background: white;
-      
-      thead {
-        background: #f1f5f9;
-        position: sticky;
-        top: 0;
-        z-index: 5;
-        
-        th {
-          padding: 12px 15px;
-          text-align: left;
-          font-weight: 600;
-          color: #0a192f;
-          border-bottom: 2px solid #e2e8f0;
-          cursor: pointer;
-          user-select: none;
-          position: relative;
-          
-          &:hover {
-            background: #e2e8f0;
-          }
-          
-          &.sortable {
-            padding-right: 30px;
-          }
-          
-          .sort-indicator {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #ff6b35;
-          }
-        }
-      }
-      
-      tbody {
-        tr {
-          border-bottom: 1px solid #e2e8f0;
-          
-          &.even {
-            background: #f8fafc;
-          }
-          
-          &:hover {
-            background: #f1f5f9;
-          }
-          
-          td {
-            padding: 12px 15px;
-            color: #334155;
-            font-size: 14px;
-            
-            .probability-bar {
-              position: relative;
-              width: 100%;
-              height: 20px;
-              background: #e2e8f0;
-              border-radius: 10px;
-              overflow: hidden;
-              
-              .probability-fill {
-                height: 100%;
-                border-radius: 10px;
-                transition: width 0.3s ease;
-              }
-              
-              .probability-text {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                font-size: 12px;
-                font-weight: 500;
-                color: white;
-                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.ts
deleted file mode 100644
index 3c1f598..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/data-table/data-table.component.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { DashboardFilterService } from '../../services/dashboard-filter.service';
-import { Subscription } from 'rxjs';
-
-interface CrossSellingItem {
-  id: number;
-  companyName: string;
-  contactPerson: string;
-  product: string;
-  potentialValue: number;
-  probability: number;
-  nextAction: string;
-  actionDate: string;
-}
-
-@Component({
-  selector: 'app-shield-data-table',
-  templateUrl: './data-table.component.html',
-  styleUrls: ['./data-table.component.scss']
-})
-export class DataTableComponent implements OnInit, OnDestroy {
-  private filterSubscription: Subscription = new Subscription();
-  
-  // Mock data for cross/up selling scope
-  originalCrossSellingData: CrossSellingItem[] = [
-    { id: 1, companyName: 'Tech Solutions Inc', contactPerson: 'John Smith', product: 'Product A', potentialValue: 50000, probability: 75, nextAction: 'Follow-up call', actionDate: '2023-06-15' },
-    { id: 2, companyName: 'Global Enterprises', contactPerson: 'Sarah Johnson', product: 'Product B', potentialValue: 75000, probability: 60, nextAction: 'Send proposal', actionDate: '2023-06-18' },
-    { id: 3, companyName: 'Innovative Systems', contactPerson: 'Mike Brown', product: 'Product C', potentialValue: 30000, probability: 85, nextAction: 'Demo scheduled', actionDate: '2023-06-20' },
-    { id: 4, companyName: 'Future Tech Ltd', contactPerson: 'Emily Davis', product: 'Product A', potentialValue: 45000, probability: 70, nextAction: 'Send quote', actionDate: '2023-06-22' },
-    { id: 5, companyName: 'Digital Dynamics', contactPerson: 'Robert Wilson', product: 'Product B', potentialValue: 60000, probability: 55, nextAction: 'Meeting scheduled', actionDate: '2023-06-25' },
-    { id: 6, companyName: 'Alpha Solutions', contactPerson: 'Lisa Miller', product: 'Product C', potentialValue: 40000, probability: 80, nextAction: 'Follow-up email', actionDate: '2023-06-28' },
-    { id: 7, companyName: 'Beta Innovations', contactPerson: 'David Taylor', product: 'Product A', potentialValue: 55000, probability: 65, nextAction: 'Product demo', actionDate: '2023-06-28' },
-    { id: 8, companyName: 'Gamma Technologies', contactPerson: 'Jennifer Anderson', product: 'Product B', potentialValue: 70000, probability: 50, nextAction: 'Proposal review', actionDate: '2023-07-05' }
-  ];
-  
-  crossSellingData: CrossSellingItem[] = [...this.originalCrossSellingData];
-
-  // Sorting properties
-  sortColumn: keyof CrossSellingItem = 'companyName';
-  sortDirection: 'asc' | 'desc' = 'asc';
-
-  constructor(private filterService: DashboardFilterService) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.filterSubscription.add(
-      this.filterService.filterState$.subscribe(filters => {
-        this.updateTableData(filters);
-      })
-    );
-  }
-  
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this.filterSubscription.unsubscribe();
-  }
-
-  // Update table data based on filters
-  updateTableData(filters: any): void {
-    // Simulate data change based on filters
-    // In a real implementation, this would fetch new data from an API
-    
-    if (filters.salesRep || filters.partner || filters.tractionChannel || filters.subProductLine) {
-      // Apply filter effects (simplified logic)
-      const filteredData = this.originalCrossSellingData.filter(item => {
-        // Simple filtering logic - in a real app, this would be more sophisticated
-        return Math.random() > 0.3; // Randomly filter out some items
-      });
-      
-      this.crossSellingData = filteredData;
-    } else {
-      // No filters applied, show all data
-      this.crossSellingData = [...this.originalCrossSellingData];
-    }
-    
-    // Re-apply current sorting
-    this.sortTable(this.sortColumn);
-  }
-
-  // Sort table by column
-  sortTable(column: keyof CrossSellingItem): void {
-    if (this.sortColumn === column) {
-      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-    } else {
-      this.sortColumn = column;
-      this.sortDirection = 'asc';
-    }
-
-    this.crossSellingData.sort((a, b) => {
-      const aValue = a[column];
-      const bValue = b[column];
-
-      if (aValue < bValue) {
-        return this.sortDirection === 'asc' ? -1 : 1;
-      }
-      if (aValue > bValue) {
-        return this.sortDirection === 'asc' ? 1 : -1;
-      }
-      return 0;
-    });
-  }
-
-  // Format currency
-  formatCurrency(value: number): string {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(value);
-  }
-
-  // Format probability as percentage
-  formatProbability(probability: number): string {
-    return `${probability}%`;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.html
deleted file mode 100644
index f02e7af..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<div class="deal-details-container">
-  <div class="deal-details-header">
-    <h3>Deal Details</h3>
-  </div>
-  <div class="deal-cards">
-    <div class="deal-card" *ngFor="let deal of dealDetails">
-      <div class="deal-header">
-        <div class="company-name">{{ deal.companyName }}</div>
-        <div class="deal-stage" [style.background-color]="getStageColor(deal.stage)">
-          {{ deal.stage }}
-        </div>
-      </div>
-      <div class="deal-description">
-        {{ deal.description }}
-      </div>
-      <div class="deal-info">
-        <div class="info-item">
-          <div class="info-label">Amount</div>
-          <div class="info-value">{{ formatCurrency(deal.amount) }}</div>
-        </div>
-        <div class="info-item">
-          <div class="info-label">Stage Days</div>
-          <div class="info-value">{{ deal.stageDays }} days</div>
-        </div>
-        <div class="info-item">
-          <div class="info-label">Contact</div>
-          <div class="info-value">{{ deal.contactPerson }}</div>
-        </div>
-        <div class="info-item">
-          <div class="info-label">Last Contact</div>
-          <div class="info-value">{{ deal.lastContact }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.scss
deleted file mode 100644
index e82e719..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-.deal-details-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .deal-details-header {
-    margin-bottom: 20px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #0a192f;
-      margin: 0;
-    }
-  }
-  
-  .deal-cards {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    overflow-y: auto;
-    
-    .deal-card {
-      background: white;
-      border-radius: 10px;
-      padding: 20px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-      border: 1px solid #e2e8f0;
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-      
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      }
-      
-      .deal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: 15px;
-        
-        .company-name {
-          font-size: 18px;
-          font-weight: 600;
-          color: #0a192f;
-          flex: 1;
-        }
-        
-        .deal-stage {
-          padding: 6px 12px;
-          border-radius: 20px;
-          font-size: 12px;
-          font-weight: 500;
-          color: white;
-          text-align: center;
-          min-width: 120px;
-        }
-      }
-      
-      .deal-description {
-        color: #64748b;
-        font-size: 14px;
-        line-height: 1.5;
-        margin-bottom: 20px;
-      }
-      
-      .deal-info {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 15px;
-        
-        .info-item {
-          .info-label {
-            font-size: 12px;
-            color: #94a3b8;
-            margin-bottom: 4px;
-          }
-          
-          .info-value {
-            font-size: 14px;
-            font-weight: 500;
-            color: #0a192f;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Responsive design
-@media (max-width: 768px) {
-  .deal-details-container {
-    .deal-cards {
-      .deal-card {
-        .deal-info {
-          grid-template-columns: 1fr;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.ts
deleted file mode 100644
index 66bfe5a..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/deal-details-card/deal-details-card.component.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { DashboardFilterService } from '../../services/dashboard-filter.service';
-import { Subscription } from 'rxjs';
-
-interface DealDetail {
-  id: number;
-  companyName: string;
-  stage: string;
-  description: string;
-  amount: number;
-  stageDays: number;
-  contactPerson: string;
-  lastContact: string;
-}
-
-@Component({
-  selector: 'app-shield-deal-details-card',
-  templateUrl: './deal-details-card.component.html',
-  styleUrls: ['./deal-details-card.component.scss']
-})
-export class DealDetailsCardComponent implements OnInit, OnDestroy {
-  private filterSubscription: Subscription = new Subscription();
-  
-  // Mock deal details data
-  originalDealDetails: DealDetail[] = [
-    {
-      id: 1,
-      companyName: 'Tech Solutions Inc',
-      stage: 'Negotiation',
-      description: 'Enterprise software solution for HR management',
-      amount: 125000,
-      stageDays: 15,
-      contactPerson: 'John Smith',
-      lastContact: '2023-06-10'
-    },
-    {
-      id: 2,
-      companyName: 'Global Enterprises',
-      stage: 'Decision Making',
-      description: 'Cloud infrastructure services migration',
-      amount: 85000,
-      stageDays: 8,
-      contactPerson: 'Sarah Johnson',
-      lastContact: '2023-06-12'
-    },
-    {
-      id: 3,
-      companyName: 'Innovative Systems',
-      stage: 'Value Proposition',
-      description: 'Custom AI implementation for logistics',
-      amount: 210000,
-      stageDays: 22,
-      contactPerson: 'Mike Brown',
-      lastContact: '2023-06-05'
-    }
-  ];
-  
-  dealDetails: DealDetail[] = [...this.originalDealDetails];
-
-  // Stage colors
-  stageColors: { [key: string]: string } = {
-    'Prospecting': '#93c5fd',
-    'Qualification': '#60a5fa',
-    'Needs Analysis': '#3b82f6',
-    'Value Proposition': '#1d4ed8',
-    'Decision Making': '#0a192f',
-    'Negotiation': '#ff6b35'
-  };
-
-  constructor(private filterService: DashboardFilterService) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.filterSubscription.add(
-      this.filterService.filterState$.subscribe(filters => {
-        this.updateDealData(filters);
-      })
-    );
-  }
-  
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this.filterSubscription.unsubscribe();
-  }
-
-  // Update deal data based on filters
-  updateDealData(filters: any): void {
-    // Simulate data change based on filters
-    // In a real implementation, this would fetch new data from an API
-    
-    if (filters.salesRep || filters.partner || filters.tractionChannel || filters.subProductLine) {
-      // Apply filter effects (simplified logic)
-      const filteredData = this.originalDealDetails.filter(item => {
-        // Simple filtering logic - in a real app, this would be more sophisticated
-        return Math.random() > 0.2; // Randomly filter out some items
-      });
-      
-      this.dealDetails = filteredData;
-    } else {
-      // No filters applied, show all data
-      this.dealDetails = [...this.originalDealDetails];
-    }
-  }
-
-  // Get stage color
-  getStageColor(stage: string): string {
-    return this.stageColors[stage] || '#64748b';
-  }
-
-  // Format currency
-  formatCurrency(value: number): string {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(value);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.html
deleted file mode 100644
index 2d1d1df..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="chart-container">
-  <div class="chart-header">
-    <h3>{{ chartTitle }}</h3>
-  </div>
-  <div class="chart-wrapper">
-    <div class="chart-content" [class.loading]="isLoading">
-      <canvas 
-        baseChart 
-        [datasets]="chartData.datasets"
-        [labels]="chartData.labels"
-        [options]="donutChartOptions"
-        [type]="donutChartType"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-      <div class="loading-overlay" *ngIf="isLoading">
-        <div class="shimmer-donut"></div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.scss
deleted file mode 100644
index b30144f..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.chart-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .chart-header {
-    margin-bottom: 20px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #0a192f;
-      margin: 0;
-    }
-  }
-  
-  .chart-wrapper {
-    flex: 1;
-    position: relative;
-    
-    .chart-content {
-      position: relative;
-      height: 100%;
-      
-      &.loading {
-        opacity: 0.7;
-        
-        canvas {
-          filter: blur(2px);
-        }
-      }
-      
-      canvas {
-        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-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;
-        }
-      }
-    }
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.ts
deleted file mode 100644
index f986f07..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/donut-chart/donut-chart.component.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { Component, Input, OnInit, ViewChild, OnDestroy } from '@angular/core';
-import { BaseChartDirective } from 'ng2-charts';
-import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
-import { DashboardFilterService } from '../../services/dashboard-filter.service';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'app-shield-donut-chart',
-  templateUrl: './donut-chart.component.html',
-  styleUrls: ['./donut-chart.component.scss']
-})
-export class DonutChartComponent implements OnInit, OnDestroy {
-  @Input() chartType: 'endCustomer' | 'segmentPenetration' = 'endCustomer';
-  
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
-  
-  private filterSubscription: Subscription = new Subscription();
-  
-  // Loading state
-  isLoading: boolean = false;
-
-  public donutChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: true,
-        position: 'bottom',
-        labels: {
-          color: '#64748b',
-          font: {
-            size: 12
-          },
-          padding: 20
-        }
-      },
-      tooltip: {
-        backgroundColor: 'rgba(10, 25, 47, 0.9)',
-        titleColor: '#ff6b35',
-        bodyColor: '#ffffff',
-        borderColor: 'rgba(255, 107, 53, 0.3)',
-        borderWidth: 1,
-        cornerRadius: 6,
-        callbacks: {
-          label: function(context) {
-            const label = context.label || '';
-            const value = context.parsed;
-            return `${label}: ${value}`;
-          }
-        }
-      }
-    }
-  };
-
-  public donutChartType: ChartType = 'doughnut';
-  public donutChartPlugins = [];
-
-  // Data for End Customer Stage Split
-  public endCustomerData: ChartData<'doughnut'> = {
-    labels: ['Prospecting', 'Qualification', 'Needs Analysis', 'Value Proposition', 'Decision Making'],
-    datasets: [
-      {
-        data: [30, 25, 20, 15, 10],
-        backgroundColor: [
-          '#0a192f',
-          '#1e3a8a',
-          '#3b82f6',
-          '#60a5fa',
-          '#93c5fd'
-        ],
-        hoverBackgroundColor: [
-          '#1e3a8a',
-          '#3b82f6',
-          '#60a5fa',
-          '#93c5fd',
-          '#bfdbfe'
-        ],
-        borderWidth: 0
-      }
-    ]
-  };
-
-  // Data for Segment Penetration
-  public segmentPenetrationData: ChartData<'doughnut'> = {
-    labels: ['Enterprise', 'Mid-Market', 'SMB', 'Startup'],
-    datasets: [
-      {
-        data: [40, 30, 20, 10],
-        backgroundColor: [
-          '#ff6b35',
-          '#ff8c66',
-          '#ffb099',
-          '#ffd6cc'
-        ],
-        hoverBackgroundColor: [
-          '#ff8c66',
-          '#ffb099',
-          '#ffd6cc',
-          '#ffffff'
-        ],
-        borderWidth: 0
-      }
-    ]
-  };
-
-  constructor(private filterService: DashboardFilterService) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.filterSubscription.add(
-      this.filterService.filterState$.subscribe(filters => {
-        this.updateChartData(filters);
-      })
-    );
-  }
-  
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this.filterSubscription.unsubscribe();
-  }
-
-  // Get chart data based on chart type
-  get chartData(): ChartData<'doughnut'> {
-    return this.chartType === 'endCustomer' ? this.endCustomerData : this.segmentPenetrationData;
-  }
-
-  // Get chart title based on chart type
-  get chartTitle(): string {
-    return this.chartType === 'endCustomer' 
-      ? 'End Customer Stage Split' 
-      : 'Segment Penetration';
-  }
-
-  // Update chart data based on filters
-  updateChartData(filters: any): void {
-    // Show loading state
-    this.isLoading = true;
-    
-    // Simulate data change based on filters
-    // In a real implementation, this would fetch new data from an API
-    
-    // Add a small delay to simulate loading
-    setTimeout(() => {
-      if (this.chartType === 'endCustomer') {
-        const baseData = [30, 25, 20, 15, 10];
-        
-        // Apply filter effects (simplified logic)
-        let multiplier = 1;
-        if (filters.salesRep) multiplier *= 0.9;
-        if (filters.partner) multiplier *= 0.85;
-        if (filters.tractionChannel) multiplier *= 0.95;
-        if (filters.subProductLine) multiplier *= 0.8;
-        
-        this.endCustomerData.datasets[0].data = baseData.map(value => 
-          Math.floor(value * multiplier)
-        );
-      } else {
-        const baseData = [40, 30, 20, 10];
-        
-        // Apply filter effects (simplified logic)
-        let multiplier = 1;
-        if (filters.salesRep) multiplier *= 0.85;
-        if (filters.partner) multiplier *= 0.9;
-        if (filters.tractionChannel) multiplier *= 0.95;
-        if (filters.subProductLine) multiplier *= 0.75;
-        
-        this.segmentPenetrationData.datasets[0].data = baseData.map(value => 
-          Math.floor(value * multiplier)
-        );
-      }
-      
-      // Update chart
-      this.updateChart();
-      
-      // Hide loading state
-      this.isLoading = false;
-    }, 300);
-  }
-
-  // Update chart with new data
-  updateChart(): void {
-    if (this.chart) {
-      this.chart.update();
-    }
-  }
-
-  // events
-  public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
-    console.log(event, active);
-  }
-
-  public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
-    console.log(event, active);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/loading-shimmer/loading-shimmer.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/loading-shimmer/loading-shimmer.component.scss
deleted file mode 100644
index a365e59..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/loading-shimmer/loading-shimmer.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.shimmer-container {
-  position: relative;
-  overflow: hidden;
-  
-  .shimmer-content {
-    transition: opacity 0.3s ease;
-  }
-  
-  .shimmer-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-    
-    .shimmer-animation {
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-      background-size: 200% 100%;
-      animation: shimmer 1.5s infinite;
-      border-radius: 8px;
-    }
-  }
-  
-  &.active {
-    .shimmer-content {
-      opacity: 0.5;
-    }
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/loading-shimmer/loading-shimmer.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/loading-shimmer/loading-shimmer.component.ts
deleted file mode 100644
index d17d8e3..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/loading-shimmer/loading-shimmer.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'app-shield-loading-shimmer',
-  template: `
-    <div class="shimmer-container" [ngClass]="{ 'active': loading }">
-      <div class="shimmer-content">
-        <ng-content></ng-content>
-      </div>
-      <div class="shimmer-overlay" *ngIf="loading">
-        <div class="shimmer-animation"></div>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./loading-shimmer.component.scss']
-})
-export class LoadingShimmerComponent {
-  @Input() loading: boolean = false;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.html
deleted file mode 100644
index d11c78d..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<div class="map-container">
-  <div class="map-header">
-    <h3>Dealer Locations</h3>
-  </div>
-  <div class="map-wrapper">
-    <!-- Simple map representation with dealer markers -->
-    <div class="map-placeholder">
-      <div class="india-map">
-        <!-- Simplified India map outline -->
-        <div class="map-outline"></div>
-        
-        <!-- Dealer markers -->
-        <div 
-          *ngFor="let dealer of dealerLocations" 
-          class="dealer-marker"
-          [style.left]="dealer.lng * 0.8 + 10 + '%'"
-          [style.top]="100 - (dealer.lat * 1.2) + '%'"
-          [style.background-color]="getStatusColor(dealer.status)"
-          (mouseenter)="onDealerHover(dealer)"
-          (mouseleave)="onDealerLeave()"
-          [attr.data-tooltip]="dealer.name + ' - ' + dealer.city + ' (' + getStatusLabel(dealer.status) + ')'">
-        </div>
-      </div>
-      
-      <!-- Legend -->
-      <div class="map-legend">
-        <div class="legend-item" *ngFor="let status of ['active', 'inactive', 'training', 'onboarding']">
-          <div class="legend-color" [style.background-color]="getStatusColor(status)"></div>
-          <div class="legend-label">{{ getStatusLabel(status) }}</div>
-        </div>
-      </div>
-      
-      <!-- Dealer info tooltip -->
-      <div class="dealer-tooltip" *ngIf="hoveredDealer" [style.left]="hoveredDealer.lng * 0.8 + 12 + '%'" [style.top]="100 - (hoveredDealer.lat * 1.2) - 5 + '%'">
-        <div class="tooltip-content">
-          <div class="dealer-name">{{ hoveredDealer.name }}</div>
-          <div class="dealer-location">{{ hoveredDealer.city }}, {{ hoveredDealer.state }}</div>
-          <div class="dealer-status" [style.color]="getStatusColor(hoveredDealer.status)">{{ getStatusLabel(hoveredDealer.status) }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.scss
deleted file mode 100644
index 71e33d3..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-.map-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .map-header {
-    margin-bottom: 20px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #0a192f;
-      margin: 0;
-    }
-  }
-  
-  .map-wrapper {
-    flex: 1;
-    position: relative;
-    
-    .map-placeholder {
-      height: 100%;
-      background: #f8fafc;
-      border-radius: 8px;
-      position: relative;
-      overflow: hidden;
-      
-      .india-map {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        background: #e2e8f0;
-        
-        .map-outline {
-          position: absolute;
-          top: 10%;
-          left: 10%;
-          right: 10%;
-          bottom: 10%;
-          background: #cbd5e1;
-          border-radius: 50% 40% 45% 50% / 40% 50% 40% 45%;
-          box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
-        }
-        
-        .dealer-marker {
-          position: absolute;
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          cursor: pointer;
-          transform: translate(-50%, -50%);
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-          transition: transform 0.2s ease, box-shadow 0.2s ease;
-          
-          &:hover {
-            transform: translate(-50%, -50%) scale(1.3);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-            z-index: 10;
-          }
-        }
-      }
-      
-      .map-legend {
-        position: absolute;
-        bottom: 20px;
-        left: 20px;
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 8px;
-        padding: 12px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        display: flex;
-        gap: 15px;
-        
-        .legend-item {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          
-          .legend-color {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-          }
-          
-          .legend-label {
-            font-size: 12px;
-            color: #64748b;
-          }
-        }
-      }
-      
-      .dealer-tooltip {
-        position: absolute;
-        background: rgba(10, 25, 47, 0.95);
-        color: white;
-        border-radius: 6px;
-        padding: 10px 15px;
-        transform: translate(-50%, -100%);
-        margin-top: -10px;
-        z-index: 100;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-        min-width: 180px;
-        
-        &::after {
-          content: '';
-          position: absolute;
-          top: 100%;
-          left: 50%;
-          margin-left: -5px;
-          border-width: 5px;
-          border-style: solid;
-          border-color: rgba(10, 25, 47, 0.95) transparent transparent transparent;
-        }
-        
-        .tooltip-content {
-          .dealer-name {
-            font-weight: 600;
-            margin-bottom: 4px;
-          }
-          
-          .dealer-location {
-            font-size: 13px;
-            color: #cbd5e1;
-            margin-bottom: 4px;
-          }
-          
-          .dealer-status {
-            font-size: 12px;
-            font-weight: 500;
-          }
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.ts
deleted file mode 100644
index 08310bf..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/map-chart/map-chart.component.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { DashboardFilterService } from '../../services/dashboard-filter.service';
-import { Subscription } from 'rxjs';
-
-interface DealerLocation {
-  id: number;
-  name: string;
-  lat: number;
-  lng: number;
-  status: 'active' | 'inactive' | 'training' | 'onboarding';
-  city: string;
-  state: string;
-}
-
-@Component({
-  selector: 'app-shield-map-chart',
-  templateUrl: './map-chart.component.html',
-  styleUrls: ['./map-chart.component.scss']
-})
-export class MapChartComponent implements OnInit, OnDestroy {
-  private filterSubscription: Subscription = new Subscription();
-  
-  // Mock dealer location data
-  originalDealerLocations: DealerLocation[] = [
-    { id: 1, name: 'ABC Motors', lat: 28.6139, lng: 77.2090, status: 'active', city: 'New Delhi', state: 'Delhi' },
-    { id: 2, name: 'XYZ Auto', lat: 19.0760, lng: 72.8777, status: 'active', city: 'Mumbai', state: 'Maharashtra' },
-    { id: 3, name: 'PQR Dealers', lat: 13.0827, lng: 80.2707, status: 'training', city: 'Chennai', state: 'Tamil Nadu' },
-    { id: 4, name: 'LMN Enterprises', lat: 12.9716, lng: 77.5946, status: 'inactive', city: 'Bangalore', state: 'Karnataka' },
-    { id: 5, name: 'DEF Solutions', lat: 22.5726, lng: 88.3639, status: 'active', city: 'Kolkata', state: 'West Bengal' },
-    { id: 6, name: 'GHI Services', lat: 25.3176, lng: 82.9739, status: 'onboarding', city: 'Varanasi', state: 'Uttar Pradesh' },
-    { id: 7, name: 'JKL Group', lat: 23.0225, lng: 72.5714, status: 'active', city: 'Ahmedabad', state: 'Gujarat' },
-    { id: 8, name: 'MNO Corp', lat: 18.5204, lng: 73.8567, status: 'training', city: 'Pune', state: 'Maharashtra' }
-  ];
-  
-  dealerLocations: DealerLocation[] = [...this.originalDealerLocations];
-
-  // Status colors
-  statusColors = {
-    active: '#0a192f',
-    inactive: '#64748b',
-    training: '#ff6b35',
-    onboarding: '#f59e0b'
-  };
-
-  // Status labels
-  statusLabels = {
-    active: 'Active',
-    inactive: 'Inactive',
-    training: 'Training',
-    onboarding: 'Onboarding'
-  };
-
-  hoveredDealer: DealerLocation | null = null;
-
-  constructor(private filterService: DashboardFilterService) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.filterSubscription.add(
-      this.filterService.filterState$.subscribe(filters => {
-        this.updateMapData(filters);
-      })
-    );
-  }
-  
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this.filterSubscription.unsubscribe();
-  }
-
-  // Update map data based on filters
-  updateMapData(filters: any): void {
-    // Simulate data change based on filters
-    // In a real implementation, this would fetch new data from an API
-    
-    if (filters.salesRep || filters.partner || filters.tractionChannel || filters.subProductLine) {
-      // Apply filter effects (simplified logic)
-      const filteredData = this.originalDealerLocations.filter(location => {
-        // Simple filtering logic - in a real app, this would be more sophisticated
-        return Math.random() > 0.25; // Randomly filter out some locations
-      });
-      
-      this.dealerLocations = filteredData;
-    } else {
-      // No filters applied, show all data
-      this.dealerLocations = [...this.originalDealerLocations];
-    }
-  }
-
-  // Get status color based on dealer status
-  getStatusColor(status: string): string {
-    return (this.statusColors as any)[status] || '#64748b';
-  }
-
-  // Get status label based on dealer status
-  getStatusLabel(status: string): string {
-    return (this.statusLabels as any)[status] || status;
-  }
-
-  // Handle dealer hover
-  onDealerHover(dealer: DealerLocation): void {
-    this.hoveredDealer = dealer;
-  }
-
-  // Handle dealer leave
-  onDealerLeave(): void {
-    this.hoveredDealer = null;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.html
deleted file mode 100644
index bdb8fa1..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="quarterwise-flow-container">
-  <div class="quarterwise-flow-header">
-    <h3>Quarterwise Flow</h3>
-  </div>
-  <div class="quarterwise-flow-content">
-    <div class="placeholder-message">
-      <div class="message-icon">
-        <i class="info-icon">ℹ️</i>
-      </div>
-      <div class="message-text">
-        <h4>Chart Configuration Incomplete</h4>
-        <p>Please configure the quarterwise flow chart settings to visualize the data.</p>
-      </div>
-      <button class="configure-button">
-        <i class="config-icon">⚙️</i>
-        Configure Chart
-      </button>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.scss
deleted file mode 100644
index 054b5f0..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.quarterwise-flow-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .quarterwise-flow-header {
-    margin-bottom: 20px;
-    
-    h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: #0a192f;
-      margin: 0;
-    }
-  }
-  
-  .quarterwise-flow-content {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    .placeholder-message {
-      text-align: center;
-      padding: 30px;
-      background: #f8fafc;
-      border-radius: 12px;
-      border: 1px dashed #cbd5e1;
-      
-      .message-icon {
-        color: #94a3b8;
-        margin-bottom: 20px;
-      }
-      
-      .message-text {
-        h4 {
-          color: #0a192f;
-          margin: 0 0 10px 0;
-          font-weight: 600;
-        }
-        
-        p {
-          color: #64748b;
-          margin: 0 0 20px 0;
-          font-size: 14px;
-          line-height: 1.5;
-        }
-      }
-      
-      .configure-button {
-        padding: 10px 20px;
-        background: #0a192f;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        transition: background-color 0.2s ease;
-        
-        &:hover {
-          background: #1e3a8a;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.ts
deleted file mode 100644
index 678b47d..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/quarterwise-flow/quarterwise-flow.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-shield-quarterwise-flow',
-  templateUrl: './quarterwise-flow.component.html',
-  styleUrls: ['./quarterwise-flow.component.scss']
-})
-export class QuarterwiseFlowComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.html
deleted file mode 100644
index 87f3121..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="sidebar-filters">
-  <!-- Component Palette Button and List have been moved to the main shield dashboard component -->
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.html.new b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.html.new
deleted file mode 100644
index 95849af..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.html.new
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="sidebar-filters">
-  <!-- Component Palette Button -->
-  <div class="component-palette-section">
-    <button class="component-palette-button" (click)="toggleComponentPalette()">
-      <clr-icon shape="plus-circle"></clr-icon>
-      Add Components
-    </button>
-    
-    <!-- Component Palette (hidden by default) -->
-    <div class="component-palette" *ngIf="showComponentPalette">
-      <h3 class="palette-title">Available Components</h3>
-      <div class="component-list">
-        <div 
-          *ngFor="let component of availableComponents" 
-          class="component-item"
-          draggable="true"
-          (dragstart)="onComponentDragStart($event, component)"
-          (dragend)="onComponentDragEnd($event)">
-          <clr-icon shape="drag-handle" class="drag-icon"></clr-icon>
-          {{ component.name }}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.scss
deleted file mode 100644
index 6ddf655..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.scss
+++ /dev/null
@@ -1,216 +0,0 @@
-.sidebar-filters {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  
-  .componentbtn {
-    margin: 10px;
-    width: calc(100% - 20px);
-  }
-  
-  .nav-list {
-    padding: 0;
-    margin: 0 10px;
-    
-    .nav-link {
-      display: flex;
-      align-items: center;
-      padding: 8px 12px;
-      margin-bottom: 5px;
-      background: #f8f9fa;
-      border: 1px solid #e9ecef;
-      border-radius: 4px;
-      cursor: move;
-      
-      &:hover {
-        background: #e9ecef;
-      }
-      
-      .has-badge {
-        margin-left: auto;
-      }
-    }
-  }
-  
-  .app-header {
-    margin-bottom: 30px;
-    
-    .app-name {
-      font-size: 24px;
-      font-weight: 700;
-      margin: 0 0 5px 0;
-      color: #ff6b35;
-    }
-    
-    .dashboard-title {
-      font-size: 18px;
-      font-weight: 500;
-      margin: 0;
-      color: #cbd5e1;
-    }
-  }
-  
-  .kpi-section {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    margin-bottom: 30px;
-    
-    .kpi-card {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 10px;
-      padding: 15px;
-      text-align: center;
-      
-      .kpi-title {
-        font-size: 14px;
-        color: #94a3b8;
-        margin-bottom: 8px;
-      }
-      
-      .kpi-value {
-        font-size: 24px;
-        font-weight: 700;
-        color: white;
-      }
-    }
-    
-    .total-leads {
-      border-left: 3px solid #ff6b35;
-    }
-    
-    .total-deals {
-      border-left: 3px solid #0a192f;
-    }
-  }
-  
-  .component-palette-section {
-    margin: 20px;
-    
-    .component-palette-button {
-      width: 100%;
-      padding: 12px;
-      background: rgba(255, 107, 53, 0.2);
-      color: white;
-      border: 1px solid rgba(255, 107, 53, 0.5);
-      border-radius: 8px;
-      font-size: 16px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      
-      &:hover {
-        background: rgba(255, 107, 53, 0.3);
-        border-color: #ff6b35;
-      }
-    }
-    
-    .component-palette {
-      margin-top: 15px;
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 8px;
-      padding: 15px;
-      
-      .palette-title {
-        font-size: 16px;
-        color: white;
-        margin: 0 0 15px 0;
-        text-align: center;
-      }
-      
-      .component-list {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        
-        .component-item {
-          padding: 10px 15px;
-          background: rgba(255, 255, 255, 0.1);
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          border-radius: 6px;
-          color: white;
-          cursor: move;
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          transition: all 0.2s ease;
-          
-          &:hover {
-            background: rgba(255, 107, 53, 0.2);
-            border-color: #ff6b35;
-          }
-          
-          .drag-icon {
-            font-size: 16px;
-          }
-        }
-      }
-    }
-  }
-  
-  .filters-section {
-    flex: 1;
-    
-    .filters-title {
-      font-size: 18px;
-      color: white;
-      margin: 0 0 20px 0;
-      padding-bottom: 10px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    
-    .filter-group {
-      margin-bottom: 20px;
-      
-      label {
-        display: block;
-        font-size: 14px;
-        color: #cbd5e1;
-        margin-bottom: 8px;
-      }
-      
-      .filter-select {
-        width: 100%;
-        padding: 10px 15px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: 8px;
-        color: white;
-        font-size: 14px;
-        
-        &:focus {
-          outline: none;
-          border-color: #ff6b35;
-          box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
-        }
-        
-        option {
-          background: #0a192f;
-          color: white;
-        }
-      }
-    }
-    
-    .reset-button {
-      width: 100%;
-      padding: 12px;
-      background: rgba(255, 255, 255, 0.1);
-      color: white;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 8px;
-      font-size: 16px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        background: rgba(255, 107, 53, 0.2);
-        border-color: #ff6b35;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.ts
deleted file mode 100644
index 295f2c1..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { DashboardFilterService } from '../../services/dashboard-filter.service';
-
-@Component({
-  selector: 'app-shield-sidebar-filters',
-  templateUrl: './sidebar-filters.component.html',
-  styleUrls: ['./sidebar-filters.component.scss']
-})
-export class SidebarFiltersComponent implements OnInit {
-
-  constructor(private filterService: DashboardFilterService) { }
-
-  ngOnInit(): void {
-    // Component initialization
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.ts.new b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.ts.new
deleted file mode 100644
index 295f2c1..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/components/sidebar-filters/sidebar-filters.component.ts.new
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { DashboardFilterService } from '../../services/dashboard-filter.service';
-
-@Component({
-  selector: 'app-shield-sidebar-filters',
-  templateUrl: './sidebar-filters.component.html',
-  styleUrls: ['./sidebar-filters.component.scss']
-})
-export class SidebarFiltersComponent implements OnInit {
-
-  constructor(private filterService: DashboardFilterService) { }
-
-  ngOnInit(): void {
-    // Component initialization
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/index.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/index.ts
deleted file mode 100644
index 337ea1a..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './shield-dashboard.component';
-
-// Export all components
-export * from './components/sidebar-filters/sidebar-filters.component';
-export * from './components/bar-chart/bar-chart.component';
-export * from './components/donut-chart/donut-chart.component';
-export * from './components/map-chart/map-chart.component';
-export * from './components/data-table/data-table.component';
-export * from './components/deal-details-card/deal-details-card.component';
-export * from './components/quarterwise-flow/quarterwise-flow.component';
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/services/dashboard-filter.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/services/dashboard-filter.service.ts
deleted file mode 100644
index 97e4593..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/services/dashboard-filter.service.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-// Define the filter state interface
-export interface FilterState {
-  salesRep: string;
-  partner: string;
-  tractionChannel: string;
-  subProductLine: string;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DashboardFilterService {
-  // Shared filter state using BehaviorSubject
-  private filterStateSubject = new BehaviorSubject<FilterState>({
-    salesRep: '',
-    partner: '',
-    tractionChannel: '',
-    subProductLine: ''
-  });
-  
-  public filterState$ = this.filterStateSubject.asObservable();
-  
-  // KPI data
-  private kpiDataSubject = new BehaviorSubject<{ totalLeads: number; totalDeals: number }>({
-    totalLeads: 1248,
-    totalDeals: 842
-  });
-  
-  public kpiData$ = this.kpiDataSubject.asObservable();
-
-  constructor() { }
-  
-  // Update filter state
-  updateFilter(filterType: keyof FilterState, value: string): void {
-    const currentState = this.filterStateSubject.value;
-    const newState = { ...currentState, [filterType]: value };
-    this.filterStateSubject.next(newState);
-    
-    // Simulate KPI data change based on filters
-    this.updateKpiData(newState);
-  }
-  
-  // Reset all filters to default values
-  resetFilters(): void {
-    this.filterStateSubject.next({
-      salesRep: '',
-      partner: '',
-      tractionChannel: '',
-      subProductLine: ''
-    });
-    
-    // Reset KPI data to default values
-    this.kpiDataSubject.next({
-      totalLeads: 1248,
-      totalDeals: 842
-    });
-  }
-  
-  // Update KPI data based on filters (simulated)
-  private updateKpiData(filters: FilterState): void {
-    // This is a simplified simulation - in a real app, this would come from an API
-    let totalLeads = 1248;
-    let totalDeals = 842;
-    
-    // Apply filter effects (simplified logic)
-    if (filters.salesRep) totalLeads = Math.floor(totalLeads * 0.8);
-    if (filters.partner) totalDeals = Math.floor(totalDeals * 0.9);
-    if (filters.tractionChannel) totalLeads = Math.floor(totalLeads * 0.85);
-    if (filters.subProductLine) totalDeals = Math.floor(totalDeals * 0.95);
-    
-    this.kpiDataSubject.next({
-      totalLeads,
-      totalDeals
-    });
-  }
-  
-  // Get current filter values
-  getCurrentFilters(): FilterState {
-    return this.filterStateSubject.value;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard-routing.module.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard-routing.module.ts
deleted file mode 100644
index c14cfdb..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { ShieldDashboardComponent } from './shield-dashboard.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ShieldDashboardComponent
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ShieldDashboardRoutingModule { }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.html
deleted file mode 100644
index 6393fb8..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.html
+++ /dev/null
@@ -1,493 +0,0 @@
-<div class="shield-dashboard">
-  <div class="dashboard-container">
-    <!-- Sidebar Filters -->
-    <div class="sidebar">
-      <button class="btn componentbtn" (click)="toggleComponentPalette()">
-        <clr-icon shape="plus"></clr-icon> Component
-      </button>
-      
-      <ul class="nav-list" style="list-style-type: none;" *ngIf="showComponentPalette">
-        <li *ngFor="let widget of WidgetsMock">
-          <!--
-            Draggable widget from store using vanilla javascript event (dragstart)
-            onDrag() is call, it take $event and a widget identifier as parameters
-          -->
-          <a draggable="true" class="nav-link" (dragstart)="onDrag($event, widget.identifier)">
-            <clr-icon shape="drag-handle" style="margin-right: 10px;"></clr-icon>
-            {{ widget.name }}
-            <clr-icon shape="plugin" class="has-badge"></clr-icon>
-          </a>
-        </li>
-      </ul>
-    </div>
-    
-    <!-- Main Dashboard Content -->
-    <div class="main-content">
-      <!-- Deleted Items Section -->
-      <div class="deleted-items-section" *ngIf="deletedItems.length > 0">
-        <h3>Deleted Items</h3>
-        <div class="deleted-items-list">
-          <div *ngFor="let item of deletedItems" class="deleted-item">
-            <span>{{ item.name }}</span>
-            <button class="btn btn-sm btn-primary" (click)="restoreItem(item)">
-              <clr-icon shape="undo"></clr-icon> Restore
-            </button>
-          </div>
-        </div>
-        <button class="btn btn-sm btn-danger" (click)="clearDeletedItems()">
-          <clr-icon shape="trash"></clr-icon> Clear All
-        </button>
-      </div>
-      
-      <!-- Dashboard Grid with Drag and Drop -->
-      <gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent; min-height: 500px;">
-        <gridster-item [item]="item" *ngFor="let item of dashboard">
-          <!-- Remove Button -->
-          <button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)">
-            <clr-icon shape="trash"></clr-icon>
-          </button>
-          
-          <!-- Edit Button -->
-          <button class="btn btn-icon" style="margin-top: 10px; float: right;" (click)="editGadget(item)">
-            <clr-icon shape="pencil"></clr-icon>
-          </button>
-          
-          <!-- Drag Handle -->
-          <button class="btn btn-icon drag-handler" style="margin-left: 10px; margin-top: 10px;">
-            <clr-icon shape="drag-handle"></clr-icon>
-          </button>
-          
-          <!-- Chart Components -->
-          <div class="grid-item-content">
-            <h4 style="margin-top: 0px; margin-left: 10px;">{{item.name}}</h4>
-            <div *ngIf="item.chartType === 'bar-chart'">
-              <app-shield-bar-chart></app-shield-bar-chart>
-            </div>
-            <div *ngIf="item.chartType === 'donut-chart' && item.name === 'End Customer Donut'">
-              <app-shield-donut-chart chartType="endCustomer"></app-shield-donut-chart>
-            </div>
-            <div *ngIf="item.chartType === 'donut-chart' && item.name === 'Segment Penetration Donut'">
-              <app-shield-donut-chart chartType="segmentPenetration"></app-shield-donut-chart>
-            </div>
-            <div *ngIf="item.chartType === 'map-chart'">
-              <app-shield-map-chart></app-shield-map-chart>
-            </div>
-            <div *ngIf="item.chartType === 'data-table'">
-              <app-shield-data-table></app-shield-data-table>
-            </div>
-            <div *ngIf="item.chartType === 'deal-details'">
-              <app-shield-deal-details-card></app-shield-deal-details-card>
-            </div>
-            <div *ngIf="item.chartType === 'quarterwise-flow'">
-              <app-shield-quarterwise-flow></app-shield-quarterwise-flow>
-            </div>
-          </div>
-        </gridster-item>
-      </gridster>
-    </div>
-  </div>
-</div>
-
-<!-- Configuration Modal -->
-<clr-modal [(clrModalOpen)]="modeledit" [clrModalStaticBackdrop]="true" clrModalSize="lg">
-  <h3 class="modal-title">Configure Chart</h3>
-  <div class="modal-body" *ngIf="selectedItem">
-    <form [formGroup]="configForm" class="clr-form-horizontal">
-      <!-- Chart Title -->
-      <div class="clr-row">
-        <div class="clr-col-12">
-          <clr-input-container>
-            <label for="charttitle">Chart Title</label>
-            <input id="charttitle" type="text" formControlName="charttitle" clrInput />
-            <clr-control-helper>Enter a descriptive title for your chart</clr-control-helper>
-          </clr-input-container>
-        </div>
-      </div>
-      
-      <!-- Connection Selection Field -->
-      <div class="clr-row">
-        <div class="clr-col-12">
-          <clr-select-container>
-            <label for="connection">Connection</label>
-            <select id="connection" formControlName="connection" clrSelect>
-              <option value="">Select Connection</option>
-              <option *ngFor="let conn of sureconnectData" [value]="conn.id">
-                {{conn.connection_name || conn.id}}
-              </option>
-            </select>
-            <clr-control-helper>Select a SureConnect connection to use for this chart</clr-control-helper>
-          </clr-select-container>
-        </div>
-      </div>
-      
-      <!-- Chart Options (except for Data Table and Deal Details) -->
-      <div class="clr-row" *ngIf="selectedItem?.name !== 'Data Table' && selectedItem?.name !== 'Deal Details'">
-        <div class="clr-col-12">
-          <div class="clr-form-control clr-row">
-            <div class="clr-col-12">
-              <clr-checkbox-container>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" id="chartlegend" formControlName="chartlegend" clrCheckbox />
-                  <label for="chartlegend">Show Chart Legend</label>
-                </clr-checkbox-wrapper>
-                <clr-checkbox-wrapper>
-                  <input type="checkbox" id="showlabel" formControlName="showlabel" clrCheckbox />
-                  <label for="showlabel">Show Chart Label</label>
-                </clr-checkbox-wrapper>
-              </clr-checkbox-container>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- API URL -->
-      <div class="clr-row">
-        <div class="clr-col-12">
-          <clr-input-container>
-            <label for="table">API URL</label>
-            <div class="clr-input-group">
-              <input type="text" id="table" formControlName="table" clrInput />
-              <button class="btn btn-icon btn-primary" (click)="getColumns(configForm.value.connection, configForm.value.table)" type="button">
-                <clr-icon shape="refresh"></clr-icon>
-              </button>
-            </div>
-            <clr-control-helper>Enter the API endpoint for your data source</clr-control-helper>
-          </clr-input-container>
-        </div>
-      </div>
-      
-      <!-- X-Axis (except for Data Table and Deal Details) -->
-      <div class="clr-row" *ngIf="selectedItem?.name !== 'Data Table' && selectedItem?.name !== 'Deal Details'">
-        <div class="clr-col-12">
-          <clr-select-container>
-            <label for="xAxis">X-Axis</label>
-            <select id="xAxis" formControlName="xAxis" clrSelect>
-              <option value="">Select Column</option>
-              <option *ngFor="let data of columnData" [value]="data">{{data}}</option>
-            </select>
-            <clr-control-helper>Select the column to use for the X-axis</clr-control-helper>
-          </clr-select-container>
-        </div>
-      </div>
-      
-      <!-- Y-Axis (except for Data Table and Deal Details) -->
-      <div class="clr-row" *ngIf="selectedItem?.name !== 'Data Table' && selectedItem?.name !== 'Deal Details'">
-        <div class="clr-col-12">
-          <clr-combobox-container>
-            <label for="yAxis">Y-Axis (Numeric)</label>
-            <clr-combobox id="yAxis" formControlName="yAxis" clrMulti="true" required>
-              <ng-container *clrOptionSelected="let selected">
-                {{selected}}
-              </ng-container>
-              <clr-options>
-                <clr-option *clrOptionItems="let state of columnData" [clrValue]="state">
-                  {{state}}
-                </clr-option>
-              </clr-options>
-            </clr-combobox>
-            <clr-control-helper>Select one or more columns for the Y-axis</clr-control-helper>
-          </clr-combobox-container>
-        </div>
-      </div>
-      
-      <!-- Base API Filters Section -->
-      <div class="clr-row section-divider">
-        <div class="clr-col-12">
-          <h4>Base API Filters</h4>
-          <p class="clr-subtext">Configure filters for the main API (applied regardless of drilldown settings)</p>
-          
-          <!-- Add Base Filter Button -->
-          <button class="btn btn-sm btn-primary" (click)="addBaseFilter()" type="button">
-            <clr-icon shape="plus"></clr-icon> Add Filter
-          </button>
-          
-          <!-- Base Filter Fields List -->
-          <div *ngFor="let filter of selectedItem?.baseFilters; let i = index" class="filter-item">
-            <div class="filter-header">
-              <span>Filter {{i + 1}}</span>
-              <button class="btn btn-icon btn-danger btn-sm" (click)="removeBaseFilter(i)" type="button">
-                <clr-icon shape="trash"></clr-icon>
-              </button>
-            </div>
-            
-            <div class="clr-row filter-content">
-              <div class="clr-col-5">
-                <clr-input-container>
-                  <label [attr.for]="'baseFilterField' + i">Field Name</label>
-                  <input type="text" [id]="'baseFilterField' + i" [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" clrInput />
-                </clr-input-container>
-              </div>
-              
-              <div class="clr-col-5">
-                <clr-input-container>
-                  <label [attr.for]="'baseFilterValue' + i">Filter Value</label>
-                  <input type="text" [id]="'baseFilterValue' + i" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" clrInput />
-                </clr-input-container>
-              </div>
-              
-              <div class="clr-col-2">
-                <button class="btn btn-icon btn-danger btn-sm" (click)="removeBaseFilter(i)" type="button">
-                  <clr-icon shape="trash"></clr-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Base Drilldown Configuration Section -->
-      <div class="clr-row section-divider">
-        <div class="clr-col-12">
-          <h4>Base Drilldown Configuration</h4>
-          <clr-checkbox-container>
-            <clr-checkbox-wrapper>
-              <input type="checkbox" id="drilldownEnabled" [(ngModel)]="selectedItem.drilldownEnabled" [ngModelOptions]="{standalone: true}" clrCheckbox />
-              <label for="drilldownEnabled">Enable Base Drilldown</label>
-            </clr-checkbox-wrapper>
-          </clr-checkbox-container>
-          <p class="clr-subtext">Enable drilldown functionality for this chart</p>
-        </div>
-      </div>
-
-      <!-- Drilldown API URL -->
-      <div class="clr-row" *ngIf="selectedItem?.drilldownEnabled">
-        <div class="clr-col-12">
-          <clr-input-container>
-            <label for="drilldownApiUrl">Base Drilldown API URL</label>
-            <div class="clr-input-group">
-              <input type="text" id="drilldownApiUrl" [(ngModel)]="selectedItem.drilldownApiUrl" [ngModelOptions]="{standalone: true}" clrInput />
-              <button class="btn btn-icon btn-primary" (click)="refreshDrilldownColumns()" [disabled]="!selectedItem.drilldownApiUrl" type="button">
-                <clr-icon shape="refresh"></clr-icon>
-              </button>
-            </div>
-            <clr-control-helper>Enter the API URL for base drilldown data. Use angle brackets for parameters, e.g., http://api.example.com/data/&lt;country&gt;</clr-control-helper>
-          </clr-input-container>
-        </div>
-      </div>
-
-      <!-- Drilldown X-Axis -->
-      <div class="clr-row" *ngIf="selectedItem?.drilldownEnabled">
-        <div class="clr-col-12">
-          <clr-select-container>
-            <label for="drilldownXAxis">Base Drilldown X-Axis</label>
-            <select id="drilldownXAxis" [(ngModel)]="selectedItem.drilldownXAxis" [ngModelOptions]="{standalone: true}" clrSelect>
-              <option value="">Select X-Axis Column</option>
-              <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
-            </select>
-            <clr-control-helper>Select the column to use for X-axis in base drilldown view</clr-control-helper>
-          </clr-select-container>
-        </div>
-      </div>
-
-      <!-- Drilldown Y-Axis (except for Deal Details) -->
-      <div class="clr-row" *ngIf="selectedItem?.drilldownEnabled && selectedItem?.name !== 'Deal Details'">
-        <div class="clr-col-12">
-          <clr-select-container>
-            <label for="drilldownYAxis">Base Drilldown Y-Axis</label>
-            <select id="drilldownYAxis" [(ngModel)]="selectedItem.drilldownYAxis" [ngModelOptions]="{standalone: true}" clrSelect>
-              <option value="">Select Y-Axis Column</option>
-              <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
-            </select>
-            <clr-control-helper>Select the column to use for Y-axis in base drilldown view</clr-control-helper>
-          </clr-select-container>
-        </div>
-      </div>
-
-      <!-- Drilldown Parameter -->
-      <div class="clr-row" *ngIf="selectedItem?.drilldownEnabled">
-        <div class="clr-col-12">
-          <clr-select-container>
-            <label for="drilldownParameter">Base Drilldown Parameter</label>
-            <select id="drilldownParameter" [(ngModel)]="selectedItem.drilldownParameter" [ngModelOptions]="{standalone: true}" clrSelect>
-              <option value="">Select Parameter Column</option>
-              <option *ngFor="let column of drilldownColumnData" [value]="column">{{column}}</option>
-            </select>
-            <clr-control-helper>Select the column to use as parameter for URL template replacement in base drilldown</clr-control-helper>
-          </clr-select-container>
-        </div>
-      </div>
-
-      <!-- Base Drilldown Filter Configuration -->
-      <div class="clr-row section-divider" *ngIf="selectedItem?.drilldownEnabled">
-        <div class="clr-col-12">
-          <h5>Base Drilldown Filters</h5>
-          <p class="clr-subtext">Configure filters for the base drilldown level</p>
-          
-          <!-- Add Drilldown Filter Button -->
-          <button class="btn btn-sm btn-primary" (click)="addDrilldownFilter()" type="button">
-            <clr-icon shape="plus"></clr-icon> Add Filter
-          </button>
-          
-          <!-- Drilldown Filter Fields List -->
-          <div *ngFor="let filter of selectedItem?.drilldownFilters; let i = index" class="filter-item">
-            <div class="filter-header">
-              <span>Filter {{i + 1}}</span>
-              <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)" type="button">
-                <clr-icon shape="trash"></clr-icon>
-              </button>
-            </div>
-            
-            <div class="clr-row filter-content">
-              <div class="clr-col-5">
-                <clr-input-container>
-                  <label [attr.for]="'drilldownFilterField' + i">Field Name</label>
-                  <input type="text" [id]="'drilldownFilterField' + i" [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" clrInput />
-                </clr-input-container>
-              </div>
-              
-              <div class="clr-col-5">
-                <clr-input-container>
-                  <label [attr.for]="'drilldownFilterValue' + i">Filter Value</label>
-                  <input type="text" [id]="'drilldownFilterValue' + i" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" clrInput />
-                </clr-input-container>
-              </div>
-              
-              <div class="clr-col-2">
-                <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownFilter(i)" type="button">
-                  <clr-icon shape="trash"></clr-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Multi-Layer Drilldown Configurations -->
-      <div class="clr-row section-divider" *ngIf="selectedItem?.drilldownEnabled">
-        <div class="clr-col-12">
-          <h4>Multi-Layer Drilldown Configurations</h4>
-          <button class="btn btn-sm btn-primary" (click)="addDrilldownLayer()" type="button">
-            <clr-icon shape="plus"></clr-icon> Add Drilldown Layer
-          </button>
-          <p class="clr-subtext">Add additional drilldown layers for multi-level navigation</p>
-        </div>
-      </div>
-
-      <!-- Dynamic Drilldown Layers -->
-      <div class="clr-row" *ngFor="let layer of selectedItem?.drilldownLayers; let i = index">
-        <div class="clr-col-12 drilldown-layer">
-          <div class="layer-header">
-            <h5>Drilldown Layer {{i + 1}}</h5>
-            <button class="btn btn-icon btn-danger btn-sm" (click)="removeDrilldownLayer(i)" type="button">
-              <clr-icon shape="trash"></clr-icon>
-            </button>
-          </div>
-          
-          <clr-checkbox-container>
-            <clr-checkbox-wrapper>
-              <input type="checkbox" [id]="'layerEnabled' + i" [(ngModel)]="layer.enabled" [ngModelOptions]="{standalone: true}" clrCheckbox />
-              <label [for]="'layerEnabled' + i">Enable Layer {{i + 1}} Drilldown</label>
-            </clr-checkbox-wrapper>
-          </clr-checkbox-container>
-          
-          <!-- Layer API URL -->
-          <div class="clr-row">
-            <div class="clr-col-12">
-              <clr-input-container>
-                <label [for]="'layerApiUrl' + i">Layer {{i + 1}} API URL</label>
-                <div class="clr-input-group">
-                  <input type="text" [id]="'layerApiUrl' + i" [(ngModel)]="layer.apiUrl" clrInput [ngModelOptions]="{standalone: true}" />
-                  <button class="btn btn-icon btn-primary" (click)="refreshDrilldownLayerColumns(i)" [disabled]="!layer.apiUrl" type="button">
-                    <clr-icon shape="refresh"></clr-icon>
-                  </button>
-                </div>
-                <clr-control-helper>Enter the API URL for layer {{i + 1}} drilldown data. Use angle brackets for parameters, e.g., http://api.example.com/data/&lt;state&gt;</clr-control-helper>
-              </clr-input-container>
-            </div>
-          </div>
-          
-          <!-- Layer X-Axis -->
-          <div class="clr-row">
-            <div class="clr-col-12">
-              <clr-select-container>
-                <label [for]="'layerXAxis' + i">Layer {{i + 1}} X-Axis</label>
-                <select [id]="'layerXAxis' + i" [(ngModel)]="layer.xAxis" [ngModelOptions]="{standalone: true}" clrSelect>
-                  <option value="">Select X-Axis Column</option>
-                  <option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
-                </select>
-                <clr-control-helper>Select the column to use for X-axis in layer {{i + 1}} drilldown view</clr-control-helper>
-              </clr-select-container>
-            </div>
-          </div>
-          
-          <!-- Layer Y-Axis (except for Deal Details) -->
-          <div class="clr-row" *ngIf="selectedItem?.name !== 'Deal Details'">
-            <div class="clr-col-12">
-              <clr-select-container>
-                <label [for]="'layerYAxis' + i">Layer {{i + 1}} Y-Axis</label>
-                <select [id]="'layerYAxis' + i" [(ngModel)]="layer.yAxis" [ngModelOptions]="{standalone: true}" clrSelect>
-                  <option value="">Select Y-Axis Column</option>
-                  <option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
-                </select>
-                <clr-control-helper>Select the column to use for Y-axis in layer {{i + 1}} drilldown view</clr-control-helper>
-              </clr-select-container>
-            </div>
-          </div>
-
-          <!-- Parameter Selection for Drilldown Layer -->
-          <div class="clr-row">
-            <div class="clr-col-12">
-              <clr-select-container>
-                <label [for]="'layerParameter' + i">Layer {{i + 1}} Parameter</label>
-                <select [id]="'layerParameter' + i" [(ngModel)]="layer.parameter" [ngModelOptions]="{standalone: true}" clrSelect>
-                  <option value="">Select Parameter Column</option>
-                  <option *ngFor="let column of layerColumnData[i] || []" [value]="column">{{column}}</option>
-                </select>
-                <clr-control-helper>Select the column to use as parameter for URL template replacement in layer {{i + 1}} drilldown</clr-control-helper>
-              </clr-select-container>
-            </div>
-          </div>
-
-          <!-- Layer Filter Configuration -->
-          <div class="clr-row section-divider">
-            <div class="clr-col-12">
-              <h5>Layer {{i + 1}} Filters</h5>
-              <p class="clr-subtext">Configure filters for this drilldown layer</p>
-              
-              <!-- Add Layer Filter Button -->
-              <button class="btn btn-sm btn-primary" (click)="addLayerFilter(i)" type="button">
-                <clr-icon shape="plus"></clr-icon> Add Filter
-              </button>
-              
-              <!-- Layer Filter Fields List -->
-              <div *ngFor="let filter of layer.filters; let j = index" class="filter-item">
-                <div class="filter-header">
-                  <span>Filter {{j + 1}}</span>
-                  <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)" type="button">
-                    <clr-icon shape="trash"></clr-icon>
-                  </button>
-                </div>
-                
-                <div class="clr-row filter-content">
-                  <div class="clr-col-5">
-                    <clr-input-container>
-                      <label [attr.for]="'layerFilterField' + i + '_' + j">Field Name</label>
-                      <input type="text" [id]="'layerFilterField' + i + '_' + j" [(ngModel)]="filter.field" [ngModelOptions]="{standalone: true}" clrInput />
-                    </clr-input-container>
-                  </div>
-                  
-                  <div class="clr-col-5">
-                    <clr-input-container>
-                      <label [attr.for]="'layerFilterValue' + i + '_' + j">Filter Value</label>
-                      <input type="text" [id]="'layerFilterValue' + i + '_' + j" [(ngModel)]="filter.value" [ngModelOptions]="{standalone: true}" clrInput />
-                    </clr-input-container>
-                  </div>
-                  
-                  <div class="clr-col-2">
-                    <button class="btn btn-icon btn-danger btn-sm" (click)="removeLayerFilter(i, j)" type="button">
-                      <clr-icon shape="trash"></clr-icon>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="cancelConfiguration()">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="saveConfiguration()">Save</button>
-  </div>
-</clr-modal>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.scss
deleted file mode 100644
index dbce2de..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.scss
+++ /dev/null
@@ -1,220 +0,0 @@
-.shield-dashboard {
-  padding: 20px;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-}
-
-.dashboard-container {
-  display: flex;
-  gap: 20px;
-}
-
-.sidebar {
-  flex: 0 0 250px;
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  padding: 15px;
-}
-
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.kpi-section {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.kpi-card {
-  flex: 1;
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  padding: 20px;
-  text-align: center;
-}
-
-.kpi-title {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 10px;
-}
-
-.kpi-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: #333;
-}
-
-.total-leads {
-  border-top: 4px solid #4285f4;
-}
-
-.total-deals {
-  border-top: 4px solid #0f9d58;
-}
-
-.deleted-items-section {
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  padding: 20px;
-  
-  h3 {
-    margin-top: 0;
-    color: #333;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 10px;
-  }
-  
-  .deleted-items-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 15px;
-    
-    .deleted-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      background: #f8f9fa;
-      border: 1px solid #e9ecef;
-      border-radius: 4px;
-      padding: 8px 12px;
-      
-      span {
-        font-size: 14px;
-        color: #495057;
-      }
-    }
-  }
-}
-
-.dashboard-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-  gap: 20px;
-}
-
-.grid-item {
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  padding: 15px;
-  position: relative;
-}
-
-.grid-item-content {
-  margin-top: 30px;
-}
-
-.drag-handler {
-  cursor: move;
-}
-
-.drop-zone-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 500px;
-  background-color: #f8f9fa;
-  border: 2px dashed #dee2e6;
-  border-radius: 4px;
-  color: #6c757d;
-  font-size: 18px;
-  text-align: center;
-  
-  p {
-    margin: 0;
-  }
-}
-
-/* Gridster specific styles */
-gridster {
-  background: transparent !important;
-}
-
-gridster-item {
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  overflow: hidden;
-}
-
-/* Configuration Modal Styles */
-.section-divider {
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid #eee;
-}
-
-.section-divider:first-child {
-  border-top: none;
-  padding-top: 0;
-  margin-top: 0;
-}
-
-.filter-item {
-  margin-bottom: 15px;
-  padding: 12px;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  background-color: #f8f9fa;
-}
-
-.filter-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.filter-content {
-  margin-top: 10px;
-}
-
-.drilldown-layer {
-  margin-top: 20px;
-  padding: 15px;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  background-color: #ffffff;
-}
-
-.layer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
-}
-
-.layer-header h5 {
-  margin: 0;
-  color: #495057;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .dashboard-container {
-    flex-direction: column;
-  }
-  
-  .sidebar {
-    flex: 0 0 auto;
-  }
-  
-  .kpi-section {
-    flex-direction: column;
-  }
-  
-  .filter-item .clr-row > div {
-    margin-bottom: 10px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts
deleted file mode 100644
index 5fec6fc..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts
+++ /dev/null
@@ -1,596 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { GridsterConfig, GridsterItem } from 'angular-gridster2';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { DatastoreService } from 'src/app/services/fnd/datastore.service';
-import { AlertsService } from 'src/app/services/fnd/alerts.service';
-import { SureconnectService } from '../../sureconnect/sureconnect.service';
-
-interface ShieldDashboardItem extends GridsterItem {
-  chartType: string;
-  name: string;
-  id: number;
-  component?: any;
-  // Configuration properties
-  charttitle?: string;
-  connection?: string;
-  table?: string;
-  xAxis?: string;
-  yAxis?: string[];
-  chartlegend?: boolean;
-  showlabel?: boolean;
-  baseFilters?: any[];
-  drilldownEnabled?: boolean;
-  drilldownApiUrl?: string;
-  drilldownXAxis?: string;
-  drilldownYAxis?: string;
-  drilldownParameter?: string;
-  drilldownFilters?: any[];
-  drilldownLayers?: any[];
-}
-
-interface WidgetModel {
-  name: string;
-  identifier: string;
-}
-
-@Component({
-  selector: 'app-shield-dashboard',
-  templateUrl: './shield-dashboard.component.html',
-  styleUrls: ['./shield-dashboard.component.scss']
-})
-export class ShieldDashboardComponent implements OnInit {
-  options: GridsterConfig;
-  dashboard: Array<ShieldDashboardItem>;
-  
-  // Configuration modal
-  configModalOpen = false;
-  modeledit = false; // Add this to match the main dashboard pattern
-  configForm: FormGroup;
-  selectedItem: ShieldDashboardItem | null = null;
-  
-  // Component palette
-  showComponentPalette = false;
-  WidgetsMock: WidgetModel[] = [
-    {
-      name: 'Bar Chart',
-      identifier: 'bar_chart'
-    },
-    {
-      name: 'Doughnut Chart',
-      identifier: 'doughnut_chart'
-    },
-    {
-      name: 'Map Chart',
-      identifier: 'map_chart'
-    },
-    {
-      name: 'Data Table',
-      identifier: 'grid_view'
-    },
-    {
-      name: 'Deal Details',
-      identifier: 'to_do_chart'
-    },
-    {
-      name: 'Quarterwise Flow',
-      identifier: 'line_chart'
-    },
-    {
-      name: 'Compact Filter',
-      identifier: 'compact_filter'
-    }
-  ];
-  
-  // Services data
-  storedata: any[] = [];
-  columnData: any[] = [];
-  sureconnectData: any[] = [];
-  drilldownColumnData: any[] = [];
-  layerColumnData: { [key: number]: any[] } = {};
-  
-  // Keep track of deleted items
-  deletedItems: Array<ShieldDashboardItem> = [];
-
-  constructor(
-    private _fb: FormBuilder,
-    private datastoreService: DatastoreService,
-    private alertService: AlertsService,
-    private sureconnectService: SureconnectService
-  ) { }
-
-  ngOnInit(): void {
-    this.options = {
-      gridType: 'fit',
-      enableEmptyCellDrop: true,
-      emptyCellDropCallback: this.onDrop,
-      pushItems: true,
-      swap: true,
-      pushDirections: { north: true, east: true, south: true, west: true },
-      resizable: { enabled: true },
-      itemChangeCallback: this.itemChange.bind(this),
-      draggable: {
-        enabled: true,
-        ignoreContent: true,
-        dropOverItems: true,
-        dragHandleClass: 'drag-handler',
-        ignoreContentClass: 'no-drag',
-      },
-      displayGrid: 'always',
-      minCols: 10,
-      minRows: 10,
-      itemResizeCallback: this.itemResize.bind(this)
-    };
-
-    // Initialize the dashboard with empty canvas
-    this.dashboard = [];
-    
-    // Initialize form
-    this.configForm = this._fb.group({
-      charttitle: [''],
-      connection: [''],
-      table: [''],
-      xAxis: [''],
-      yAxis: [''],
-      chartlegend: [true],
-      showlabel: [true]
-    });
-    
-    // Load service data
-    this.loadServicesData();
-  }
-  
-  // Load initial data from services
-  loadServicesData() {
-    // Load sureconnect data
-    this.sureconnectService.getAll().subscribe((data: any[]) => {
-      this.sureconnectData = data;
-    });
-    
-    // Load datastore data
-    this.datastoreService.getAll().subscribe((data) => {
-      this.storedata = data as any[];
-    });
-  }
-  
-  // Toggle component palette visibility
-  toggleComponentPalette(): void {
-    this.showComponentPalette = !this.showComponentPalette;
-  }
-  
-  // Handle drag start event for components - matching the working implementation
-  onDrag(event: DragEvent, identifier: string): void {
-    console.log("on drag", identifier);
-    console.log("on drag ", event);
-    if (event.dataTransfer) {
-      event.dataTransfer.setData('widgetIdentifier', identifier);
-    }
-  }
-
-  onDrop(ev: any) {
-    // Handle dropping new components onto the dashboard
-    console.log('Item dropped:', ev);
-    
-    // Get the component identifier from the drag event
-    const componentType = ev.dataTransfer ? ev.dataTransfer.getData('widgetIdentifier') : '';
-    console.log('Component type dropped:', componentType);
-    
-    if (componentType) {
-      this.addComponentToDashboard(componentType);
-    } else {
-      console.log('No component type found in drag data');
-    }
-  }
-  
-  // Add a new component to the dashboard
-  addComponentToDashboard(componentType: string) {
-    // Generate a new ID for the component
-    const newId = this.dashboard.length > 0 ? Math.max(...this.dashboard.map(item => item.id), 0) + 1 : 1;
-    
-    let newItem: ShieldDashboardItem;
-    
-    switch (componentType) {
-      case "bar_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'bar-chart', 
-          name: 'Bar Chart', 
-          id: newId,
-          chartlegend: true,
-          showlabel: true,
-          baseFilters: [],
-          drilldownEnabled: false,
-          drilldownLayers: []
-        };
-        break;
-      case "doughnut_chart":
-        // For doughnut charts, we'll need to determine which one based on existing items
-        const donutCount = this.dashboard.filter(item => item.chartType === 'donut-chart').length;
-        if (donutCount % 2 === 0) {
-          newItem = { 
-            cols: 5, 
-            rows: 6, 
-            y: 0, 
-            x: 0, 
-            chartType: 'donut-chart', 
-            name: 'End Customer Donut', 
-            id: newId,
-            chartlegend: true,
-            showlabel: true,
-            baseFilters: [],
-            drilldownEnabled: false,
-            drilldownLayers: []
-          };
-        } else {
-          newItem = { 
-            cols: 5, 
-            rows: 6, 
-            y: 0, 
-            x: 0, 
-            chartType: 'donut-chart', 
-            name: 'Segment Penetration Donut', 
-            id: newId,
-            chartlegend: true,
-            showlabel: true,
-            baseFilters: [],
-            drilldownEnabled: false,
-            drilldownLayers: []
-          };
-        }
-        break;
-      case "map_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'map-chart', 
-          name: 'Map Chart', 
-          id: newId,
-          chartlegend: true,
-          showlabel: true,
-          baseFilters: [],
-          drilldownEnabled: false,
-          drilldownLayers: []
-        };
-        break;
-      case "grid_view":
-        newItem = { 
-          cols: 10, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'data-table', 
-          name: 'Data Table', 
-          id: newId,
-          chartlegend: true,
-          showlabel: true,
-          baseFilters: [],
-          drilldownEnabled: false,
-          drilldownLayers: []
-        };
-        break;
-      case "to_do_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'deal-details', 
-          name: 'Deal Details', 
-          id: newId,
-          chartlegend: true,
-          showlabel: true,
-          baseFilters: [],
-          drilldownEnabled: false,
-          drilldownLayers: []
-        };
-        break;
-      case "line_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'quarterwise-flow', 
-          name: 'Quarterwise Flow', 
-          id: newId,
-          chartlegend: true,
-          showlabel: true,
-          baseFilters: [],
-          drilldownEnabled: false,
-          drilldownLayers: []
-        };
-        break;
-      case "compact_filter":
-        newItem = { 
-          cols: 3, 
-          rows: 2, 
-          y: 0, 
-          x: 0, 
-          chartType: 'compact-filter', 
-          name: 'Compact Filter', 
-          id: newId,
-          baseFilters: [],
-          drilldownEnabled: false,
-          drilldownLayers: []
-        };
-        break;
-      default:
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: componentType, 
-          name: componentType, 
-          id: newId,
-          chartlegend: true,
-          showlabel: true,
-          baseFilters: [],
-          drilldownEnabled: false,
-          drilldownLayers: []
-        };
-    }
-    
-    // Add the new item to the dashboard
-    this.dashboard.push(newItem);
-  }
-
-  removeItem(item: ShieldDashboardItem) {
-    // Add the item to deleted items list before removing
-    this.deletedItems.push({...item});
-    
-    // Remove the item from the dashboard
-    this.dashboard.splice(this.dashboard.indexOf(item), 1);
-  }
-  
-  // Restore a deleted item
-  restoreItem(item: ShieldDashboardItem) {
-    // Remove from deleted items
-    this.deletedItems.splice(this.deletedItems.indexOf(item), 1);
-    
-    // Add back to dashboard
-    this.dashboard.push(item);
-  }
-  
-  // Clear all deleted items
-  clearDeletedItems() {
-    this.deletedItems = [];
-  }
-
-  itemChange() {
-    console.log('Item changed:', this.dashboard);
-  }
-  
-  itemResize(item: any, itemComponent: any) {
-    console.log('Item resized:', item);
-    // Trigger a window resize event to notify charts to resize
-    window.dispatchEvent(new Event('resize'));
-  }
-  
-  /**
-   * Extract only the relevant chart configuration properties to pass to chart components
-   * This prevents errors when trying to set properties that don't exist on the components
-   */
-  getChartInputs(item: any): any {
-    // Only pass properties that are relevant to chart components
-    const chartInputs = {
-      chartType: item.chartType,
-      name: item.name,
-      charttitle: item.charttitle,
-      connection: item.connection,
-      table: item.table,
-      xAxis: item.xAxis,
-      yAxis: item.yAxis,
-      chartlegend: item.chartlegend,
-      showlabel: item.showlabel,
-      baseFilters: item.baseFilters || [],
-      drilldownEnabled: item.drilldownEnabled,
-      drilldownApiUrl: item.drilldownApiUrl,
-      drilldownXAxis: item.drilldownXAxis,
-      drilldownYAxis: item.drilldownYAxis,
-      drilldownParameter: item.drilldownParameter,
-      drilldownFilters: item.drilldownFilters || [],
-      drilldownLayers: item.drilldownLayers || []
-    };
-    
-    // Remove undefined properties to avoid passing unnecessary data
-    Object.keys(chartInputs).forEach(key => {
-      if (chartInputs[key] === undefined) {
-        delete chartInputs[key];
-      }
-    });
-    
-    return chartInputs;
-  }
-  
-  // Open configuration modal for a chart
-  editGadget(item: ShieldDashboardItem) {
-    console.log('Opening configuration modal for item:', item);
-    this.selectedItem = item;
-    this.modeledit = true; // Use modeledit instead of configModalOpen
-    
-    // Initialize form with item data
-    this.configForm.patchValue({
-      charttitle: item.charttitle || '',
-      connection: item.connection || '',
-      table: item.table || '',
-      xAxis: item.xAxis || '',
-      yAxis: item.yAxis || [],
-      chartlegend: item.chartlegend !== undefined ? item.chartlegend : true,
-      showlabel: item.showlabel !== undefined ? item.showlabel : true
-    });
-    
-    console.log('Form values after patch:', this.configForm.value);
-    
-    // Load columns if table is set
-    if (item.table) {
-      this.getColumns(item.connection, item.table);
-    }
-    
-    // Load drilldown columns if drilldown API URL is set
-    if (item.drilldownApiUrl) {
-      this.refreshDrilldownColumns();
-    }
-  }
-  
-  // Save configuration changes
-  saveConfiguration() {
-    if (this.selectedItem) {
-      const formData = this.configForm.value;
-      console.log('Saving configuration:', formData);
-      
-      // Update the selected item with form data
-      Object.assign(this.selectedItem, formData);
-      
-      // Close the modal
-      this.modeledit = false; // Use modeledit instead of configModalOpen
-      this.selectedItem = null;
-    }
-  }
-  
-  // Cancel configuration changes
-  cancelConfiguration() {
-    console.log('Canceling configuration');
-    this.modeledit = false; // Use modeledit instead of configModalOpen
-    this.selectedItem = null;
-  }
-  
-  // Get tables from datastore
-  getTables(id: string) {
-    this.alertService.getTablefromstore(parseInt(id, 10)).subscribe(gateway => {
-      console.log(gateway);
-      // Handle table data
-    }, (error) => {
-      console.log(error);
-    });
-  }
-  
-  // Get columns from API
-  getColumns(connectionId: string, table: string) {
-    const connId = connectionId ? parseInt(connectionId, 10) : undefined;
-    this.alertService.getColumnfromurl(table, connId).subscribe(data => {
-      console.log('Column data:', data);
-      this.columnData = data;
-    }, (error) => {
-      console.log(error);
-      this.columnData = [];
-    });
-  }
-  
-  // Refresh drilldown columns
-  refreshDrilldownColumns() {
-    if (this.selectedItem && this.selectedItem.drilldownApiUrl) {
-      const connId = this.selectedItem.connection ? parseInt(this.selectedItem.connection, 10) : undefined;
-      this.alertService.getColumnfromurl(this.selectedItem.drilldownApiUrl, connId).subscribe(data => {
-        console.log('Drilldown column data:', data);
-        this.drilldownColumnData = data;
-      }, (error) => {
-        console.log('Error fetching drilldown columns:', error);
-        this.drilldownColumnData = [];
-      });
-    }
-  }
-  
-  // Add base filter
-  addBaseFilter() {
-    if (this.selectedItem) {
-      if (!this.selectedItem.baseFilters) {
-        this.selectedItem.baseFilters = [];
-      }
-      this.selectedItem.baseFilters.push({ field: '', value: '' });
-    }
-  }
-  
-  // Remove base filter
-  removeBaseFilter(index: number) {
-    if (this.selectedItem && this.selectedItem.baseFilters) {
-      this.selectedItem.baseFilters.splice(index, 1);
-    }
-  }
-  
-  // Add drilldown filter
-  addDrilldownFilter() {
-    if (this.selectedItem) {
-      if (!this.selectedItem.drilldownFilters) {
-        this.selectedItem.drilldownFilters = [];
-      }
-      this.selectedItem.drilldownFilters.push({ field: '', value: '' });
-    }
-  }
-  
-  // Remove drilldown filter
-  removeDrilldownFilter(index: number) {
-    if (this.selectedItem && this.selectedItem.drilldownFilters) {
-      this.selectedItem.drilldownFilters.splice(index, 1);
-    }
-  }
-  
-  // Add drilldown layer
-  addDrilldownLayer() {
-    if (this.selectedItem) {
-      if (!this.selectedItem.drilldownLayers) {
-        this.selectedItem.drilldownLayers = [];
-      }
-      this.selectedItem.drilldownLayers.push({
-        enabled: false,
-        apiUrl: '',
-        xAxis: '',
-        yAxis: '',
-        parameter: '',
-        filters: []
-      });
-    }
-  }
-  
-  // Remove drilldown layer
-  removeDrilldownLayer(index: number) {
-    if (this.selectedItem && this.selectedItem.drilldownLayers) {
-      this.selectedItem.drilldownLayers.splice(index, 1);
-    }
-  }
-  
-  // Add layer filter
-  addLayerFilter(layerIndex: number) {
-    if (this.selectedItem && this.selectedItem.drilldownLayers) {
-      const layer = this.selectedItem.drilldownLayers[layerIndex];
-      if (layer) {
-        if (!layer.filters) {
-          layer.filters = [];
-        }
-        layer.filters.push({ field: '', value: '' });
-      }
-    }
-  }
-  
-  // Refresh drilldown columns for a specific layer
-  refreshDrilldownLayerColumns(layerIndex: number) {
-    if (this.selectedItem && this.selectedItem.drilldownLayers && this.selectedItem.drilldownLayers[layerIndex]) {
-      const layer = this.selectedItem.drilldownLayers[layerIndex];
-      if (layer && layer.apiUrl) {
-        const connId = this.selectedItem.connection ? parseInt(this.selectedItem.connection, 10) : undefined;
-        this.alertService.getColumnfromurl(layer.apiUrl, connId).subscribe(data => {
-          console.log(`Drilldown layer ${layerIndex} column data:`, data);
-          // Store layer column data in the layerColumnData property
-          this.layerColumnData[layerIndex] = data;
-        }, (error) => {
-          console.log(`Error fetching drilldown layer ${layerIndex} columns:`, error);
-          this.layerColumnData[layerIndex] = [];
-        });
-      }
-    }
-  }
-  
-  // Remove layer filter
-  removeLayerFilter(layerIndex: number, filterIndex: number) {
-    if (this.selectedItem && this.selectedItem.drilldownLayers) {
-      const layer = this.selectedItem.drilldownLayers[layerIndex];
-      if (layer && layer.filters) {
-        layer.filters.splice(filterIndex, 1);
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts.fixed b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts.fixed
deleted file mode 100644
index 32eb2b3..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.component.ts.fixed
+++ /dev/null
@@ -1,223 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { GridsterConfig, GridsterItem } from 'angular-gridster2';
-
-interface ShieldDashboardItem extends GridsterItem {
-  chartType: string;
-  name: string;
-  id: number;
-  component?: any;
-}
-
-@Component({
-  selector: 'app-shield-dashboard',
-  templateUrl: './shield-dashboard.component.html',
-  styleUrls: ['./shield-dashboard.component.scss']
-})
-export class ShieldDashboardComponent implements OnInit {
-  options: GridsterConfig;
-  dashboard: Array<ShieldDashboardItem>;
-  
-  // Keep track of deleted items
-  deletedItems: Array<ShieldDashboardItem> = [];
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this.options = {
-      gridType: 'fit',
-      enableEmptyCellDrop: true,
-      emptyCellDropCallback: this.onDrop,
-      pushItems: true,
-      swap: true,
-      pushDirections: { north: true, east: true, south: true, west: true },
-      resizable: { enabled: true },
-      itemChangeCallback: this.itemChange.bind(this),
-      draggable: {
-        enabled: true,
-        ignoreContent: true,
-        dropOverItems: true,
-        dragHandleClass: 'drag-handler',
-        ignoreContentClass: 'no-drag',
-      },
-      displayGrid: 'always',
-      minCols: 10,
-      minRows: 10,
-      itemResizeCallback: this.itemResize.bind(this)
-    };
-
-    // Initialize the dashboard with empty canvas
-    this.dashboard = [];
-  }
-
-  onDrop = (event: any) => {
-    // Handle dropping new components onto the dashboard
-    console.log('Item dropped:', event);
-    
-    // Get the component identifier from the drag event
-    const componentType = event.dataTransfer ? event.dataTransfer.getData('widgetIdentifier') : '';
-    console.log('Component type dropped:', componentType);
-    
-    if (componentType) {
-      this.addComponentToDashboard(componentType);
-    } else {
-      console.log('No component type found in drag data');
-    }
-  }
-  
-  // Add a new component to the dashboard
-  addComponentToDashboard(componentType: string) {
-    // Generate a new ID for the component
-    const newId = this.dashboard.length > 0 ? Math.max(...this.dashboard.map(item => item.id), 0) + 1 : 1;
-    
-    let newItem: ShieldDashboardItem;
-    
-    switch (componentType) {
-      case "bar_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'bar-chart', 
-          name: 'Bar Chart', 
-          id: newId
-        };
-        break;
-      case "doughnut_chart":
-        // For doughnut charts, we'll need to determine which one based on existing items
-        const donutCount = this.dashboard.filter(item => item.chartType === 'donut-chart').length;
-        if (donutCount % 2 === 0) {
-          newItem = { 
-            cols: 5, 
-            rows: 6, 
-            y: 0, 
-            x: 0, 
-            chartType: 'donut-chart', 
-            name: 'End Customer Donut', 
-            id: newId
-          };
-        } else {
-          newItem = { 
-            cols: 5, 
-            rows: 6, 
-            y: 0, 
-            x: 0, 
-            chartType: 'donut-chart', 
-            name: 'Segment Penetration Donut', 
-            id: newId
-          };
-        }
-        break;
-      case "map_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'map-chart', 
-          name: 'Map Chart', 
-          id: newId
-        };
-        break;
-      case "grid_view":
-        newItem = { 
-          cols: 10, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'data-table', 
-          name: 'Data Table', 
-          id: newId
-        };
-        break;
-      case "to_do_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'deal-details', 
-          name: 'Deal Details', 
-          id: newId
-        };
-        break;
-      case "line_chart":
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: 'quarterwise-flow', 
-          name: 'Quarterwise Flow', 
-          id: newId
-        };
-        break;
-      default:
-        newItem = { 
-          cols: 5, 
-          rows: 6, 
-          y: 0, 
-          x: 0, 
-          chartType: componentType, 
-          name: componentType, 
-          id: newId
-        };
-    }
-    
-    // Add the new item to the dashboard
-    this.dashboard.push(newItem);
-  }
-
-  removeItem(item: ShieldDashboardItem) {
-    // Add the item to deleted items list before removing
-    this.deletedItems.push({...item});
-    
-    // Remove the item from the dashboard
-    this.dashboard.splice(this.dashboard.indexOf(item), 1);
-  }
-  
-  // Restore a deleted item
-  restoreItem(item: ShieldDashboardItem) {
-    // Remove from deleted items
-    this.deletedItems.splice(this.deletedItems.indexOf(item), 1);
-    
-    // Add back to dashboard
-    this.dashboard.push(item);
-  }
-  
-  // Clear all deleted items
-  clearDeletedItems() {
-    this.deletedItems = [];
-  }
-
-  itemChange() {
-    console.log('Item changed:', this.dashboard);
-  }
-  
-  itemResize(item: any, itemComponent: any) {
-    console.log('Item resized:', item);
-    // Trigger a window resize event to notify charts to resize
-    window.dispatchEvent(new Event('resize'));
-  }
-  
-  /**
-   * Extract only the relevant chart configuration properties to pass to chart components
-   * This prevents errors when trying to set properties that don't exist on the components
-   */
-  getChartInputs(item: any): any {
-    // Only pass properties that are relevant to chart components
-    const chartInputs = {
-      chartType: item.chartType,
-      name: item.name
-    };
-    
-    // Remove undefined properties to avoid passing unnecessary data
-    Object.keys(chartInputs).forEach(key => {
-      if (chartInputs[key] === undefined) {
-        delete chartInputs[key];
-      }
-    });
-    
-    return chartInputs;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module.ts
deleted file mode 100644
index 9a048b8..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ClarityModule } from '@clr/angular';
-import { GridsterModule } from 'angular-gridster2';
-import { NgChartsModule } from 'ng2-charts';
-import { DynamicModule } from 'ng-dynamic-component';
-
-import { ShieldDashboardRoutingModule } from './shield-dashboard-routing.module';
-import { ShieldDashboardComponent } from './shield-dashboard.component';
-import { SidebarFiltersComponent } from './components/sidebar-filters/sidebar-filters.component';
-import { BarChartComponent } from './components/bar-chart/bar-chart.component';
-import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
-import { MapChartComponent } from './components/map-chart/map-chart.component';
-import { DataTableComponent } from './components/data-table/data-table.component';
-import { DealDetailsCardComponent } from './components/deal-details-card/deal-details-card.component';
-import { QuarterwiseFlowComponent } from './components/quarterwise-flow/quarterwise-flow.component';
-import { LoadingShimmerComponent } from './components/loading-shimmer/loading-shimmer.component';
-
-@NgModule({
-  declarations: [
-    ShieldDashboardComponent,
-    SidebarFiltersComponent,
-    BarChartComponent,
-    DonutChartComponent,
-    MapChartComponent,
-    DataTableComponent,
-    DealDetailsCardComponent,
-    QuarterwiseFlowComponent,
-    LoadingShimmerComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ClarityModule,
-    GridsterModule,
-    NgChartsModule,
-    DynamicModule,
-    ShieldDashboardRoutingModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-})
-export class ShieldDashboardModule { }
\ No newline at end of file
diff --git 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
index 16a2e1d..c9e47d0 100644
--- 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,307 +1,27 @@
-<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>
\ No newline at end of file
+<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>
diff --git 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
index 598a4bc..e69de29 100644
--- 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
@@ -1,289 +0,0 @@
-// 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
-  }
-}
\ No newline at end of file
diff --git 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
index 1866f1d..481fcca 100644
--- 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,555 +1,27 @@
-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 { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-to-do-chart',
   templateUrl: './to-do-chart.component.html',
   styleUrls: ['./to-do-chart.component.scss']
 })
-export class ToDoChartComponent implements OnInit, OnChanges {
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @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[] = [];
+export class ToDoChartComponent implements OnInit {
+
+  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;
-    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange; // Add connection change detection
-    
-    // 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)
-      this.fetchToDoData();
-    }
-  }
-  
   data: any;
   todo: string;
-  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 && this.xAxis) {
-      console.log('Fetching to-do data for:', { table: this.table, xAxis: this.xAxis, connection: this.connection });
-      
-      // 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);
-        }
-      }
-      
-      // 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, 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'];
-      }
-    }
-  }
+  todoList = ['todo 1'];
 
   public addTodo(todo: string) {
-    if (todo && todo.trim() !== '') {
-      this.todoList.push(todo.trim());
-      this.todo = ''; // Clear the input field
-    }
-  }
+    this.todoList.push(todo);
+}
 
-  public removeTodo(todoIx: number) {
+public removeTodo(todoIx: number) {
     if (this.todoList.length) {
         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();
-  }
-}
\ No newline at end of file
+}
+}
diff --git 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
deleted file mode 100644
index 3552a7e..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './unified-chart.component';
\ No newline at end of file
diff --git 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
deleted file mode 100644
index cf50dfa..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html
+++ /dev/null
@@ -1,296 +0,0 @@
-<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>
-
-  <!-- Filter toggle icon -->
-  <div class="filter-toggle-icon" *ngIf="hasFilters()" (click)="toggleFilters()">
-    <clr-icon shape="filter" size="24" 
-              [style.color]="showFilters ? '#007cba' : '#666'"
-              title="Toggle Filters">
-    </clr-icon>
-    <span>
-      {{ showFilters ? 'Hide Filters' : 'Show Filters' }}
-    </span>
-  </div>
-
-  <!-- Render different chart types based on chartType input -->
-  <div class="chart-wrapper">
-    <!-- Dynamic Chart Container - uses extracted dynamic options and styles but static template -->
-    <div *ngIf="dynamicTemplate || chartType" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="chartType || 'bar'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-
-    <!-- Fallback for when no chart type is specified -->
-    <div *ngIf="!dynamicTemplate && !chartType" class="chart-canvas-container">
-      <canvas baseChart
-        [datasets]="chartData"
-        [labels]="chartLabels"
-        [options]="chartOptions"
-        [legend]="chartLegend"
-        [chartType]="'bar'"
-        (chartClick)="chartClicked($event)"
-        (chartHover)="chartHovered($event)">
-      </canvas>
-    </div>
-  </div>
-
-  <!-- Collapsible Base Filters -->
-  <div class="filters-section" *ngIf="baseFilters && baseFilters.length > 0 && showFilters">
-    <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 || filter.type === 'text'" class="filter-text">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
-          <input type="text" [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)" 
-                 class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
-        </div>
-
-        <!-- Dropdown Filter -->
-        <div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
-          <select [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)" class="form-control">
-            <option value="">Select {{ filter.field || 'value' }}</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 || 'Filter ' + (i + 1) }}</label>
-          <div class="multiselect-container">
-            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
-              <span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
-              <span *ngIf="filter.value && !Array.isArray(filter.value)">
-                {{ filter.value }}
-              </span>
-              <span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
-                {{ filter.value.length }} 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 || 'Filter ' + (i + 1) }}</label>
-          <div class="date-range-inputs">
-            <input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)" 
-                   class="form-control" placeholder="Start Date">
-            <input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)" 
-                   class="form-control" placeholder="End Date">
-          </div>
-        </div>
-
-        <!-- Toggle Filter -->
-        <div *ngIf="filter.type === 'toggle'" class="filter-toggle">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</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 && showFilters">
-    <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 || filter.type === 'text'" class="filter-text">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
-          <input type="text" [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)" 
-                 class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
-        </div>
-
-        <!-- Dropdown Filter -->
-        <div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
-          <select [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)" class="form-control">
-            <option value="">Select {{ filter.field || 'value' }}</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 || 'Filter ' + (i + 1) }}</label>
-          <div class="multiselect-container">
-            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
-              <span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
-              <span *ngIf="filter.value && !Array.isArray(filter.value)">
-                {{ filter.value }}
-              </span>
-              <span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
-                {{ filter.value.length }} 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 || 'Filter ' + (i + 1) }}</label>
-          <div class="date-range-inputs">
-            <input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)" 
-                   class="form-control" placeholder="Start Date">
-            <input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)" 
-                   class="form-control" placeholder="End Date">
-          </div>
-        </div>
-
-        <!-- Toggle Filter -->
-        <div *ngIf="filter.type === 'toggle'" class="filter-toggle">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</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() && showFilters">
-    <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 || filter.type === 'text'" class="filter-text">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
-          <input type="text" [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)" 
-                 class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
-        </div>
-
-        <!-- Dropdown Filter -->
-        <div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
-          <select [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)" class="form-control">
-            <option value="">Select {{ filter.field || 'value' }}</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 || 'Filter ' + (i + 1) }}</label>
-          <div class="multiselect-container">
-            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
-              <span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
-              <span *ngIf="filter.value && !Array.isArray(filter.value)">
-                {{ filter.value }}
-              </span>
-              <span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
-                {{ filter.value.length }} 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 || 'Filter ' + (i + 1) }}</label>
-          <div class="date-range-inputs">
-            <input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)" 
-                   class="form-control" placeholder="Start Date">
-            <input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)" 
-                   class="form-control" placeholder="End Date">
-          </div>
-        </div>
-
-        <!-- Toggle Filter -->
-        <div *ngIf="filter.type === 'toggle'" class="filter-toggle">
-          <label>{{ filter.field || 'Filter ' + (i + 1) }}</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() && showFilters">
-    <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>
\ No newline at end of file
diff --git 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
deleted file mode 100644
index 4cd6c2e..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.scss
+++ /dev/null
@@ -1,307 +0,0 @@
-.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: 400px;
-  padding: 10px;
-}
-
-.chart-canvas-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  padding: 15px;
-  box-sizing: border-box;
-  
-  canvas {
-    display: block;
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-
-.filter-toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 5px;
-  cursor: pointer;
-  
-  clr-icon {
-    transition: color 0.3s ease;
-    
-    &:hover {
-      color: #007cba !important;
-    }
-  }
-  
-  span {
-    margin-left: 5px;
-    font-size: 12px;
-    color: #666;
-    transition: color 0.3s ease;
-  }
-  
-  &:hover span {
-    color: #007cba;
-  }
-}
-
-.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); }
-}
-
-@media (max-width: 768px) {
-  .filters-container {
-    flex-direction: column;
-  }
-  
-  .filter-item {
-    min-width: 100%;
-  }
-  
-  .chart-wrapper {
-    min-height: 250px;
-  }
-  
-  .chart-canvas-container {
-    padding: 10px;
-  }
-}
\ No newline at end of file
diff --git 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
deleted file mode 100644
index 94a60e4..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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();
-  });
-});
\ No newline at end of file
diff --git 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
deleted file mode 100644
index b877eb8..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts
+++ /dev/null
@@ -1,2096 +0,0 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild, ElementRef, Renderer2 } from '@angular/core';
-import { Dashboard3Service } from '../../../../../../services/builder/dashboard3.service';
-import { FilterService } from '../../common-filter/filter.service';
-import { Subscription } from 'rxjs';
-import { BaseChartDirective } from 'ng2-charts';
-import { ChartConfiguration, ChartDataset } from 'chart.js';
-import { DynamicChartLoaderService } from '../../chart-config/dynamic-chart-loader.service';
-
-@Component({
-  selector: 'app-unified-chart',
-  templateUrl: './unified-chart.component.html',
-  styleUrls: ['./unified-chart.component.scss']
-})
-export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() chartType: string;
-  @Input() xAxis: string;
-  @Input() yAxis: string | string[];
-  @Input() table: string;
-  @Input() datastore: string;
-  @Input() charttitle: string;
-  @Input() chartlegend: boolean = true;
-  @Input() showlabel: boolean = true;
-  @Input() chartcolor: boolean;
-  @Input() slices: boolean;
-  @Input() donut: boolean;
-  @Input() charturl: string;
-  @Input() chartparameter: string;
-  @Input() datasource: string;
-  @Input() fieldName: string;
-  @Input() connection: number;
-
-  // Drilldown configuration inputs
-  @Input() drilldownEnabled: boolean = false;
-  @Input() drilldownApiUrl: string;
-  @Input() drilldownXAxis: string;
-  @Input() drilldownYAxis: string;
-  @Input() drilldownParameter: string;
-  @Input() baseFilters: any[] = [];
-  @Input() drilldownFilters: any[] = [];
-  @Input() drilldownLayers: any[] = [];
-
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
-
-  // Chart data properties
-  chartLabels: string[] = [];
-  chartData: any[] = [];
-  chartOptions: any = {};
-  chartPlugins = [];
-  chartLegend: boolean = true;
-
-  // Bubble chart specific properties
-  bubbleChartData: ChartDataset[] = [];
-
-  // No data state
-  noDataAvailable: boolean = false;
-
-  // Loading state
-  isLoading: boolean = false;
-
-  // Multi-layer drilldown state tracking
-  drilldownStack: any[] = [];
-  currentDrilldownLevel: number = 0;
-  originalChartData: any = {};
-
-  // Filter visibility toggle
-  showFilters: boolean = false;
-
-  // Flag to prevent infinite loops
-  private isFetchingData: boolean = false;
-
-  // Subscriptions to unsubscribe on destroy
-  private subscriptions: Subscription[] = [];
-
-  // Filter properties
-  private openMultiselects: Map<string, string> = new Map();
-  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
-  private filtersInitialized: boolean = false;
-
-  // Dynamic template properties
-  dynamicTemplate: string = '';
-  dynamicStyles: string = '';
-  dynamicOptions: any = null;
-  
-  // Properties to hold extracted values from dynamic template
-  extractedChartType: string = '';
-  extractedDatasetsBinding: string = '';
-  extractedLabelsBinding: string = '';
-  extractedOptionsBinding: string = '';
-  extractedLegendBinding: string = '';
-  extractedChartClickBinding: string = '';
-  extractedChartHoverBinding: string = '';
-
-  // Add setter to log when dynamicTemplate changes
-  setDynamicTemplate(value: string) {
-    console.log('Setting dynamic template:', value);
-    this.dynamicTemplate = value;
-    
-    // Extract values from the dynamic template
-    this.extractTemplateValues(value);
-    
-    // Apply dynamic options if they were extracted
-    if (this.dynamicOptions) {
-      this.mergeDynamicOptions();
-    }
-    
-    // Apply dynamic styles if they were extracted
-    if (this.dynamicStyles) {
-      this.applyDynamicStyles();
-    }
-    
-    // Trigger change detection to ensure the template is rendered
-    setTimeout(() => {
-      console.log('Dynamic template updated in DOM');
-      // Check if the dynamic template container exists
-      const dynamicContainer = this.el.nativeElement.querySelector('.dynamic-template-container');
-      console.log('Dynamic template container:', dynamicContainer);
-      if (dynamicContainer) {
-        console.log('Dynamic container innerHTML:', dynamicContainer.innerHTML);
-      }
-      // Check if the canvas element exists in the DOM
-      const canvasElements = this.el.nativeElement.querySelectorAll('canvas');
-      console.log('Canvas elements found in DOM:', canvasElements.length);
-      if (canvasElements.length > 0) {
-        console.log('First canvas element:', canvasElements[0]);
-        // Check if it has the baseChart directive processed
-        const firstCanvas = canvasElements[0];
-        console.log('Canvas has baseChart directive processed:', firstCanvas.classList.contains('chartjs-render-monitor'));
-      } else {
-        console.log('No canvas elements found - checking if template was inserted but not processed');
-        // Check if there's HTML content in the dynamic container
-        if (dynamicContainer) {
-          const htmlContent = dynamicContainer.innerHTML;
-          console.log('HTML content in dynamic container:', htmlContent);
-          if (htmlContent && htmlContent.includes('canvas')) {
-            console.log('Canvas tag found in HTML but not processed by Angular');
-          }
-        }
-      }
-    }, 100);
-  }
-
-  // Extract values from dynamic template HTML
-  private extractTemplateValues(template: string): void {
-    console.log('Extracting values from template:', template);
-    
-    // Reset extracted values
-    this.extractedChartType = this.chartType || '';
-    this.extractedDatasetsBinding = 'chartData';
-    this.extractedLabelsBinding = 'chartLabels';
-    this.extractedOptionsBinding = 'chartOptions';
-    this.extractedLegendBinding = 'chartLegend';
-    this.extractedChartClickBinding = 'chartClicked($event)';
-    this.extractedChartHoverBinding = 'chartHovered($event)';
-    
-    if (!template) {
-      console.log('No template to extract values from');
-      return;
-    }
-    
-    // Parse the template to extract bindings
-    // Look for [chartType] binding
-    const chartTypeMatch = template.match(/\[chartType\]="([^"]+)"/);
-    if (chartTypeMatch && chartTypeMatch[1]) {
-      this.extractedChartType = chartTypeMatch[1];
-      console.log('Extracted chartType binding:', this.extractedChartType);
-    }
-    
-    // Look for [datasets] binding
-    const datasetsMatch = template.match(/\[datasets\]="([^"]+)"/);
-    if (datasetsMatch && datasetsMatch[1]) {
-      this.extractedDatasetsBinding = datasetsMatch[1];
-      console.log('Extracted datasets binding:', this.extractedDatasetsBinding);
-    }
-    
-    // Look for [labels] binding
-    const labelsMatch = template.match(/\[labels\]="([^"]+)"/);
-    if (labelsMatch && labelsMatch[1]) {
-      this.extractedLabelsBinding = labelsMatch[1];
-      console.log('Extracted labels binding:', this.extractedLabelsBinding);
-    }
-    
-    // Look for [options] binding
-    const optionsMatch = template.match(/\[options\]="([^"]+)"/);
-    if (optionsMatch && optionsMatch[1]) {
-      this.extractedOptionsBinding = optionsMatch[1];
-      console.log('Extracted options binding:', this.extractedOptionsBinding);
-    }
-    
-    // Look for [legend] binding
-    const legendMatch = template.match(/\[legend\]="([^"]+)"/);
-    if (legendMatch && legendMatch[1]) {
-      this.extractedLegendBinding = legendMatch[1];
-      console.log('Extracted legend binding:', this.extractedLegendBinding);
-    }
-    
-    // Look for (chartClick) binding
-    const chartClickMatch = template.match(/\(chartClick\)="([^"]+)"/);
-    if (chartClickMatch && chartClickMatch[1]) {
-      this.extractedChartClickBinding = chartClickMatch[1];
-      console.log('Extracted chartClick binding:', this.extractedChartClickBinding);
-    }
-    
-    // Look for (chartHover) binding
-    const chartHoverMatch = template.match(/\(chartHover\)="([^"]+)"/);
-    if (chartHoverMatch && chartHoverMatch[1]) {
-      this.extractedChartHoverBinding = chartHoverMatch[1];
-      console.log('Extracted chartHover binding:', this.extractedChartHoverBinding);
-    }
-    
-    // Extract CSS styles if present in the template
-    const styleMatch = template.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
-    if (styleMatch && styleMatch[1]) {
-      this.dynamicStyles = styleMatch[1];
-      console.log('Extracted CSS styles:', this.dynamicStyles);
-    }
-  }
-
-  constructor(
-    private dashboardService: Dashboard3Service,
-    private filterService: FilterService,
-    private dynamicChartLoader: DynamicChartLoaderService,
-    private renderer: Renderer2,
-    private el: ElementRef
-  ) { }
-
-  ngOnInit(): void {
-    // Subscribe to filter changes
-    this.subscriptions.push(
-      this.filterService.filterState$.subscribe(filters => {
-        this.fetchChartData();
-      })
-    );
-
-    // Log initial input values for debugging
-    console.log('UnifiedChartComponent ngOnInit - initial input values:', {
-      chartType: this.chartType,
-      xAxis: this.xAxis,
-      yAxis: this.yAxis,
-      table: this.table,
-      baseFilters: this.baseFilters,
-      drilldownFilters: this.drilldownFilters,
-      drilldownLayers: this.drilldownLayers
-    });
-
-    // Check if filters are available
-    console.log('Has filters in ngOnInit:', this.hasFilters());
-
-    // Initialize filter values if they haven't been initialized yet
-    if (!this.filtersInitialized) {
-      this.initializeFilterValues();
-      this.filtersInitialized = true;
-    }
-
-    // Initialize chart options with default structure
-    this.initializeChartOptions();
-
-    // Load dynamic template and options for this chart type
-    this.loadDynamicChartConfig();
-
-    this.fetchChartData();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log('UnifiedChartComponent input changes:', changes);
-
-    // Log chartType changes specifically
-    if (changes.chartType) {
-      console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
-    }
-
-    // Log all input values for debugging
-    console.log('Current input values:', {
-      chartType: this.chartType,
-      xAxis: this.xAxis,
-      yAxis: this.yAxis,
-      table: this.table,
-      baseFilters: this.baseFilters,
-      drilldownFilters: this.drilldownFilters,
-      drilldownLayers: this.drilldownLayers
-    });
-
-    // 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 chartTypeChanged = changes.chartType && !changes.chartType.firstChange;
-    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;
-    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
-    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.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;
-
-    // Log base filters changes for debugging
-    if (baseFiltersChanged) {
-      console.log('Base filters changed:', changes.baseFilters);
-      console.log('Current base filters:', this.baseFilters);
-      // Log detailed information about each filter
-      if (this.baseFilters && Array.isArray(this.baseFilters)) {
-        this.baseFilters.forEach((filter, index) => {
-          console.log(`Base filter ${index} details:`, {
-            field: filter.field,
-            value: filter.value,
-            type: filter.type,
-            options: filter.options
-          });
-        });
-      }
-    }
-
-    // Also log when baseFilters is not changed but we still have filters
-    if (!baseFiltersChanged && this.baseFilters && this.baseFilters.length > 0) {
-      console.log('Base filters present but not changed, logging current state:');
-      this.baseFilters.forEach((filter, index) => {
-        console.log(`Base filter ${index} details:`, {
-          field: filter.field,
-          value: filter.value,
-          type: filter.type,
-          options: filter.options
-        });
-      });
-    }
-
-    // Load dynamic template and options if chart type changed
-    if (chartTypeChanged) {
-      this.loadDynamicChartConfig();
-    }
-
-    // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (chartTypeChanged || xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
-      drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
-      drilldownLayersChanged)) {
-      console.log('Chart configuration changed, fetching new data');
-      this.initializeChartOptions();
-      this.fetchChartData();
-    }
-
-    // Update legend visibility if it changed
-    if (changes.chartlegend !== undefined) {
-      this.chartLegend = changes.chartlegend.currentValue;
-      // Ensure chartOptions and required structures exist before accessing legend
-      if (!this.chartOptions) {
-        this.chartOptions = {};
-      }
-      if (!this.chartOptions.plugins) {
-        this.chartOptions.plugins = {};
-      }
-      if (!this.chartOptions.plugins.legend) {
-        this.chartOptions.plugins.legend = { display: this.chartLegend };
-      } else {
-        this.chartOptions.plugins.legend.display = this.chartLegend;
-      }
-      console.log('Chart legend changed to:', this.chartLegend);
-    }
-  }
-
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-
-    // Remove document click handler
-    if (this.documentClickHandler) {
-      document.removeEventListener('click', this.documentClickHandler);
-    }
-  }
-
-  // Load dynamic chart configuration (template, styles, and options) for the current chart type
-  private loadDynamicChartConfig(): void {
-    if (!this.chartType) {
-      console.log('No chart type specified, skipping dynamic chart config loading');
-      return;
-    }
-
-    console.log(`Loading dynamic chart configuration for chart type: ${this.chartType}`);
-    console.log('Current dynamic template:', this.dynamicTemplate);
-
-    // Get chart type by name and load its configuration
-    console.log('Calling getChartTypeByName with:', this.chartType);
-    this.dynamicChartLoader.getChartTypeByName(this.chartType).subscribe({
-      next: (chartType) => {
-        console.log('Received chart type by name :', chartType);
-        if (chartType) {
-          console.log('Found chart type:', chartType);
-
-          // Load the complete configuration for this chart type
-          console.log('Loading chart configuration for chart type ID:', chartType.id);
-          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
-            next: (config) => {
-              console.log('Received chart configuration:', config);
-              console.log('Loaded chart configuration:', config);
-
-              // Apply the first template if available (for CSS styles)
-              if (config.templates && config.templates.length > 0) {
-                const defaultTemplate = config.templates.find(t => t.isDefault) || config.templates[0];
-                if (defaultTemplate) {
-                  const templateHtml = defaultTemplate.templateHtml || '';
-                  console.log('Template HTML to be set:', templateHtml);
-                  this.setDynamicTemplate(templateHtml);
-                  this.dynamicStyles = defaultTemplate.templateCss || '';
-
-                  // Apply styles to the component
-                  this.applyDynamicStyles();
-
-                  console.log('Applied dynamic template and styles', {
-                    template: this.dynamicTemplate,
-                    styles: this.dynamicStyles
-                  });
-                }
-              } else {
-                console.log('No templates found for chart type:', this.chartType);
-              }
-
-              // Apply dynamic options if available
-              console.log('Checking for dynamic fields:', config.dynamicFields);
-              if (config.dynamicFields && config.dynamicFields.length > 0) {
-                // Find the field that contains chart options
-                const optionsField = config.dynamicFields.find(field =>
-                  field.fieldName === 'chartOptions' || field.fieldName.toLowerCase().includes('options'));
-
-                if (!optionsField) {
-                  console.log('No chartOptions field found in dynamic fields');
-                }
-
-                if (optionsField && optionsField.fieldOptions) {
-                  try {
-                    this.dynamicOptions = JSON.parse(optionsField.fieldOptions);
-                    console.log('Applied dynamic chart options:', this.dynamicOptions);
-
-                    // Merge dynamic options with current chart options
-                    this.mergeDynamicOptions();
-                  } catch (e) {
-                    console.error('Error parsing dynamic chart options:', e);
-                  }
-                }
-              } else {
-                console.log('No dynamic fields found for chart type:', this.chartType);
-              }
-            },
-            error: (error) => {
-              console.error('Error loading chart configuration:', error);
-            }
-          });
-        } else {
-          console.log(`Chart type ${this.chartType} not found in database`);
-          // Log available chart types for debugging
-          console.log('Available chart types in database:');
-          this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
-            next: (chartTypes) => {
-              console.log('All chart types:', chartTypes);
-            },
-            error: (error) => {
-              console.error('Error loading chart types:', error);
-            }
-          });
-        }
-      },
-      error: (error) => {
-        console.error('Error loading chart type:', error);
-      }
-    });
-  }
-
-  // Merge dynamic options with current chart options
-  private mergeDynamicOptions(): void {
-    if (this.dynamicOptions) {
-      console.log('Merging dynamic options with existing chart options:', {
-        existing: this.chartOptions,
-        dynamic: this.dynamicOptions
-      });
-      
-      // Deep merge dynamic options with existing chart options
-      this.chartOptions = this.deepMerge(this.chartOptions, this.dynamicOptions);
-      
-      console.log('Merged chart options:', this.chartOptions);
-
-      // If we have a chart instance, update it
-      if (this.chart) {
-        this.chart.options = this.chartOptions;
-        this.chart.render();
-      }
-    }
-  }
-  
-  // Helper method for deep merging objects
-  private deepMerge(target: any, source: any): any {
-    const result = { ...target };
-    
-    for (const key in source) {
-      if (source.hasOwnProperty(key)) {
-        if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
-          // Recursively merge objects
-          result[key] = this.deepMerge(result[key] || {}, source[key]);
-        } else {
-          // Override with source value
-          result[key] = source[key];
-        }
-      }
-    }
-    
-    return result;
-  }
-
-  // Apply dynamic styles to the component
-  private applyDynamicStyles(): void {
-    // Remove any previously applied dynamic styles
-    const existingStyles = this.el.nativeElement.querySelectorAll('.dynamic-chart-styles');
-    existingStyles.forEach((style: HTMLElement) => {
-      style.remove();
-    });
-
-    // Apply new styles if available
-    if (this.dynamicStyles) {
-      const styleElement = this.renderer.createElement('style');
-      this.renderer.setAttribute(styleElement, 'class', 'dynamic-chart-styles');
-      this.renderer.setProperty(styleElement, 'textContent', this.dynamicStyles);
-      this.renderer.appendChild(this.el.nativeElement, styleElement);
-      console.log('Applied dynamic styles to component');
-    }
-  }
-
-  // Initialize chart after dynamic template is rendered
-  private initializeDynamicChart(): void {
-    // This is a complex issue - Angular directives in dynamically inserted HTML
-    // don't get processed automatically. We would need to use a different approach
-    // such as creating components dynamically or using a different template mechanism.
-    console.log('Initializing dynamic chart - this is where we would handle chart initialization');
-    
-    // NOTE: The baseChart directive in dynamically inserted HTML via [innerHTML] 
-    // will not be processed by Angular. This is a limitation of Angular's change detection.
-    // Possible solutions:
-    // 1. Use Angular's dynamic component creation API
-    // 2. Modify the approach to use a different template mechanism
-    // 3. Keep the canvas element in the static template and only load options dynamically
-  }
-
-  // Check if filters are available
-  hasFilters(): boolean {
-    const hasBaseFilters = this.baseFilters && this.baseFilters.length > 0;
-    console.log('Checking for filters - baseFilters:', this.baseFilters, 'hasBaseFilters:', hasBaseFilters);
-    return hasBaseFilters;
-  }
-
-  // Toggle filter visibility
-  toggleFilters(): void {
-    console.log('Toggling filters. Current state:', this.showFilters);
-    console.log('Base filters available:', this.hasFilters());
-    this.showFilters = !this.showFilters;
-    console.log('New state:', this.showFilters);
-  }
-
-  // Initialize filter values with proper default values based on type
-  private initializeFilterValues(): void {
-    console.log('Initializing filter values');
-    console.log('Base filters before initialization:', this.baseFilters);
-
-    // Initialize base filters
-    if (this.baseFilters && Array.isArray(this.baseFilters)) {
-      this.baseFilters.forEach((filter, index) => {
-        console.log(`Processing base filter ${index}:`, 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 = '';
-          }
-          console.log(`Initialized base filter ${index} value to:`, filter.value);
-        } else {
-          console.log(`Base filter ${index} already has value:`, filter.value);
-        }
-      });
-    } else {
-      // Initialize as empty array if not provided
-      this.baseFilters = [];
-    }
-
-    console.log('Base filters after initialization:', this.baseFilters);
-
-    // Initialize drilldown filters
-    if (this.drilldownFilters && Array.isArray(this.drilldownFilters)) {
-      this.drilldownFilters.forEach((filter, index) => {
-        console.log(`Processing drilldown filter ${index}:`, 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 = '';
-          }
-          console.log(`Initialized drilldown filter ${index} value to:`, filter.value);
-        } else {
-          console.log(`Drilldown filter ${index} already has value:`, filter.value);
-        }
-      });
-    } else {
-      // Initialize as empty array if not provided
-      this.drilldownFilters = [];
-    }
-
-    // Initialize layer filters
-    if (this.drilldownLayers && Array.isArray(this.drilldownLayers)) {
-      this.drilldownLayers.forEach((layer, layerIndex) => {
-        console.log(`Processing drilldown layer ${layerIndex}:`, layer);
-        if (layer.filters && Array.isArray(layer.filters)) {
-          layer.filters.forEach((filter, filterIndex) => {
-            console.log(`Processing layer ${layerIndex} filter ${filterIndex}:`, 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 = '';
-              }
-              console.log(`Initialized layer ${layerIndex} filter ${filterIndex} value to:`, filter.value);
-            } else {
-              console.log(`Layer ${layerIndex} filter ${filterIndex} already has value:`, filter.value);
-            }
-          });
-        }
-      });
-    } else {
-      // Initialize as empty array if not provided
-      this.drilldownLayers = [];
-    }
-
-    console.log('Filter values initialized:', {
-      baseFilters: this.baseFilters,
-      drilldownFilters: this.drilldownFilters,
-      drilldownLayers: this.drilldownLayers
-    });
-  }
-
-  // Initialize chart options based on chart type
-  private initializeChartOptions(): void {
-    // Initialize with default structure to ensure plugins.legend exists
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      }
-    };
-
-    // If we have dynamic options, use them instead of the default ones
-    if (this.dynamicOptions) {
-      this.mergeDynamicOptions();
-      return;
-    }
-
-    switch (this.chartType) {
-      case 'bar':
-        this.initializeBarChartOptions();
-        break;
-      case 'line':
-        this.initializeLineChartOptions();
-        break;
-      case 'pie':
-        this.initializePieChartOptions();
-        break;
-      case 'doughnut':
-        this.initializeDoughnutChartOptions();
-        break;
-      case 'bubble':
-        this.initializeBubbleChartOptions();
-        break;
-      case 'radar':
-        this.initializeRadarChartOptions();
-        break;
-      case 'polar':
-        this.initializePolarChartOptions();
-        break;
-      case 'scatter':
-        this.initializeScatterChartOptions();
-        break;
-      default:
-        this.initializeDefaultChartOptions();
-    }
-  }
-
-  private initializeBarChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      barPercentage: 0.6, // Reduced from 0.8 to create more spacing between bars
-      categoryPercentage: 0.8, // Reduced from 0.9 to create more spacing between categories
-      scales: {
-        x: {
-          ticks: {
-            autoSkip: false,
-            maxRotation: 45,
-            minRotation: 45,
-            padding: 15,
-            font: {
-              size: 12
-            }
-          },
-          grid: {
-            display: false
-          }
-        },
-        y: {
-          beginAtZero: true,
-          ticks: {
-            font: {
-              size: 12
-            }
-          },
-          // Add some padding to the y-axis to prevent bars from touching the top
-          suggestedMax: 10
-        }
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top',
-          labels: {
-            font: {
-              size: 12
-            },
-            // Add padding to legend items
-            padding: 20
-          }
-        },
-        tooltip: {
-          enabled: true,
-          // Improve tooltip appearance
-          backgroundColor: 'rgba(0, 0, 0, 0.8)',
-          titleFont: {
-            size: 14
-          },
-          bodyFont: {
-            size: 12
-          }
-        }
-      },
-      layout: {
-        padding: {
-          bottom: 60,
-          left: 15,
-          right: 15,
-          top: 15
-        }
-      },
-      // Add bar chart specific options
-      indexAxis: 'x', // Horizontal bars
-      elements: {
-        bar: {
-          borderWidth: 2, // Increased border width for better visibility
-          borderSkipped: false, // Show all borders for better separation
-          // Add border color to make bars more distinct
-          borderColor: 'rgba(255, 255, 255, 0.8)' // White border for better separation
-        }
-      },
-      // Animation settings for smoother transitions
-      animation: {
-        duration: 1000,
-        easing: 'easeInOutQuart'
-      }
-    };
-  }
-
-  private initializeLineChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        x: {
-          ticks: {
-            autoSkip: false,
-            maxRotation: 45,
-            minRotation: 45,
-            padding: 15,
-            font: {
-              size: 12
-            }
-          },
-          grid: {
-            display: false
-          }
-        },
-        y: {
-          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
-        }
-      }
-    };
-  }
-
-  private initializePieChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top',
-          labels: {
-            font: {
-              size: 12
-            }
-          }
-        },
-        tooltip: {
-          enabled: true
-        }
-      }
-    };
-  }
-
-  private initializeDoughnutChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top',
-          labels: {
-            font: {
-              size: 12
-            }
-          }
-        },
-        tooltip: {
-          enabled: true
-        }
-      }
-    };
-  }
-
-  private initializeBubbleChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        x: {
-          beginAtZero: true,
-          title: {
-            display: true,
-            text: 'X Axis'
-          },
-          ticks: {
-            autoSkip: false,
-            maxRotation: 45,
-            minRotation: 45
-          }
-        },
-        y: {
-          beginAtZero: true,
-          title: {
-            display: true,
-            text: 'Y Axis'
-          }
-        }
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top',
-        },
-        tooltip: {
-          enabled: true,
-          mode: 'point',
-          intersect: false,
-          callbacks: {
-            label: function (context: any) {
-              const point: any = context.raw;
-              if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
-                const yValue = parseFloat(point.y);
-                const rValue = parseFloat(point.r);
-                if (!isNaN(yValue) && !isNaN(rValue)) {
-                  return `Value: ${yValue.toFixed(2)}, Size: ${rValue.toFixed(1)}`;
-                }
-              }
-              return context.dataset.label || '';
-            }
-          }
-        }
-      },
-      animation: {
-        duration: 800,
-        easing: 'easeInOutQuart'
-      },
-      elements: {
-        point: {
-          hoverRadius: 12,
-          hoverBorderWidth: 3
-        }
-      },
-      layout: {
-        padding: {
-          left: 10,
-          right: 10,
-          top: 10,
-          bottom: 30
-        }
-      }
-    };
-  }
-
-  private initializeRadarChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        r: {
-          angleLines: {
-            display: true
-          },
-          suggestedMin: 0,
-          ticks: {
-            backdropColor: 'rgba(0, 0, 0, 0)'
-          }
-        }
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      }
-    };
-  }
-
-  private initializePolarChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      }
-    };
-  }
-
-  private initializeScatterChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        x: {
-          type: 'linear',
-          position: 'bottom'
-        }
-      },
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      }
-    };
-  }
-
-  private initializeDefaultChartOptions(): void {
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: true,
-          position: 'top'
-        }
-      }
-    };
-  }
-
-  fetchChartData(): void {
-    // Set flag to prevent recursive calls
-    this.isFetchingData = true;
-    this.isLoading = true;
-    this.noDataAvailable = false;
-
-    // Ensure chart options are initialized
-    if (!this.chartOptions) {
-      this.initializeChartOptions();
-    }
-
-    console.log('Starting fetchChartData for chart type:', this.chartType);
-
-    // If we're in drilldown mode, fetch the appropriate drilldown data
-    if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
-      console.log('Fetching drilldown data');
-      this.fetchDrilldownData();
-      return;
-    }
-
-    // If we have the necessary data, fetch chart data from the service
-    if (this.table && this.xAxis && this.yAxis) {
-      console.log('Fetching chart data for:', {
-        chartType: this.chartType,
-        table: this.table,
-        xAxis: this.xAxis,
-        yAxis: this.yAxis,
-        connection: this.connection
-      });
-
-      // Convert yAxis to string if it's an array
-      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;
-
-      // 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);
-        }
-      }
-
-      // 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,
-        this.chartType,
-        this.xAxis,
-        yAxisString,
-        this.connection,
-        '',
-        '',
-        filterParams
-      ).subscribe(
-        (data: any) => {
-          console.log('Received chart data:', data);
-
-          if (data === null || data === undefined) {
-            console.warn('Chart API returned null/undefined data.');
-            this.noDataAvailable = true;
-          } else if (data && data.chartLabels && data.chartData) {
-            // Handle the standard format
-            this.noDataAvailable = data.chartLabels.length === 0;
-
-            if (this.chartType === 'bubble') {
-              // For bubble charts, transform the data
-              this.bubbleChartData = this.transformToBubbleData(data.chartLabels, data.chartData);
-            } else {
-              this.chartLabels = data.chartLabels;
-              this.chartData = data.chartData;
-            }
-          } else if (data && data.labels && data.datasets) {
-            // Handle the legacy format
-            this.noDataAvailable = data.labels.length === 0;
-
-            if (this.chartType === 'bubble') {
-              // For bubble charts, use the datasets directly
-              this.bubbleChartData = data.datasets;
-            } else {
-              this.chartLabels = data.labels;
-              this.chartData = data.datasets;
-            }
-          } else {
-            console.warn('Chart received data does not have expected structure', data);
-            this.noDataAvailable = true;
-          }
-
-          // Reset flags after fetching
-          this.isFetchingData = false;
-          this.isLoading = false;
-
-          // Trigger chart update
-          setTimeout(() => {
-            if (this.chart) {
-              this.chart.update();
-            }
-          }, 100);
-        },
-        (error) => {
-          console.error('Error fetching chart data:', error);
-          this.noDataAvailable = true;
-          this.chartLabels = [];
-          this.chartData = [];
-          this.bubbleChartData = [];
-
-          // Reset flags after fetching
-          this.isFetchingData = false;
-          this.isLoading = false;
-        }
-      );
-    } else {
-      console.log('Missing required data for chart:', {
-        chartType: this.chartType,
-        table: this.table,
-        xAxis: this.xAxis,
-        yAxis: this.yAxis,
-        connection: this.connection
-      });
-      this.noDataAvailable = true;
-      this.chartLabels = [];
-      this.chartData = [];
-      this.bubbleChartData = [];
-
-      // Reset flags after fetching
-      this.isFetchingData = false;
-      this.isLoading = 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.noDataAvailable = true;
-        this.chartLabels = [];
-        this.chartData = [];
-        this.bubbleChartData = [];
-        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.noDataAvailable = true;
-      this.chartLabels = [];
-      this.chartData = [];
-      this.bubbleChartData = [];
-      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);
-    }
-
-    // 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();
-    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);
-
-    // Fetch data from the dashboard service
-    this.dashboardService.getChartData(
-      actualApiUrl,
-      this.chartType,
-      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.');
-          this.noDataAvailable = true;
-          this.chartLabels = [];
-          this.chartData = [];
-          this.bubbleChartData = [];
-          return;
-        }
-
-        // Handle the actual data structure returned by the API
-        if (data && data.chartLabels && data.chartData) {
-          // Backend has already filtered the data, just display it
-          this.noDataAvailable = data.chartLabels.length === 0;
-
-          if (this.chartType === 'bubble') {
-            // For bubble charts, transform the data
-            this.bubbleChartData = this.transformToBubbleData(data.chartLabels, data.chartData);
-          } else {
-            this.chartLabels = data.chartLabels;
-            this.chartData = data.chartData;
-          }
-
-          console.log('Updated chart with drilldown data:', {
-            labels: this.chartLabels,
-            data: this.chartData,
-            bubbleData: this.bubbleChartData
-          });
-        } else if (data && data.labels && data.datasets) {
-          // Handle the legacy format
-          this.noDataAvailable = data.labels.length === 0;
-
-          if (this.chartType === 'bubble') {
-            // For bubble charts, use the datasets directly
-            this.bubbleChartData = data.datasets;
-          } else {
-            this.chartLabels = data.labels;
-            this.chartData = data.datasets;
-          }
-
-          console.log('Updated chart with drilldown legacy data format:', {
-            labels: this.chartLabels,
-            data: this.chartData,
-            bubbleData: this.bubbleChartData
-          });
-        } else {
-          console.warn('Drilldown received data does not have expected structure', data);
-          this.noDataAvailable = true;
-          this.chartLabels = [];
-          this.chartData = [];
-          this.bubbleChartData = [];
-        }
-
-        // Set loading state to false
-        this.isLoading = false;
-
-        // Trigger chart update
-        setTimeout(() => {
-          if (this.chart) {
-            this.chart.update();
-          }
-        }, 100);
-      },
-      (error) => {
-        console.error('Error fetching drilldown data:', error);
-        this.noDataAvailable = true;
-        this.chartLabels = [];
-        this.chartData = [];
-        this.bubbleChartData = [];
-        this.isLoading = false;
-      }
-    );
-  }
-
-  // Transform data to bubble chart format
-  private transformToBubbleData(labels: any[], data: any[]): ChartDataset[] {
-    console.log('Transforming data to bubble format:', { labels, data });
-
-    // Handle null/undefined data
-    if (!labels || !data) {
-      console.log('Labels or data is null/undefined, returning empty dataset');
-      return [];
-    }
-
-    // If we have the expected bubble 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') && data[0].data[0].hasOwnProperty('r')) {
-      console.log('Data is already in bubble format, returning as is');
-      return data;
-    }
-
-    // Transform the data properly for bubble chart
-    // Assuming labels are x-values and data[0].data are y-values
-    if (labels && data && data.length > 0 && data[0].data) {
-      console.log('Transforming regular data to bubble format');
-      const yValues = data[0].data;
-      const label = data[0].label || 'Dataset 1';
-
-      // Handle case where yValues might not be an array
-      if (!Array.isArray(yValues)) {
-        console.log('yValues is not an array, returning empty dataset');
-        return [];
-      }
-
-      console.log('yValues type:', typeof yValues);
-      console.log('yValues length:', yValues.length);
-      console.log('First few yValues:', yValues.slice(0, 5));
-
-      // Find min and max values for scaling
-      let minValue = Infinity;
-      let maxValue = -Infinity;
-      const validYValues = [];
-
-      // First pass: collect valid values and find min/max
-      for (let i = 0; i < yValues.length; i++) {
-        let y;
-        if (typeof yValues[i] === 'string') {
-          y = parseFloat(yValues[i]);
-        } else {
-          y = yValues[i];
-        }
-
-        if (!isNaN(y)) {
-          validYValues.push(y);
-          minValue = Math.min(minValue, y);
-          maxValue = Math.max(maxValue, y);
-        }
-      }
-
-      console.log('Value range:', { minValue, maxValue });
-
-      // Adjust radius range based on number of data points
-      const dataPointCount = Math.min(labels.length, yValues.length);
-      let minRadius = 3;
-      let maxRadius = 30;
-
-      // Adjust radius range based on data point count
-      if (dataPointCount > 50) {
-        minRadius = 2;
-        maxRadius = 20;
-      } else if (dataPointCount > 20) {
-        minRadius = 3;
-        maxRadius = 25;
-      }
-
-      console.log('Radius range:', { minRadius, maxRadius, dataPointCount });
-
-      // Create bubble points from labels (x) and data (y)
-      const bubblePoints = [];
-      const bubbleColors = [];
-      const minLength = Math.min(labels.length, yValues.length);
-
-      console.log('Processing data points:', { labels, yValues, minLength });
-
-      for (let i = 0; i < minLength; i++) {
-        // Convert y to number if it's a string
-        let y;
-        if (typeof yValues[i] === 'string') {
-          y = parseFloat(yValues[i]);
-          console.log(`Converted string yValue to number: ${yValues[i]} -> ${y}`);
-        } else {
-          y = yValues[i];
-        }
-
-        // Handle NaN values
-        if (isNaN(y)) {
-          console.log(`Skipping point ${i} due to NaN y value: ${yValues[i]}`);
-          continue;
-        }
-
-        // Calculate radius based on the y-value with logarithmic scaling
-        const r = this.logScale(y, minValue, maxValue, minRadius, maxRadius);
-
-        console.log(`Value: ${y}, Radius: ${r}`);
-
-        // For x-value, we'll use the index position since labels are strings
-        const x = i;
-
-        // Generate a unique color for this bubble
-        const backgroundColor = this.generateBubbleColor(i, y, minLength);
-
-        // Store the color for the dataset
-        bubbleColors.push(backgroundColor);
-
-        // Add the point
-        const point = {
-          x,
-          y,
-          r
-        };
-        console.log(`Adding point ${i}:`, point);
-        bubblePoints.push(point);
-      }
-
-      console.log('Generated bubble points:', bubblePoints);
-      console.log('Generated bubble points count:', bubblePoints.length);
-      console.log('Generated bubble colors count:', bubbleColors.length);
-
-      // If we have no valid points, return empty array
-      if (bubblePoints.length === 0) {
-        console.log('No valid bubble points generated, returning empty dataset');
-        return [];
-      }
-
-      // Create a single dataset with all bubble points
-      const bubbleDatasets: ChartDataset[] = [
-        {
-          data: bubblePoints,
-          label: label,
-          backgroundColor: bubbleColors,
-          borderColor: bubbleColors.map(color => this.replaceAlpha(color, 1)),
-          hoverBackgroundColor: bubbleColors.map(color => this.replaceAlpha(color, 0.9)),
-          hoverBorderColor: 'rgba(255, 255, 255, 1)',
-          borderWidth: 2,
-          pointHoverRadius: 10,
-        }
-      ];
-
-      console.log('Transformed bubble data:', bubbleDatasets);
-      return bubbleDatasets;
-    }
-
-    console.log('Could not transform data, returning empty dataset');
-    return [];
-  }
-
-  // Helper function to calculate logarithmic scaling
-  private logScale(value: number, min: number, max: number, minRadius: number, maxRadius: number): number {
-    if (min === max) return (minRadius + maxRadius) / 2;
-
-    // Normalize value to 0-1 range
-    const normalized = (value - min) / (max - min);
-
-    // Apply logarithmic scaling (base 10)
-    // Add 1 to avoid log(0) and scale to 1-10 range
-    const logValue = Math.log10(normalized * 9 + 1);
-
-    // Scale to desired radius range
-    return minRadius + (logValue / Math.log10(10)) * (maxRadius - minRadius);
-  }
-
-  // Helper function to generate different colors for bubbles
-  private generateBubbleColor(index: number, value: number, total: number): string {
-    // Generate colors based on index or value
-    // Using HSL color model for better color distribution
-    const hue = (index * 137.508) % 360; // Golden angle approximation for good distribution
-    const saturation = 80 + (index % 20); // High saturation for vibrant colors
-    const lightness = 40 + (index % 30); // Vary lightness for contrast
-
-    // Convert HSL to RGB
-    const h = hue / 360;
-    const s = saturation / 100;
-    const l = lightness / 100;
-
-    const rgb = this.hslToRgb(h, s, l);
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)`;
-  }
-
-  // Helper function to convert HSL to RGB
-  private hslToRgb(h: number, s: number, l: number): { r: number, g: number, b: number } {
-    let r, g, b;
-
-    if (s === 0) {
-      r = g = b = l; // achromatic
-    } else {
-      const hue2rgb = (p: number, q: number, t: number) => {
-        if (t < 0) t += 1;
-        if (t > 1) t -= 1;
-        if (t < 1 / 6) return p + (q - p) * 6 * t;
-        if (t < 1 / 2) return q;
-        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-        return p;
-      };
-
-      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1 / 3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
-    }
-
-    return {
-      r: Math.round(r * 255),
-      g: Math.round(g * 255),
-      b: Math.round(b * 255)
-    };
-  }
-
-  // Helper function to replace alpha value in RGBA color string
-  private replaceAlpha(color: string, newAlpha: number): string {
-    // Match rgba(r, g, b, a) format and replace alpha value
-    return color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, `rgba($1, $2, $3, ${newAlpha})`);
-  }
-
-  // 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.originalChartData.labels && this.originalChartData.data) {
-      this.chartLabels = [...this.originalChartData.labels];
-      this.chartData = [...this.originalChartData.data];
-      console.log('Restored original data');
-    }
-
-    console.log('After reset - data:', { labels: this.chartLabels, data: this.chartData });
-
-    // Re-fetch original data
-    this.fetchChartData();
-  }
-
-  // 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();
-    }
-  }
-
-  // Chart click handler
-  public chartClicked(e: any): void {
-    console.log('Chart clicked:', e);
-
-    // If drilldown is enabled and we have a valid click event
-    if (this.drilldownEnabled && e.active && e.active.length > 0) {
-      // Get the index of the clicked element
-      const clickedIndex = e.active[0].index;
-
-      // Get the dataset index
-      const datasetIndex = e.active[0].datasetIndex;
-
-      // Get the data point
-      let dataPoint;
-      if (this.chartType === 'bubble') {
-        dataPoint = this.bubbleChartData[datasetIndex].data[clickedIndex];
-      } else {
-        dataPoint = this.chartData[datasetIndex].data[clickedIndex];
-      }
-
-      console.log('Clicked on chart element:', { 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.originalChartData = {
-          labels: [...this.chartLabels],
-          data: JSON.parse(JSON.stringify(this.chartData)),
-          bubbleData: JSON.parse(JSON.stringify(this.bubbleChartData))
-        };
-        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,
-          datasetIndex: datasetIndex,
-          clickedIndex: clickedIndex,
-          dataPoint: dataPoint,
-          clickedValue: dataPoint // Using data point as value for now
-        };
-
-        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 or invalid click event');
-    }
-  }
-
-  public chartHovered(e: any): void {
-    // console.log('Chart hovered:', e);
-  }
-
-  // Method to check if chart data is valid
-  public isChartDataValid(): boolean {
-    if (this.chartType === 'bubble') {
-      console.log('Checking if bubble chart data is valid:', this.bubbleChartData);
-      if (!this.bubbleChartData || this.bubbleChartData.length === 0) {
-        console.log('Bubble chart data is null or empty');
-        return false;
-      }
-
-      // Check if any dataset has data
-      for (const dataset of this.bubbleChartData) {
-        console.log('Checking dataset:', dataset);
-        if (dataset.data && dataset.data.length > 0) {
-          console.log('Dataset has data, length:', dataset.data.length);
-          // For bubble charts, check if data points have x, y, r properties
-          for (const point of dataset.data) {
-            console.log('Checking point:', point);
-            if (typeof point === 'object' && point.hasOwnProperty('x') && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
-              // Valid bubble point
-              console.log('Found valid bubble point');
-              return true;
-            }
-          }
-        }
-      }
-
-      console.log('No valid bubble chart data found');
-      return false;
-    } else {
-      console.log('Checking if chart data is valid:', { labels: this.chartLabels, data: this.chartData });
-      if (!this.chartLabels || !this.chartData) {
-        console.log('Chart labels or data is null');
-        return false;
-      }
-
-      if (this.chartLabels.length === 0 || this.chartData.length === 0) {
-        console.log('Chart labels or data is empty');
-        return false;
-      }
-
-      // Check if any dataset has data
-      for (const dataset of this.chartData) {
-        if (dataset.data && dataset.data.length > 0) {
-          console.log('Found valid chart data');
-          return true;
-        }
-      }
-
-      console.log('No valid chart data found');
-      return false;
-    }
-  }
-
-  // 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, event: any): void {
-    // For date range filters, we need to handle the change differently
-    // since we're binding to individual start/end properties
-    if (!filter.value) {
-      filter.value = { start: null, end: null };
-    }
-
-    // Refresh data when filter changes
-    this.fetchChartData();
-  }
-
-  // Handle date range input changes for start/end dates
-  onDateRangeInputChange(filter: any, dateType: string, event: any): void {
-    // Initialize filter.value if it doesn't exist
-    if (!filter.value) {
-      filter.value = { start: null, end: null };
-    }
-
-    // Update the specific date type (start or end)
-    filter.value[dateType] = event.target.value;
-
-    // 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();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.css b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.css
deleted file mode 100644
index b2de1cb..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.s-info-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.s-info-bar button {
-  outline: none;
-}
-
-.entry-pg {
-  width: 750px;
-}
-
-.button1::after {
-  content: none;
-}
-
-.button1:hover::after {
-  content: "ADD ROWS";
-}
-
-.section {
-  background-color: #dddddd;
-  height: 40px;
-}
-
-.section p {
-  font-weight: bold;
-  padding: 10px;
-  font-size: 18px;
-}
-
-.clr-input {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  padding: 0.75rem 0.75rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.clr-file {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-
-input[type=text], [type=date], textarea {
-  width: 100%;
-  padding: 15px 15px;
-  background-color: rgb(255, 255, 255);
-  display: inline-block;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.required-field {
-  color: red;
-}
-
-select {
-  width: 100%;
-  padding: 5px 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}/*# sourceMappingURL=editsureconnect.component.css.map */
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.css.map b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.css.map
deleted file mode 100644
index 998fe7d..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["editsureconnect.component.scss","editsureconnect.component.css"],"names":[],"mappings":"AACA;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;ACAF;ADCE;EACE,aAAA;ACCJ;;ADGA;EACE,YAAA;ACAF;;ADGA;EACE,aAAA;ACAF;;ADEA;EACE,mBAAA;ACCF;;ADIA;EACE,yBAHS;EAIT,YAAA;ACDF;;ADIA;EAEE,iBAAA;EACA,aAAA;EACA,eAAA;ACFF;;ADKA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EACA,wBAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;ACFF;;ADKA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EAEA,eAAA;EACA,WAAA;EACA,mBAAA;ACHF;;ADMA;EACE,kBAAA;ACHF;;ADKA;EACE,WAAA;EACA,kBAAA;EAED,oCAAA;EACC,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACHF;;ADMA;EACE,UAAA;ACHF;;ADMA;EACE,WAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACHF","file":"editsureconnect.component.css"}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.html
deleted file mode 100644
index 1d9f166..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.html
+++ /dev/null
@@ -1,164 +0,0 @@
-<h4 style="font-weight: 300;display: inline;"><b> Connection</b></h4>
-<span class="label label-light-blue" style="display: inline;margin-left: 10px;">Edit Mode</span><br>
-Define A connection to use in a job, that can calls APIs from another App.
-<!-- <span style="display: inline; float: right;"> <button id="add" class="btn btn-primary" ><clr-icon shape="plus" ></clr-icon>Import</button></span> -->
-<hr>
-
-
-
-
-
-
-
-
-<div class="container">
-
-
-
-
-  <!-- entry form-->
-  <form  >
-    <div class="clr-row">
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="projectName">Connection Name</label>
-        <input id="projectName" type="text"  placeholder="Enter Connection Name" name="connection_name" [(ngModel)]="editdata.connection_name"
-          class="clr-input">
-      </div>
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="description">Description (optional)</label>
-
-          <textarea  id="" cols="10" rows="2"  name="description"  placeholder="Enter Description" [(ngModel)]="editdata.description">
-          </textarea>
-
-      </div>
-      </div>
-
-
-
-
-
-      <!-- add field here -->
-      <div style="margin-top: 40px;">
-      <h4 style="font-weight: 300;display: inline;"> Default Settings</h4>
-</div>
-These configurations default.
-<hr>
-
-      <div class="clr-row">
-        <div class="clr-col-md-4 clr-col-sm-12">
-          <label for="technologyStack">Type</label>
-          <select  selected="null" class="clr-dropdown" name="type" [(ngModel)]="editdata.type">
-            <option value="null">Choose Type</option>
-            <option>No AUTH</option>
-            <option>API KEY</option>
-            <option>Bearer Token</option>
-            <option>Basic Oauth</option>
-            <option>Digest Auth</option>
-          </select>
-        </div>
-
-        <div class="clr-col-md-4 clr-col-sm-12">
-          <label for="description">Access Token</label>
-
-            <textarea  id="" cols="10" rows="2"  name="access_token" [(ngModel)]="editdata.access_token" placeholder="Enter token">
-            </textarea>
-
-        </div></div>
-<div class="clr-row">
-  <div class="clr-col-md-4 clr-col-sm-12">
-    <label for="projectPrefix">Client ID</label>
-    <input type="text"  placeholder="Enter Clientid" class="clr-input" name="client_id" [(ngModel)]="editdata.client_id">
-
-  </div>
-</div>
-
-<div class="clr-row">
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="projectPrefix"> Username</label>
-        <input type="text"  placeholder="Enter Database Username" class="clr-input" name="username" [(ngModel)]="editdata.username">
-
-      </div>
-
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="dbPassword"> Password</label>
-        <input type="text" placeholder="Enter Database Password" class="clr-input" name="password" [(ngModel)]="editdata.password">
-
-      </div>
-    </div>
-    <span style="float: right;">
-      <button type="submit" class="btn btn-primary" (click)="onupdate()">Update</button>
-      </span>
-
-      <div style="margin-top: 40px;">
-        <h4 style="font-weight: 300;display: inline;">Generate Token</h4>
-  </div>
-  <hr>
-  <div class="clr-row">
-    <div class="clr-col-md-4 clr-col-sm-12">
-      <label for="projectName">URL</label>
-      <input id="projectName" type="text"  placeholder="Enter Connection Name"
-        class="clr-input">
-    </div>
-    <div class="clr-col-md-4 clr-col-sm-12">
-      <label for="description">Method</label>
-      <select  selected="null" class="clr-dropdown">
-        <option selected>GET</option>
-        <option>POST</option>
-        <option>PUT</option>
-        <option>PATCH</option>
-        <option>DELETE</option>
-        <option>COPY</option>
-      </select>
-    </div>
-    </div>
-<div class=clr-row>
-  <div class="clr-col-md-4 clr-col-sm-12">
-    <label for="description"> Token</label>
-
-      <textarea  id="" cols="10" rows="2"  name=" remarks"  placeholder="Enter token">
-      </textarea>
-
-  </div>
-
-<div class="clr-col-md-4 clr-col-sm-12">
-  <label for="projectPrefix">URL</label>
-  <input type="text"  placeholder="Enter url" class="clr-input">
-
-</div>
-</div>
-<div class=clr-row>
-  <div class="clr-col-md-4 clr-col-sm-12">
-    <label for="description">Body</label>
-
-      <textarea  id="" cols="10" rows="2"  name=" remarks"  placeholder="Enter body">
-      </textarea>
-
-  </div>
-
-
-</div>
-<div>
-  <span class="center" style="text-align: center;">
-    <button class="btn btn-primary" type="submit">Send</button>
-     <button type="submit" class="btn btn-primary">Use</button>
-        </span>
-<span style="float: right;">
-<button type="submit" class="btn btn-primary">TEST</button>
-</span>
-</div>
-
-
-          <div style="margin-top: 40px;">
-            <h4 style="font-weight: 300;display: inline;">Response</h4>
-      </div>
-      <hr>
-      code
-      <span class="label success" style="background-color: green;">200</span><br>
-      <div class="clr-row" style="padding-top: 10px;">
-        <textarea  id="" cols="10" rows="10"  name=" remarks"  placeholder="Enter Description">
-        </textarea>
-
-      </div>
-
-  </form>
-</div>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.scss
deleted file mode 100644
index 6161c34..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-//@import "../../../../assets/scss/var";
-.s-info-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  button {
-    outline: none;
-  }
-}
-
-.entry-pg {
-  width: 750px;
-}
-
-.button1::after {
-  content: none;
-}
-.button1:hover::after {
-  content: "ADD ROWS";
-}
-
-$bg-color: #dddddd;
-
-.section {
-  background-color: $bg-color;
-  height: 40px;
-}
-
-.section p {
-  //color: white;
-  font-weight: bold;
-  padding: 10px;
-  font-size: 18px;
-}
-
-.clr-input {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  padding: 0.75rem 0.75rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.clr-file {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  //padding: 0.6rem 0.75rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-input[type=text],[type=date],textarea {
-  width: 100%;
-  padding: 15px 15px;
- // margin: 8px 0;
- background-color:rgb(255, 255, 255);
-  display: inline-block;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.required-field{
-  color: red;
-
-}
-select{
-  width: 100%;
-  padding: 5px 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.spec.ts
deleted file mode 100644
index aeec0cb..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EditsureconnectComponent } from './editsureconnect.component';
-
-describe('EditsureconnectComponent', () => {
-  let component: EditsureconnectComponent;
-  let fixture: ComponentFixture<EditsureconnectComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ EditsureconnectComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EditsureconnectComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.ts
deleted file mode 100644
index add3f7c..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { SureconnectService } from '../sureconnect.service';
-@Component({
-  selector: 'app-editsureconnect',
-  templateUrl: './editsureconnect.component.html',
-  styleUrls: ['./editsureconnect.component.scss']
-})
-export class EditsureconnectComponent implements OnInit {
-  id: number;
-  editdata: any = {}
-  constructor(private route: ActivatedRoute,
-    private router: Router,
-    private sureconnectservice: SureconnectService,) { }
-
-  ngOnInit(): void {
-    this.id = this.route.snapshot.params["id"];
-    console.log("update with id = ", this.id);
-    this.getById(this.id);
-  }
-  getById(id: any) {
-    this.sureconnectservice.getOne(id).subscribe((data) => {
-      this.editdata = data;
-      console.log(this.editdata);
-    })
-  }
-  onupdate() {
-    this.sureconnectservice.update(this.editdata, this.id).subscribe((data) => {
-      console.log('after edit ', data);
-      // Redirect back to sureconnect page after successful update
-      this.router.navigate(['../../'], { relativeTo: this.route });
-    })
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.css b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.css
deleted file mode 100644
index 99e694d..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.s-info-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.s-info-bar button {
-  outline: none;
-}
-
-.entry-pg {
-  width: 750px;
-}
-
-.button1::after {
-  content: none;
-}
-
-.button1:hover::after {
-  content: "ADD ROWS";
-}
-
-.section {
-  background-color: #dddddd;
-  height: 40px;
-}
-
-.section p {
-  font-weight: bold;
-  padding: 10px;
-  font-size: 18px;
-}
-
-.clr-input {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  padding: 0.75rem 0.75rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.clr-file {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-
-input[type=text], [type=date], textarea {
-  width: 100%;
-  padding: 15px 15px;
-  background-color: rgb(255, 255, 255);
-  display: inline-block;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.required-field {
-  color: red;
-}
-
-select {
-  width: 100%;
-  padding: 5px 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}/*# sourceMappingURL=oauth.component.css.map */
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.css.map b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.css.map
deleted file mode 100644
index 2a0296e..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["oauth.component.scss","oauth.component.css"],"names":[],"mappings":"AACA;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;ACAF;ADCE;EACE,aAAA;ACCJ;;ADGA;EACE,YAAA;ACAF;;ADGA;EACE,aAAA;ACAF;;ADEA;EACE,mBAAA;ACCF;;ADIA;EACE,yBAHS;EAIT,YAAA;ACDF;;ADIA;EAEE,iBAAA;EACA,aAAA;EACA,eAAA;ACFF;;ADKA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EACA,wBAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;ACFF;;ADKA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EAEA,eAAA;EACA,WAAA;EACA,mBAAA;ACHF;;ADMA;EACE,kBAAA;ACHF;;ADKA;EACE,WAAA;EACA,kBAAA;EAED,oCAAA;EACC,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACHF;;ADMA;EACE,UAAA;ACHF;;ADMA;EACE,WAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACHF","file":"oauth.component.css"}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.html
deleted file mode 100644
index 492b3e0..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.html
+++ /dev/null
@@ -1,185 +0,0 @@
-<h4 style="font-weight: 300;display: inline;"><b>New Connection</b></h4>
-<span class="label label-light-blue" style="display: inline;margin-left: 10px;">Add Mode</span><br>
-Define A connection to use in a job, that can calls APIs from another App.
-<!-- <span style="display: inline; float: right;"> <button id="add" class="btn btn-primary" ><clr-icon shape="plus" ></clr-icon>Import</button></span> -->
-<hr>
-
-
-
-
-
-
-
-
-<div class="container">
-
-
-
-
-  <!-- entry form-->
-  <form  [formGroup]="entryForm">
-    <div class="clr-row">
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="projectName">Connection Name</label>
-        <input id="projectName" type="text"  placeholder="Enter Connection Name"
-          class="clr-input" formControlName="connection_name">
-      </div>
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="description">Description (optional)</label>
-
-          <textarea  id="" cols="10" rows="2"  name="remarks"  placeholder="Enter Description" formControlName="description">
-          </textarea>
-
-      </div>
-      </div>
-
-
-
-
-
-      <!-- add field here -->
-      <div style="margin-top: 40px;">
-      <h4 style="font-weight: 300;display: inline;"> Default Settings</h4>
-</div>
-These configurations default.
-<hr>
-
-      <div class="clr-row">
-        <div class="clr-col-md-4 clr-col-sm-12">
-          <label for="technologyStack">Type</label>
-          <select  selected="null" class="clr-dropdown" formControlName="type">
-            <option value="null">Choose Type</option>
-            <option>No AUTH</option>
-            <option>API KEY</option>
-            <option>Bearer Token</option>
-            <option>Basic Oauth</option>
-            <option>Digest Auth</option>
-          </select>
-        </div>
-
-        <div class="clr-col-md-4 clr-col-sm-12">
-          <label for="description">Access Token</label>
-
-            <textarea  id="" cols="10" rows="2"  name=" remarks"  placeholder="Enter token" formControlName="access_token">
-            </textarea>
-
-        </div></div>
-<div class="clr-row">
-  <div class="clr-col-md-4 clr-col-sm-12">
-    <label for="projectPrefix">Client ID</label>
-    <input type="text"  placeholder="Enter Clientid" class="clr-input" formControlName="client_id">
-
-  </div>
-</div>
-
-<div class="clr-row">
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="projectPrefix"> Username</label>
-        <input type="text"  placeholder="Enter Database Username" class="clr-input" formControlName="username">
-
-      </div>
-
-      <div class="clr-col-md-4 clr-col-sm-12">
-        <label for="dbPassword"> Password</label>
-        <input type="text" placeholder="Enter Database Password" class="clr-input" formControlName="password">
-
-      </div>
-    </div>
-    <span style="float: right;">
-      <button type="submit" class="btn btn-primary" (click)="onSubmit()">SUBMIT</button>
-      </span>
-    </form>
-      <div style="margin-top: 40px;">
-        <h4 style="font-weight: 300;display: inline;">Generate Token</h4>
-
-  </div>
-  <hr>
-  <div class="clr-row">
-    <div class="clr-col-md-4 clr-col-sm-12">
-      <label for="description">Request Method</label>
-      <select  selected="null" class="clr-dropdown">
-        <option selected>GET</option>
-        <option>POST</option>
-        <option>PUT</option>
-        <option>PATCH</option>
-        <option>DELETE</option>
-        <option>COPY</option>
-      </select>
-    </div>
-    <div class="clr-col-md-4 clr-col-sm-12">
-      <label for="projectName">URL</label>
-      <input id="projectName" type="text"  placeholder="https://example.com"
-        class="clr-input">
-    </div>
-    </div>
-
-<div class="clr-row">
-  <div class="clr-col-md-4 clr-col-sm-12">
-    <label for="description">Body</label>
-
-      <textarea  id="" cols="10" rows="2"  name=" remarks"  placeholder="Enter body" >
-      </textarea>
-
-  </div>
-
-
-</div>
-
-  <div class="center" style="text-align: center;">
-    <button class="btn btn-primary" type="submit" (click)="onLogin()">Send</button>
-     <button type="submit" class="btn btn-primary">Use</button>
-  </div>
-
-
-<div style="margin-top: 40px;">
-  <h4 style="font-weight: 300;display: inline;">Test Connection</h4>
-
-</div>
-<hr>
-<div class="clr-row">
-  <div class="clr-col-md-4 clr-col-sm-12">
-    <label for="projectName">URL</label>
-    <input id="projectName" type="text"  placeholder="Enter Connection Name"
-      class="clr-input">
-  </div>
-  <div class="clr-col-md-4 clr-col-sm-12">
-    <label for="description">Method</label>
-    <select  selected="null" class="clr-dropdown">
-      <option selected>GET</option>
-      <option>POST</option>
-      <option>PUT</option>
-      <option>PATCH</option>
-      <option>DELETE</option>
-      <option>COPY</option>
-    </select>
-  </div>
-  </div>
-  <div class=clr-row>
-    <div class="clr-col-md-4 clr-col-sm-12">
-      <label for="description">Body</label>
-
-        <textarea  id="" cols="10" rows="2"  name=" remarks"  placeholder="Enter body">
-        </textarea>
-
-    </div>
-
-
-  </div>
-  <div style="float: right;">
-    <button type="submit" class="btn btn-primary">TEST</button>
-    </div>
-
-          <div style="margin-top: 40px;">
-            <h4 style="font-weight: 300;display: inline;">Response</h4>
-      </div>
-      <hr>
-      code
-      <span class="label success" style="background-color: green;color:white;">200</span><br>
-      <div class="clr-row" style="padding-top: 10px;">
-        <textarea  id="" cols="10" rows="10"  name=" remarks">
-        </textarea>
-
-      </div>
-
-
-</div>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.scss
deleted file mode 100644
index 6161c34..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-//@import "../../../../assets/scss/var";
-.s-info-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  button {
-    outline: none;
-  }
-}
-
-.entry-pg {
-  width: 750px;
-}
-
-.button1::after {
-  content: none;
-}
-.button1:hover::after {
-  content: "ADD ROWS";
-}
-
-$bg-color: #dddddd;
-
-.section {
-  background-color: $bg-color;
-  height: 40px;
-}
-
-.section p {
-  //color: white;
-  font-weight: bold;
-  padding: 10px;
-  font-size: 18px;
-}
-
-.clr-input {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  padding: 0.75rem 0.75rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.clr-file {
-  color: #212529;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  //padding: 0.6rem 0.75rem;
-  margin-top: 3px;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-input[type=text],[type=date],textarea {
-  width: 100%;
-  padding: 15px 15px;
- // margin: 8px 0;
- background-color:rgb(255, 255, 255);
-  display: inline-block;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.required-field{
-  color: red;
-
-}
-select{
-  width: 100%;
-  padding: 5px 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.spec.ts
deleted file mode 100644
index ed653b4..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OauthComponent } from './oauth.component';
-
-describe('OauthComponent', () => {
-  let component: OauthComponent;
-  let fixture: ComponentFixture<OauthComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ OauthComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OauthComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.ts
deleted file mode 100644
index ddc9133..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/oauth/oauth.component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { HttpErrorResponse } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { LoginService } from 'src/app/services/api/login.service';
-import { SureconnectService } from '../sureconnect.service';
-@Component({
-  selector: 'app-oauth',
-  templateUrl: './oauth.component.html',
-  styleUrls: ['./oauth.component.scss']
-})
-export class OauthComponent implements OnInit {
-  public entryForm: FormGroup;
-  model: any = {};
-  errMsg: string = '';
-  constructor(private sureconnectservice: SureconnectService,
-    private _fb: FormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private loginService: LoginService,) { }
-
-  ngOnInit(): void {
-    this.entryForm = this._fb.group({
-      connection_name: [null],
-      description: [null],
-      type: [null],
-      access_token: [null],
-      client_id: [null],
-      username: [null],
-      password: [null],
-
-    });
-  }
-  onSubmit() {
-    this.sureconnectservice.create(this.entryForm.value).subscribe((data) => {
-      console.log(' data after add ', data);
-      // Redirect back to sureconnect page after successful creation
-      this.router.navigate(['../'], { relativeTo: this.route });
-    })
-  }
-  onLogin() {
-    // tslint:disable-next-line:max-line-length
-    this.loginService.getToken(this.model.email, this.model.password)
-      .subscribe(resp => {
-        if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") {
-          this.errMsg = 'Checking Email or password';
-          return;
-        }
-        this.router.navigate([resp.landingPage]);// add , {skipLocationChange: true}
-      },
-        (errResponse: HttpErrorResponse) => {
-
-          switch (errResponse.status) {
-            case 401:
-              this.errMsg = 'Email or password is incorrect!';
-              break;
-            case 404:
-              this.errMsg = 'Service not found';
-            case 408:
-              this.errMsg = 'Request Timedout';
-            case 500:
-              this.errMsg = 'Internal Server Error';
-            default:
-              this.errMsg = 'Server Error';
-          }
-        }
-      );
-
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.css b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.css
deleted file mode 100644
index 63cdb72..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.delete, .heading {
-  text-align: center;
-  color: red;
-}/*# sourceMappingURL=sureconnect.component.css.map */
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.css.map b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.css.map
deleted file mode 100644
index 64b95e1..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["sureconnect.component.scss","sureconnect.component.css"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,UAAA;ACCF","file":"sureconnect.component.css"}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.html
deleted file mode 100644
index 63bc572..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.html
+++ /dev/null
@@ -1,109 +0,0 @@
-
-<ol class="breadcrumb breadcrumb-arrow font-trirong">
-  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"> <clr-icon shape="home"></clr-icon></a></li>
-  <li><a href="javascript://"> <clr-icon shape="flag"></clr-icon> SureConnect</a></li>
-</ol>
-<br>
-
-
-<div class="dg-wrapper">
-  <div class="clr-row">
-    <div class="clr-col-8">
-      <h3>All SureConnect </h3>
-    </div>
-
-    <div class="clr-col-4" style="text-align: right;">
-
-      <button id="add" class="btn btn-primary"  (click)="goToAdd()">
-        <clr-icon shape="plus"></clr-icon>ADD
-      </button>
-
-    </div>
-  </div>
-
-
-
-
-
-
-
-  <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected" >
-    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
-      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
-
-      <clr-dg-column [clrDgField]="''" style="max-width: 40px;"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      </ng-container></clr-dg-column>  
-    <clr-dg-column [clrDgField]="'Name'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-       Name
-    </ng-container></clr-dg-column>
-    <clr-dg-column [clrDgField]="'description'"> <ng-container *clrDgHideableColumn="{hidden: false}">
-      Description
-    </ng-container></clr-dg-column>
-    <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}"> <clr-icon shape="bars"></clr-icon> 
-      Action
-    </ng-container></clr-dg-column>
-
-    <clr-dg-row *clrDgItems="let user of alldata" [clrDgItem]="user">
-      <clr-dg-cell style="max-width: 40px;">
-        <span style="cursor: pointer;"><clr-icon shape="edit" (click)="goToEdit(user.id)" class="red is-error" style="color:red;"></clr-icon></span>
-      </clr-dg-cell>
-      <clr-dg-cell id="word">{{user.connection_name}}</clr-dg-cell>
-      <clr-dg-cell id="word">{{user.description}}</clr-dg-cell>
-      <clr-dg-cell>
-        <span style="cursor: pointer;padding: 10px; "><clr-icon shape="trash"  (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
-        <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</h5>
-                  <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
-                  <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
-                  <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
-                  <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
-                  <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
-          </clr-signpost-content>
-        </clr-signpost>
-      </clr-dg-cell>
-
-
-      <!-- <clr-dg-action-overflow>
-        <button class="action-item" *ngIf="medit == 'true'" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
-        <button class="action-item" *ngIf="mdelete == 'true'" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
-      </clr-dg-action-overflow> -->
-
-      <clr-dg-row-detail *clrIfExpanded >
-        <table class="table">
-          <tr>
-            <td class="td-title">Name: </td>
-            <td class="td-content">{{user.Name}}</td>
-          </tr>
-          <tr>
-            <td class="td-title"> Description:</td>
-            <td class="td-content">{{user.description}}</td>
-          </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]">data per page</clr-dg-page-size>
-        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-        of {{pagination.totalItems}} data
-      </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">Are You Sure Want to delete?</h1>
-    <h2 class="heading">{{rowSelected.id}}</h2>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
-    <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >Delete</button>
-    </div>
-  </div>
-</clr-modal>
-
-
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.scss
deleted file mode 100644
index 76ab29b..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.delete,.heading{
-  text-align: center;
-  color: red;
-}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.spec.ts
deleted file mode 100644
index 921b801..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SureconnectComponent } from './sureconnect.component';
-
-describe('SureconnectComponent', () => {
-  let component: SureconnectComponent;
-  let fixture: ComponentFixture<SureconnectComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ SureconnectComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SureconnectComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.ts
deleted file mode 100644
index 792fd08..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ToastrService } from 'ngx-toastr';
-import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
-import { SureconnectService } from './sureconnect.service';
-@Component({
-  selector: 'app-sureconnect',
-  templateUrl: './sureconnect.component.html',
-  styleUrls: ['./sureconnect.component.scss']
-})
-export class SureconnectComponent implements OnInit {
-  loading = false;
-
-  selected: any[] = [];
-  rowSelected: any = {};
-  modaldelete = false;
-  modaladd = false;
-  data;
-  alldata;
-  mcreate;
-  medit;
-  mdelete;
-  showdata;
-  error;
-  constructor(private router: Router,
-    private route: ActivatedRoute,
-    private toastr: ToastrService,
-    private menuGroupService: MenuGroupService,
-    private sureservice: SureconnectService) { }
-
-  ngOnInit(): void {
-    this.showdata = this.menuGroupService.getdata();
-    console.log(this.showdata);
-    // this.mcreate = this.showdata.mcreate;
-    // console.log(this.mcreate);
-    // this.mdelete = this.showdata.mdelete
-    // console.log(this.mdelete);
-    // this.medit = this.showdata.medit
-    // console.log(this.medit);
-    this.getall();
-  }
-  getall() {
-    this.sureservice.getAll().subscribe((data) => {
-      this.alldata = data;
-      console.log(this.alldata);
-      if (this.alldata.length == 0) {
-        this.error = "No data Available";
-        console.log(this.error)
-      }
-    }, (error) => {
-      console.log(error);
-      if (error) {
-        this.error = "Server Error";
-      }
-    })
-  }
-  goToAdd() {
-    this.router.navigate(["../oauth"], { relativeTo: this.route });
-  }
-  goToEdit(id) {
-    this.router.navigate(["../editconnect/" + id], { relativeTo: this.route });
-  }
-  onDelete(row) {
-    this.rowSelected = row;
-    this.modaldelete = true;
-  }
-  delete(id) {
-    this.modaldelete = false;
-    console.log("in delete  " + id);
-    this.sureservice.delete(id).subscribe(
-      (data) => {
-        console.log(data);
-        this.ngOnInit();
-        if (data) {
-          this.toastr.success('Deleted successfully');
-        }
-      },
-      (error) => {
-        console.log('Error in adding data...', +error);
-        if (error) {
-          this.toastr.error('Not deleted Data Getting Some Error');
-        }
-      });
-  }
-}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.service.ts
deleted file mode 100644
index 40b1b4f..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/sureconnect/sureconnect.service.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import baseUrl from 'src/app/services/api/helper';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-@Injectable({
-  providedIn: 'root'
-})
-export class SureconnectService {
-
-  constructor(private _http: HttpClient,
-    private apiRequest: ApiRequestService,) { }
-    public create(data: any){
-      return this._http.post(`${baseUrl}/Sure_Connect`, data);
-    }
-
-    // create card
-    public update(data: any,id:any){
-      return this._http.put(`${baseUrl}/Sure_Connect/${id}`, data);
-    }
-
-    // get all cards
-    public getAll(){
-      return this._http.get(`${baseUrl}/Sure_Connect`);
-    }
-
-    // get one card
-    public getOne(id: any){
-      return this._http.get(`${baseUrl}/Sure_Connect/${id}`);
-    }
-
-    // delete card
-    public delete(id: any){
-      return this._http.delete(`${baseUrl}/Sure_Connect/${id}`);
-    }
-}
diff --git 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
index 59fe60d..74d44e3 100644
--- 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,9 +11,6 @@
           <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>
@@ -114,4 +111,7 @@
           <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{'DELETE' |translate}}</button>
         </div>
       </div>
-    </clr-modal>
\ No newline at end of file
+    </clr-modal>
+   
+  
+  
\ No newline at end of file
diff --git 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
index 5eb4c27..ba27793 100644
--- 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,46 +42,41 @@ 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});
   }
-  //  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 }
-    });
+  goToEdit(id:number)
+  {
+     this.router.navigate(['../dashrunner/'+id],{relativeTo:this.route});
   }
 
-  goToEditData(id: number) {
-    this.router.navigate(['../editdata/' + id], { relativeTo: this.route });
+  goToEditData(id: number){
+    this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
   }
 
   onExport() {
@@ -89,28 +84,29 @@ 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()
   // {
diff --git 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
index 741b457..2781144 100644
--- 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,10 +3,6 @@ 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',
@@ -28,19 +24,8 @@ export class BarRunnerComponent implements OnInit {
   JsonData;
 
   barData;
-  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
-  ) { }
+  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
+    private router : Router,) { }
 
   barChartLabels: any[] = [];
   barChartType: string = 'bar';
@@ -62,13 +47,6 @@ 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);
@@ -96,62 +74,22 @@ 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);
-            // Fetch data with filters
-            this.fetchChartData();
+            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);
+             });
             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;
@@ -159,17 +97,5 @@ 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');
-  }
-}
\ No newline at end of file
+
+}
diff --git 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
index f8d2cd0..5bb9632 100644
--- 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,10 +5,6 @@ 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',
@@ -29,15 +25,9 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService) { }
+    private router : Router,) { }
     
   public bubbleChartOptions: ChartConfiguration['options'] = {
     // scales: {
@@ -97,13 +87,6 @@ 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);
@@ -129,62 +112,22 @@ 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);
-          // Fetch data with filters
-          this.fetchChartData();
+          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);
+           });
           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;
@@ -192,19 +135,6 @@ 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');
-  }
 
 
 }
diff --git 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
deleted file mode 100644
index 80a9bc5..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<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>
\ No newline at end of file
diff --git 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
deleted file mode 100644
index da712b1..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-.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;
-}
\ No newline at end of file
diff --git 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
deleted file mode 100644
index 86978b0..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
+++ /dev/null
@@ -1,245 +0,0 @@
-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);
-  }
-}
\ No newline at end of file
diff --git 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
index cf8bb21..5c814f6 100644
--- 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,27 +160,7 @@ 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);
-  }
+
 
   //////////////////////////////////////////////
   
diff --git 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
index f2810c3..4a68f73 100644
--- 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,14 +26,7 @@
         <!-- <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" 
-                     [ndcDynamicInputs]="getComponentInputs(item)"
-                     (moduleInfo)="display($event)">
-        </ndc-dynamic>
+        <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" (moduleInfo)="display($event)"></ndc-dynamic>
       </gridster-item>
     </gridster>
   </div>
diff --git 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
index f45303d..61f9a3c 100644
--- 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,10 +17,6 @@ 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',
@@ -48,13 +44,10 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService) { }
+    private router : Router,) { }
 
   ngOnInit(): void {
 
@@ -295,54 +288,4 @@ 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;
-  }
 }
diff --git 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
index 700d621..f92400c 100644
--- 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,10 +5,6 @@ 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',
@@ -37,16 +33,10 @@ 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,
-      // Add FilterService to constructor
-      private filterService: FilterService) { }
+      private router : Router,) { }
   ngOnInit(): void {
     this.doughnutChartData = this.doughnutData.chartData;
     this.doughnutChartLabels = this.doughnutData.chartLabels;
@@ -54,14 +44,6 @@ 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;
@@ -88,62 +70,22 @@ 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);
-          // Fetch data with filters
-          this.fetchChartData();
+          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);
+           });
           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;
@@ -151,19 +93,6 @@ 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');
-  }
 
 
 
diff --git 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
index 9b55a47..4761acc 100644
--- 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,35 +39,16 @@
       </div> -->
       <div><button class="btn btn-primary" (click)="generatePDFFile()">Export</button></div>
       <div style="max-height: 400px; overflow: auto; padding: 10px;">
-      <!-- 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">
+      <table class="table">
         <thead>
           <tr>
             <th *ngFor="let co of getHeaders();let i=index">{{co}}</th>
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let item of rows">
+          <tr *ngFor="let item of rows?.slice()?.reverse()">
             <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>
\ No newline at end of file
diff --git 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
index c71474d..9e1f6ac 100644
--- 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,10 +3,6 @@ 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',
@@ -30,191 +26,86 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService
+    private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
+    private router : Router
   ) { }
 
   ngOnInit(): void {
 
     this.editId = this.route.snapshot.params.id;
-    console.log('GridRunner: Component initialized with editId:', this.editId);
+    console.log(this.editId);
     // this.getbyId();
 
-    // 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.dashboardService.getById(this.editId).subscribe((data)=>{
+      console.log(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('GridRunner: ChartObject for Grid View:', ChartObject);
+      console.log(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);
-
-        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;
-
-      // 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;
-          }
+        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
         }
-      });
-
-      // 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);
-
-      // 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);
-
-        // 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 = [];
-        }
-
-        // 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');
   }
-}
\ No newline at end of file
+
+
+  
+//dynamic table
+
+
+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)
+      }
+
+    })
+
+  })
+}
+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);
+}
+}
+
diff --git 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
index c815f4b..93d621b 100644
--- 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,10 +7,6 @@ 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',
@@ -58,14 +54,8 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService) { }
+    private router : Router,) { }
 
   ngOnInit(): void {
 
@@ -75,13 +65,6 @@ 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);
@@ -109,10 +92,16 @@ 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);
-            // Fetch data with filters
-            this.fetchChartData();
+            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);
+             });
             break; // No need to continue the loop once the correct placeholder is found
           }
         }
@@ -139,52 +128,6 @@ 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;
@@ -222,18 +165,5 @@ 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');
-  }
 
 }
\ No newline at end of file
diff --git 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
index 934f618..c1a64d1 100644
--- 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,10 +3,6 @@ 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({
@@ -27,15 +23,9 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService) { }
+    private router : Router,) { }
 
   public pieChartLabels: string[] = ['SciFi', 'Drama', 'Comedy'];
   public pieChartData: number[] = [30, 50, 20];
@@ -49,13 +39,6 @@ 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);
@@ -83,62 +66,22 @@ 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);
-          // Fetch data with filters
-          this.fetchChartData();
+          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);
+           });
           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;
@@ -146,17 +89,4 @@ 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');
-  }
 }
diff --git 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
index 8610693..fdbe17a 100644
--- 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,10 +4,6 @@ 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',
@@ -27,15 +23,9 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService) { }
+    private router : Router,) { }
 
   public polarAreaChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales' ];
   public polarAreaChartData: any = [
@@ -51,13 +41,6 @@ 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);
@@ -83,62 +66,22 @@ 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);
-          // Fetch data with filters
-          this.fetchChartData();
+          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);
+           });
           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;
@@ -146,18 +89,5 @@ 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');
-  }
 
 }
diff --git 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
index 748802e..e1a901e 100644
--- 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,10 +4,6 @@ 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',
@@ -28,15 +24,9 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService) { }
+    private router : Router,) { }
 
   public radarChartLabels: string[] = [
     "Eating",
@@ -60,13 +50,6 @@ 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);
@@ -92,62 +75,22 @@ 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);
-          // Fetch data with filters
-          this.fetchChartData();
+          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);
+           });
           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;
@@ -155,18 +98,5 @@ 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');
-  }
 
 }
diff --git 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
index a6780d0..2f36596 100644
--- 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,10 +5,6 @@ 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',
@@ -29,15 +25,9 @@ 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,
-    // Add FilterService to constructor
-    private filterService: FilterService) { }
+    private router : Router,) { }
 
   public scatterChartLabels: string[] = [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ];
 
@@ -79,13 +69,6 @@ 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);
@@ -111,62 +94,22 @@ 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);
-          // Fetch data with filters
-          this.fetchChartData();
+          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);
+           });
           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;
@@ -174,18 +117,5 @@ 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');
-  }
 
 }
diff --git 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
index a6ea095..cb264cb 100644
--- 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,10 +3,6 @@ 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',
@@ -16,21 +12,19 @@ import { Subscription } from 'rxjs';
 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;
   
-  // 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
+    editId;
+    public DashtestboardArray: DashboardContentModel[] = [];
+    workflowLine;
+    TableName;
 
   list;
   data: any;
@@ -40,25 +34,11 @@ 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;
@@ -83,10 +63,15 @@ 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);
-          // Fetch data with filters
-          this.fetchTodoData();
+          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);
+           });
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
@@ -115,58 +100,4 @@ 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');
-}
-}
\ No newline at end of file
diff --git 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
index c25b688..3c23b53 100644
--- 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('connection  ', val);
+    console.log(val);
     this.databaseName = val.name;
     this.selecteddatabase = val.conn_string;
     console.log(this.selecteddatabase);
diff --git 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
index 502e454..587e702 100644
--- 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,18 +23,6 @@
           <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>
@@ -88,4 +76,4 @@
       <button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid" (click)="onSubmit()">{{'SUBMIT' | translate}}</button>
     </div>
   </form>
-</div>
\ No newline at end of file
+</div>
diff --git 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
index d6faf39..5007d44 100644
--- 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,8 +4,6 @@ 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',
@@ -13,12 +11,8 @@ import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.s
 })
 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 sureconnectService: SureconnectService) { }
+    private route: ActivatedRoute,private reportBuilderService: ReportBuilderService) { }
 
   ngOnInit(): void {
     this.entryForm = this._fb.group({
@@ -26,23 +20,9 @@ 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() {
@@ -88,4 +68,4 @@ export class ReportBuild2addComponent implements OnInit {
     this.router.navigate(["../all"], { relativeTo: this.route });
   }
 
-}
\ No newline at end of file
+}
diff --git 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
index f7f2cc9..b9660ed 100644
--- 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,87 +6,70 @@
 
 <div class="dg-wrapper">
   <div class="clr-row">
-    <div class="clr-col-4">
-      <h3><b>{{'REPORT_BUILDER_2' | translate}}</b></h3>
+      <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>
-    <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>
+</div>
 
-      <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-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]="''"><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 >
+      {{'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 >
           <table class="table">
             <tr>
               <td class="td-title">actionName: </td>
@@ -94,26 +77,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>
\ No newline at end of file
+  
+  <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>
+    </div>
+  </clr-modal>
\ No newline at end of file
diff --git 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
index f52de1e..ea3a267 100644
--- 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,70 +24,55 @@
                                 </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>
-
-            <!-- 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-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-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>
-      </div>
-    </div>
-    <br>
-    <!-- <div class="clr-row" style="padding-left:10px;">
+        <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%">
@@ -100,10 +85,11 @@
                 </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>
\ No newline at end of file
+      <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>
+  
\ No newline at end of file
diff --git 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
index 56c99ec..7fe97f8 100644
--- 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,7 +3,6 @@ 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({
@@ -14,87 +13,67 @@ import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.s
 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: '',
-    // Add sureConnectId property
-    sureConnectId: null,
-
-  };
-  // Add sureconnect data property
-  sureconnectData: any[] = [];
+    url:'',
 
+};
   constructor(private router: Router,
-    private route: ActivatedRoute, private reportBuilderService: ReportBuilderService,
-    private toastr: ToastrService, private _fb: FormBuilder,
-    private sureconnectService: SureconnectService) { }
+    private route: ActivatedRoute,private reportBuilderService: ReportBuilderService,
+    private toastr: ToastrService,  private _fb: FormBuilder) { }
 
   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],
-      // Add sureConnectId to form
-      sureConnectId: [null],
-    });
+      url:[null],
+      });
 
-    // Load sureconnect data first, then load report data
-    this.loadSureconnectData();
     this.getById(this.id);
     this.listoddatabase();
   }
-
-  // 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;
+  listoddatabase(){
+    this.reportBuilderService.getdatabse().subscribe((data)=>{
+      this.databaselist=data;
       console.log(this.databaselist)
-    }, (error) => {
+    },(error) => {
       console.log(error);
-      if (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;
@@ -103,11 +82,6 @@ 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) => {
@@ -118,56 +92,51 @@ export class ReportBuild2editComponent implements OnInit {
 
   stdparams;
   keysfromurl;
-  getkeys() {
-    if (this.nodeEditProperties.url !== null) {
-      this.reportBuilderService.getcolumnDetailsByurl(this.nodeEditProperties.url).subscribe(data => {
-        console.log('coloum list data ', data);
+  getkeys(){
+    if(this.nodeEditProperties.url !== null){
+      this.reportBuilderService.getcolumnDetailsByurl(this.nodeEditProperties.url).subscribe(data =>{
+        console.log(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 } });
       },
@@ -180,8 +149,6 @@ export class ReportBuild2editComponent implements OnInit {
 
   onSubmit() {
     this.updated = true;
-    // Update nodeEditProperties with form values including sureConnectId
-    Object.assign(this.nodeEditProperties, this.entryForm.value);
     this.update();
   }
 
@@ -189,4 +156,4 @@ export class ReportBuild2editComponent implements OnInit {
     this.router.navigate(["../../all"], { relativeTo: this.route });
   }
 
-}   
\ No newline at end of file
+}
diff --git 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
index 4f83668..1f78b64 100644
--- 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
@@ -104,11 +104,8 @@ todayDate;
   adhocList:any[];
   SQLQuery;
   getUrl;
-  // Add sureConnectId property
-  sureConnectId: number | null = null;
   stdParamfields;
   DateParam;
-
   getById(id: number) {
     this.reportBuilderService.getrbDetailsById(id).subscribe(
       (data) => {
@@ -123,8 +120,6 @@ todayDate;
         // this.adhocList = JSON.parse(adhocList);
         this.DateParam = this.builderLineData.date_param_req;
         this.getUrl = this.builderLineData.url;
-        // Get sureConnectId if it exists
-        this.sureConnectId = this.builderLineData.sureConnectId || null;
         console.log(this.adhocList,this.DateParam,this.getUrl)
         this.getStdParam(this.header_id);
         this.featchData();
@@ -132,58 +127,22 @@ todayDate;
 
   }
 
-  /**
-   * Fetch data using the URL and SureConnect connection if available
-   */
   featchData(){
-    // If sureConnectId is available, we might want to modify the request
-    // For now, we'll use the existing implementation but with better error handling
     this.reportBuilderService.getAllDetailsByurl(this.getUrl).subscribe(data =>{
       console.log(data);
       if(data.body){
-        // Check if the response is XML (starts with <) or JSON
-        if (typeof data.body === 'string' && data.body.trim().startsWith('<')) {
-          // Handle XML response
-          console.log('Received XML response, parsing to JSON');
-          try {
-            this.rows = this.parseXMLToJSON(data.body);
-            this.filterRows = [...this.rows]; // Create a copy
-            console.log('Parsed XML data:', this.rows);
-          } catch (error) {
-            console.error('Error parsing XML:', error);
-            this.rows = [];
-            this.filterRows = [];
-          }
-        } else {
-          // Handle JSON response
-          try {
-            console.log(JSON.parse(data.body));
-            this.rows = JSON.parse(data.body);
-            this.filterRows = JSON.parse(data.body);
-          } catch (error) {
-            console.error('Error parsing JSON:', error);
-            this.rows = [];
-            this.filterRows = [];
-          }
-        }
-      } else {
-        // If no body, initialize with empty arrays
-        this.rows = [];
-        this.filterRows = [];
+        console.log(JSON.parse(data.body));
+        this.rows = JSON.parse(data.body);
+        this.filterRows = JSON.parse(data.body);
       }
-    }, error => {
-      // Handle HTTP errors
-      console.error('Error fetching data:', error);
-      this.rows = [];
-      this.filterRows = [];
     });
   }
 
-  dynamicHtml: any = [];
+  dynamicHtml:any = [];
   dynamicHtmlFlag = false;
   stdParmas;
   stdParamFlag = false;
-  getStdParam(id: any) {
+  getStdParam(id: any){
     console.log(this.builderLineData.std_param_html);
     this.dynamicHtml = this.builderLineData.std_param_html;
     // this.dynamicHtml = ['a.abc','b.abcde']
@@ -195,11 +154,11 @@ todayDate;
       }
       console.log(this.dynamicForm.value);
     }
-    if (this.dynamicHtml == undefined || this.dynamicHtml == '') {
-      this.dynamicHtmlFlag = false;
-    } else {
-      this.dynamicHtmlFlag = true;
-    }
+     if(this.dynamicHtml == undefined || this.dynamicHtml == ''){
+       this.dynamicHtmlFlag = false;
+     }else{
+       this.dynamicHtmlFlag = true;
+     }
 
     // this.reportBuilderService.getStdParamById(id).subscribe(data => {
     //   console.log(data);
@@ -215,37 +174,37 @@ todayDate;
     //   }
     // });
   }
-  modo2(val) {
+  modo2(val){
     console.log(val);
-    this.selectedfrom = val;
+    this.selectedfrom=val;
   }
-  modo3(val) {
+  modo3(val){
     console.log(val);
-    this.selectedto = val;
+this.selectedto=val;
   }
-  duplicateArray = [];
+  duplicateArray=[];
   myDateValue: Date;
-  toDate: Date;
+  toDate:Date;
   reverseAndTimeStamp(dateString) {
     const reverse = new Date(dateString.split("-").reverse().join("-"));
     return reverse.getTime();
-  }
-  filterDate() {
-    let fromdate = moment(this.myDateValue).format('DD-MM-YYYY');
-    console.log(fromdate)
-    let todate = moment(this.toDate).format('DD-MM-YYYY');
-    if (this.myDateValue && this.toDate) {
-      const selectedMembers = this.array.filter(m => {
-        return this.reverseAndTimeStamp(m.fromDate) >= this.reverseAndTimeStamp(fromdate) && this.reverseAndTimeStamp(m.fromDate) <= this.reverseAndTimeStamp(todate)
-      }
-      );
-      this.duplicateArray = selectedMembers
-    } else {
-      this.duplicateArray = this.array
     }
+  filterDate() {
+    let fromdate=moment(this.myDateValue).format('DD-MM-YYYY');
+console.log(fromdate)
+let todate=moment(this.toDate).format('DD-MM-YYYY');
+if(this.myDateValue && this.toDate){
+const selectedMembers = this.array.filter(m => {
+        return this.reverseAndTimeStamp(m.fromDate) >= this.reverseAndTimeStamp(fromdate) && this.reverseAndTimeStamp(m.fromDate) <= this.reverseAndTimeStamp(todate)
+    }
+    );
+    this.duplicateArray=selectedMembers
+}else{
+this.duplicateArray=this.array
+}
     console.log(this.duplicateArray); // the result objects
-    this.modalselect = false;
-  }
+    this.modalselect=false;
+}
 
   dateParameter: string;
   from_date: Date;
@@ -254,7 +213,7 @@ todayDate;
   calculateThisWeek(): void {
     // Calculate the current date
     const currentDate = new Date();
-    console.log(currentDate)
+  console.log(currentDate)
     // Get the day of the week (0-6, where 0 is Sunday)
     const currentDayOfWeek = currentDate.getDay();
 
@@ -269,10 +228,10 @@ todayDate;
     this.to_date = new Date(this.from_date);
     this.to_date.setDate(this.from_date.getDate() + 6);
     console.log(this.from_date);
-    this.myDateValue = this.from_date;
+    this.myDateValue=this.from_date;
     console.log(this.to_date);
     console.log(this.myDateValue);
-    this.toDate = this.to_date;
+    this.toDate=this.to_date;
 
     this.FromDatequery = this.from_date.toISOString().substring(0, 10);
     this.ToDatequery = this.to_date.toISOString().substring(0, 10);
@@ -295,10 +254,10 @@ todayDate;
     // Calculate the date of Sunday of the previous week
     this.to_date = new Date(this.from_date);
     this.to_date.setDate(this.from_date.getDate() + 6);
-    this.myDateValue = this.from_date;
+    this.myDateValue=this.from_date;
     console.log(this.to_date);
     console.log(this.myDateValue);
-    this.toDate = this.to_date;
+    this.toDate=this.to_date;
 
 
     this.FromDatequery = this.from_date.toISOString().substring(0, 10);
@@ -308,22 +267,22 @@ todayDate;
   calculateThisMonth(): void {
     // Calculate the current date
     const currentDate = new Date();
-
+  
     // Calculate the date of the first day of the current month
     this.from_date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
-
+  
     // Calculate the date of the last day of the current month
     this.to_date = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-
+  
     // Set the 'to_date' to the last day of the current month at the end of the day
     this.to_date.setHours(23, 59, 59, 999);
-
+  
     // Optionally, you can set 'myDateValue' to 'from_date' if needed
     this.myDateValue = this.from_date;
-
+  
     // Optionally, you can set 'toDate' to 'to_date' if needed
     this.toDate = this.to_date;
-
+  
     console.log(this.from_date);
     console.log(this.to_date);
 
@@ -331,34 +290,34 @@ todayDate;
     this.FromDatequery = this.from_date.toISOString().substring(0, 10);
     this.ToDatequery = this.to_date.toISOString().substring(0, 10);
   }
-
+  
 
   calculateLastMonth(): void {
     // Calculate the current date
     const currentDate = new Date();
-
+  
     // Calculate the date of the first day of the previous month
     this.from_date = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
-
+  
     // Calculate the date of the last day of the previous month
     this.to_date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
-
+  
     // Set the 'to_date' to the last day of the previous month at the end of the day
     this.to_date.setHours(23, 59, 59, 999);
-
+  
     // Optionally, you can set 'myDateValue' to 'from_date' if needed
     this.myDateValue = this.from_date;
-
+  
     // Optionally, you can set 'toDate' to 'to_date' if needed
     this.toDate = this.to_date;
-
+  
     console.log(this.from_date);
     console.log(this.to_date);
 
     this.FromDatequery = this.from_date.toISOString().substring(0, 10);
     this.ToDatequery = this.to_date.toISOString().substring(0, 10);
   }
-
+  
   calculateThisYear(): void {
     // Calculate the current date
     const currentDate = new Date();
@@ -369,10 +328,10 @@ todayDate;
     // Calculate the date of the last day of the current year
     this.to_date = new Date(currentDate.getFullYear(), 11, 31);
 
-    this.myDateValue = this.from_date;
+    this.myDateValue=this.from_date;
     console.log(this.to_date);
     console.log(this.myDateValue);
-    this.toDate = this.to_date;
+    this.toDate=this.to_date;
 
 
     this.FromDatequery = this.from_date.toISOString().substring(0, 10);
@@ -390,92 +349,92 @@ todayDate;
     // Calculate the date of the last day of the previous year
     this.to_date = new Date(currentDate.getFullYear() - 1, 11, 31);
 
-    this.myDateValue = this.from_date;
+    this.myDateValue=this.from_date;
     console.log(this.to_date);
     console.log(this.myDateValue);
-    this.toDate = this.to_date;
+    this.toDate=this.to_date;
 
     this.FromDatequery = this.from_date.toISOString().substring(0, 10);
     this.ToDatequery = this.to_date.toISOString().substring(0, 10);
     // this.filterDate();
   }
   SelectdateType;
-  select(val: any) {
-    console.log(val);
-    this.SelectdateType = val;
-    if (val === 'This Week') {
+  select(val:any){
+  console.log(val);
+  this.SelectdateType = val;
+      if(val === 'This Week'){
       this.FromDatequery = null;
       this.ToDatequery = null;
       this.calculateThisWeek()
-    } else if (val === 'Last Week') {
-      this.FromDatequery = null;
-      this.ToDatequery = null;
-      this.calculateLastWeek()
-    } else if (val === 'This Month') {
-      this.FromDatequery = null;
-      this.ToDatequery = null;
-      this.calculateThisMonth()
-    } else if (val === 'Last Month') {
-      this.FromDatequery = null;
-      this.ToDatequery = null;
-      this.calculateLastMonth()
+      }else if(val === 'Last Week'){
+        this.FromDatequery = null;
+        this.ToDatequery = null;
+       this.calculateLastWeek()
+      }else if(val === 'This Month'){
+        this.FromDatequery = null;
+        this.ToDatequery = null;
+          this.calculateThisMonth()
+       }else if(val === 'Last Month'){
+        this.FromDatequery = null;
+        this.ToDatequery = null;
+            this.calculateLastMonth()
       //  }else if(val === 'To Specific FromDate To To Date'){
       //         this.openmodel()
-    }
-    else if (val === 'This Year') {
-      this.FromDatequery = null;
-      this.ToDatequery = null;
-      this.calculateThisYear()
-    } else if (val === 'Last Year') {
-      this.FromDatequery = null;
-      this.ToDatequery = null;
-      this.calculateLastYear()
-    }
-    else if (val === 'Today') {
-      this.FromDatequery = null;
-      this.ToDatequery = null;
-      this.myDateValue = this.todayDate;
-      this.toDate = this.todayDate;
+       }
+       else if(val === 'This Year'){
+        this.FromDatequery = null;
+        this.ToDatequery = null;
+        this.calculateThisYear()
+       }else if(val === 'Last Year'){
+        this.FromDatequery = null;
+        this.ToDatequery = null;
+        this.calculateLastYear()
+      }
+      else if(val === 'Today'){
+        this.FromDatequery = null;
+        this.ToDatequery = null;
+        this.myDateValue = this.todayDate;
+        this.toDate = this.todayDate;
 
-      this.FromDatequery = this.myDateValue;
-      this.ToDatequery = this.toDate;
-    }
-    else if (val === '--Select Particular--') {
-      this.FromDatequery = null;
-      this.ToDatequery = null;
-      this.newfrom = null;
-      this.newto = null;
-      this.myDateValue = null;
-      this.toDate = null;
-    }
+        this.FromDatequery = this.myDateValue;
+        this.ToDatequery = this.toDate;
+      }
+      else if(val === '--Select Particular--'){
+        this.FromDatequery = null;
+        this.ToDatequery = null;
+        this.newfrom = null;
+        this.newto = null;
+        this.myDateValue = null;
+        this.toDate = null;
+      }
 
 
   }
-  openmodel() {
-    this.modalselect = true;
-  }
+  openmodel(){
+    this.modalselect=true;
+            }
 
-  onExport() {
-    const reportNameWithUnderscore = this.reportName + '_';
-    this.excel.exportAsExcelFile(this.rows, reportNameWithUnderscore,
-      moment().format('YYYYMMDD_HHmmss'))
-  }
+ onExport() {
+  const reportNameWithUnderscore = this.reportName + '_';
+   this.excel.exportAsExcelFile(this.rows, reportNameWithUnderscore,
+  moment().format('YYYYMMDD_HHmmss'))
+  } 
 
   downloadFile(format: string) {
     const date = moment().format('YYYYMMDD_HHmmss')
     const reportNameWithUnderscore = this.reportName + '_' + date;
-    this.reportBuilderService.downloadFile(format, this.filterRows, reportNameWithUnderscore)
+    this.reportBuilderService.downloadFile(format, this.filterRows,reportNameWithUnderscore)
   }
-  back() {
+  back(){
     this.router.navigate(["../../all"], { relativeTo: this.route });
   }
-  FormattedAdhocparameters;
-  adocdata;
-  // showPlusIconRow: number | null = 0;
-  onAddLines() {
-    console.log(this.serverData);
-    const lastRow = this.serverData[this.serverData.length - 1];
-    if (lastRow && lastRow.fields_name !== '') {
+FormattedAdhocparameters;
+adocdata;
+// showPlusIconRow: number | null = 0;
+    onAddLines(){
+      console.log(this.serverData);
+      const lastRow = this.serverData[this.serverData.length - 1];
+      if (lastRow && lastRow.fields_name !== '') {
       let formattedString = '';
       for (const condition of this.serverData) {
         const { andor, fields_name, condition: cond, value } = condition;
@@ -484,13 +443,13 @@ todayDate;
         this.FormattedAdhocparameters = formattedString
         // this.selectcolumn(this.serverData);
       }
-      this.serverData.push({
-        andor: "AND",
-        fields_name: "",
-        condition: "=",
-        value: ""
-      });
-    }
+    this.serverData.push({
+      andor: "AND",
+      fields_name: "",
+      condition: "=",
+      value: ""
+    });
+  }
     // this.showPlusIconRow = this.serverData.length - 1;
 
   }
@@ -502,10 +461,10 @@ todayDate;
     if (this.serverData.length > 1) {
       // Get the item to be deleted
       const deletedItem = this.serverData[index];
-
+  
       // Remove the item from the serverData array
       this.serverData.splice(index, 1);
-
+  
       // Remove the corresponding entries from selectedValues
       if (Array.isArray(deletedItem)) {
         for (const item of deletedItem) {
@@ -529,14 +488,14 @@ todayDate;
         }
       }
     }
-
+  
     console.log(this.selectedValues);
-    this.filterRowsBySelectedValues();
-  }
+    this.filterRowsBySelectedValues();  
+  }       
 
 
-  rows: any[];
-  filterRows: any[];
+  rows:any[];
+  filterRows:any[];
   columns: any[];
   rowdata;
   FromDatequery;
@@ -546,409 +505,327 @@ todayDate;
   newto;
 
   dateKey;
-  runtheQuery() {
-    console.log(this.myDateValue, this.toDate);
-    let query = this.SQLQuery;
-    // let query
-    if (this.dynamicForm.value) {
-      // for(let i = 0; i < this.dynamicForm.value.length; i++){
-      //   // const query = this.SQLQuery + " AND " + this.dynamicForm.controls[i] + " = " + this.dynamicForm.value[i]
-
-      // }
+runtheQuery(){
+  console.log(this.myDateValue , this.toDate);
+ let query = this.SQLQuery;
+// let query
+ if(this.dynamicForm.value){
+  // for(let i = 0; i < this.dynamicForm.value.length; i++){
+  //   // const query = this.SQLQuery + " AND " + this.dynamicForm.controls[i] + " = " + this.dynamicForm.value[i]
+    
+  // }
 
 
-      // Iterate over the keys in dynamicForm.value
-      Object.keys(this.dynamicForm.value).forEach((key) => {
-        // Append the condition for each key to the query
-        if (this.dynamicForm.value[key] !== null) {
-          this.selectcolumn(this.dynamicForm.value);
-          // query += ` AND ${key} = '${this.dynamicForm.value[key]}'`;
-        }
-        // const regex = /FROM/i;
-        // const match = query.match(regex);
-        //    if (this.dynamicForm.value[key] !== null && this.dynamicForm.value[key] !== '') {
-        // // query += ` AND ${key} = '${this.dynamicForm.value[key]}'`;
-        // const columnName = key.split('.').pop();
-        // let coalesceExpression = `, COALESCE(${key}, '${this.dynamicForm.value[key]}') as  ${columnName}`;
-        // if (match) {
-        //   // Insert the COALESCE expression before the FROM keyword
-        //   query = query.slice(0, match.index) + coalesceExpression +' '+ query.slice(match.index);
-        // }
-        // }
-      });
-      // if(this.FromDatequery && this.ToDatequery){
-      //   query += ` AND cretaedat BETWEEN '${this.FromDatequery}' AND '${this.ToDatequery}'`;
-
-      // }else
-      if (this.DateParam == true) {
-        this.dateKey = 'createdat';
-        this.adhocList.forEach(key => {
-          if (key.includes("created_at")) {
-            this.dateKey = "created_at";
-          }
-        });
-        this.adhocList.forEach(key => {
-          if (key.includes("createdAt")) {
-            this.dateKey = "createdAt";
-          }
-        });
-        if (this.myDateValue && this.toDate) {
-          if (this.myDateValue) {
-            this.newfrom = new Date(this.myDateValue);
-            // const year = inputDate.getFullYear();
-            // const month = String(inputDate.getMonth() + 1).padStart(2, "0"); // Months are zero-based, so add 1
-            // const day = String(inputDate.getDate()).padStart(2, "0");
-            // this.newfrom = `${year}-${month}-${day}`;
-          }
-          if (this.toDate) {
-            this.newto = new Date(this.toDate);
-            // const year = inputDate.getFullYear();
-            // const month = String(inputDate.getMonth() + 1).padStart(2, "0"); // Months are zero-based, so add 1
-            // const day = String(inputDate.getDate()).padStart(2, "0");
-            // this.newto = `${year}-${month}-${day}`;
-
-          }
-          query += ` AND ${this.dateKey} BETWEEN '${this.newfrom}' AND '${this.newto}'`;
-
-        }
-      }
-      // if(this.myDateValue && this.toDate){
-      //   query += ` AND from_date = NVL(${this.myDateValue}from_date, 'from_date') AND to_date = NVL(${this.toDate}to_date, 'to_date')`;
-      // }
-      console.log(query);
+  // Iterate over the keys in dynamicForm.value
+  Object.keys(this.dynamicForm.value).forEach((key) => {
+    // Append the condition for each key to the query
+    if (this.dynamicForm.value[key] !== null ) {
+      this.selectcolumn(this.dynamicForm.value);
+    // query += ` AND ${key} = '${this.dynamicForm.value[key]}'`;
     }
-    //  if(this.FormattedAdhocparameters){
-    //   query += this.FormattedAdhocparameters
-    //  }
+    // const regex = /FROM/i;
+    // const match = query.match(regex);
+    //    if (this.dynamicForm.value[key] !== null && this.dynamicForm.value[key] !== '') {
+    // // query += ` AND ${key} = '${this.dynamicForm.value[key]}'`;
+    // const columnName = key.split('.').pop();
+    // let coalesceExpression = `, COALESCE(${key}, '${this.dynamicForm.value[key]}') as  ${columnName}`;
+    // if (match) {
+    //   // Insert the COALESCE expression before the FROM keyword
+    //   query = query.slice(0, match.index) + coalesceExpression +' '+ query.slice(match.index);
+    // }
+    // }
+  });
+  // if(this.FromDatequery && this.ToDatequery){
+  //   query += ` AND cretaedat BETWEEN '${this.FromDatequery}' AND '${this.ToDatequery}'`;
 
-    this.selectcolumn(this.serverData);
-    //  query = `SELECT a.name AS name, b.dob AS dob FROM abc a, abcde b WHERE a.name = 'gaurav' AND a.abc = NVL(b.abc, 'name') AND a.abcde = NVL(b.abcde, 'test');`
-    console.log(query);
-    this.reportBuilderService.getMasterData(query).subscribe((data) => {
-      // this.rows = data;
-
-      console.log(this.rows);
-      this.rowdata = [this.rows];
-      console.log(typeof this.rows);
-      if (data) {
-        this.toastr.success("Run Successfully")
+  // }else
+  if(this.DateParam == true){
+    this.dateKey = 'createdat';
+    this.adhocList.forEach(key => {
+      if (key.includes("created_at")) {
+        this.dateKey ="created_at" ;
       }
-      var j;
-      var cart = [];
+  });
+  this.adhocList.forEach(key => {
+    if (key.includes("createdAt")) {
+      this.dateKey ="createdAt" ;
+    }
+});
+   if(this.myDateValue && this.toDate){
+    if(this.myDateValue){
+      this.newfrom = new Date(this.myDateValue);
+    // const year = inputDate.getFullYear();
+    // const month = String(inputDate.getMonth() + 1).padStart(2, "0"); // Months are zero-based, so add 1
+    // const day = String(inputDate.getDate()).padStart(2, "0");
+    // this.newfrom = `${year}-${month}-${day}`;
+    }
+    if(this.toDate){
+      this.newto = new Date(this.toDate);
+      // const year = inputDate.getFullYear();
+      // const month = String(inputDate.getMonth() + 1).padStart(2, "0"); // Months are zero-based, so add 1
+      // const day = String(inputDate.getDate()).padStart(2, "0");
+      // this.newto = `${year}-${month}-${day}`;
+      
+    }
+  query += ` AND ${this.dateKey} BETWEEN '${this.newfrom}' AND '${this.newto}'`;
 
-      for (var i = 0; i < data.length; i++) {
-        var columnsIn = data[i];
-        if (i == 1) {
-          for (var key in columnsIn) {
-            j = { prop: key, name: key };
-            cart.push(j)
-
-          }
-        }
-      }
-      this.columns = cart;
-
-    });
+}
   }
-  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)
-          }
+  // if(this.myDateValue && this.toDate){
+  //   query += ` AND from_date = NVL(${this.myDateValue}from_date, 'from_date') AND to_date = NVL(${this.toDate}to_date, 'to_date')`;
+  // }
+  console.log(query);
+ }
+//  if(this.FormattedAdhocparameters){
+//   query += this.FormattedAdhocparameters
+//  }
 
-        })
+      this.selectcolumn(this.serverData);
+//  query = `SELECT a.name AS name, b.dob AS dob FROM abc a, abcde b WHERE a.name = 'gaurav' AND a.abc = NVL(b.abc, 'name') AND a.abcde = NVL(b.abcde, 'test');`
+ console.log(query);
+  this.reportBuilderService.getMasterData(query).subscribe((data) => {
+    // this.rows = data;
+   
+    console.log(this.rows);
+this.rowdata= [this.rows];
+    console.log(typeof this.rows);
+    if(data){
+      this.toastr.success("Run Successfully")
+    }
+     var j;
+     var cart = [];
 
+   for(var i = 0; i < data.length; i++)
+   {
+     var columnsIn = data[i];
+     if(i==1)
+     {
+         for(var key in columnsIn)
+        {
+         j={prop:key , name: key};
+         cart.push(j)
+
+        }
+     }
+   }
+   this.columns = cart;
+
+});
+}
+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)
+      }
+
+    })
+
+  })
+}
+return headers;
+}
+
+getFilterHeaders() {
+  let headers: string[] = [];
+  if(this.filterRows) {
+    this.filterRows.forEach((value) => {
+      Object.keys(value).forEach((key) => {
+        if(!headers.find((header) => header == key)){
+          headers.push(key)
+        }
       })
-    }
-    return headers;
+    })
   }
-
-  getFilterHeaders() {
-    let headers: string[] = [];
-    if (this.filterRows) {
-      this.filterRows.forEach((value) => {
-        Object.keys(value).forEach((key) => {
-          if (!headers.find((header) => header == key)) {
-            headers.push(key)
-          }
-        })
-      })
-    }
-    return headers;
+  return headers;
   }
 
 
 
-  selectedValues: { [key: string]: any[] } = {};
-  selectcolumn(data: any) {
-    if (Array.isArray(data)) {
-      for (const item of data) {
-        const columnName = item.fields_name;
-        const value = item.value;
+selectedValues: { [key: string]: any[] } = {};
+selectcolumn(data: any) {
+  if (Array.isArray(data)) {
+    for (const item of data) {
+      const columnName = item.fields_name;
+      const value = item.value;
 
-        // Check if fields_name is not empty and value is not null or empty string
-        if (columnName.trim() !== '') {
-          if (!this.selectedValues[columnName]) {
-            this.selectedValues[columnName] = [];
-          }
-
-          if (value !== null && value.trim() !== '') {
-            // Only add the value if it's not null and not an empty string
-            if (!this.selectedValues[columnName].includes(value)) {
-              this.selectedValues[columnName].push(value);
-            }
-          } else {
-            // Remove the property if the value is null or empty string
-            delete this.selectedValues[columnName];
-          }
+      // Check if fields_name is not empty and value is not null or empty string
+      if (columnName.trim() !== '') {
+        if (!this.selectedValues[columnName]) {
+          this.selectedValues[columnName] = [];
         }
-      }
-    } else if (typeof data === 'object') {
-      // Handle the first JSON structure (object)
-      console.log(data);
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          const columnName = key;
-          const value = data[key];
 
-          if (!this.selectedValues[columnName]) {
-            this.selectedValues[columnName] = [];
-          }
-
-          if (value !== null && value.trim() !== '') {
-            // Only add the value if it's not null and not an empty string
-            if (!this.selectedValues[columnName].includes(value)) {
-              this.selectedValues[columnName].push(value);
-            }
-          } else {
-            // Remove the property if the value is null or empty string
-            delete this.selectedValues[columnName];
+        if (value !== null && value.trim() !== '') {
+          // Only add the value if it's not null and not an empty string
+          if (!this.selectedValues[columnName].includes(value)) {
+            this.selectedValues[columnName].push(value);
           }
+        } else {
+          // Remove the property if the value is null or empty string
+          delete this.selectedValues[columnName];
         }
       }
     }
+  } else if (typeof data === 'object') {
+    // Handle the first JSON structure (object)
+    console.log(data);
+    for (const key in data) {
+      if (data.hasOwnProperty(key)) {
+        const columnName = key;
+        const value = data[key];
 
-    console.log(this.selectedValues);
-    this.filterRowsBySelectedValues();
+        if (!this.selectedValues[columnName]) {
+          this.selectedValues[columnName] = [];
+        }
+
+        if (value !== null && value.trim() !== '') {
+          // Only add the value if it's not null and not an empty string
+          if (!this.selectedValues[columnName].includes(value)) {
+            this.selectedValues[columnName].push(value);
+          }
+        } else {
+          // Remove the property if the value is null or empty string
+          delete this.selectedValues[columnName];
+        }
+      }
+    }
   }
 
+  console.log(this.selectedValues);
+  this.filterRowsBySelectedValues();
+}
 
 
 
-  filtered = false;
-  filterRowsBySelectedValues() {
-    // Check if rows is defined and iterable
-    if (!this.rows || !Array.isArray(this.rows)) {
-      console.warn('Rows is not defined or not an array');
-      this.filterRows = [];
-      this.filtered = false;
-      return;
-    }
 
-    // Create a filteredRows array to store the filtered data
-    const filteredRows = [];
+filtered = false;
+filterRowsBySelectedValues() {
+  // Create a filteredRows array to store the filtered data
+  const filteredRows = [];
 
-    // Iterate through each row in the rows array
-    for (const row of this.rows) {
-      let isMatch = true;
+  // Iterate through each row in the rows array
+  for (const row of this.rows) {
+    let isMatch = true;
 
-      // Iterate through each column in the selectedValues object
-      for (const columnName in this.selectedValues) {
-        if (this.selectedValues.hasOwnProperty(columnName) && row.hasOwnProperty(columnName)) {
-          // Get the selected values for the current column
-          const selectedValuesForColumn = this.selectedValues[columnName];
+    // Iterate through each column in the selectedValues object
+    for (const columnName in this.selectedValues) {
+      if (this.selectedValues.hasOwnProperty(columnName) && row.hasOwnProperty(columnName)) {
+        // Get the selected values for the current column
+        const selectedValuesForColumn = this.selectedValues[columnName];
 
-          // Get the type of the row's value for the current column
-          const rowValue = row[columnName];
-          const rowValueType = typeof rowValue;
+        // Get the type of the row's value for the current column
+        const rowValue = row[columnName];
+        const rowValueType = typeof rowValue;
 
-          if (rowValueType === 'boolean') {
-            // Handle boolean values
-            if (selectedValuesForColumn.length === 0) {
-              // If no specific value selected for boolean, include the row
-              continue;
+        if (rowValueType === 'boolean') {
+          // Handle boolean values
+          if (selectedValuesForColumn.length === 0) {
+            // If no specific value selected for boolean, include the row
+            continue;
+          }
+
+          const selectedBooleanValue = selectedValuesForColumn[0] === 'true'; // Convert to boolean
+          if (selectedBooleanValue !== rowValue) {
+            isMatch = false;
+            break; // No need to check other columns if it's not a match
+          }
+        } else {
+          // Handle other data types, including numbers and strings
+          // Convert selected values to the appropriate type
+          const convertedValues = selectedValuesForColumn.map((value) => {
+            if (rowValueType === 'number') {
+              return parseFloat(value); // Convert to number
+            } else {
+              return value; // Keep the original value (string, etc.)
             }
+          });
 
-            const selectedBooleanValue = selectedValuesForColumn[0] === 'true'; // Convert to boolean
-            if (selectedBooleanValue !== rowValue) {
-              isMatch = false;
-              break; // No need to check other columns if it's not a match
-            }
-          } else {
-            // Handle other data types, including numbers and strings
-            // Convert selected values to the appropriate type
-            const convertedValues = selectedValuesForColumn.map((value) => {
-              if (rowValueType === 'number') {
-                return parseFloat(value); // Convert to number
-              } else {
-                return value; // Keep the original value (string, etc.)
-              }
-            });
-
-            // Check if the row's value for the current column matches any selected value
-            if (!convertedValues.includes(rowValue)) {
-              isMatch = false;
-              break; // No need to check other columns if it's not a match
-            }
+          // Check if the row's value for the current column matches any selected value
+          if (!convertedValues.includes(rowValue)) {
+            isMatch = false;
+            break; // No need to check other columns if it's not a match
           }
         }
       }
-      if (this.FromDatequery !== null && this.ToDatequery !== null) {
+    }
+      if(this.FromDatequery !== null && this.ToDatequery !== null){
         this.newfrom = this.FromDatequery
         this.newto = this.ToDatequery
-      }
-
-      if (this.newfrom !== null && this.newto !== null) {
-        // Extract the year, month, and day from newfrom and newto
-        const from = new Date(this.newfrom);
-        const to = new Date(this.newto);
-        const newfromYear = from.getFullYear();
-        const newfromMonth = from.getMonth();
-        const newfromDay = from.getDate();
-        const newtoYear = to.getFullYear();
-        const newtoMonth = to.getMonth();
-        const newtoDay = to.getDate();
-
-        // Extract the year, month, and day from createdAtDate
-        const dateKey = this.dateKey;
-        const createdAtDate = new Date(row[dateKey]);
-        const createdAtYear = createdAtDate.getFullYear();
-        const createdAtMonth = createdAtDate.getMonth();
-        const createdAtDay = createdAtDate.getDate();
-
-        // Create new Date objects using the extracted year, month, and day
-        const newfromDate = new Date(newfromYear, newfromMonth, newfromDay);
-        const newtoDate = new Date(newtoYear, newtoMonth, newtoDay);
-        const createdAtDateOnly = new Date(createdAtYear, createdAtMonth, createdAtDay);
-
-        // Check if the createdAtDateOnly is within the specified date range
-        if (createdAtDateOnly < newfromDate || createdAtDateOnly > newtoDate) {
-          isMatch = false;
-        }
-      }
-
-
-      // If the row matches all selected values, add it to the filteredRows array
-      if (isMatch) {
-        filteredRows.push(row);
-      }
-    }
-
-    // Assign the filtered data to the rows
-    console.log(filteredRows);
-    this.filterRows = filteredRows;
-
-    // Check if all arrays in selectedValues are empty
-    const allArraysEmpty = Object.values(this.selectedValues).every(arr => arr.length === 0);
-
-    // Check if the date range is not selected
-    const dateRangeNotSelected = !this.newfrom || !this.newto;
-
-    // Set this.filtered based on allArraysEmpty and dateRangeNotSelected
-    this.filtered = !allArraysEmpty || !dateRangeNotSelected;
   }
 
-
-
-  formatDate(dateObj: any): string {
-    // Extract individual date properties
-    const { year, monthValue, dayOfMonth, hour, minute, second } = dateObj;
-
-    // Create a JavaScript Date object using the extracted properties
-    const formattedDate = new Date(year, monthValue - 1, dayOfMonth, hour, minute, second);
-
-    // Format the date as needed (e.g., using built-in JavaScript date formatting)
-    return formattedDate.toLocaleString(); // Or any other desired formatting
-  }
-
-  isDate(value: any): boolean {
-    return (
-      value instanceof Date ||
-      (value &&
-        value.year !== undefined &&
-        value.monthValue !== undefined &&
-        value.dayOfMonth !== undefined)
-    );
-  }
-
-  /**
-   * Simple XML parser to convert XML to JSON array
-   * Handles the specific format: <User><id>101</id><name>John Doe</name><email>john.doe@example.com</email></User>
-   * @param xmlString The XML string to parse
-   * @returns Array of objects representing the XML data
-   */
-  private parseXMLToJSON(xmlString: string): any[] {
-    // Remove any XML declaration
-    xmlString = xmlString.replace(/<\?xml[^>]*\?>/g, '');
+    if (this.newfrom !== null && this.newto !== null) {
+      // Extract the year, month, and day from newfrom and newto
+      const from = new Date(this.newfrom);
+      const to = new Date(this.newto);
+      const newfromYear = from.getFullYear();
+      const newfromMonth = from.getMonth();
+      const newfromDay = from.getDate();
+      const newtoYear = to.getFullYear();
+      const newtoMonth = to.getMonth();
+      const newtoDay = to.getDate();
     
-    // Extract the root element name (e.g., "User" from <User>...</User>)
-    const rootMatch = xmlString.match(/<(\w+)(?:\s[^>]*)?>/);
-    if (!rootMatch) {
-      console.warn('Could not identify root element in XML');
-      return [];
-    }
+      // Extract the year, month, and day from createdAtDate
+      const dateKey = this.dateKey;
+      const createdAtDate = new Date(row[dateKey]);
+      const createdAtYear = createdAtDate.getFullYear();
+      const createdAtMonth = createdAtDate.getMonth();
+      const createdAtDay = createdAtDate.getDate();
     
-    const rootElement = rootMatch[1];
-    const results: any[] = [];
+      // Create new Date objects using the extracted year, month, and day
+      const newfromDate = new Date(newfromYear, newfromMonth, newfromDay);
+      const newtoDate = new Date(newtoYear, newtoMonth, newtoDay);
+      const createdAtDateOnly = new Date(createdAtYear, createdAtMonth, createdAtDay);
     
-    // Create a regex to match all instances of the root element
-    const regex = new RegExp(`<${rootElement}(?:\\s[^>]*)?>([\\s\\S]*?)<\\/${rootElement}>`, 'g');
-    let match;
-    
-    while ((match = regex.exec(xmlString)) !== null) {
-      const elementContent = match[1];
-      const item: any = {};
-      
-      // Extract all tags and their values
-      const tagRegex = /<(\w+)>(.*?)<\/\1>/g;
-      let tagMatch;
-      
-      while ((tagMatch = tagRegex.exec(elementContent)) !== null) {
-        const tagName = tagMatch[1];
-        const tagValue = tagMatch[2];
-        // Try to convert to appropriate type
-        item[tagName] = this.convertValueType(tagValue);
-      }
-      
-      results.push(item);
-    }
-    
-    return results;
-  }
-  
-  /**
-   * Convert string values to appropriate types (number, boolean, etc.)
-   * @param value The string value to convert
-   * @returns The value converted to the appropriate type
-   */
-  private convertValueType(value: string): any {
-    // Check for empty value
-    if (value === '') {
-      return value;
-    }
-    
-    // Check for boolean values
-    if (value.toLowerCase() === 'true') {
-      return true;
-    }
-    if (value.toLowerCase() === 'false') {
-      return false;
-    }
-    
-    // Check for numeric values
-    if (!isNaN(Number(value)) && !isNaN(parseFloat(value))) {
-      // Check if it's an integer or float
-      if (Number.isInteger(parseFloat(value))) {
-        return parseInt(value, 10);
-      } else {
-        return parseFloat(value);
+      // Check if the createdAtDateOnly is within the specified date range
+      if (createdAtDateOnly < newfromDate || createdAtDateOnly > newtoDate) {
+        isMatch = false;
       }
     }
     
-    // Return as string if no other type matches
-    return value;
+
+    // If the row matches all selected values, add it to the filteredRows array
+    if (isMatch) {
+      filteredRows.push(row);
+    }
   }
-}
\ No newline at end of file
+
+  // Assign the filtered data to the rows
+  console.log(filteredRows);
+  this.filterRows = filteredRows;
+
+  // Check if all arrays in selectedValues are empty
+  const allArraysEmpty = Object.values(this.selectedValues).every(arr => arr.length === 0);
+
+  // Check if the date range is not selected
+  const dateRangeNotSelected = !this.newfrom || !this.newto;
+
+  // Set this.filtered based on allArraysEmpty and dateRangeNotSelected
+  this.filtered = !allArraysEmpty || !dateRangeNotSelected;
+}
+
+
+
+formatDate(dateObj: any): string {
+  // Extract individual date properties
+  const { year, monthValue, dayOfMonth, hour, minute, second } = dateObj;
+
+  // Create a JavaScript Date object using the extracted properties
+  const formattedDate = new Date(year, monthValue - 1, dayOfMonth, hour, minute, second);
+
+  // Format the date as needed (e.g., using built-in JavaScript date formatting)
+  return formattedDate.toLocaleString(); // Or any other desired formatting
+}
+
+isDate(value: any): boolean {
+  return (
+    value instanceof Date ||
+    (value &&
+      value.year !== undefined &&
+      value.monthValue !== undefined &&
+      value.dayOfMonth !== undefined)
+  );
+}
+
+}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.html
index 57deb33..972d75d 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.html
@@ -142,62 +142,6 @@
             </div>
           </div>
         </div>
-        
-        <!-- Data Lake -->
-        <div class="clr-col-md-3" style="width: 300px ;">
-          <div class="card" (click)="goToDataLake()"
-            style="border-left: none; border-right: none; border-top: none;">
-
-            <div class="card-header" style="padding-bottom: 0px;">
-              <div class="clr-row">
-                <div class="clr-col-12">
-                  <clr-icon shape="storage"></clr-icon>
-                </div>
-              </div> <br>
-              <div class="clr-row">
-                <div class="clr-col-12">
-                  <b class="word" id="word" title="Data Lake" style="color:#e98585">Data Lake</b>
-                </div>
-              </div>
-
-              <div class="clr-row">
-                <div class="clr-col-12">
-                  <div class="card-title1" id="word">
-                    <b style="font-size: 15px;" class="p2" [title]="">Centralized data storage and management</b>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <!-- SureConnect -->
-        <div class="clr-col-md-3" style="width: 300px ;">
-          <div class="card" (click)="goToSureConnect()"
-            style="border-left: none; border-right: none; border-top: none;">
-
-            <div class="card-header" style="padding-bottom: 0px;">
-              <div class="clr-row">
-                <div class="clr-col-12">
-                  <clr-icon shape="network-globe"></clr-icon>
-                </div>
-              </div> <br>
-              <div class="clr-row">
-                <div class="clr-col-12">
-                  <b class="word" id="word" title="SureConnect" style="color:#e98585">SureConnect</b>
-                </div>
-              </div>
-
-              <div class="clr-row">
-                <div class="clr-col-12">
-                  <div class="card-title1" id="word">
-                    <b style="font-size: 15px;" class="p2" [title]="">Secure connection management</b>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
 
 
 
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.ts
index 72af27d..4e62715 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/setupicon/setupicon.component.ts
@@ -80,16 +80,6 @@ export class SetupiconComponent implements OnInit {
   goTokenRegistery() {
     this.router.navigate(['/cns-portal/tokenregistery'], { relativeTo: this.route });
   }
-  
-  // Data Lake navigation
-  goToDataLake() {
-    this.router.navigate(['/cns-portal/datalake'], { relativeTo: this.route });
-  }
-  
-  // SureConnect navigation
-  goToSureConnect() {
-    this.router.navigate(['/cns-portal/sureconnect'], { relativeTo: this.route });
-  }
 
 
   //   mc;
@@ -104,4 +94,4 @@ export class SetupiconComponent implements OnInit {
   // this.md=val.mdelete;
   // this.mv=val.mvisible;
 
-}
\ No newline at end of file
+}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html
index ee798b2..30fdb9f 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.html
@@ -1,4 +1,4 @@
-<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
     <li>
         <a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']">
             <clr-icon shape="home"></clr-icon>
@@ -8,400 +8,236 @@
         <a href="">
             <clr-icon shape="flag"></clr-icon>{{ 'SEQ_GENERATOR' | translate }}</a>
     </li>
+
 </ol>
 
-<section class="sq-hero">
-  <div class="sq-hero__content">
-    <div class="sq-hero__icon"><clr-icon shape="number-list"></clr-icon></div>
-    <div>
-      <h2 class="sq-hero__title">{{ 'SEQ_GENERATOR' | translate }}</h2>
-      <p class="sq-hero__subtitle">{{ 'FND' | translate }}</p>
+<div class="dg-wrapper">
+    <div class="clr-row">
+        <div class="clr-col-8">
+            <h3>{{ 'SEQ_GENERATOR' | translate }}</h3>
+        </div>
+
+        <div class="clr-col-4" style="text-align: right;">
+            <button class="btn btn-outline" (click)="onExport()">
+                <clr-icon shape="export"></clr-icon> {{ 'EXPORT' | translate }}
+            </button>
+            <button id="add" class="btn btn-primary" (click)="goToAdd()">
+                <clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }}
+            </button>
+        </div>
     </div>
-  </div>
-  <div class="sq-hero__actions">
-    <button class="sq-btn sq-btn-outline" (click)="onExport()">
-      <clr-icon shape="export"></clr-icon> <span class="sq-btn-text">{{ 'EXPORT' | translate }}</span>
-    </button>
-    <button id="add" class="sq-btn sq-btn-primary" (click)="goToAdd()">
-      <clr-icon shape="plus"></clr-icon><span class="sq-btn-text">{{ 'ADD' | translate }}</span>
-    </button>
-  </div>
-</section>
 
-<div class="sq-container">
-  <div class="sq-toolbar">
-    <div class="sq-toolbar__left">
-      <div class="sq-search">
-        <clr-icon shape="search"></clr-icon>
-        <input class="sq-search__input" type="text" [placeholder]="'SEARCH_ALL_FIELDS' | translate" [(ngModel)]="filterText" />
-      </div>
-    </div>
-    <div class="sq-toolbar__right sq-stats">
-      <div class="sq-stat">
-        <div class="sq-stat__value">{{ totalSequences }}</div>
-        <div class="sq-stat__label">{{ 'TOTAL_SEQUENCES' | translate }}</div>
-      </div>
-      <div class="sq-view-toggle">
-        <button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
-          <clr-icon shape="view-cards"></clr-icon>
-        </button>
-        <button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
-          <clr-icon shape="table"></clr-icon>
-        </button>
-      </div>
-    </div>
-  </div>
+    <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
+        <clr-dg-placeholder>
+            <ng-template #loadingSpinner>
+                <clr-spinner>Loading ... </clr-spinner>
+            </ng-template>
+            <div *ngIf="error;else loadingSpinner">{{error}}</div>
+        </clr-dg-placeholder>
+        <clr-dg-column [clrDgField]="'seq_no'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'CURRENT_NO' | translate }}
+            </ng-container>
+        </clr-dg-column>
+        <clr-dg-column [clrDgField]="'seq_no'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'NAME' | translate }}
+            </ng-container>
+        </clr-dg-column>
+        <clr-dg-column [clrDgField]="'prefix'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'PREFIX' | translate }}
+            </ng-container>
+        </clr-dg-column>
 
-  <clr-datagrid class="sq-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'" [(clrDgSelected)]="selected">
-    <clr-dg-placeholder>
-      <ng-template #loadingSpinner>
-        <clr-spinner>{{ 'LOADING' | translate }} ... </clr-spinner>
-      </ng-template>
-      <div *ngIf="error;else loadingSpinner">{{error}}</div>
-    </clr-dg-placeholder>
-    
-    <clr-dg-column [clrDgField]="'current_no'" class="sq-col sq-col--no">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="hashtag"></clr-icon> {{ 'CURRENT_NO' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'sequence_name'" class="sq-col sq-col--name">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="tag"></clr-icon> {{ 'NAME' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'prefix'" class="sq-col sq-col--prefix">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="text"></clr-icon> {{ 'PREFIX' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
+        <clr-dg-column [clrDgField]="'seperator'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'SEPARATOR' | translate }}
+            </ng-container>
+        </clr-dg-column>
 
-    <clr-dg-column [clrDgField]="'seperator'" class="sq-col sq-col--separator">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="split-string"></clr-icon> {{ 'SEPARATOR' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
+        <clr-dg-column [clrDgField]="'digit'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                {{ 'SEQUENCE_SIZE' | translate }}
+            </ng-container>
+        </clr-dg-column>
+        <!-- <clr-dg-column [clrDgField]="'date_format'">
+            <ng-container *clrDgHideableColumn="{hidden: false}">
+                Date Format
+            </ng-container>
+        </clr-dg-column> -->
+        <clr-dg-row *clrDgItems="let user of alldata" [clrDgItem]="user">
+            <clr-dg-cell>{{user.current_no}}</clr-dg-cell>
+            <clr-dg-cell>{{user.sequence_name}}</clr-dg-cell>
+            <clr-dg-cell>{{user.prefix}}</clr-dg-cell>
+            <clr-dg-cell>{{user.seperator}}</clr-dg-cell>
+            <clr-dg-cell>{{user.sequence_size}}</clr-dg-cell>
+            <!-- <clr-dg-cell>{{user.date_format}}</clr-dg-cell> -->
+            <clr-dg-action-overflow>
+                <button class="action-item" (click)="goToEdit(user)"> {{ 'EDIT' | translate }} <clr-icon shape="edit"
+                        class="is-error"></clr-icon></button>
+                <button class="action-item" (click)="onDelete(user)"> {{ 'DELETE' | translate }}<clr-icon shape="trash"
+                        class="is-error"></clr-icon></button>
+            </clr-dg-action-overflow>
 
-    <clr-dg-column [clrDgField]="'sequence_size'" class="sq-col sq-col--size">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="ruler"></clr-icon> {{ 'SEQUENCE_SIZE' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'suffix'" class="sq-col sq-col--suffix">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="text"></clr-icon> {{ 'SUFFIX' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'starting_no'" class="sq-col sq-col--starting">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="play"></clr-icon> {{ 'STARTING_NO' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-column [clrDgField]="'sequence_code'" class="sq-col sq-col--code">
-      <ng-container *clrDgHideableColumn="{hidden: false}">
-        <span class="sq-col-title">
-          <clr-icon shape="code"></clr-icon> {{ 'SEQUENCE_CODE' | translate }}
-        </span>
-      </ng-container>
-    </clr-dg-column>
-    
-    <clr-dg-row *clrDgItems="let user of filteredSequences" [clrDgItem]="user">
-      <clr-dg-cell>{{user.current_no}}</clr-dg-cell>
-      <clr-dg-cell>{{user.sequence_name}}</clr-dg-cell>
-      <clr-dg-cell>{{user.prefix}}</clr-dg-cell>
-      <clr-dg-cell>{{user.seperator}}</clr-dg-cell>
-      <clr-dg-cell>{{user.sequence_size}}</clr-dg-cell>
-      <clr-dg-cell>{{user.suffix}}</clr-dg-cell>
-      <clr-dg-cell>{{user.starting_no}}</clr-dg-cell>
-      <clr-dg-cell>{{user.sequence_code}}</clr-dg-cell>
-      <clr-dg-action-overflow>
-        <button class="sq-action-item" (click)="goToEdit(user)"> 
-          {{ 'EDIT' | translate }} 
-          <clr-icon shape="edit"></clr-icon>
-        </button>
-        <button class="sq-action-item sq-btn-error" (click)="onDelete(user)"> 
-          {{ 'DELETE' | translate }}
-          <clr-icon shape="trash"></clr-icon>
-        </button>
-      </clr-dg-action-overflow>
-    </clr-dg-row>
 
-    <clr-dg-footer class="sq-grid-footer">
-      <clr-dg-pagination #pagination [clrDgPageSize]="10">
-        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">
-          {{ 'RECORDS_PER_PAGE' | translate }}
-        </clr-dg-page-size>
-        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} 
-        {{ 'OF' | translate }} {{pagination.totalItems}} {{ 'RECORDS' | translate }}
-      </clr-dg-pagination>
-    </clr-dg-footer>
-  </clr-datagrid>
+        </clr-dg-row>
 
-  <div class="sq-cards" *ngIf="viewMode==='cards'">
-    <div class="sq-card-item" *ngFor="let user of filteredSequences">
-      <div class="sq-card-item__header">
-        <div class="sq-card-item__icon"><clr-icon shape="number-list"></clr-icon></div>
-        <div class="sq-card-item__title">{{user.sequence_name}}</div>
-        <div class="sq-card-item__badge">{{user.current_no}}</div>
-      </div>
-      <div class="sq-card-item__body">
-        <div class="sq-kv"><span>{{ 'PREFIX' | translate }}</span><strong>{{user.prefix}}</strong></div>
-        <div class="sq-kv"><span>{{ 'SEPARATOR' | translate }}</span><strong>{{user.seperator}}</strong></div>
-        <div class="sq-kv"><span>{{ 'SEQUENCE_SIZE' | translate }}</span><strong>{{user.sequence_size}}</strong></div>
-        <div class="sq-kv" *ngIf="user.suffix"><span>{{ 'SUFFIX' | translate }}</span><strong>{{user.suffix}}</strong></div>
-        <div class="sq-kv" *ngIf="user.starting_no"><span>{{ 'STARTING_NO' | translate }}</span><strong>{{user.starting_no}}</strong></div>
-        <div class="sq-kv" *ngIf="user.sequence_code"><span>{{ 'SEQUENCE_CODE' | translate }}</span><strong>{{user.sequence_code}}</strong></div>
-        <div class="sq-kv" *ngIf="user.demonstration"><span>{{ 'DEMONSTRATION' | translate }}</span><strong>{{user.demonstration}}</strong></div>
-      </div>
-      <div class="sq-card-item__footer">
-        <button class="sq-btn sq-btn-sm sq-btn-outline" (click)="goToEdit(user)">
-          <clr-icon shape="edit"></clr-icon> {{ 'EDIT' | translate }}
-        </button>
-        <button class="sq-btn sq-btn-sm sq-btn-outline" (click)="onDelete(user)">
-          <clr-icon shape="trash"></clr-icon> {{ 'DELETE' | translate }}
-        </button>
-      </div>
-    </div>
-  </div>
+        <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 class="sq-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <div class="modal-body">
-    <div class="sq-delete-header">
-      <div class="sq-delete-icon">
-        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
-      </div>
-      <h1 class="sq-delete-title">{{ 'ARE_YOU_SURE_WANT_TO_DELETE' | translate }}?</h1>
-      <p class="sq-delete-subtitle">{{ 'THIS_ACTION_CANNOT_BE_UNDONE' | translate }}</p>
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.id">
+        <h1 class="delete">Are You Sure Want to delete?</h1>
+        <h2 class="heading">{{rowSelected.id}}</h2>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+            <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
+        </div>
     </div>
-    <div class="sq-delete-details" *ngIf="rowSelected.id">
-      <div class="sq-delete-detail-item">
-        <span class="sq-delete-detail-label">{{ 'SEQUENCE_ID' | translate }}:</span>
-        <span class="sq-delete-detail-value">{{rowSelected.id}}</span>
-      </div>
-      <div class="sq-delete-detail-item">
-        <span class="sq-delete-detail-label">{{ 'SEQUENCE_NAME' | translate }}:</span>
-        <span class="sq-delete-detail-value">{{rowSelected.sequence_name}}</span>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="sq-btn sq-btn-outline" (click)="modaldelete = false">
-        <clr-icon shape="times"></clr-icon>
-        <span>{{ 'CANCEL' | translate }}</span>
-      </button>
-      <button type="submit" (click)="delete(rowSelected.id)" class="sq-btn sq-btn-error">
-        <clr-icon shape="trash"></clr-icon>
-        <span>{{ 'DELETE' | translate }}</span>
-      </button>
-    </div>
-  </div>
 </clr-modal>
 
-<clr-modal class="sq-modal" [(clrModalOpen)]="modaladd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title sq-modal-title">
-    <clr-icon shape="plus"></clr-icon> {{ 'ADD_SEQUENCE_GENERATOR' | translate }}
-  </h3>
-  <div class="modal-body">
-    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="sq-form">
-      <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_name" class="sq-form-label">
-            {{ 'NAME' | translate }}<span class="required-field">*</span>
-          </label>
-          <input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" formControlName="sequence_name">
-          <div *ngIf="submitted && entryForm.controls.sequence_name.errors" class="sq-error-message">
-            <div *ngIf="submitted && entryForm.controls.sequence_name.errors.required">
-              {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
+
+<clr-modal [(clrModalOpen)]="modaladd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Add Sequence Genarator</h3>
+    <div class="modal-body">
+        <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+            <div class="clr-row">
+                <div class="clr-col-sm-12">
+                    <label for="name">Name<span class="required-field">*</span></label>
+                    <input type="text" class="clr-input" name="sequence_name" formControlName="sequence_name">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="name">Sequence Code</label>
+                    <input type="text" class="clr-input" name="sequence_code" formControlName="sequence_code">
+                </div>
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Implementation</label>
+                    <select name="implementation" formControlName="implementation" class="clr-dropdown">
+                            <option>standard</option>
+                            <option>shared</option>
+                    </select>
+                </div> -->
+                <div class="clr-col-sm-12">
+                    <label for="tags">Demonstration</label>
+                    <input type="text" class="clr-input" formControlName="demonstration">
+                </div>
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Active</label>
+                    <input type="checkbox" formControlName="active" name="active" clrCheckbox>
+                </div> -->
+
+                <div class="clr-col-sm-12">
+                    <label for="name">Prefix<span class="required-field">*</span></label>
+                    <input type="text" class="clr-input" formControlName="prefix" name="prefix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">suffix</label>
+                    <input type="text" class="clr-input" name="suffix" formControlName="suffix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Separator</label>
+                    <input type="text" class="clr-input" name="seperator" formControlName="seperator">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Starting No</label>
+                    <input type="number" class="clr-input" name="starting_no" formControlName="starting_no">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Current No</label>
+                    <input type="number" class="clr-input" formControlName="current_no">
+                </div>
+
+                <div class="clr-col-sm-12">
+                    <label for="tags"> Size</label>
+                    <input type="number" class="clr-input" name="sequence_size" formControlName="sequence_size">
+                </div>
+                <!-- <div class="clr-col-sm-12">
+                    <label for="tags">Date Format</label>
+                    <input type="text" class="clr-input" name="date_format" formControlName="date_format">
+                </div> -->
             </div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_code" class="sq-form-label">
-            {{ 'SEQUENCE_CODE' | translate }}
-          </label>
-          <input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" formControlName="sequence_code">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="demonstration" class="sq-form-label">
-            {{ 'DEMONSTRATION' | translate }}
-          </label>
-          <input type="text" id="demonstration" class="sq-form-input" formControlName="demonstration">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="prefix" class="sq-form-label">
-            {{ 'PREFIX' | translate }}<span class="required-field">*</span>
-          </label>
-          <input type="text" id="prefix" class="sq-form-input" formControlName="prefix" name="prefix">
-          <div *ngIf="submitted && entryForm.controls.prefix.errors" class="sq-error-message">
-            <div *ngIf="submitted && entryForm.controls.prefix.errors.required">
-              {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
+            <br>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline" (click)="modaladd = false">Cancel</button>
+                <button type="submit" class="btn btn-primary">ADD</button>
             </div>
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="suffix" class="sq-form-label">
-            {{ 'SUFFIX' | translate }}
-          </label>
-          <input type="text" id="suffix" class="sq-form-input" name="suffix" formControlName="suffix">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="seperator" class="sq-form-label">
-            {{ 'SEPARATOR' | translate }}
-          </label>
-          <input type="text" id="seperator" class="sq-form-input" name="seperator" formControlName="seperator">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="starting_no" class="sq-form-label">
-            {{ 'STARTING_NO' | translate }}
-          </label>
-          <input type="number" id="starting_no" class="sq-form-input" name="starting_no" formControlName="starting_no">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="current_no" class="sq-form-label">
-            {{ 'CURRENT_NO' | translate }}
-          </label>
-          <input type="number" id="current_no" class="sq-form-input" formControlName="current_no">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_size" class="sq-form-label">
-            {{ 'SEQUENCE_SIZE' | translate }}
-          </label>
-          <input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" formControlName="sequence_size">
-        </div>
-      </div>
-      
-      <div class="sq-form-actions">
-        <button type="button" class="sq-btn sq-btn-outline" (click)="modaladd = false">
-          <clr-icon shape="times"></clr-icon>
-          <span>{{ 'CANCEL' | translate }}</span>
-        </button>
-        <button type="submit" class="sq-btn sq-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>{{ 'ADD' | translate }}</span>
-        </button>
-      </div>
-    </form>
-  </div>
+        </form>
+    </div>
+
 </clr-modal>
 
-<clr-modal class="sq-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  <h3 class="modal-title sq-modal-title">
-    <clr-icon shape="edit"></clr-icon> {{ 'UPDATE_SEQUENCE_GENERATOR' | translate }}
-  </h3>
-  <div class="modal-body" *ngIf="rowSelected.id">
-    <div class="sq-form-help">
-      {{ 'SEQUENCE_ID' | translate }}: <code class="clr-code">{{rowSelected.id}}</code>
+<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Update Sequence Genarator</h3>
+    <div class="modal-body" *ngIf="rowSelected.id">
+        <h2 class="heading">{{rowSelected.id}}</h2>
+        <form (ngSubmit)="onUpdate(rowSelected.id)">
+            <div class="clr-row">
+                <div class="clr-col-sm-12">
+                    <label for="name">Name<span class="required-field">*</span></label>
+                    <input type="text" class="clr-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="name">Sequence Code</label>
+                    <input type="text" class="clr-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
+                </div>
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Implementation</label>
+                    <select name="implementation" class="clr-dropdown" [(ngModel)]="rowSelected.implementation">
+                <option>standard</option>
+                <option>shared</option>
+              </select>
+                </div> -->
+                <!-- <div class="clr-col-sm-12">
+                    <label for="name">Active</label>
+                    <input type="checkbox" name="active" name="menuId" clrCheckbox [(ngModel)]="rowSelected.active">
+                </div> -->
+
+                <div class="clr-col-sm-12">
+                    <label for="name">Prefix<span class="required-field">*</span></label>
+                    <input type="text" class="clr-input" name="prefix" [(ngModel)]="rowSelected.prefix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">suffix</label>
+                    <input type="text" class="clr-input" name="suffix" [(ngModel)]="rowSelected.suffix">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Separator</label>
+                    <input type="text" class="clr-input" name="seperator" [(ngModel)]="rowSelected.seperator">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Starting No</label>
+                    <input type="number" class="clr-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Current No</label>
+                    <input type="number" class="clr-input" name="current_no" [(ngModel)]="rowSelected.current_no"
+                        readonly>
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Demonstration</label>
+                    <input type="text" class="clr-input" name="demonstration" [(ngModel)]="rowSelected.demonstration"
+                        readonly>
+                </div>
+                <div class="clr-col-sm-12">
+                    <label for="tags">Sequence Size</label>
+                    <input type="number" class="clr-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
+                </div>
+            </div>
+            <br>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+                <button type="submit" class="btn btn-primary">Update</button>
+            </div>
+        </form>
     </div>
-    
-    <form (ngSubmit)="onUpdate(rowSelected.id)" class="sq-form">
-      <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_name" class="sq-form-label">
-            {{ 'NAME' | translate }}<span class="required-field">*</span>
-          </label>
-          <input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
-          <div class="sq-error-message" *ngIf="!rowSelected.sequence_name">
-            {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_code" class="sq-form-label">
-            {{ 'SEQUENCE_CODE' | translate }}
-          </label>
-          <input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="demonstration" class="sq-form-label">
-            {{ 'DEMONSTRATION' | translate }}
-          </label>
-          <input type="text" id="demonstration" class="sq-form-input" name="demonstration" [(ngModel)]="rowSelected.demonstration" readonly>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="prefix" class="sq-form-label">
-            {{ 'PREFIX' | translate }}<span class="required-field">*</span>
-          </label>
-          <input type="text" id="prefix" class="sq-form-input" name="prefix" [(ngModel)]="rowSelected.prefix">
-          <div class="sq-error-message" *ngIf="!rowSelected.prefix">
-            {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
-          </div>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="suffix" class="sq-form-label">
-            {{ 'SUFFIX' | translate }}
-          </label>
-          <input type="text" id="suffix" class="sq-form-input" name="suffix" [(ngModel)]="rowSelected.suffix">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="seperator" class="sq-form-label">
-            {{ 'SEPARATOR' | translate }}
-          </label>
-          <input type="text" id="seperator" class="sq-form-input" name="seperator" [(ngModel)]="rowSelected.seperator">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="starting_no" class="sq-form-label">
-            {{ 'STARTING_NO' | translate }}
-          </label>
-          <input type="number" id="starting_no" class="sq-form-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="current_no" class="sq-form-label">
-            {{ 'CURRENT_NO' | translate }}
-          </label>
-          <input type="number" id="current_no" class="sq-form-input" name="current_no" [(ngModel)]="rowSelected.current_no" readonly>
-        </div>
-        
-        <div class="clr-col-md-6 clr-col-sm-12">
-          <label for="sequence_size" class="sq-form-label">
-            {{ 'SEQUENCE_SIZE' | translate }}
-          </label>
-          <input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
-        </div>
-      </div>
-      
-      <div class="sq-form-actions">
-        <button type="button" class="sq-btn sq-btn-outline" (click)="modaledit = false">
-          <clr-icon shape="times"></clr-icon>
-          <span>{{ 'CANCEL' | translate }}</span>
-        </button>
-        <button type="submit" class="sq-btn sq-btn-primary">
-          <clr-icon shape="check"></clr-icon>
-          <span>{{ 'UPDATE' | translate }}</span>
-        </button>
-      </div>
-    </form>
-  </div>
+
 </clr-modal>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss
index 6ac473d..52f40a2 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.scss
@@ -1,694 +1,72 @@
-@import '../../../../../styles/_design-tokens.scss';
-
-// Sequence Generator Styles
-.sq-hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px;
-  margin-bottom: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--theme-font-primary);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    clr-icon {
-      width: 36px;
-      height: 36px;
-      color: white;
-    }
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-    font-family: var(--theme-font-secondary);
-  }
-
-  &__subtitle {
-    font-size: 16px;
-    margin: 0;
-    opacity: 0.9;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-}
-
-.sq-container {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-}
-
-// Toolbar, search and stats
-.sq-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-  &__left {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-}
-
-.sq-search {
-  position: relative;
-  max-width: 400px;
-
-  clr-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #9ca3af;
-    z-index: 1;
-  }
-
-  &__input {
+input[type=text],[type=number],
+[type=date],
+[type=password] {
     width: 100%;
-    padding: 12px 12px 12px 40px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    font-size: 14px;
-    transition: all 200ms ease-out;
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-    font-family: var(--theme-font-primary);
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-    }
-  }
-}
-
-.sq-stats {
-  display: flex;
-  gap: 16px;
-}
-
-.sq-stat {
-  min-width: 110px;
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.04);
-  border-radius: var(--theme-border-radius);
-  padding: 16px;
-  text-align: center;
-  box-shadow: var(--theme-shadow);
-
-  &__value {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--theme-primary);
-    margin-bottom: 4px;
-  }
-
-  &__label {
-    font-size: 12px;
-    color: var(--theme-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-}
-
-.sq-view-toggle {
-  display: flex;
-  gap: 8px;
-  
-  .sq-btn {
-    min-width: 40px;
-  }
-}
-
-// Grid columns
-.sq-col-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--theme-text-secondary);
-}
-
-.sq-col--prefix .sq-col-title clr-icon,
-.sq-col--separator .sq-col-title clr-icon,
-.sq-col--size .sq-col-title clr-icon {
-  color: var(--theme-primary);
-}
-
-// Data Grid Styles
-.sq-grid {
-  background: var(--theme-surface);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-
-  ::ng-deep .datagrid {
-    .datagrid-head {
-      background: var(--theme-background);
-
-      .datagrid-column {
-        padding: 16px 24px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--theme-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        border-bottom: 1px solid #e5e7eb;
-      }
-    }
-
-    .datagrid-row {
-      transition: background-color 150ms ease-out;
-
-      &:hover {
-        background: var(--theme-background);
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
-      .datagrid-cell {
-        padding: 16px 24px;
-        font-size: 14px;
-        color: var(--theme-text);
-      }
-    }
-
-    .datagrid-footer {
-      background: var(--theme-background);
-      border-top: 1px solid #e5e7eb;
-      padding: 16px 24px;
-    }
-  }
-}
-
-.sq-grid-footer {
-  background: var(--theme-background);
-  border-top: 1px solid #e5e7eb;
-}
-
-// Card View Styles
-.sq-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
-}
-
-.sq-card-item {
-  background: var(--theme-surface);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  overflow: hidden;
-  transition: all 200ms ease-out;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    padding: 20px;
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-  }
-
-  &__icon {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    padding: 12px;
-    margin-right: 16px;
-    
-    clr-icon {
-      width: 24px;
-      height: 24px;
-      color: white;
-    }
-  }
-
-  &__title {
-    flex: 1;
-    font-size: 18px;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  &__badge {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    padding: 4px 12px;
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  &__body {
-    padding: 20px;
-  }
-
-  &__footer {
-    display: flex;
-    gap: 12px;
-    padding: 0 20px 20px;
-  }
-}
-
-.sq-kv {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-  &:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border-bottom: none;
-  }
-
-  span {
-    color: var(--theme-text-secondary);
-    font-size: 14px;
-  }
-
-  strong {
-    color: var(--theme-text);
-    font-weight: 500;
-  }
-}
-
-// Form Styles
-.sq-form {
-  .clr-row {
-    margin: 0 -12px;
-  }
-  
-  .clr-col-md-6,
-  .clr-col-sm-12 {
-    padding: 0 12px;
-    margin-bottom: 20px;
-  }
-}
-
-.sq-form-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-}
-
-.sq-form-input,
-.sq-form-select {
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  transition: all 200ms ease-out;
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.sq-form-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 12px center;
-  background-repeat: no-repeat;
-  background-size: 16px 12px;
-  padding-right: 40px;
-  appearance: none;
-}
-
-.sq-error-message {
-  color: var(--theme-error, #ef4444);
-  font-size: 12px;
-  margin-top: 6px;
-  font-weight: 500;
+    padding: 15px 20px;
+    // margin: 3px 0;
+    background-color: rgb(255, 255, 255);
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
 }
 
 .required-field {
-  color: var(--theme-error, #ef4444);
-  margin-left: 4px;
+    color: red;
+    font-size: 18px;
 }
 
-.sq-form-help {
-  color: var(--theme-text-secondary);
-  font-size: 12px;
-  margin-bottom: 16px;
-  font-family: var(--theme-font-primary);
+.green {
+    background-color: rgb(156, 231, 156);
+    color: black;
 }
 
-.sq-form-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+.blue {
+    background-color: #57abcf; //rgb(82, 87, 161);
+    color: black;
 }
 
-// Modern Button Styles using ThemeService
-.sq-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all 200ms ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-  font-family: var(--theme-font-primary);
-  z-index: 1;
-
-  &:focus {
-    outline: 2px solid var(--theme-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.sq-btn-sm {
-    padding: 8px 16px;
-    font-size: 13px;
-    height: 32px;
-  }
-
-  &.sq-btn-md {
-    padding: 12px 20px;
-    font-size: 14px;
-    height: 40px;
-  }
-
-  &.sq-btn-lg {
-    padding: 16px 24px;
-    font-size: 16px;
-    height: 48px;
-  }
-
-  // Variants
-  &.sq-btn-primary {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: white;
-    border-color: var(--theme-primary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  &.sq-btn-outline {
-    background: transparent;
-    color: var(--theme-secondary);
-    border-color: var(--theme-secondary);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: rgba(100, 116, 139, 0.1);
-      border-color: var(--theme-secondary);
-      color: var(--theme-secondary);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.sq-btn-error {
-    background: var(--theme-error, #ef4444);
-    color: white;
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      background: var(--theme-error-dark, #dc2626);
-      border-color: var(--theme-error-dark, #dc2626);
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
-    }
-  }
-
-  &.sq-btn-ghost {
-    background: transparent;
-    color: var(--theme-text-secondary);
-    border-color: transparent;
-
-    &:hover {
-      background: var(--theme-background);
-      color: var(--theme-text);
-    }
-  }
-}
-
-// Action items in datagrid
-.sq-action-item {
-  @extend .sq-btn;
-  @extend .sq-btn-ghost;
-  @extend .sq-btn-sm;
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: 4px;
-  text-align: left;
-
-  clr-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-  }
-
-  &.sq-btn-error {
-    color: var(--theme-error, #ef4444);
-
-    &:hover {
-      background: rgba(239, 68, 68, 0.1);
-      color: var(--theme-error, #ef4444);
-    }
-  }
-}
-
-// Delete Modal Styles
-.sq-delete-header {
-  text-align: center;
-  padding: 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.sq-delete-icon {
-  color: var(--theme-error, #ef4444);
-  margin-bottom: 16px;
-}
-
-.sq-delete-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin: 0 0 8px 0;
-}
-
-.sq-delete-subtitle {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  margin: 0;
-}
-
-.sq-delete-details {
-  padding: 24px;
-}
-
-.sq-delete-detail-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.sq-delete-detail-label {
-  font-weight: 500;
-  color: var(--theme-text-secondary);
-}
-
-.sq-delete-detail-value {
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-// Modal Styles
-.sq-modal-title clr-icon {
-  margin-right: 6px;
-  color: var(--theme-primary);
-}
-
-::ng-deep .modal-header {
-  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-  color: white;
-  border-radius: 16px 16px 0 0 !important;
-  padding: 20px 24px !important;
-  
-  .modal-title {
-    color: white;
-    font-weight: 600;
-    font-size: 20px;
-    margin: 0;
-  }
-  
-  .close {
-    color: white;
-    opacity: 0.8;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-::ng-deep .modal-body {
-  padding: 24px !important;
-}
-
-::ng-deep .modal-footer {
-  padding: 20px 24px !important;
-  background: var(--theme-background);
-  border-radius: 0 0 16px 16px !important;
-  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
-}
-
-// Breadcrumb
-.mm-breadcrumb {
-  color: var(--theme-text-secondary);
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .sq-hero {
-    flex-direction: column;
-    gap: 16px;
+.td-title {
     text-align: center;
-    
-    &__content {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    &__actions {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-  
-  .sq-toolbar {
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .sq-search {
-    max-width: 100%;
-  }
-  
-  .sq-stats {
-    flex-direction: column;
+    width: 150px;
+    color: white;
+    font-weight: bold;
+    background-color: rgba(63, 122, 231, 0.863);
+    //color: rgb(24, 13, 13);
+}
+
+th {
+    //background-color:rgb(170, 169, 169);
+    font-weight: bold;
+}
+
+.td-content {
+    text-align: left;
+}
+
+.delete,
+.heading {
+    text-align: center;
+    color: red;
+}
+
+.section p {
+    background-color: rgb(206, 201, 201);
+    padding: 10px;
+    font-size: 18px;
+}
+
+select {
     width: 100%;
-  }
-  
-  .sq-cards {
-    grid-template-columns: 1fr;
-  }
-  
-  .sq-form-actions {
-    flex-direction: column;
-  }
-  
-  .sq-btn {
-    width: 100%;
-    justify-content: center;
-  }
-  
-  .sq-card-item__footer {
-    flex-direction: column;
-  }
+    padding: 5px 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+input.ng-invalid.ng-touched {
+    border-color: red;
+}
+
+.error_mess {
+    color: red;
 }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts
index e826e2a..a9dea2a 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.ts
@@ -1,13 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { SequenceService } from 'src/app/services/api/sequence.service';
 import { ExcelService } from 'src/app/services/excel.service';
 import * as moment from 'moment';
 import { HttpErrorResponse } from '@angular/common/http';
-import { ThemeService } from 'src/app/services/theme.service';
-
 @Component({
   selector: 'app-sequencegenarator',
   templateUrl: './sequencegenarator.component.html',
@@ -24,70 +22,27 @@ export class SequencegenaratorComponent implements OnInit {
   modaladd = false;
   modaledit = false;
   submitted = false;
-  filterText = '';
-  // Changed default view to cards
-  viewMode: 'table' | 'cards' = 'cards';
 
   public entryForm: FormGroup;
-  
-  constructor(
-    private seqservice: SequenceService, 
-    private router: Router, 
-    private toastr: ToastrService, 
-    private _fb: FormBuilder,
-    private route: ActivatedRoute, 
-    private excel: ExcelService, 
-    private themeService: ThemeService
-  ) { }
+  constructor(private seqservice: SequenceService, private router: Router, private toastr: ToastrService, private _fb: FormBuilder,
+    private route: ActivatedRoute, private excel: ExcelService) { }
 
   ngOnInit(): void {
-    // Ensure theme variables are applied to the view
-    this.themeService.currentTheme$.subscribe(() => {
-      // CSS variables are updated globally; no extra handling needed here
-    });
-    
     this.getall();
     this.entryForm = this._fb.group({
-      prefix: [null, Validators.required],
+      prefix: [null],
       sequence_size: [null],
       suffix: [null],
       starting_no: [null],
       seperator: [null],
-      sequence_name: [null, Validators.required],
+
+      sequence_name: [null],
       sequence_code: [null],
       demonstration: [null],
+
       current_no: [null]
     });
   }
-  
-  // Stats & filtering helpers for UI only
-  get totalSequences(): number { 
-    return ((this.alldata as unknown as any[]) || []).length; 
-  }
-  
-  get filteredSequences(): any[] {
-    const items: any[] = (this.alldata as unknown as any[]) || [];
-    const text = (this.filterText || '').toLowerCase();
-    if (!text) { return items; }
-    
-    // Search across all relevant fields
-    return items.filter(s => (
-      (s?.sequence_name || '').toLowerCase().includes(text) ||
-      (s?.prefix || '').toLowerCase().includes(text) ||
-      (s?.sequence_code || '').toLowerCase().includes(text) ||
-      (s?.suffix || '').toLowerCase().includes(text) ||
-      (s?.seperator || '').toLowerCase().includes(text) ||
-      (s?.sequence_size?.toString() || '').includes(text) ||
-      (s?.starting_no?.toString() || '').includes(text) ||
-      (s?.current_no?.toString() || '').includes(text) ||
-      (s?.demonstration || '').toLowerCase().includes(text)
-    ));
-  }
-  
-  setViewMode(mode: 'table' | 'cards') { 
-    this.viewMode = mode; 
-  }
-  
   getall() {
     this.seqservice.getAll().subscribe((data) => {
       console.log(data);
@@ -102,8 +57,27 @@ export class SequencegenaratorComponent implements OnInit {
       if (error) {
         this.error = "No data Available OR server Error";
       }
+
     })
   }
+  // onSubmit(){
+  // console.log(this.entryForm.value);
+  // this.seqservice.create(this.entryForm.value).subscribe((data)=>{
+  //   console.log(data);
+  //   if (data) {
+  //     this.toastr.success('Added successfully');
+  //         }
+  // },
+  // (error) => {
+  // console.log('Error in adding data...',+error);
+  // if(error){
+  //   this.toastr.error('Not added Data');
+  // }
+
+  // });
+  // this.modaladd=false;
+  // }
+
 
   onSubmit() {
     console.log(this.entryForm.value);
@@ -112,8 +86,10 @@ export class SequencegenaratorComponent implements OnInit {
       return
     }
     this.onCreate();
+
   }
 
+
   onCreate() {
     this.modaladd = false;
     this.seqservice.create(this.entryForm.value).subscribe(
@@ -139,24 +115,22 @@ export class SequencegenaratorComponent implements OnInit {
       });
   }
 
+
   goToAdd() {
     this.modaladd = true;
-    this.submitted = false;
-    // Reset form
-    this.entryForm.reset();
+
   }
 
   onExport() {
-    this.excel.exportAsExcelFile(this.alldata, 'sequence_',
+    this.excel.exportAsExcelFile(this.alldata, 'user_',
       moment().format('YYYYMMDD_HHmmss'))
   }
 
   goToEdit(row) {
-    this.rowSelected = { ...row }; // Create a copy to avoid direct binding issues
+    this.rowSelected = row;
     console.log(row)
     this.modaledit = true;
   }
-  
   onDelete(row) {
     this.rowSelected = row;
     this.modaldelete = true;
@@ -187,8 +161,8 @@ export class SequencegenaratorComponent implements OnInit {
           this.ngOnInit();
         }
       });
+
   }
-  
   onUpdate(id) {
     this.modaledit = false;
     this.seqservice.update(id, this.rowSelected).subscribe((data) => {
@@ -213,4 +187,4 @@ export class SequencegenaratorComponent implements OnInit {
       }
     });
   }
-}
\ No newline at end of file
+}
diff --git 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
index 9a2e3ff..8883c9d 100644
--- 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
@@ -1,235 +1,144 @@
-<clr-main-container class="modern-layout">
-  <clr-header class="header-5 modern-header">
-    <div class="branding modern-branding">
-      <a href="javascript://" class="nav-link modern-nav-link">
-        <div class="logo-container">
-          <div class="logo-wrapper">
-            <img class="logo-img" src="assets/images/icon/micrologo.png" alt="Logo" height="40" width="40">
-            <div class="logo-glow"></div>
-          </div>
-        </div>
-        <div class="brand-text">
-          <ng-container *ngIf="sysparameter?.company_Display_Name !== null; else OPtitle">
-            <span class="company-title">{{ sysparameter?.company_Display_Name }}</span>
-            <span class="company-subtitle">Enterprise Platform</span>
-          </ng-container>
-          <ng-template #OPtitle>
-            <span class="company-title">CloudnSure</span>
-            <span class="company-subtitle">Enterprise Platform</span>
-          </ng-template>
-        </div>
+<clr-main-container>
+  <clr-header class="header-5">
+    <div class="branding">
+      <a href="javascript://" class="nav-link">
+        <a href="#" class="logo">
+          <img class="img" src="assets/images/icon/micrologo.png" alt="" height="50" width="50">
+        </a>
+        <div style="width:40px;margin-right:10px;">
+
+      </div>
+      <ng-container *ngIf="sysparameter?.company_Display_Name !== null; else OPtitle">
+        <span class="title">{{ sysparameter?.company_Display_Name }}</span>
+      </ng-container>
+      <ng-template #OPtitle>
+        <span class="title">CloudnSure</span>
+      </ng-template>
       </a>
     </div>
 
 
-    <div class="header-nav modern-header-nav" [clr-nav-level]="1">
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
-        routerLink="/cns-portal/dashboard" (click)="loadMenuByMenuGroup()">
-        <div class="nav-icon-wrapper">
-          <clr-icon shape="home"></clr-icon>
-          <span class="nav-tooltip">Home</span>
-        </div>
+    <div class="header-nav" [clr-nav-level]="1">
+      <a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/dashboard" (click)="loadMenuByMenuGroup()">
+        <clr-icon shape="home"></clr-icon>
       </a>
 
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
-        routerLink="/cns-portal/dashboardrunner">
-        <div class="nav-icon-wrapper">
-          <clr-icon shape="grid-view" solid></clr-icon>
-          <span class="nav-tooltip">Dashboard</span>
-        </div>
+      <a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/dashboardrunner" >
+        <clr-icon shape="grid-view" solid></clr-icon>
       </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 href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/rerunner/all" (click)="getName()">
+        <clr-icon shape="file-group" solid="true"></clr-icon>
       </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">
-          <clr-icon shape="file-group" solid="true"></clr-icon>
-          <span class="nav-tooltip">Reports</span>
-        </div>
-      </a>
-
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
-        routerLink="/cns-portal/setupicon" (click)="toggleSetupMenus()">
-        <div class="nav-icon-wrapper">
-          <clr-icon shape="cog" solid="true"></clr-icon>
-          <span class="nav-tooltip">Settings</span>
-        </div>
-      </a>
-
-      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
-        routerLink="/cns-portal/theme-customization">
-        <div class="nav-icon-wrapper">
-          <clr-icon shape="palette" solid="true"></clr-icon>
-          <span class="nav-tooltip">Theme Customization</span>
-        </div>
-      </a>
+      <a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/setupicon" (click)="toggleSetupMenus()">
+        <clr-icon shape="cog" solid="true"></clr-icon>
+      </a>     
     </div>
 
 
 
-
-
-
-
-    <div class="header-actions modern-header-actions">
-      <clr-dropdown class="modern-user-dropdown">
-        <button class="modern-user-button" clrDropdownTrigger>
-          <div class="user-avatar">
-            <div class="avatar-circle">
-              <clr-icon shape="user"></clr-icon>
-            </div>
-            <div class="user-status-indicator"></div>
-          </div>
-          <div class="user-info">
-            <span class="user-name">{{userName}}</span>
-            <span class="user-role">Administrator</span>
-          </div>
-          <clr-icon shape="caret down" class="dropdown-arrow"></clr-icon>
+  
+    
+    
+    
+    <div class="header-actions">
+      <!-- <span (click)="restartTour()" style="display: flex;align-items: center;margin-right: 20px;">
+        <clr-icon shape="play"></clr-icon>
+    </span> -->
+      <clr-dropdown>
+        <button class="nav-text demo-title" clrDropdownTrigger>
+          <clr-icon shape="user"></clr-icon><label style="line-height: 60px; cursor: pointer;"> {{userName}}</label>
+          <clr-icon shape="caret down"></clr-icon>
         </button>
-        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right" class="modern-dropdown-menu">
-          <div class="dropdown-header">
-            <div class="user-profile">
-              <div class="profile-avatar">
-                <clr-icon shape="user"></clr-icon>
-              </div>
-              <div class="profile-info">
-                <span class="profile-name">{{userName}}</span>
-                <span class="profile-email">admin@cloudnsure.com</span>
-              </div>
-            </div>
-          </div>
+        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/about">About</a>
+          <a href="javascript://" clrDropdownItem routerLink="profile-settings">Profile Settings</a>
+          
 
-          <div class="dropdown-divider"></div>
-
-          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/about" class="modern-dropdown-item">
-            <clr-icon shape="info-circle"></clr-icon>
-            <span>About</span>
-          </a>
-          <a href="javascript://" clrDropdownItem routerLink="profile-settings" class="modern-dropdown-item">
-            <clr-icon shape="cog"></clr-icon>
-            <span>Profile Settings</span>
-          </a>
-
-          <div class="dropdown-divider"></div>
-
-          <!-- Language Dropdown Section -->
-          <clr-dropdown class="sub-dropdown modern-language-dropdown">
-            <button clrDropdownTrigger class="modern-language-button">
-              <clr-icon shape="language" class="language-icon"></clr-icon>
-              <span>{{ 'Choose language' | translate }}</span>
-              <clr-icon shape="caret down" class="dropdown-arrow"></clr-icon>
+           <!-- Language Dropdown Section -->
+           <clr-dropdown class="sub-dropdown">
+            <button clrDropdownTrigger style="display: flex; align-items: center; padding: 8px; width: 100%; background: none; border: none; cursor: pointer;">
+              <clr-icon shape="language" class="language-icon" style="margin-right: 5px;"></clr-icon>
+              <label style="margin: 0;">{{ 'Choose language' | translate }}</label>
+              <clr-icon shape="caret down" style="margin-left: auto;"></clr-icon>
             </button>
-            <clr-dropdown-menu *clrIfOpen clrPosition="right" class="modern-language-menu">
-              <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>
+            <clr-dropdown-menu *clrIfOpen clrPosition="right">
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> English
               </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>
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Hindi
               </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>
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Tamil
               </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>
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Punjabi
               </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>
+              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
+                <clr-icon shape="globe" class="lang-icon"></clr-icon> Malayalam
               </a>
             </clr-dropdown-menu>
           </clr-dropdown>
+          <!-- <a href="javascript://" clrDropdownItem routerLink="myworkspace">My Workspaces</a> -->
+          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/passwordreset">Change Password</a>
+          <a href="javascript://" clrDropdownItem (click)="onLogout()">Log out</a>
 
-          <div class="dropdown-divider"></div>
-
-          <a href="javascript://" clrDropdownItem routerLink="/cns-portal/passwordreset" class="modern-dropdown-item">
-            <clr-icon shape="key"></clr-icon>
-            <span>Change Password</span>
-          </a>
-          <a href="javascript://" clrDropdownItem (click)="onLogout()" class="modern-dropdown-item logout-item">
-            <clr-icon shape="logout"></clr-icon>
-            <span>Log out</span>
-          </a>
         </clr-dropdown-menu>
       </clr-dropdown>
     </div>
   </clr-header>
 
-  <div class="content-container modern-content-container">
-    <main class="content-area modern-content-area">
-      <div class="content-wrapper">
-        <router-outlet></router-outlet>
-      </div>
+  <div class="content-container">
+    <main class="content-area">
+      <router-outlet></router-outlet>
     </main>
 
-    <clr-vertical-nav class="modern-sidebar" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed"
-      [clr-nav-level]="2">
+    <clr-vertical-nav  [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed" [clr-nav-level]="2">
 
       <!-- <clr-vertical-nav-group *ngIf="!showFolderNames && !showSetupMenus && !showDashNames" routerLinkActive="active">
 
       
        
       </clr-vertical-nav-group> -->
-      <div class="sidebar-content">
-        <div *ngFor="let menu of menus" class="menu-item-wrapper">
-          <!-- NEED MODIFICATION-->
-          <!-- <div *ngIf="menu.sub_menus.length >=1;then content else other_content"></div> -->
-          <div *ngIf="menu.subMenus !== null && menu.subMenus?.length >=1;then content else other_content"></div>
-          <ng-template #content>
-            <!-- if sub menu is present -->
-            <clr-vertical-nav-group routerLinkActive="active" class="modern-nav-group">
-              <div class="nav-group-header">
-                <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon class="nav-group-icon"></clr-icon>
-                <span class="nav-group-title">{{ menu.menuItemDesc }}</span>
-                <clr-icon shape="angle" class="nav-group-arrow" [class.rotated]="false"></clr-icon>
-              </div>
-              <!-- SUB NAV-->
-              <clr-vertical-nav-group-children class="modern-nav-children">
-                <ng-container *ngFor="let subnav of menu.subMenus">
-                  <a clrVerticalNavLink *ngIf="subnav.mvisible == 'true'" routerLinkActive="active"
-                    (click)="send(subnav)" class="modern-nav-link">
-                    <clr-icon [attr.shape]="subnav.mainMenuIconName || 'circle'" clrVerticalNavIcon
-                      class="nav-link-icon"></clr-icon>
-                    <span class="nav-link-text">{{ subnav.menuItemDesc }}</span>
-                  </a>
-                </ng-container>
-              </clr-vertical-nav-group-children>
-            </clr-vertical-nav-group>
-          </ng-template>
-          <ng-template #other_content>
-            <!-- if sub menu is not present -->
-            <a clrVerticalNavLink routerLinkActive="active" [routerLink]="'./'+ menu.main_menu_action_name"
-              class="modern-nav-link-single">
-              <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon class="nav-link-icon"></clr-icon>
-              <span class="nav-link-text">{{ menu.menuItemDesc }}</span>
+      <div *ngFor="let menu of menus">
+        <!-- NEED MODIFICATION-->
+        <!-- <div *ngIf="menu.sub_menus.length >=1;then content else other_content"></div> -->
+        <div *ngIf="menu.subMenus !== null && menu.subMenus?.length >=1;then content else other_content"></div>
+        <ng-template #content>
+            <!-- if sub munu is present -->
+                <clr-vertical-nav-group routerLinkActive="active"> <!--*ngIf="!showFolderNames && !showSetupMenus && !showDashNames" -->
+                    <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon></clr-icon>
+                    {{ menu.menuItemDesc }}
+                    <!-- SUB NAV-->
+                    <clr-vertical-nav-group-children *ngFor="let subnav of menu.subMenus">
+                        <a clrVerticalNavLink  *ngIf="subnav.mvisible == 'true'"   routerLinkActive="active" (click)="send(subnav)">
+                           <!-- <clr-icon [attr.shape]="subnav.mainMenuIconName" clrVerticalNavIcon></clr-icon>'./' + subnav.main_menu_action_name  (click)="send(subnav) [ngStyle]="subnav.mvisible == 'true' && { 'display': 'none' }"
+                          [routerLink]=subnav.mvisible == 'true' ? ['./' + subnav.main_menu_action_name] : []-->
+                          {{ subnav.menuItemDesc }}
+                        </a>
+                    </clr-vertical-nav-group-children>
+                </clr-vertical-nav-group>
+            <!-- </div> -->
+        </ng-template>
+        <ng-template #other_content>
+           <!-- if sub menu is not present -->
+            <a clrVerticalNavLink routerLinkActive="active" [routerLink]="'./'+ menu.main_menu_action_name">
+               <clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon></clr-icon>
+                {{ menu.menuItemDesc }}
             </a>
-          </ng-template>
-        </div>
-      </div>
+        </ng-template>
+    </div>
 
-      <!-- <div *ngFor="let report of reportNames">
+    <!-- <div *ngFor="let report of reportNames">
       <clr-vertical-nav-group *ngIf="showFolderNames && !showSetupMenus" routerLinkActive="active" routerLink="/cns-portal/rerunner/all">
         <clr-icon shape="file" clrVerticalNavIcon></clr-icon>{{report}}  
       </clr-vertical-nav-group>
     </div> -->
 
-      <!-- Display the folder names in the vertical nav bar -->
-      <!-- <div *ngFor="let report of reportNames">
+    <!-- Display the folder names in the vertical nav bar -->
+        <!-- <div *ngFor="let report of reportNames">
           <clr-vertical-nav-group *ngIf="showFolderNames && !showDashNames " routerLink="/cns-portal/rerunner/all">
             <clr-icon shape="file" clrVerticalNavIcon></clr-icon>{{report}}
             <a href="javascript://" (click)="filterGridDataByFolder(report?.folderName)">{{ report?.folderName }}</a>
@@ -237,23 +146,23 @@
         </div> -->
 
 
-      <!-- <div *ngFor="let dashName of dashNames">
+        <!-- <div *ngFor="let dashName of dashNames">
           <clr-vertical-nav-group *ngIf="showDashNames && !showFolderNames && !showSetupMenus" routerLink="/cns-portal/dashboardbuilder/all">
             <clr-icon shape="file" clrVerticalNavIcon></clr-icon>{{dashName}}
 
           </clr-vertical-nav-group>
         </div> -->
 
-      <!-- <div *ngFor="let dashName of dashNames">
+        <!-- <div *ngFor="let dashName of dashNames">
           <clr-vertical-nav-group *ngIf="showDashNames && !showFolderNames">
             <clr-icon shape="grid-view" clrVerticalNavIcon></clr-icon>{{dashName}}
           </clr-vertical-nav-group>
         </div> -->
+        
 
-
-
-
-      <!-- 
+    
+    
+<!-- 
     <clr-vertical-nav-group *ngIf="showSetupMenus && !showDashNames && !showFolderNames" routerLinkActive="active">
       <clr-icon shape="cog" clrVerticalNavIcon class="project-visit-tour"></clr-icon>
       Setup
@@ -284,11 +193,11 @@
     </clr-vertical-nav-group> -->
 
 
-      <!-- Master Menu -->
+    <!-- Master Menu -->
 
 
 
-      <!-- <a  clrVerticalNavLink routerLinkActive="active" >
+     <!-- <a  clrVerticalNavLink routerLinkActive="active" >
       <button id="add" class="btn btn-primary" style="width: 200px; position: fixed;bottom: 0; left: 0;" (click)="modaladd()">
         <clr-icon shape="plus"></clr-icon>ADD A new Team
       </button> </a> -->
@@ -306,18 +215,18 @@
   <div class="modal-body">
     <form>
       <div class="clr-row">
-        <div class="clr-col-md-6 clr-col-sm-12">
+        <div class="clr-col-md-6 clr-col-sm-12" >
           <label>Name: </label>
-          <input class="clr-input" type="text" name="name" placeholder="Enter name">
+        <input class="clr-input"  type="text" name="name"  placeholder="Enter name">
         </div>
 
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-outline" (click)="modalteam = false">Cancel</button>
-        <button type="submit" class="btn btn-primary">Add</button>
+      <button type="submit"  class="btn btn-primary" >Add</button>
       </div>
     </form>
   </div>
 </clr-modal>
 
-<!-- <ngx-guided-tour></ngx-guided-tour> -->
\ No newline at end of file
+<!-- <ngx-guided-tour></ngx-guided-tour> -->
diff --git a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss
index 3afe935..77f629a 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.scss
@@ -1,10 +1,3 @@
-// ========================================
-// MODERN LAYOUT COMPONENT STYLES
-// ========================================
-
-@import '../../../../styles/design-tokens';
-
-// Legacy form styles (preserved for compatibility)
 input[type=text],[type=date], select,textarea {
   width: 100%;
   padding: 12px 20px;
@@ -14,680 +7,6 @@ input[type=text],[type=date], select,textarea {
   border-radius: 4px;
   box-sizing: border-box;
 }
-// Modern Layout Styles
-// ========================================
-
-.modern-layout {
-  background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%);
-  min-height: 100vh;
-}
-
-// Header Styles
-// ========================================
-
-.modern-header {
-  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
-  backdrop-filter: $backdrop-blur-md;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: $shadow-lg;
-  position: sticky;
-  top: 0;
-  z-index: $z-sticky;
-  height: $header-height;
-  padding: 0 $space-6;
-}
-
-.modern-branding {
-  display: flex;
-  align-items: center;
-  gap: $space-4;
-
-  .modern-nav-link {
-    display: flex;
-    align-items: center;
-    gap: $space-4;
-    text-decoration: none;
-    color: inherit;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      transform: translateY(-1px);
-    }
-  }
-
-  .logo-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .logo-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: $gradient-primary;
-    border-radius: $radius-xl;
-    box-shadow: $shadow-md;
-    transition: all $duration-300 $ease-out;
-
-    &:hover {
-      transform: scale(1.05);
-      box-shadow: $shadow-lg;
-    }
-
-    .logo-img {
-      width: 32px;
-      height: 32px;
-      object-fit: contain;
-      filter: brightness(0) invert(1);
-    }
-
-    .logo-glow {
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      background: $gradient-primary;
-      border-radius: $radius-xl;
-      opacity: 0;
-      filter: blur(8px);
-      transition: opacity $duration-300 $ease-out;
-    }
-
-    &:hover .logo-glow {
-      opacity: 0.3;
-    }
-  }
-
-  .brand-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    .company-title {
-      font-size: $text-xl;
-      font-weight: $font-bold;
-      color: $white;
-      line-height: 1.2;
-    }
-
-    .company-subtitle {
-      font-size: $text-xs;
-      font-weight: $font-medium;
-      color: rgba(255, 255, 255, 0.8);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-  }
-}
-
-// Header Navigation
-// ========================================
-
-.modern-header-nav {
-  display: flex;
-  align-items: center;
-  gap: $space-2;
-  margin-left: $space-8;
-
-  .modern-nav-icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: $radius-lg;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: $white;
-      transform: translateY(-1px);
-    }
-
-    &.active {
-      background: rgba(255, 255, 255, 0.2);
-      color: $white;
-      box-shadow: $shadow-md;
-    }
-
-    .nav-icon-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .nav-tooltip {
-      position: absolute;
-      top: -40px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: $gray-900;
-      color: $white;
-      padding: $space-2 $space-3;
-      border-radius: $radius-md;
-      font-size: $text-xs;
-      font-weight: $font-medium;
-      white-space: nowrap;
-      opacity: 0;
-      visibility: hidden;
-      transition: all $duration-200 $ease-out;
-      z-index: $z-tooltip;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-        border: 4px solid transparent;
-        border-top-color: $gray-900;
-      }
-    }
-
-    &:hover .nav-tooltip {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}
-
-// Header Actions
-// ========================================
-
-.modern-header-actions {
-  display: flex;
-  align-items: center;
-  gap: $space-4;
-  margin-left: auto;
-}
-
-.modern-user-dropdown {
-  .modern-user-button {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-2 $space-4;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: $radius-xl;
-    color: $white;
-    text-decoration: none;
-    transition: all $duration-200 $ease-out;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-      border-color: rgba(255, 255, 255, 0.3);
-      transform: translateY(-1px);
-      box-shadow: $shadow-md;
-    }
-
-    .user-avatar {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .avatar-circle {
-      width: 36px;
-      height: 36px;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $white;
-      font-size: $text-sm;
-      font-weight: $font-semibold;
-    }
-
-    .user-status-indicator {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 12px;
-      height: 12px;
-      background: $accent-green;
-      border: 2px solid $white;
-      border-radius: 50%;
-    }
-
-    .user-info {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 2px;
-
-      .user-name {
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-        color: $white;
-        line-height: 1.2;
-      }
-
-      .user-role {
-        font-size: $text-xs;
-        color: rgba(255, 255, 255, 0.8);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-    }
-
-    .dropdown-arrow {
-      font-size: $text-xs;
-      color: rgba(255, 255, 255, 0.8);
-      transition: transform $duration-200 $ease-out;
-    }
-
-    &:hover .dropdown-arrow {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-// Dropdown Menu
-// ========================================
-
-.modern-dropdown-menu {
-  background: $white;
-  border: 1px solid $gray-200;
-  border-radius: $radius-xl;
-  box-shadow: $shadow-xl;
-  padding: $space-2;
-  min-width: 280px;
-  margin-top: $space-2;
-
-  .dropdown-header {
-    padding: $space-4;
-    border-bottom: 1px solid $gray-200;
-    margin-bottom: $space-2;
-
-    .user-profile {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-
-      .profile-avatar {
-        width: 48px;
-        height: 48px;
-        background: $gradient-primary;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: $white;
-        font-size: $text-lg;
-        font-weight: $font-semibold;
-      }
-
-      .profile-info {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-
-        .profile-name {
-          font-size: $text-sm;
-          font-weight: $font-semibold;
-          color: $gray-900;
-        }
-
-        .profile-email {
-          font-size: $text-xs;
-          color: $gray-500;
-        }
-      }
-    }
-  }
-
-  .dropdown-divider {
-    height: 1px;
-    background: $gray-200;
-    margin: $space-2 0;
-  }
-
-  .modern-dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-3 $space-4;
-    border-radius: $radius-lg;
-    color: $gray-700;
-    text-decoration: none;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      background: $gray-50;
-      color: $gray-900;
-      transform: translateX(4px);
-    }
-
-    &.logout-item {
-      color: $accent-red;
-
-      &:hover {
-        background: rgba($accent-red, 0.1);
-        color: $accent-red;
-      }
-    }
-
-    clr-icon {
-      font-size: $text-base;
-      width: 20px;
-      height: 20px;
-    }
-  }
-}
-
-// Language Dropdown
-// ========================================
-
-.modern-language-dropdown {
-  .modern-language-button {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-3 $space-4;
-    width: 100%;
-    background: transparent;
-    border: none;
-    color: $gray-700;
-    text-decoration: none;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    border-radius: $radius-lg;
-    transition: all $duration-200 $ease-out;
-    cursor: pointer;
-
-    &:hover {
-      background: $gray-50;
-      color: $gray-900;
-    }
-
-    .language-icon {
-      font-size: $text-base;
-      color: $primary-600;
-    }
-
-    .dropdown-arrow {
-      margin-left: auto;
-      font-size: $text-xs;
-      color: $gray-400;
-      transition: transform $duration-200 $ease-out;
-    }
-
-    &:hover .dropdown-arrow {
-      transform: rotate(180deg);
-    }
-  }
-
-  .modern-language-menu {
-    background: $white;
-    border: 1px solid $gray-200;
-    border-radius: $radius-xl;
-    box-shadow: $shadow-lg;
-    padding: $space-2;
-    min-width: 200px;
-    margin-left: $space-2;
-
-    .modern-lang-item {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-      padding: $space-3 $space-4;
-      border-radius: $radius-lg;
-      color: $gray-700;
-      text-decoration: none;
-      font-size: $text-sm;
-      font-weight: $font-medium;
-      transition: all $duration-200 $ease-out;
-
-      &:hover {
-        background: $primary-50;
-        color: $primary-700;
-        transform: translateX(4px);
-      }
-
-      .lang-icon {
-        font-size: $text-base;
-        color: $primary-600;
-      }
-
-      .lang-flag {
-        margin-left: auto;
-        font-size: $text-lg;
-      }
-    }
-  }
-}
-
-// Content Container
-// ========================================
-
-.modern-content-container {
-  display: flex;
-  min-height: calc(100vh - #{$header-height});
-  background: transparent;
-}
-
-.modern-content-area {
-  flex: 1;
-  background: transparent;
-  padding: 0;
-  overflow-x: hidden;
-
-  .content-wrapper {
-    padding: $space-6;
-    min-height: calc(100vh - #{$header-height});
-  }
-}
-
-// Sidebar Styles
-// ========================================
-
-.modern-sidebar {
-  background: rgba(255, 255, 255, 0.98);
-  backdrop-filter: $backdrop-blur-md;
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
-  box-shadow: $shadow-lg;
-  width: $sidebar-width;
-  transition: all $duration-300 $ease-out;
-
-  &.nav-collapsed {
-    width: $sidebar-width-collapsed;
-  }
-
-  .sidebar-content {
-    padding: $space-4 0;
-  }
-
-  .menu-item-wrapper {
-    margin-bottom: $space-2;
-  }
-}
-
-// Navigation Groups
-// ========================================
-
-.modern-nav-group {
-  margin-bottom: $space-2;
-
-  .nav-group-header {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-    padding: $space-3 $space-4;
-    color: $gray-700;
-    font-size: $text-sm;
-    font-weight: $font-semibold;
-    cursor: pointer;
-    border-radius: $radius-lg;
-    margin: 0 $space-2;
-    transition: all $duration-200 $ease-out;
-
-    &:hover {
-      background: $gray-50;
-      color: $gray-900;
-    }
-
-    .nav-group-icon {
-      font-size: $text-lg;
-      color: $primary-600;
-    }
-
-    .nav-group-title {
-      flex: 1;
-    }
-
-    .nav-group-arrow {
-      font-size: $text-sm;
-      color: $gray-400;
-      transition: transform $duration-200 $ease-out;
-
-      &.rotated {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  .modern-nav-children {
-    margin-top: $space-1;
-    padding-left: $space-4;
-  }
-}
-
-// Navigation Links
-// ========================================
-
-.modern-nav-link,
-.modern-nav-link-single {
-  display: flex;
-  align-items: center;
-  gap: $space-3;
-  padding: $space-3 $space-4;
-  color: $gray-600;
-  text-decoration: none;
-  font-size: $text-sm;
-  font-weight: $font-medium;
-  border-radius: $radius-lg;
-  margin: 0 $space-2;
-  transition: all $duration-200 $ease-out;
-  position: relative;
-
-  &:hover {
-    background: $primary-50;
-    color: $primary-700;
-    transform: translateX(4px);
-  }
-
-  &.active {
-    background: $primary-100;
-    color: $primary-800;
-    font-weight: $font-semibold;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 3px;
-      height: 20px;
-      background: $primary-600;
-      border-radius: 0 $radius-sm $radius-sm 0;
-    }
-  }
-
-  .nav-link-icon {
-    font-size: $text-base;
-    color: $gray-500;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .nav-link-text {
-    flex: 1;
-  }
-
-  &:hover .nav-link-icon {
-    color: $primary-600;
-  }
-
-  &.active .nav-link-icon {
-    color: $primary-700;
-  }
-}
-
-// Responsive Design
-// ========================================
-
-@media (max-width: $breakpoint-lg) {
-  .modern-header {
-    padding: 0 $space-4;
-  }
-
-  .modern-header-nav {
-    margin-left: $space-4;
-    gap: $space-1;
-
-    .modern-nav-icon {
-      width: 40px;
-      height: 40px;
-    }
-  }
-
-  .modern-content-area .content-wrapper {
-    padding: $space-4;
-  }
-
-  .modern-sidebar {
-    width: $sidebar-width-collapsed;
-
-    .nav-group-title,
-    .nav-link-text {
-      display: none;
-    }
-
-    .modern-nav-link,
-    .modern-nav-link-single {
-      justify-content: center;
-      padding: $space-3;
-    }
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .modern-branding .brand-text {
-    display: none;
-  }
-
-  .modern-user-button .user-info {
-    display: none;
-  }
-
-  .modern-header-nav {
-    display: none;
-  }
-}
-
-// Legacy styles (preserved for compatibility)
-// ========================================
-
 .center-content {
   //width: 100%;
  // max-width: 800px;
diff --git a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts
index 4619158..7747324 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.ts
@@ -1,8 +1,8 @@
 
-import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { LoginService } from '../../../services/api/login.service';
-import { UserInfoService } from '../../../services/user-info.service';
+import { Component,ViewEncapsulation, OnInit, Input } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { LoginService   } from '../../../services/api/login.service';
+import { UserInfoService} from '../../../services/user-info.service';
 import { RealnetMenuService } from '../../../services/api/realnet-menu.service';
 import { Rn_Main_Menu } from '../../../models/builder/Rn_Main_Menu';
 import { MenuGroupService } from '../../../services/admin/menu-group.service';
@@ -20,7 +20,6 @@ import { ProjectSetup } from 'src/app/models/builder/Project_setup';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 
 import { TranslateService } from '@ngx-translate/core';
-import { ThemeService } from 'src/app/services/theme.service';
 
 @Component({
   selector: 'app-layout',
@@ -29,52 +28,51 @@ import { ThemeService } from 'src/app/services/theme.service';
 })
 export class LayoutComponent implements OnInit {
   // baseUrl= environment.chaturl;
-  @Input() data: any;
+  @Input() data:any;
 
   loading = false;
   apps: Array<ProjectSetup> = [];
   projectsetup;
 
   collapsed = true;
-  public showAppAlert: boolean = false;
-  modalteam = false;
-  public userName: string = "";
-
-  private formCode: string = 'teacher_form';
-  public key: string = "formCode";
-  public storage: Storage = sessionStorage;
+  public showAppAlert:boolean = false;
+modalteam=false;
+  public userName: string="";
 
+  private formCode: string ='teacher_form';
+  public key:string="formCode";
+  public storage:Storage = sessionStorage;
+ 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private userInfoService: UserInfoService,
+    private userInfoService:UserInfoService,
     private realnetMenuService: RealnetMenuService,
     private menuGroupService: MenuGroupService,
-    private sysparaservice: SysparameterService,
+    private sysparaservice:SysparameterService,
     private reportBuilderService: ReportBuilderService,
-    private dashboardService: Dashboard3Service,
+    private dashboardService : Dashboard3Service,
     private translate: TranslateService,
-    private themeService: ThemeService,
     // private guidedTourService: GuidedTourService,
     // private tourservice: TourService,
     private toastr: ToastrService,
-  ) {
+  ) { 
     this.translate.setDefaultLang('en');
-    this.userName = this.userInfoService.getUserName();
-    this.reportBuilderService.getrbDetails().subscribe((data) => {
+      this.userName = this.userInfoService.getUserName();
+      this.reportBuilderService.getrbDetails().subscribe((data) => {
       this.gridData = data;
     });
   }
 
 
-
+  
   switchLanguage(language: string): void {
     this.translate.use(language);  // Switch to the selected language
   }
-  user_name: any;
-  userrole: any;
+  user_name : any;
+  userrole:any;
   menus: Rn_Main_Menu[];
-  menu: any;
+  menu:any;
   tourdata;
   steps;
   error;
@@ -82,89 +80,89 @@ export class LayoutComponent implements OnInit {
     this.storage.setItem(this.key, this.formCode);
     this.user_name = this.userInfoService.getUserName();
     console.log('user name: ' + this.user_name);
-    this.userrole = this.userInfoService.getRoles();
-    console.log('user_role', this.userrole);
-    this.udata = this.userInfoService.getUserId();
-    console.log('user id', this.udata);
+    this.userrole=this.userInfoService.getRoles();
+    console.log('user_role',this.userrole);
+    this.udata=this.userInfoService.getUserId();
+    console.log('user id',this.udata);
     this.loadMenuByAccountId();
     this.loadMenuByMenuGroup();
     this.getById(1);
-    //     this.tourservice.getall().subscribe((data)=>{
-    //       this.tourdata=data[1];
-    //       //console.log("tour data",data);
-    //       console.log(this.tourdata);
-    //       //console.log(this.tourdata.tourId);
-    //       //console.log(this.tourdata.useOrb);
-    // //this.steps=JSON.stringify(this.tourdata.steps);
-    //      // console.log(this.tourdata.steps);
-    //       //this.dashboardTour.tourId=this.tourdata.tourId;
-    //       //console.log(this.dashboardTour.tourId);
-    //       //this.dashboardTour.useOrb=this.tourdata.useOrb;
-    //    // this.dashboardTour.steps=this.tourdata.steps;
-    //     });
+//     this.tourservice.getall().subscribe((data)=>{
+//       this.tourdata=data[1];
+//       //console.log("tour data",data);
+//       console.log(this.tourdata);
+//       //console.log(this.tourdata.tourId);
+//       //console.log(this.tourdata.useOrb);
+// //this.steps=JSON.stringify(this.tourdata.steps);
+//      // console.log(this.tourdata.steps);
+//       //this.dashboardTour.tourId=this.tourdata.tourId;
+//       //console.log(this.dashboardTour.tourId);
+//       //this.dashboardTour.useOrb=this.tourdata.useOrb;
+//    // this.dashboardTour.steps=this.tourdata.steps;
+//     });
+}
+
+
+
+
+showFolderNames: boolean = false; // Variable to control the report names display
+reportNames: any[] = []; // Store the report names
+
+// getName() {
+//   this.reportBuilderService.getrbDetails().pipe(
+//     map((data) => data.map((item) => item.folderName))
+//   ).subscribe((reportName) => {
+//     this.reportNames = reportName;
+//     // this.showReportNames = true; // Toggle on
+//     console.log('Report Names:', this.reportNames);
+//   });
+  
+// }
+
+
+getName() {
+  if (this.showFolderNames) {
+    // If in report mode, switch to default mode
+    this.showFolderNames = false;
+  } else {
+    // If in default mode, switch to report mode
+    this.reportBuilderService.getrbDetails().pipe(
+      map((data) => data.map((item) => item.folderName))
+    ).subscribe(
+      (folderName) => {
+        this.reportNames = folderName;
+        console.log('Report Names:', this.reportNames);
+        this.showFolderNames = true;
+      },);
   }
+}
 
+filteredGridData: any[] = [];
+gridData: any[] = [];
+// Function to filter the data based on the selected folder
+filterGridDataByFolder(folderName: string) {
+  this.filteredGridData = this.gridData.filter(item => item.folderName === folderName);
+}
 
-
-
-  showFolderNames: boolean = false; // Variable to control the report names display
-  reportNames: any[] = []; // Store the report names
-
-  // getName() {
-  //   this.reportBuilderService.getrbDetails().pipe(
-  //     map((data) => data.map((item) => item.folderName))
-  //   ).subscribe((reportName) => {
-  //     this.reportNames = reportName;
-  //     // this.showReportNames = true; // Toggle on
-  //     console.log('Report Names:', this.reportNames);
-  //   });
-
-  // }
-
-
-  getName() {
-    if (this.showFolderNames) {
-      // If in report mode, switch to default mode
-      this.showFolderNames = false;
-    } else {
-      // If in default mode, switch to report mode
-      this.reportBuilderService.getrbDetails().pipe(
-        map((data) => data.map((item) => item.folderName))
-      ).subscribe(
-        (folderName) => {
-          this.reportNames = folderName;
-          console.log('Report Names:', this.reportNames);
-          this.showFolderNames = true;
-        },);
-    }
-  }
-
-  filteredGridData: any[] = [];
-  gridData: any[] = [];
-  // Function to filter the data based on the selected folder
-  filterGridDataByFolder(folderName: string) {
-    this.filteredGridData = this.gridData.filter(item => item.folderName === folderName);
-  }
-
-  showDashNames: boolean = false;
-  dashNames: any[] = [];
-  getDashName() {
-    if (this.showDashNames) {
-      // If in report mode, switch to default mode
-      this.showDashNames = false;
-    } else {
-      // If in default mode, switch to report mode
-      this.dashboardService.getAllDash().pipe(
-        map((data) => data.map((item) => item.dashboard_name))
-      ).subscribe(
-        (dashboard_name) => {
-          this.dashNames = dashboard_name;
-          console.log('Dashboard Names:', this.dashNames);
-          // this.showFolderNames = true;
-          this.showDashNames = true;
-        },);
-    }
+showDashNames: boolean = false;
+dashNames: any[] = [];
+getDashName() {
+  if (this.showDashNames) {
+    // If in report mode, switch to default mode
+    this.showDashNames = false;
+  } else {
+    // If in default mode, switch to report mode
+    this.dashboardService.getAllDash().pipe(
+      map((data) => data.map((item) => item.dashboard_name))
+    ).subscribe(
+      (dashboard_name) => {
+        this.dashNames = dashboard_name;
+        console.log('Dashboard Names:', this.dashNames);
+        // this.showFolderNames = true;
+        this.showDashNames = true;
+      },);
   }
+}
 
 
 
@@ -172,11 +170,11 @@ export class LayoutComponent implements OnInit {
 
 
 
-  showSetupMenus: boolean = false;
-  toggleSetupMenus() {
-    this.showSetupMenus = !this.showSetupMenus;
+showSetupMenus: boolean = false;
+toggleSetupMenus() {
+  this.showSetupMenus = !this.showSetupMenus;
 
-  }
+}
 
 
 
@@ -185,74 +183,74 @@ export class LayoutComponent implements OnInit {
 
 
 
-  // side nav menu-sub_menu
-  loadMenuByAccountId() {
-    this.realnetMenuService.getByAccountId().subscribe(resp => {
-      this.menus = resp;
-      console.log('menu: ', this.menus);
-    });
-  }
+// side nav menu-sub_menu
+loadMenuByAccountId() {
+  this.realnetMenuService.getByAccountId().subscribe(resp => {
+          this.menus = resp;
+          console.log('menu: ', this.menus);
+  });
+}
 
-  loadMenuByMenuGroup() {
-    this.menuGroupService.getByCurrentUserMenuGroupId2().subscribe(resp => {
+loadMenuByMenuGroup() {
+  this.menuGroupService.getByCurrentUserMenuGroupId2().subscribe(resp => {
       this.menus = resp;
       console.log('menus: ', this.menus);
-    }, (error) => {
-      console.log(error);
-      if (error) {
-        this.error = "No data Available OR server Error";
-      }
-      if (error.status === 401) {
-        // auto logout if 401 response returned from api
-        // this.authenticationService.logout();
-        this.toastr.error("Your Token Is Expire Plz login Again")
-        //location.reload(true);
-      }
-    })
-  }
-  sysparameter;
-  getById(id: number) {
-    this.sysparaservice.getById(id).subscribe((data) => {
+  },(error) => {
+    console.log(error);
+    if(error){
+     this.error="No data Available OR server Error";
+   }
+   if (error.status === 401) {
+    // auto logout if 401 response returned from api
+    // this.authenticationService.logout();
+    this.toastr.error("Your Token Is Expire Plz login Again")
+    //location.reload(true);
+}
+  })
+}
+sysparameter;
+getById(id: number) {
+  this.sysparaservice.getById(id).subscribe((data) => {
       this.sysparameter = data;
-      console.log("getbyiddata", this.sysparameter);
+      console.log("getbyiddata",this.sysparameter);
     },
-      (err) => {
-        console.log(err);
-      }
-    );
-  }
+    (err) => {
+      console.log(err);
+    }
+  );
+}
 
 
-  /*  menuGroup: Rn_Menu_Group_Header[];
-  menu_id: number;
-  loadMenuGroupData() {
-    this.menuGroupService.getAll().subscribe(resp => {
-        this.menuGroup = resp;
-        this.menu_id = this.menuGroup
-    });
-  } */
+/*  menuGroup: Rn_Menu_Group_Header[];
+menu_id: number;
+loadMenuGroupData() {
+  this.menuGroupService.getAll().subscribe(resp => {
+      this.menuGroup = resp;
+      this.menu_id = this.menuGroup
+  });
+} */
 
 
 
 
 
-  navbarSelectionChange(val) {
-    // console.log(val);
-  }
+navbarSelectionChange(val){
+  // console.log(val);
+}
 
-  closeAppAlert() {
-    this.showAppAlert = false;
-  }
+closeAppAlert(){
+  this.showAppAlert=false;
+}
 
-  isDisabled(input: string): boolean {
-    if (input === null) {
+isDisabled(input: string): boolean{
+  if(input === null) {
       return true;
-    } else false;
-  }
+  } else false;
+}
 
 
   onLogout() {
-    this.userInfoService.logout().subscribe((data) => {
+    this.userInfoService.logout().subscribe((data)=>{
       console.log(data);
     });
     sessionStorage.clear();
@@ -262,32 +260,32 @@ export class LayoutComponent implements OnInit {
   menuFlag1 = false;
   udata;
   uid;
-  message() {
+  message(){
     //this.menuFlag = false;
-    // this.menuFlag1 = true;
-    // this.menuGroupService.getuser(this.udata).subscribe((data)=>{
-    //   console.log(data);
-    // })
-    // window.open(`${this.baseUrl}`)
-    //window.location.href = `${this.baseUrl}`;
-    //this.udata=this.userInfoService.getUserInfo();
-    //console.log(this.udata);
+   // this.menuFlag1 = true;
+// this.menuGroupService.getuser(this.udata).subscribe((data)=>{
+//   console.log(data);
+// })
+// window.open(`${this.baseUrl}`)
+   //window.location.href = `${this.baseUrl}`;
+   //this.udata=this.userInfoService.getUserInfo();
+   //console.log(this.udata);
 
     this.menuGroupService.save(this.udata);
 
-    this.uid = this.udata.userid;
-    localStorage.setItem("id", JSON.stringify(this.udata));
-    //localStorage.setItem('id', this.uid);
-    //window.location.href = (`${this.baseUrl}/`  + this.udata), true
-    //this.router.navigate([`${this.baseUrl}`], { relativeTo: this.route ,queryParams: { id: this.udata }});
+   this.uid=this.udata.userid;
+   localStorage.setItem("id", JSON.stringify(this.udata));
+   //localStorage.setItem('id', this.uid);
+   //window.location.href = (`${this.baseUrl}/`  + this.udata), true
+   //this.router.navigate([`${this.baseUrl}`], { relativeTo: this.route ,queryParams: { id: this.udata }});
 
-    //this.router.navigate(["../sureboard"],{relativeTo: this.route, queryParams: { userid: this.udata }});
+   //this.router.navigate(["../sureboard"],{relativeTo: this.route, queryParams: { userid: this.udata }});
     //this.router.navigate([`${this.baseUrl}`],{relativeTo: this.route, queryParams: { userid: this.udata }});
     //this.udata = this.userInfoService.getUserInfo();
     //this.userInfoService.storeUserInfo(JSON.stringify(this.udata.user));
   }//
 
-  modaladd() {
+  modaladd(){
     //this.modalteam=true;
     this.router.navigate(['/cns-portal/myworkspace']);
   }
@@ -295,17 +293,17 @@ export class LayoutComponent implements OnInit {
   me;
   md;
   mv;
-  send(val) {
+  send(val){
     console.log(val);
     this.menuGroupService.storeaddeditvalues(val);
-    this.mc = val.mcreate;
-    this.me = val.medit;
-    this.md = val.mdelete;
-    this.mv = val.mvisible;
-    if (this.mv == 'false') {
-      this.router.navigate(['/**'])
-    }
-    this.router.navigate(['./' + val.main_menu_action_name], { relativeTo: this.route });
+this.mc=val.mcreate;
+this.me=val.medit;
+this.md=val.mdelete;
+this.mv=val.mvisible;
+if(this.mv == 'false'){
+  this.router.navigate(['/**'])
+}
+    this.router.navigate(['./'+ val.main_menu_action_name] , { relativeTo: this.route});
   }
   //skipLocationChange: true, value pass params->,queryParams:{mc:this.mc,me:this.me,md:this.md}
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html
index b97a6cc..873f882 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.html
@@ -1,240 +1,3 @@
-<!-- Modern Dashboard Welcome Section -->
-<div class="modern-dashboard">
-  <!-- Welcome Header -->
-  <div class="welcome-section">
-    <div class="welcome-content">
-      <div class="welcome-text">
-        <h1 class="welcome-title animate-fade-in-up">
-          Welcome to CloudnSure
-          <span class="title-accent">Enterprise Platform</span>
-        </h1>
-        <p class="welcome-subtitle animate-fade-in-up stagger-1">
-          Your comprehensive solution for data management, reporting, and business intelligence
-        </p>
-        <div class="welcome-actions animate-fade-in-up stagger-2">
-          <button class="modern-btn btn-primary btn-lg">
-            <clr-icon shape="play"></clr-icon>
-            Get Started
-          </button>
-          <button class="modern-btn btn-outline btn-lg">
-            <clr-icon shape="book"></clr-icon>
-            View Documentation
-          </button>
-          <button class="modern-btn btn-ghost btn-lg" routerLink="/cns-portal/theme-customization">
-            <clr-icon shape="palette"></clr-icon>
-            Customize Theme
-          </button>
-        </div>
-      </div>
-      <div class="welcome-visual animate-fade-in-right">
-        <div class="visual-container">
-          <div class="floating-card card-1">
-            <clr-icon shape="analytics"></clr-icon>
-            <span>Analytics</span>
-          </div>
-          <div class="floating-card card-2">
-            <clr-icon shape="file-group"></clr-icon>
-            <span>Reports</span>
-          </div>
-          <div class="floating-card card-3">
-            <clr-icon shape="cog"></clr-icon>
-            <span>Settings</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Quick Stats Cards -->
-  <div class="stats-section">
-    <div class="stats-grid">
-      <div class="modern-card stats-card animate-fade-in-up stagger-1">
-        <div class="card-header">
-          <div class="stats-icon primary">
-            <clr-icon shape="users"></clr-icon>
-          </div>
-          <div class="stats-trend positive">
-            <clr-icon shape="trending-up"></clr-icon>
-            <span>+12%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">1,234</div>
-          <div class="stats-label">Active Users</div>
-        </div>
-      </div>
-
-      <div class="modern-card stats-card animate-fade-in-up stagger-2">
-        <div class="card-header">
-          <div class="stats-icon success">
-            <clr-icon shape="file-group"></clr-icon>
-          </div>
-          <div class="stats-trend positive">
-            <clr-icon shape="trending-up"></clr-icon>
-            <span>+8%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">567</div>
-          <div class="stats-label">Reports Generated</div>
-        </div>
-      </div>
-
-      <div class="modern-card stats-card animate-fade-in-up stagger-3">
-        <div class="card-header">
-          <div class="stats-icon warning">
-            <clr-icon shape="clock"></clr-icon>
-          </div>
-          <div class="stats-trend negative">
-            <clr-icon shape="trending-down"></clr-icon>
-            <span>-3%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">2.4s</div>
-          <div class="stats-label">Avg Response Time</div>
-        </div>
-      </div>
-
-      <div class="modern-card stats-card animate-fade-in-up stagger-4">
-        <div class="card-header">
-          <div class="stats-icon info">
-            <clr-icon shape="shield"></clr-icon>
-          </div>
-          <div class="stats-trend positive">
-            <clr-icon shape="check"></clr-icon>
-            <span>99.9%</span>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="stats-value">99.9%</div>
-          <div class="stats-label">Uptime</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Quick Actions -->
-  <div class="actions-section">
-    <h2 class="section-title animate-fade-in-up">Quick Actions</h2>
-    <div class="actions-grid">
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-1 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="plus-circle"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Create Report</h3>
-          <p>Build custom reports with our intuitive report builder</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-2 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="upload"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Import Data</h3>
-          <p>Upload and process your data files quickly</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-3 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="cog"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>System Settings</h3>
-          <p>Configure your system preferences and options</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-4 hover-lift">
-        <div class="action-icon">
-          <clr-icon shape="help-info"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Help & Support</h3>
-          <p>Get help and access our knowledge base</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-
-      <a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-5 hover-lift" routerLink="/cns-portal/theme-customization">
-        <div class="action-icon">
-          <clr-icon shape="palette"></clr-icon>
-        </div>
-        <div class="action-content">
-          <h3>Theme Customization</h3>
-          <p>Customize colors, fonts, and appearance</p>
-        </div>
-        <div class="action-arrow">
-          <clr-icon shape="angle"></clr-icon>
-        </div>
-      </a>
-    </div>
-  </div>
-
-  <!-- Recent Activity -->
-  <div class="activity-section">
-    <h2 class="section-title animate-fade-in-up">Recent Activity</h2>
-    <div class="modern-card activity-card animate-fade-in-up">
-      <div class="activity-list">
-        <div class="activity-item">
-          <div class="activity-icon success">
-            <clr-icon shape="check"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">Report generated successfully</div>
-            <div class="activity-time">2 minutes ago</div>
-          </div>
-        </div>
-        
-        <div class="activity-item">
-          <div class="activity-icon info">
-            <clr-icon shape="user"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">New user registered</div>
-            <div class="activity-time">15 minutes ago</div>
-          </div>
-        </div>
-        
-        <div class="activity-item">
-          <div class="activity-icon warning">
-            <clr-icon shape="exclamation-triangle"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">System maintenance scheduled</div>
-            <div class="activity-time">1 hour ago</div>
-          </div>
-        </div>
-        
-        <div class="activity-item">
-          <div class="activity-icon primary">
-            <clr-icon shape="upload"></clr-icon>
-          </div>
-          <div class="activity-content">
-            <div class="activity-title">Data import completed</div>
-            <div class="activity-time">2 hours ago</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Legacy breadcrumb (hidden but preserved for compatibility) -->
-<ol class="breadcrumb breadcrumb-arrow font-trirong" style="display: none;">
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
   <li><a href="javascript://">Home</a></li>
 </ol>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss
index 2bf0fc5..e69de29 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.scss
@@ -1,510 +0,0 @@
-// ========================================
-// MODERN DASHBOARD COMPONENT STYLES
-// ========================================
-
-
-@import '../../../../styles/design-tokens';
-
-
-// Dashboard Container
-// ========================================
-
-.modern-dashboard {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0;
-}
-
-// Welcome Section
-// ========================================
-
-.welcome-section {
-  background: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
-  border-radius: $radius-2xl;
-  margin-bottom: $space-8;
-  overflow: hidden;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
-    opacity: 0.3;
-  }
-
-  .welcome-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: $space-12 $space-8;
-    position: relative;
-    z-index: 1;
-
-    @media (max-width: $breakpoint-lg) {
-      flex-direction: column;
-      text-align: center;
-      gap: $space-8;
-    }
-  }
-
-  .welcome-text {
-    flex: 1;
-    max-width: 600px;
-
-    .welcome-title {
-      font-size: $text-5xl;
-      font-weight: $font-bold;
-      color: $white;
-      margin-bottom: $space-4;
-      line-height: 1.1;
-
-      @media (max-width: $breakpoint-md) {
-        font-size: $text-4xl;
-      }
-
-      .title-accent {
-        display: block;
-        font-size: $text-2xl;
-        font-weight: $font-medium;
-        color: rgba(255, 255, 255, 0.8);
-        margin-top: $space-2;
-
-        @media (max-width: $breakpoint-md) {
-          font-size: $text-xl;
-        }
-      }
-    }
-
-    .welcome-subtitle {
-      font-size: $text-xl;
-      color: rgba(255, 255, 255, 0.9);
-      margin-bottom: $space-8;
-      line-height: 1.6;
-
-      @media (max-width: $breakpoint-md) {
-        font-size: $text-lg;
-      }
-    }
-
-    .welcome-actions {
-      display: flex;
-      gap: $space-4;
-      flex-wrap: wrap;
-
-      @media (max-width: $breakpoint-sm) {
-        flex-direction: column;
-        align-items: stretch;
-      }
-    }
-  }
-
-  .welcome-visual {
-    flex: 0 0 300px;
-    position: relative;
-
-    @media (max-width: $breakpoint-lg) {
-      flex: none;
-      width: 100%;
-      max-width: 400px;
-    }
-
-    .visual-container {
-      position: relative;
-      width: 100%;
-      height: 200px;
-
-      .floating-card {
-        position: absolute;
-        background: rgba(255, 255, 255, 0.15);
-        backdrop-filter: $backdrop-blur-md;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: $radius-xl;
-        padding: $space-4;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $space-2;
-        color: $white;
-        font-size: $text-sm;
-        font-weight: $font-medium;
-        animation: float 3s ease-in-out infinite;
-
-        clr-icon {
-          font-size: $text-2xl;
-        }
-
-        &.card-1 {
-          top: 20px;
-          left: 20px;
-          animation-delay: 0s;
-        }
-
-        &.card-2 {
-          top: 60px;
-          right: 40px;
-          animation-delay: 1s;
-        }
-
-        &.card-3 {
-          bottom: 20px;
-          left: 60px;
-          animation-delay: 2s;
-        }
-      }
-    }
-  }
-}
-
-// Stats Section
-// ========================================
-
-.stats-section {
-  margin-bottom: $space-8;
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: $space-6;
-
-    @media (max-width: $breakpoint-sm) {
-      grid-template-columns: 1fr;
-      gap: $space-4;
-    }
-  }
-
-  .stats-card {
-    padding: $space-6;
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: $gradient-primary;
-    }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: $space-4;
-
-      .stats-icon {
-        width: 48px;
-        height: 48px;
-        border-radius: $radius-xl;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: $text-xl;
-
-        &.primary {
-          background: rgba($primary-500, 0.1);
-          color: $primary-600;
-        }
-
-        &.success {
-          background: rgba($accent-green, 0.1);
-          color: $accent-green;
-        }
-
-        &.warning {
-          background: rgba($accent-orange, 0.1);
-          color: $accent-orange;
-        }
-
-        &.info {
-          background: rgba($primary-500, 0.1);
-          color: $primary-600;
-        }
-      }
-
-      .stats-trend {
-        display: flex;
-        align-items: center;
-        gap: $space-1;
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-
-        &.positive {
-          color: $accent-green;
-        }
-
-        &.negative {
-          color: $accent-red;
-        }
-
-        clr-icon {
-          font-size: $text-sm;
-        }
-      }
-    }
-
-    .card-body {
-      .stats-value {
-        font-size: $text-3xl;
-        font-weight: $font-bold;
-        color: $gray-900;
-        margin-bottom: $space-1;
-        line-height: 1;
-      }
-
-      .stats-label {
-        font-size: $text-sm;
-        color: $gray-600;
-        font-weight: $font-medium;
-      }
-    }
-  }
-}
-
-// Actions Section
-// ========================================
-
-.actions-section {
-  margin-bottom: $space-8;
-
-  .section-title {
-    font-size: $text-2xl;
-    font-weight: $font-bold;
-    color: $gray-900;
-    margin-bottom: $space-6;
-    text-align: center;
-  }
-
-  .actions-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: $space-6;
-
-    @media (max-width: $breakpoint-sm) {
-      grid-template-columns: 1fr;
-      gap: $space-4;
-    }
-  }
-
-  .action-card {
-    display: flex;
-    align-items: center;
-    gap: $space-4;
-    padding: $space-6;
-    text-decoration: none;
-    color: inherit;
-    border: 1px solid $gray-200;
-    transition: all $duration-300 $ease-out;
-
-    &:hover {
-      border-color: $primary-300;
-      transform: translateY(-2px);
-      box-shadow: $shadow-xl;
-    }
-
-    .action-icon {
-      width: 56px;
-      height: 56px;
-      background: $gradient-primary;
-      border-radius: $radius-xl;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $white;
-      font-size: $text-xl;
-      flex-shrink: 0;
-    }
-
-    .action-content {
-      flex: 1;
-
-      h3 {
-        font-size: $text-lg;
-        font-weight: $font-semibold;
-        color: $gray-900;
-        margin-bottom: $space-1;
-      }
-
-      p {
-        font-size: $text-sm;
-        color: $gray-600;
-        margin: 0;
-        line-height: 1.5;
-      }
-    }
-
-    .action-arrow {
-      color: $gray-400;
-      font-size: $text-lg;
-      transition: transform $duration-200 $ease-out;
-    }
-
-    &:hover .action-arrow {
-      transform: translateX(4px);
-    }
-  }
-}
-
-// Activity Section
-// ========================================
-
-.activity-section {
-  .section-title {
-    font-size: $text-2xl;
-    font-weight: $font-bold;
-    color: $gray-900;
-    margin-bottom: $space-6;
-    text-align: center;
-  }
-
-  .activity-card {
-    padding: 0;
-    overflow: hidden;
-
-    .activity-list {
-      .activity-item {
-        display: flex;
-        align-items: center;
-        gap: $space-4;
-        padding: $space-4 $space-6;
-        border-bottom: 1px solid $gray-100;
-        transition: background-color $duration-200 $ease-out;
-
-        &:last-child {
-          border-bottom: none;
-        }
-
-        &:hover {
-          background: $gray-50;
-        }
-
-        .activity-icon {
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: $text-base;
-          flex-shrink: 0;
-
-          &.success {
-            background: rgba($accent-green, 0.1);
-            color: $accent-green;
-          }
-
-          &.info {
-            background: rgba($primary-500, 0.1);
-            color: $primary-600;
-          }
-
-          &.warning {
-            background: rgba($accent-orange, 0.1);
-            color: $accent-orange;
-          }
-
-          &.primary {
-            background: rgba($primary-500, 0.1);
-            color: $primary-600;
-          }
-        }
-
-        .activity-content {
-          flex: 1;
-
-          .activity-title {
-            font-size: $text-sm;
-            font-weight: $font-medium;
-            color: $gray-900;
-            margin-bottom: 2px;
-          }
-
-          .activity-time {
-            font-size: $text-xs;
-            color: $gray-500;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Responsive Design
-// ========================================
-
-@media (max-width: $breakpoint-lg) {
-  .welcome-section .welcome-content {
-    padding: $space-8 $space-6;
-  }
-
-  .stats-section .stats-grid {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  }
-
-  .actions-section .actions-grid {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .welcome-section .welcome-content {
-    padding: $space-6 $space-4;
-  }
-
-  .welcome-text .welcome-title {
-    font-size: $text-3xl;
-  }
-
-  .welcome-text .welcome-subtitle {
-    font-size: $text-base;
-  }
-
-  .stats-section .stats-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .actions-section .actions-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: $breakpoint-sm) {
-  .modern-dashboard {
-    padding: 0 $space-4;
-  }
-
-  .welcome-section {
-    margin-bottom: $space-6;
-  }
-
-  .stats-section,
-  .actions-section,
-  .activity-section {
-    margin-bottom: $space-6;
-  }
-
-  .welcome-actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
-// Animation Keyframes
-// ========================================
-
-@keyframes float {
-
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-
-  50% {
-    transform: translateY(-10px);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts
index 4f82884..9873121 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/main-page/main-page.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ThemeService } from '../../../services/theme.service';
 
 @Component({
   selector: 'app-main-page',
@@ -8,13 +7,9 @@ import { ThemeService } from '../../../services/theme.service';
 })
 export class MainPageComponent implements OnInit {
 
-  constructor(private themeService: ThemeService) { }
+  constructor() { }
 
   ngOnInit() {
-    // Initialize theme service
-    this.themeService.currentTheme$.subscribe(theme => {
-      // Theme changes will be automatically applied via CSS variables
-    });
   }
 
 }
diff --git 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
index fcf1339..5b6b3b6 100644
--- 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,5 +1,4 @@
 
-
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
 import { Component, NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
@@ -38,7 +37,10 @@ import { AccesstypeComponent } from './admin/accesstype/accesstype.component';
 import { ModulesComponent } from './admin/modules/modules.component';
 
 import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
+import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
 import { ReportrunnerallComponent } from './builder/report-runner/reportrunnerall/reportrunnerall.component';
+import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
+import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
 import { ReportBuildComponent } from './builder/report-build/report-build.component';
 import { ReportbuildallComponent } from './builder/report-build/reportbuildall/reportbuildall.component';
 import { ReportbuildaddComponent } from './builder/report-build/reportbuildadd/reportbuildadd.component';
@@ -80,29 +82,16 @@ 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 { 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 { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.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 { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
-import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
-import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
-import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
-import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
-import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.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 { QueryComponent } from './superadmin/query/query.component';
+// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
+// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
+
+
+
+
 const routes: Routes = [
   //Important: The sequence of path is important as the router go over then in sequential manner
   { path: '', redirectTo: '/cns-portal/dashboard', pathMatch: 'full' },
@@ -132,13 +121,6 @@ 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 },
-
-
 
 
       {
@@ -152,9 +134,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] } },
 
 
 
@@ -195,21 +177,9 @@ const routes: Routes = [
           { path: 'editdata/:id', component: EditformnewdashComponent },
           { path: 'editdashn/:id', component: EditnewdashComponent },
           { path: 'schedule/:id', component: ScheduleComponent },
-          { path: 'chart-types', component: ChartTypePageComponent },
-          { path: 'chart-types/add', component: AddChartTypeComponent },
-          { path: 'chart-types/edit/:id', component: EditChartTypeComponent },
-          { path: 'chart-types/:id/ui-components', component: ChartTypeUiComponentsComponent },
-          { path: 'chart-types/:id/templates', component: ChartTypeTemplatesComponent },
-          { path: 'chart-types/:id/fields', component: ChartTypeFieldsComponent },
         ]
       },
 
-      // Shield Dashboard
-      {
-        path: 'shield-dashboard',
-        loadChildren: () => import('./builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard-routing.module').then(m => m.ShieldDashboardRoutingModule)
-      },
-
       {
         path: 'dashboardrunner', component: DashboardrunnerComponent,
         children: [
@@ -257,20 +227,8 @@ 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
 
@@ -303,16 +261,18 @@ const routes: Routes = [
 
       // buildercomponents
 
-
-
-
-
-
       { path: 'tokenregistery', component: Token_registeryComponent },
 
       { path: 'Stepper_workflow', component: Stepper_workflowComponent },
 
 
+
+
+
+
+
+
+
       { path: '**', component: PageNotFoundComponent },
 
     ]
diff --git a/frontend/angular-clarity-master/src/app/modules/main/main.module.ts b/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
index 62cae29..0914655 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
@@ -53,6 +53,9 @@ import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit
 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';
@@ -71,9 +74,6 @@ 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,9 +91,6 @@ 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';
@@ -109,127 +106,81 @@ 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 { 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';
-// Import UnifiedChartComponent
-import { UnifiedChartComponent } from './builder/dashboardnew/gadgets/unified-chart/unified-chart.component';
-// Import ChartConfigManagerComponent
-import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config/chart-config-manager.component';
-// Import ChartTypeManagerComponent
-import { ChartTypeManagerComponent } from './builder/dashboardnew/chart-type-manager/chart-type-manager.component';
-// Import ChartTypePageComponent
-import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
-// Import AddChartTypeComponent
-import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
-// Import EditChartTypeComponent
-import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
-// Import ChartTypeUiComponentsComponent
-import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
-// Import ChartTypeTemplatesComponent
-import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
-// Import ChartTypeFieldsComponent
-import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.component';
-// Import new form components
-import { ChartTypeFormComponent } from './builder/dashboardnew/chart-config/forms/chart-type-form.component';
-import { UiComponentFormComponent } from './builder/dashboardnew/chart-config/forms/ui-component-form.component';
-import { ComponentPropertyFormComponent } from './builder/dashboardnew/chart-config/forms/component-property-form.component';
-import { ChartTemplateFormComponent } from './builder/dashboardnew/chart-config/forms/chart-template-form.component';
-import { DynamicFieldFormComponent } from './builder/dashboardnew/chart-config/forms/dynamic-field-form.component';
-// Import ChartConfigModalComponent
-import { ChartConfigModalComponent } from './builder/dashboardnew/editnewdash/chart-config-modal.component';
-// Import DynamicChartLoaderService
-import { DynamicChartLoaderService } from './builder/dashboardnew/chart-config/dynamic-chart-loader.service';
-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 { QueryComponent } from './superadmin/query/query.component';
+// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
+// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
 
 @NgModule({
   declarations: [
     MainPageComponent, PageNotFoundComponent, UserComponent, PasswordResetComponent,
-    MyworkspaceComponent,
+       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, CompactFilterComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
-    // Add UnifiedChartComponent to declarations
-    UnifiedChartComponent,
-    // Add ChartConfigManagerComponent to declarations
-    ChartConfigManagerComponent,
-    // Add ChartTypeManagerComponent to declarations
-    ChartTypeManagerComponent,
-    // Add ChartTypePageComponent to declarations
-    ChartTypePageComponent,
-    // Add AddChartTypeComponent to declarations
-    AddChartTypeComponent,
-    // Add EditChartTypeComponent to declarations
-    EditChartTypeComponent,
-    // Add ChartTypeUiComponentsComponent to declarations
-    ChartTypeUiComponentsComponent,
-    // Add ChartTypeTemplatesComponent to declarations
-    ChartTypeTemplatesComponent,
-    // Add ChartTypeFieldsComponent to declarations
-    ChartTypeFieldsComponent,
-    // Add new form components to declarations
-    ChartTypeFormComponent,
-    UiComponentFormComponent,
-    ComponentPropertyFormComponent,
-    ChartTemplateFormComponent,
-    DynamicFieldFormComponent,
-    // Add ChartConfigModalComponent to declarations
-    ChartConfigModalComponent,
-    // Add ChartTypeDisplayComponent to declarations
-    
-
+    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, 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,
+    AddextensionComponent, EditextensionComponent, ApiregisteryComponent,
+    DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent, MappingruleaddComponent, MappingruleeditComponent,
 
 
     // buildercomponents
 
 
-    ThemeCustomizationComponent,
-   
+
     Token_registeryComponent,
-     ],
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    Stepper_workflowComponent,
+
+
+
+
+
+  ],
   imports: [
     QRCodeModule,
     CommonModule,
@@ -248,17 +199,12 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
     NgChartsModule,
     NgxChartsModule,
     DynamicModule,
-    FieldTypesModule,
-    SharedModule,
-    ShieldDashboardModule,
   ],
   providers: [
     CookieService,
     WireframeService,
-    DynamicChartLoaderService
-  ],
-  exports: [
-    ChartConfigManagerComponent
+
+
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git 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
deleted file mode 100644
index 820ad8c..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/main.module.ts.tmp
+++ /dev/null
@@ -1,252 +0,0 @@
-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 { }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.html b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.html
deleted file mode 100644
index 70951d2..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.html
+++ /dev/null
@@ -1,280 +0,0 @@
-<!-- Theme Customization Screen -->
-<div class="theme-customization-screen">
-    <!-- Header -->
-    <div class="theme-header">
-        <div class="header-content">
-            <div class="header-left">
-                <h1 class="page-title">
-                    <clr-icon shape="palette"></clr-icon>
-                    Theme Customization
-                </h1>
-                <p class="page-subtitle">Customize your application's appearance with colors, fonts, and styles</p>
-            </div>
-            <div class="header-actions">
-                <button class="modern-btn btn-outline" (click)="resetToDefault()">
-                    <clr-icon shape="refresh"></clr-icon>
-                    Reset to Default
-                </button>
-                <button class="modern-btn btn-primary" (click)="exportTheme()">
-                    <clr-icon shape="download"></clr-icon>
-                    Export Theme
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Main Content -->
-    <div class="theme-content">
-        <div class="theme-layout">
-            <!-- Left Sidebar - Theme Selection -->
-            <div class="theme-sidebar">
-                <div class="sidebar-section">
-                    <h3 class="section-title">Predefined Themes</h3>
-                    <div class="theme-grid">
-                        <div *ngFor="let theme of themes" class="theme-card"
-                            [class.active]="currentTheme?.id === theme.id" (click)="selectTheme(theme.id)">
-                            <div class="theme-preview" [style.background]="theme.colors.background">
-                                <div class="preview-header" [style.background]="theme.colors.primary"></div>
-                                <div class="preview-content">
-                                    <div class="preview-card" [style.background]="theme.colors.surface"
-                                        [style.border-radius]="theme.borderRadius">
-                                        <div class="preview-text" [style.color]="theme.colors.text">Sample Text</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="theme-info">
-                                <h4 class="theme-name">{{ theme.name }}</h4>
-                                <div class="theme-colors">
-                                    <div class="color-dot" [style.background]="theme.colors.primary"></div>
-                                    <div class="color-dot" [style.background]="theme.colors.secondary"></div>
-                                    <div class="color-dot" [style.background]="theme.colors.accent"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="sidebar-section">
-                    <button class="modern-btn btn-primary btn-block" (click)="startCustomizing()"
-                        [disabled]="isCustomizing">
-                        <clr-icon shape="cog"></clr-icon>
-                        Customize Theme
-                    </button>
-                </div>
-            </div>
-
-            <!-- Right Content - Customization Panel -->
-            <div class="theme-main">
-                <div *ngIf="!isCustomizing" class="welcome-state">
-                    <div class="welcome-content">
-                        <div class="welcome-icon">
-                            <clr-icon shape="palette" size="48"></clr-icon>
-                        </div>
-                        <h2>Choose a Theme</h2>
-                        <p>Select from our predefined themes or create your own custom theme to match your brand and
-                            preferences.</p>
-                        <div class="current-theme-info" *ngIf="currentTheme">
-                            <h3>Current Theme: {{ currentTheme.name }}</h3>
-                            <div class="theme-preview-large" [style.background]="currentTheme.colors.background">
-                                <div class="preview-header" [style.background]="currentTheme.colors.primary"></div>
-                                <div class="preview-content">
-                                    <div class="preview-card" [style.background]="currentTheme.colors.surface"
-                                        [style.border-radius]="currentTheme.borderRadius">
-                                        <div class="preview-text" [style.color]="currentTheme.colors.text">Sample Text
-                                        </div>
-                                        <div class="preview-text-secondary"
-                                            [style.color]="currentTheme.colors.textSecondary">Secondary Text</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div *ngIf="isCustomizing" class="customization-panel">
-                    <!-- Customization Header -->
-                    <div class="customization-header">
-                        <h2>Customize Your Theme</h2>
-                        <div class="header-actions">
-                            <button class="modern-btn btn-outline" (click)="cancelCustomizing()">
-                                <clr-icon shape="times"></clr-icon>
-                                Cancel
-                            </button>
-                            <button class="modern-btn btn-primary" (click)="applyCustomTheme()">
-                                <clr-icon shape="check"></clr-icon>
-                                Apply Theme
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Color Customization -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="color-palette"></clr-icon>
-                            Colors
-                        </h3>
-                        <div class="color-grid">
-                            <div class="color-group">
-                                <label class="color-label">Primary Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('primary')"
-                                        (input)="onColorChange('primary', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('primary')"
-                                        (input)="onColorChange('primary', $event.target.value); previewTheme()">
-                                </div>
-                                <div class="color-presets">
-                                    <div *ngFor="let preset of colorPresets" class="preset-color"
-                                        [style.background]="preset.value" [title]="preset.name"
-                                        (click)="onColorChange('primary', preset.value); previewTheme()">
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Secondary Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('secondary')"
-                                        (input)="onColorChange('secondary', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('secondary')"
-                                        (input)="onColorChange('secondary', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Accent Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('accent')"
-                                        (input)="onColorChange('accent', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('accent')"
-                                        (input)="onColorChange('accent', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Background Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('background')"
-                                        (input)="onColorChange('background', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('background')"
-                                        (input)="onColorChange('background', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Surface Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('surface')"
-                                        (input)="onColorChange('surface', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('surface')"
-                                        (input)="onColorChange('surface', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-
-                            <div class="color-group">
-                                <label class="color-label">Text Color</label>
-                                <div class="color-input-group">
-                                    <input type="color" class="color-picker" [value]="getColorValue('text')"
-                                        (input)="onColorChange('text', $event.target.value); previewTheme()">
-                                    <input type="text" class="color-text" [value]="getColorValue('text')"
-                                        (input)="onColorChange('text', $event.target.value); previewTheme()">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Font Customization -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="text"></clr-icon>
-                            Typography
-                        </h3>
-                        <div class="font-grid">
-                            <div class="font-group">
-                                <label class="font-label">Primary Font</label>
-                                <select class="font-select" [value]="getFontValue('primary')"
-                                    (change)="onFontChange('primary', $event.target.value); previewTheme()">
-                                    <option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
-                                    </option>
-                                </select>
-                                <div class="font-preview" [style.font-family]="getFontValue('primary')">
-                                    The quick brown fox jumps over the lazy dog
-                                </div>
-                            </div>
-
-                            <div class="font-group">
-                                <label class="font-label">Secondary Font</label>
-                                <select class="font-select" [value]="getFontValue('secondary')"
-                                    (change)="onFontChange('secondary', $event.target.value); previewTheme()">
-                                    <option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
-                                    </option>
-                                </select>
-                                <div class="font-preview" [style.font-family]="getFontValue('secondary')">
-                                    The quick brown fox jumps over the lazy dog
-                                </div>
-                            </div>
-
-                            <div class="font-group">
-                                <label class="font-label">Monospace Font</label>
-                                <select class="font-select" [value]="getFontValue('mono')"
-                                    (change)="onFontChange('mono', $event.target.value); previewTheme()">
-                                    <option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
-                                    </option>
-                                </select>
-                                <div class="font-preview" [style.font-family]="getFontValue('mono')">
-                                    The quick brown fox jumps over the lazy dog
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Advanced Settings -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="cog"></clr-icon>
-                            Advanced Settings
-                        </h3>
-                        <div class="advanced-grid">
-                            <div class="advanced-group">
-                                <label class="advanced-label">Border Radius</label>
-                                <div class="range-input-group">
-                                    <input type="range" class="range-slider" min="0" max="2" step="0.25"
-                                        [value]="getBorderRadiusValue().replace('rem', '')"
-                                        (input)="onBorderRadiusChange($event.target.value + 'rem'); previewTheme()">
-                                    <span class="range-value">{{ getBorderRadiusValue() }}</span>
-                                </div>
-                            </div>
-
-                            <div class="advanced-group">
-                                <label class="advanced-label">Shadow Intensity</label>
-                                <div class="range-input-group">
-                                    <input type="range" class="range-slider" min="0" max="50" step="5"
-                                        [value]="getShadowValueNumber()"
-                                        (input)="onShadowChange('0 ' + $event.target.value + 'px 15px -3px rgba(0, 0, 0, 0.1)'); previewTheme()">
-                                    <span class="range-value">{{ getShadowValueNumber() }}px</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Import/Export -->
-                    <div class="customization-section">
-                        <h3 class="section-title">
-                            <clr-icon shape="import"></clr-icon>
-                            Import/Export
-                        </h3>
-                        <div class="import-export-grid">
-                            <div class="import-group">
-                                <label class="import-label">Import Theme</label>
-                                <input type="file" class="file-input" accept=".json" (change)="importTheme($event)">
-                                <button class="modern-btn btn-outline">
-                                    <clr-icon shape="upload"></clr-icon>
-                                    Choose File
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.scss b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.scss
deleted file mode 100644
index b294bc2..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.scss
+++ /dev/null
@@ -1,622 +0,0 @@
-// ========================================
-// THEME CUSTOMIZATION COMPONENT STYLES
-// ========================================
-@import '../../../../styles/design-tokens';
-
-// Main Container
-// ========================================
-
-.theme-customization-screen {
-  min-height: 100vh;
-  background: var(--theme-background, $gray-50);
-  padding: $space-6;
-}
-
-// Header
-// ========================================
-
-.theme-header {
-  background: var(--theme-surface, $white);
-  border-radius: $radius-2xl;
-  box-shadow: var(--theme-shadow, $shadow-lg);
-  margin-bottom: $space-8;
-  padding: $space-6;
-
-  .header-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $space-4;
-
-    @media (max-width: $breakpoint-md) {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  .header-left {
-    .page-title {
-      display: flex;
-      align-items: center;
-      gap: $space-3;
-      font-size: $text-3xl;
-      font-weight: $font-bold;
-      color: var(--theme-text, $gray-900);
-      margin-bottom: $space-2;
-
-      clr-icon {
-        color: var(--theme-primary, $primary-500);
-      }
-    }
-
-    .page-subtitle {
-      font-size: $text-lg;
-      color: var(--theme-text-secondary, $gray-600);
-      margin: 0;
-    }
-  }
-
-  .header-actions {
-    display: flex;
-    gap: $space-3;
-    flex-shrink: 0;
-
-    @media (max-width: $breakpoint-md) {
-      width: 100%;
-      justify-content: stretch;
-    }
-  }
-}
-
-// Main Content
-// ========================================
-
-.theme-content {
-  .theme-layout {
-    display: grid;
-    grid-template-columns: 350px 1fr;
-    gap: $space-8;
-    min-height: 600px;
-
-    @media (max-width: $breakpoint-lg) {
-      grid-template-columns: 1fr;
-      gap: $space-6;
-    }
-  }
-}
-
-// Sidebar
-// ========================================
-
-.theme-sidebar {
-  background: var(--theme-surface, $white);
-  border-radius: $radius-2xl;
-  box-shadow: var(--theme-shadow, $shadow-lg);
-  padding: $space-6;
-  height: fit-content;
-
-  .sidebar-section {
-    margin-bottom: $space-6;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .section-title {
-    font-size: $text-lg;
-    font-weight: $font-semibold;
-    color: var(--theme-text, $gray-900);
-    margin-bottom: $space-4;
-  }
-
-  .theme-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: $space-4;
-  }
-
-  .theme-card {
-    border: 2px solid transparent;
-    border-radius: $radius-xl;
-    padding: $space-4;
-    cursor: pointer;
-    transition: all $duration-200 $ease-out;
-    background: var(--theme-surface, $white);
-
-    &:hover {
-      border-color: var(--theme-primary, $primary-200);
-      transform: translateY(-2px);
-      box-shadow: var(--theme-shadow, $shadow-lg);
-    }
-
-    &.active {
-      border-color: var(--theme-primary, $primary-500);
-      box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
-    }
-
-    .theme-preview {
-      height: 80px;
-      border-radius: $radius-lg;
-      overflow: hidden;
-      margin-bottom: $space-3;
-      position: relative;
-
-      .preview-header {
-        height: 20px;
-        width: 100%;
-      }
-
-      .preview-content {
-        padding: $space-3;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .preview-card {
-          width: 100%;
-          height: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-          .preview-text {
-            font-size: $text-xs;
-            font-weight: $font-medium;
-          }
-        }
-      }
-    }
-
-    .theme-info {
-      .theme-name {
-        font-size: $text-sm;
-        font-weight: $font-semibold;
-        color: var(--theme-text, $gray-900);
-        margin-bottom: $space-2;
-      }
-
-      .theme-colors {
-        display: flex;
-        gap: $space-2;
-
-        .color-dot {
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          border: 2px solid var(--theme-surface, $white);
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-  }
-}
-
-// Main Panel
-// ========================================
-
-.theme-main {
-  background: var(--theme-surface, $white);
-  border-radius: $radius-2xl;
-  box-shadow: var(--theme-shadow, $shadow-lg);
-  padding: $space-6;
-  min-height: 600px;
-}
-
-// Welcome State
-// ========================================
-
-.welcome-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 400px;
-
-  .welcome-content {
-    text-align: center;
-    max-width: 500px;
-
-    .welcome-icon {
-      margin-bottom: $space-6;
-
-      clr-icon {
-        color: var(--theme-primary, $primary-500);
-      }
-    }
-
-    h2 {
-      font-size: $text-2xl;
-      font-weight: $font-bold;
-      color: var(--theme-text, $gray-900);
-      margin-bottom: $space-4;
-    }
-
-    p {
-      font-size: $text-lg;
-      color: var(--theme-text-secondary, $gray-600);
-      margin-bottom: $space-8;
-      line-height: 1.6;
-    }
-
-    .current-theme-info {
-      h3 {
-        font-size: $text-xl;
-        font-weight: $font-semibold;
-        color: var(--theme-text, $gray-900);
-        margin-bottom: $space-4;
-      }
-
-      .theme-preview-large {
-        height: 120px;
-        border-radius: $radius-xl;
-        overflow: hidden;
-        position: relative;
-        box-shadow: var(--theme-shadow, $shadow-lg);
-
-        .preview-header {
-          height: 30px;
-          width: 100%;
-        }
-
-        .preview-content {
-          padding: $space-4;
-          height: 90px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .preview-card {
-            width: 100%;
-            height: 50px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-            .preview-text {
-              font-size: $text-sm;
-              font-weight: $font-semibold;
-              margin-bottom: 2px;
-            }
-
-            .preview-text-secondary {
-              font-size: $text-xs;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Customization Panel
-// ========================================
-
-.customization-panel {
-  .customization-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: $space-8;
-    padding-bottom: $space-4;
-    border-bottom: 1px solid var(--theme-text-secondary, $gray-200);
-
-    h2 {
-      font-size: $text-2xl;
-      font-weight: $font-bold;
-      color: var(--theme-text, $gray-900);
-      margin: 0;
-    }
-
-    .header-actions {
-      display: flex;
-      gap: $space-3;
-    }
-  }
-
-  .customization-section {
-    margin-bottom: $space-8;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .section-title {
-      display: flex;
-      align-items: center;
-      gap: $space-2;
-      font-size: $text-lg;
-      font-weight: $font-semibold;
-      color: var(--theme-text, $gray-900);
-      margin-bottom: $space-4;
-
-      clr-icon {
-        color: var(--theme-primary, $primary-500);
-      }
-    }
-  }
-}
-
-// Color Customization
-// ========================================
-
-.color-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.color-group {
-  .color-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .color-input-group {
-    display: flex;
-    gap: $space-2;
-    margin-bottom: $space-3;
-
-    .color-picker {
-      width: 40px;
-      height: 40px;
-      border: none;
-      border-radius: $radius-lg;
-      cursor: pointer;
-      overflow: hidden;
-
-      &::-webkit-color-swatch-wrapper {
-        padding: 0;
-      }
-
-      &::-webkit-color-swatch {
-        border: none;
-        border-radius: $radius-lg;
-      }
-    }
-
-    .color-text {
-      flex: 1;
-      padding: $space-2 $space-3;
-      border: 1px solid var(--theme-text-secondary, $gray-300);
-      border-radius: $radius-lg;
-      font-size: $text-sm;
-      color: var(--theme-text, $gray-900);
-      background: var(--theme-surface, $white);
-
-      &:focus {
-        outline: none;
-        border-color: var(--theme-primary, $primary-500);
-        box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
-      }
-    }
-  }
-
-  .color-presets {
-    display: flex;
-    gap: $space-2;
-    flex-wrap: wrap;
-
-    .preset-color {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      cursor: pointer;
-      border: 2px solid var(--theme-surface, $white);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      transition: transform $duration-200 $ease-out;
-
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-}
-
-// Font Customization
-// ========================================
-
-.font-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.font-group {
-  .font-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .font-select {
-    width: 100%;
-    padding: $space-2 $space-3;
-    border: 1px solid var(--theme-text-secondary, $gray-300);
-    border-radius: $radius-lg;
-    font-size: $text-sm;
-    color: var(--theme-text, $gray-900);
-    background: var(--theme-surface, $white);
-    margin-bottom: $space-3;
-
-    &:focus {
-      outline: none;
-      border-color: var(--theme-primary, $primary-500);
-      box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
-    }
-  }
-
-  .font-preview {
-    padding: $space-3;
-    background: var(--theme-background, $gray-50);
-    border-radius: $radius-lg;
-    font-size: $text-sm;
-    color: var(--theme-text, $gray-700);
-    border: 1px solid var(--theme-text-secondary, $gray-200);
-  }
-}
-
-// Advanced Settings
-// ========================================
-
-.advanced-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.advanced-group {
-  .advanced-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .range-input-group {
-    display: flex;
-    align-items: center;
-    gap: $space-3;
-
-    .range-slider {
-      flex: 1;
-      height: 6px;
-      border-radius: 3px;
-      background: var(--theme-text-secondary, $gray-300);
-      outline: none;
-      cursor: pointer;
-
-      &::-webkit-slider-thumb {
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: var(--theme-primary, $primary-500);
-        cursor: pointer;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-
-      &::-moz-range-thumb {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: var(--theme-primary, $primary-500);
-        cursor: pointer;
-        border: none;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-    }
-
-    .range-value {
-      font-size: $text-sm;
-      font-weight: $font-medium;
-      color: var(--theme-text, $gray-700);
-      min-width: 60px;
-      text-align: center;
-    }
-  }
-}
-
-// Import/Export
-// ========================================
-
-.import-export-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: $space-6;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.import-group {
-  .import-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: var(--theme-text, $gray-700);
-    margin-bottom: $space-2;
-  }
-
-  .file-input {
-    display: none;
-  }
-}
-
-// Responsive Design
-// ========================================
-
-@media (max-width: $breakpoint-lg) {
-  .theme-customization-screen {
-    padding: $space-4;
-  }
-
-  .theme-header {
-    padding: $space-4;
-  }
-
-  .theme-sidebar,
-  .theme-main {
-    padding: $space-4;
-  }
-}
-
-@media (max-width: $breakpoint-md) {
-  .theme-customization-screen {
-    padding: $space-3;
-  }
-
-  .theme-header {
-    padding: $space-3;
-  }
-
-  .theme-sidebar,
-  .theme-main {
-    padding: $space-3;
-  }
-
-  .color-grid,
-  .font-grid,
-  .advanced-grid,
-  .import-export-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: $breakpoint-sm) {
-  .theme-customization-screen {
-    padding: $space-2;
-  }
-
-  .theme-header {
-    padding: $space-3;
-  }
-
-  .theme-sidebar,
-  .theme-main {
-    padding: $space-3;
-  }
-}
diff --git a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.ts b/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.ts
deleted file mode 100644
index bcc5e20..0000000
--- a/frontend/angular-clarity-master/src/app/modules/main/theme-customization/theme-customization.component.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ThemeService, Theme } from '../../../services/theme.service';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'app-theme-customization',
-  templateUrl: './theme-customization.component.html',
-  styleUrls: ['./theme-customization.component.scss']
-})
-export class ThemeCustomizationComponent implements OnInit, OnDestroy {
-  themes: Theme[] = [];
-  currentTheme: Theme | null = null;
-  customTheme: Partial<Theme> = {
-    colors: {
-      primary: '#0ea5e9',
-      secondary: '#64748b',
-      accent: '#8b5cf6',
-      background: '#f8fafc',
-      surface: '#ffffff',
-      text: '#111827',
-      textSecondary: '#6b7280'
-    },
-    fonts: {
-      primary: 'Inter',
-      secondary: 'Poppins',
-      mono: 'JetBrains Mono'
-    },
-    borderRadius: '0.75rem',
-    shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-  };
-  isCustomizing = false;
-  showAdvanced = false;
-  
-  private themeSubscription: Subscription = new Subscription();
-
-  // Color presets and font options from service
-  colorPresets = this.themeService.getColorPresets();
-  fontOptions = this.themeService.getFontOptions();
-
-  constructor(private themeService: ThemeService) {}
-
-  ngOnInit(): void {
-    this.themes = this.themeService.getThemes();
-    this.currentTheme = this.themeService.getCurrentTheme();
-    
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(theme => {
-      this.currentTheme = theme;
-    });
-
-    this.initializeCustomTheme();
-  }
-
-  ngOnDestroy(): void {
-    this.themeSubscription.unsubscribe();
-  }
-
-  selectTheme(themeId: string): void {
-    this.themeService.selectTheme(themeId);
-    this.isCustomizing = false;
-  }
-
-  startCustomizing(): void {
-    this.isCustomizing = true;
-    this.initializeCustomTheme();
-  }
-
-  cancelCustomizing(): void {
-    this.isCustomizing = false;
-    this.initializeCustomTheme();
-  }
-
-  applyCustomTheme(): void {
-    if (this.customTheme.colors && this.customTheme.fonts) {
-      const customTheme: Theme = {
-        id: 'custom',
-        name: 'Custom Theme',
-        colors: this.customTheme.colors,
-        fonts: this.customTheme.fonts,
-        borderRadius: this.customTheme.borderRadius || '0.5rem',
-        shadow: this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-      };
-      this.themeService.applyTheme(customTheme);
-    }
-    this.isCustomizing = false;
-  }
-
-  resetToDefault(): void {
-    this.themeService.resetToDefault();
-  }
-
-  exportTheme(): void {
-    const themeJson = this.themeService.exportTheme();
-    this.downloadFile(themeJson, 'theme.json', 'application/json');
-  }
-
-  importTheme(event: any): void {
-    const file = event.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e.target?.result as string;
-        if (this.themeService.importTheme(content)) {
-          alert('Theme imported successfully!');
-        } else {
-          alert('Failed to import theme. Please check the file format.');
-        }
-      };
-      reader.readAsText(file);
-    }
-  }
-
-  private initializeCustomTheme(): void {
-    if (this.currentTheme) {
-      this.customTheme = {
-        colors: { 
-          primary: this.currentTheme.colors.primary,
-          secondary: this.currentTheme.colors.secondary,
-          accent: this.currentTheme.colors.accent,
-          background: this.currentTheme.colors.background,
-          surface: this.currentTheme.colors.surface,
-          text: this.currentTheme.colors.text,
-          textSecondary: this.currentTheme.colors.textSecondary
-        },
-        fonts: { 
-          primary: this.currentTheme.fonts.primary,
-          secondary: this.currentTheme.fonts.secondary,
-          mono: this.currentTheme.fonts.mono
-        },
-        borderRadius: this.currentTheme.borderRadius,
-        shadow: this.currentTheme.shadow
-      };
-    } else {
-      // Default values if no current theme
-      this.customTheme = {
-        colors: {
-          primary: '#0ea5e9',
-          secondary: '#64748b',
-          accent: '#8b5cf6',
-          background: '#f8fafc',
-          surface: '#ffffff',
-          text: '#111827',
-          textSecondary: '#6b7280'
-        },
-        fonts: {
-          primary: 'Inter',
-          secondary: 'Poppins',
-          mono: 'JetBrains Mono'
-        },
-        borderRadius: '0.75rem',
-        shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-      };
-    }
-  }
-
-  private downloadFile(content: string, filename: string, contentType: string): void {
-    const blob = new Blob([content], { type: contentType });
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    link.click();
-    window.URL.revokeObjectURL(url);
-  }
-
-  // Color picker methods
-  onColorChange(colorType: string, value: string): void {
-    if (!this.customTheme.colors) {
-      this.customTheme.colors = {
-        primary: '#0ea5e9',
-        secondary: '#64748b',
-        accent: '#8b5cf6',
-        background: '#f8fafc',
-        surface: '#ffffff',
-        text: '#111827',
-        textSecondary: '#6b7280'
-      };
-    }
-    (this.customTheme.colors as any)[colorType] = value;
-  }
-
-  // Font picker methods
-  onFontChange(fontType: string, value: string): void {
-    if (!this.customTheme.fonts) {
-      this.customTheme.fonts = {
-        primary: 'Inter',
-        secondary: 'Poppins',
-        mono: 'JetBrains Mono'
-      };
-    }
-    (this.customTheme.fonts as any)[fontType] = value;
-  }
-
-  // Border radius methods
-  onBorderRadiusChange(value: string): void {
-    this.customTheme.borderRadius = value;
-  }
-
-  // Shadow methods
-  onShadowChange(value: string): void {
-    this.customTheme.shadow = value;
-  }
-
-  // Preview methods
-  previewTheme(): void {
-    if (this.isCustomizing && this.customTheme.colors && this.customTheme.fonts) {
-      const previewTheme: Theme = {
-        id: 'preview',
-        name: 'Preview Theme',
-        colors: this.customTheme.colors,
-        fonts: this.customTheme.fonts,
-        borderRadius: this.customTheme.borderRadius || '0.5rem',
-        shadow: this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-      };
-      this.themeService.applyTheme(previewTheme);
-    }
-  }
-
-  // Utility methods
-  getColorValue(colorType: string): string {
-    if (this.customTheme.colors) {
-      return (this.customTheme.colors as any)[colorType] || '#0ea5e9';
-    }
-    return '#0ea5e9';
-  }
-
-  getFontValue(fontType: string): string {
-    if (this.customTheme.fonts) {
-      return (this.customTheme.fonts as any)[fontType] || 'Inter';
-    }
-    return 'Inter';
-  }
-
-  getBorderRadiusValue(): string {
-    return this.customTheme.borderRadius || '0.75rem';
-  }
-
-  getShadowValue(): string {
-    return this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
-  }
-
-  getShadowValueNumber(): string {
-    const shadowValue = this.getShadowValue();
-    const match = shadowValue.match(/\d+/);
-    return match ? match[0] : '10';
-  }
-}
diff --git a/frontend/angular-clarity-master/src/app/services/api/login.service.ts b/frontend/angular-clarity-master/src/app/services/api/login.service.ts
index 0b1cb1a..4b7bc44 100644
--- a/frontend/angular-clarity-master/src/app/services/api/login.service.ts
+++ b/frontend/angular-clarity-master/src/app/services/api/login.service.ts
@@ -48,7 +48,7 @@ export class LoginService {
 
         this.apiRequest.loginAuthentication('token/session', bodyData)
             .subscribe(jsonResp => {
-                console.log('login response in service : ', jsonResp);
+                console.log('login response: ', jsonResp);
                 if (jsonResp.operationMessage=='Login Failed') {
                   this.toastr.warning('Not Login Getting Error check your Username and password');
                }
@@ -81,7 +81,7 @@ export class LoginService {
                     //Create a faliure object that we want to send back to login page
                     loginInfoReturn = {
                         "success":false,
-                        "message":jsonResp.operationMessage,
+                        "message":jsonResp.msgDesc,
                         "landingPage":"/login"
                     };
                 }
diff --git a/frontend/angular-clarity-master/src/app/services/builder/additionalcontainer.service.ts b/frontend/angular-clarity-master/src/app/services/builder/additionalcontainer.service.ts
index 60e6aac..439addb 100644
--- a/frontend/angular-clarity-master/src/app/services/builder/additionalcontainer.service.ts
+++ b/frontend/angular-clarity-master/src/app/services/builder/additionalcontainer.service.ts
@@ -8,45 +8,43 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class AdditionalcontainerService {
-  // baseurl = environment.sureops;
-  baseurl = environment.backendUrl;
-
-  private baseURL = "Gaurav_testing/Gaurav_testing";
+  baseurl = environment.sureops;
+  private baseURL = "Gaurav_testing/Gaurav_testing" ;
   constructor(private apiRequest: ApiRequestService,
     private _http: HttpClient,) { }
 
 
-  saveData(data: any): Observable<any> {
-    const url = `${this.baseurl}/sureops/Additional_container/Additional_container`;
-    return this._http.post(url, data);
-  }
+    saveData(data: any): Observable<any> {
+      const url = `${this.baseurl}/sureops/Additional_container/Additional_container`;
+      return this._http.post(url, data);
+    }
+  
+    getDetails(): Observable<any> {
+      const url = `${this.baseurl}/sureops/Additional_container/Additional_container`;
+      return this._http.get(url);
+    }
+  
+    getDetailsById(id: number): Observable<any> {
+      const url = `${this.baseurl}/sureops/Additional_container/Additional_container/${id}`;
+      return this._http.get(url);
+    }
+  
+    deleteById(id: number): Observable<any> {
+      const url = `${this.baseurl}/sureops/Additional_container/Additional_container/${id}`;
+      return this._http.delete(url);
+    }
+  
+    update(data: any, id: number): Observable<any> {
+      const url = `${this.baseurl}/sureops/Additional_container/Additional_container/${id}`;
+      return this._http.put(url, data);
+    }
 
-  getDetails(): Observable<any> {
-    const url = `${this.baseurl}/sureops/Additional_container/Additional_container`;
-    return this._http.get(url);
-  }
-
-  getDetailsById(id: number): Observable<any> {
-    const url = `${this.baseurl}/sureops/Additional_container/Additional_container/${id}`;
-    return this._http.get(url);
-  }
-
-  deleteById(id: number): Observable<any> {
-    const url = `${this.baseurl}/sureops/Additional_container/Additional_container/${id}`;
-    return this._http.delete(url);
-  }
-
-  update(data: any, id: number): Observable<any> {
-    const url = `${this.baseurl}/sureops/Additional_container/Additional_container/${id}`;
-    return this._http.put(url, data);
-  }
-
-  ///copy ADDITIONAL CONTAINER TO CREATE DEPLOYMENT
+    ///copy ADDITIONAL CONTAINER TO CREATE DEPLOYMENT
   public copyToCreateDeployment(projId: number, profileId: number, service: string): Observable<any> {
     const url = `${this.baseurl}/sureops/Additional_container/copt_to_deployment/${projId}/${profileId}/${service}`;
     return this._http.get(url);
   }
-  //	get all by project id and profile id
+//	get all by project id and profile id
   getAllContainers(projId: number, profileId: number): Observable<any> {
     const url = `${this.baseurl}/sureops/Additional_container/copt_to_deployment/${projId}/${profileId}`;
     return this._http.get(url);
@@ -54,24 +52,24 @@ export class AdditionalcontainerService {
 
 
 
-  /////////////////////////////////////
+/////////////////////////////////////
 
-  getAll(page?: number, size?: number): Observable<any> {
-    return this.apiRequest.get(this.baseURL);
-  }
-  getById(id: number): Observable<any> {
-    const _http = this.baseURL + "/" + id;
-    return this.apiRequest.get(_http);
-  }
-  create(data: any): Observable<any> {
-    return this.apiRequest.post(this.baseURL, data);
-  }
-  updategaurav(id: number, data: any): Observable<any> {
-    const _http = this.baseURL + "/" + id;
-    return this.apiRequest.put(_http, data);
-  }
-  delete(id: number): Observable<any> {
-    const _http = this.baseURL + "/" + id;
-    return this.apiRequest.delete(_http);
-  }
+getAll(page?: number, size?: number): Observable<any> {
+  return this.apiRequest.get(this.baseURL);
+}
+getById(id: number): Observable<any> {
+  const _http = this.baseURL + "/" + id;
+  return this.apiRequest.get(_http);
+}
+create(data: any): Observable<any> {
+  return this.apiRequest.post(this.baseURL, data);
+}
+updategaurav(id: number, data: any): Observable<any> {
+  const _http = this.baseURL + "/" + id;
+  return this.apiRequest.put(_http, data);
+}
+delete(id: number): Observable<any> {
+  const _http = this.baseURL + "/" + id;
+  return this.apiRequest.delete(_http);
+}
 }
diff --git a/frontend/angular-clarity-master/src/app/services/builder/dashboard3.service.ts b/frontend/angular-clarity-master/src/app/services/builder/dashboard3.service.ts
index 3013c04..bcfedcf 100644
--- a/frontend/angular-clarity-master/src/app/services/builder/dashboard3.service.ts
+++ b/frontend/angular-clarity-master/src/app/services/builder/dashboard3.service.ts
@@ -12,327 +12,297 @@ export class Dashboard3Service {
     throw new Error('Method not implemented.');
   }
   private getAllURL = 'get_module_id';
-  private addDataURl = 'Savedata';
-  private deleteFieldURL = 'delete_by_header_id';
-  private getbyidURL = 'get_dashboard_headerbyid';
-  private editURL = 'update_Dashbord1_Line';
+	private addDataURl = 'Savedata';
+	private deleteFieldURL = 'delete_by_header_id';
+	private getbyidURL = 'get_dashboard_headerbyid';
+	private editURL = 'update_Dashbord1_Line';
   private updateURL = 'update_Dashbord1_Lineby_id';
   constructor(private _http: HttpClient,
     private apiRequest: ApiRequestService) { }
-  getAll(module_id: number, page?: number, size?: number): Observable<any> {
-    // create Request URL params
-    let me = this;
-    let params: HttpParams = new HttpParams();
-    params = params.append("page", typeof page === "number" ? page.toString() : "0");
-    params = params.append("size", typeof size === "number" ? size.toString() : "1000");
-    params = params.append("module_id", module_id.toString());
-    // get all
-    return this.apiRequest.get(this.getAllURL, params);
-  }
-
-  create(data: any): Observable<any> {
-    return this.apiRequest.post(this.addDataURl, data);
-  }
-
-  deleteField(id: number) {
-    let _http = this.deleteFieldURL + "/" + id;
-    return this.apiRequest.delete(_http);
-  }
-
-  getById(id: number) {
-    let _http = this.getbyidURL + "/" + id;
-    return this.apiRequest.get(_http);
-  }
-
-  addToDB(line: any): Observable<any> {
-    return this.apiRequest.put(this.editURL, line);
-  }
-  UpdateLineData(id: number, line: any) {
-    // line = {
-    //         headers: new HttpHeaders({
-    //           'Content-Type': 'application/json'
-    //         })
-    //     };
-    let _http = this.updateURL + "/" + id;
-    return this.apiRequest.put(_http, line);
-  }
-  getcount(moduleId: number): Observable<any> {
-    return this.apiRequest.get(`get_dashboard/${moduleId}`);
-  }
-
-  updateDash(dashboardHeader: any): Observable<any> {
-    return this.apiRequest.put('update_dashboard_header', dashboardHeader);
-  }
-  /////////////////////////////////////////////////////////////////////
-  resetConditions() {
-    this.ids = []; // Reset the ids array to an empty array
-    this.numberIds = [];
-    this.passwordIds = [];
-    this.textareaIds = [];
-    this.dateIds = [];
-    this.datetimeIds = [];
-    this.emailIds = [];
-    this.selectIds = [];
-    this.radioIds = [];
-    this.checkboxIds = [];
-    this.fileuloadIds = [];
-    this.urlIds = [];
-    this.decimalIds = [];
-    this.percentageIds = [];
-    this.buttonIds = [];
-  }
-
-  //////////// Text
-  ids: any[] = [];
-  setCondition(condition: any) {
-    this.ids.push(condition);
-  }
-
-  getConditions(): any[] {
-    return this.ids;
-  }
-
-
-  ////////// Number
-  numberIds: any[] = [];
-  setnumber(id: any) {
-    this.numberIds.push(id);
-  }
-
-  getnumber(): any[] {
-    return this.numberIds;
-  }
-  ////////////// password
-  passwordIds: any[] = [];
-  setpassword(id: any) {
-    this.passwordIds.push(id);
-  }
-
-  getpassword(): any[] {
-    return this.passwordIds;
-  }
-
-  ////////////// Textarea
-  textareaIds: any[] = [];
-  setTextarea(id: any) {
-    this.textareaIds.push(id);
-  }
-
-  getTextarea(): any[] {
-    return this.textareaIds;
-  }
-
-  ////////////// Date
-  dateIds: any[] = [];
-  setDate(id: any) {
-    this.dateIds.push(id);
-  }
-
-  getDate(): any[] {
-    return this.dateIds;
-  }
-
-  ////////////// Datetime
-  datetimeIds: any[] = [];
-  setDatetime(id: any) {
-    this.datetimeIds.push(id);
-  }
-
-  getDatetime(): any[] {
-    return this.datetimeIds;
-  }
-
-  ////////////// Email
-  emailIds: any[] = [];
-  setEmail(id: any) {
-    this.emailIds.push(id);
-  }
-
-  getEmail(): any[] {
-    return this.emailIds;
-  }
-
-  ////////////// Select
-  selectIds: any[] = [];
-  setSelect(id: any) {
-    this.selectIds.push(id);
-  }
-
-  getSelect(): any[] {
-    return this.selectIds;
-  }
-
-  ////////////// Radio
-  radioIds: any[] = [];
-  setRadio(id: any) {
-    this.radioIds.push(id);
-  }
-
-  getRadio(): any[] {
-    return this.radioIds;
-  }
-
-  ////////////// Checkbox
-  checkboxIds: any[] = [];
-  setCheckbox(id: any) {
-    this.checkboxIds.push(id);
-  }
-
-  getCheckbox(): any[] {
-    return this.checkboxIds;
-  }
-
-  ////////////// fileupload
-  fileuloadIds: any[] = [];
-  setFileUpload(id: any) {
-    this.fileuloadIds.push(id);
-  }
-
-  getFileupload(): any[] {
-    return this.fileuloadIds;
-  }
-
-  ////////////// Url
-  urlIds: any[] = [];
-  setUrl(id: any) {
-    this.urlIds.push(id);
-  }
-
-  getUrl(): any[] {
-    return this.urlIds;
-  }
-  ////////////// Decimal
-  decimalIds: any[] = [];
-  setDecimal(id: any) {
-    this.decimalIds.push(id);
-  }
-
-  getDecimal(): any[] {
-    return this.decimalIds;
-  }
-  ////////////// Percentage
-  percentageIds: any[] = [];
-  setPercentage(id: any) {
-    this.percentageIds.push(id);
-  }
-
-  getPercentage(): any[] {
-    return this.percentageIds;
-  }
-  ////////////// Button
-  buttonIds: any[] = [];
-  setButton(id: any) {
-    this.buttonIds.push(id);
-  }
-
-  getButton(): any[] {
-    return this.buttonIds;
-  }
-
-
-
-
-
-
-
-
-
-  getAllDash(): Observable<any> {
-    // create Request URL params
-    return this.apiRequest.get(`get_Dashboard_header`);
-  }
-
-  getAllByModuleId(module_id: number, page?: number, size?: number): Observable<any> {
-    // create Request URL params
-    let me = this;
-    let params: HttpParams = new HttpParams();
-    params = params.append("page", typeof page === "number" ? page.toString() : "0");
-    params = params.append("size", typeof size === "number" ? size.toString() : "1000");
-    params = params.append("module_id", module_id.toString());
-    // get all
-    return this.apiRequest.get(this.getAllURL, params);
-  }
-
-  ///////schedule
-  public saveData(data: any): Observable<any> {
-    return this.apiRequest.post(`DashboardSchedule/DashboardSchedule`, data);
-  }
-
-  public getDetails(): Observable<any> {
-    return this.apiRequest.get(`DashboardSchedule/DashboardSchedule`);
-  }
-
-  public getDetailsById(id: number): Observable<any> {
-    return this.apiRequest.get(`DashboardSchedule/DashboardSchedule/${id}`);
-  }
-
-  public deleteById(id: number): Observable<any> {
-    return this.apiRequest.delete(`DashboardSchedule/DashboardSchedule/${id}`);
-  }
-
-  public updateData(data: any, id: number): Observable<any> {
-    return this.apiRequest.put(`DashboardSchedule/DashboardSchedule/${id}`, data);
-  }
-
-  ////////////////////////////////////////////////////////////////////////////
-
-
-  public getDynamicDashDetails(): Observable<any> {
-    return this.apiRequest.get(`Dashboard/Dashboard`);
-  }
-
-  public getChartData(tableName: string, jobType: string, xAxis?: any, yAxes?: any, sureId?: number, parameter?: string, parameterValue?: string, filters?: string): Observable<any> {
-    let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
-    if (sureId) {
-      url += `&sureId=${sureId}`;
-    }
-    if (parameter) {
-      url += `&parameter=${encodeURIComponent(parameter)}`;
-    }
-    if (parameterValue) {
-      url += `&parameterValue=${encodeURIComponent(parameterValue)}`;
-    }
-    
-    console.log('=== DASHBOARD SERVICE DEBUG INFO ===');
-    console.log('Base URL:', url);
-    console.log('Filters parameter:', filters);
-
-    // Parse filters JSON and add as a single "filters" parameter
-    if (filters) {
-      try {
-        const filterObj = JSON.parse(filters);
-        console.log('Parsed filter object:', filterObj);
-        
-        // Add all filters as a single "filters" parameter with JSON object
-        url += `&filters=${encodeURIComponent(JSON.stringify(filterObj))}`;
-        console.log('Added filters parameter:', JSON.stringify(filterObj));
-      } catch (e) {
-        console.warn('Failed to parse filter parameters:', e);
+    getAll(module_id: number,page?: number, size?: number): Observable<any> {
+      // create Request URL params
+      let me = this;
+      let params: HttpParams = new HttpParams();
+      params = params.append("page", typeof page === "number" ? page.toString() : "0");
+      params = params.append("size", typeof size === "number" ? size.toString() : "1000");
+      params = params.append("module_id", module_id.toString());
+      // get all
+      return this.apiRequest.get(this.getAllURL, params);
       }
-    }
 
-    console.log('Final constructed URL:', url);
-    console.log('=== END DASHBOARD SERVICE DEBUG ===');
-    return this._http.get(url);
-  }
+      create(data:any): Observable<any> {
+      return this.apiRequest.post(this.addDataURl, data);
+      }
 
-  public getUrlChartData(tableName: string, jobType: string, xAxis: any, yAxes: any, store: any, chartUrl: any, sureId?: number): Observable<any> {
-    let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&url=${chartUrl}&xAxis=${xAxis}&yAxes=${yAxes}&datastore_name=${store}`;
-    if (sureId) {
-      url += `&sureId=${sureId}`;
-    }
-    return this._http.get(url);
-  }
+      deleteField(id:number){
+        let _http = this.deleteFieldURL + "/" + id;
+          return this.apiRequest.delete(_http);
+      }
 
-  featchDynamicUrlDetails(url): Observable<any> {
-    return this._http.get(`${url}`);
-  }
+      getById(id:number)
+      {
+        let _http = this.getbyidURL + "/" + id;
+        return this.apiRequest.get(_http);
+      }
 
-
-  private filteredDataSubject = new BehaviorSubject<any[]>([]);
-  filteredData$ = this.filteredDataSubject.asObservable();
-
-  updateFilteredData(filteredData: any[]) {
-    this.filteredDataSubject.next(filteredData);
-  }
+      addToDB(line:any):Observable<any>
+      {
+       return this.apiRequest.put(this.editURL,line);
+      }
+      UpdateLineData(id:number, line:any)
+      {
+      // line = {
+      //         headers: new HttpHeaders({
+      //           'Content-Type': 'application/json'
+      //         })
+      //     };
+      let _http = this.updateURL + "/" + id;
+       return this.apiRequest.put(_http,line);
+      }
+getcount(moduleId: number):Observable<any>{
+  return this.apiRequest.get(`get_dashboard/${moduleId}`);
+}
+
+updateDash(dashboardHeader: any): Observable<any> {
+  return this.apiRequest.put('update_dashboard_header', dashboardHeader);
+}
+/////////////////////////////////////////////////////////////////////
+resetConditions() {
+  this.ids = []; // Reset the ids array to an empty array
+  this.numberIds = []; 
+  this.passwordIds = []; 
+  this.textareaIds = []; 
+  this.dateIds = []; 
+  this.datetimeIds = []; 
+  this.emailIds = []; 
+  this.selectIds = [];
+  this.radioIds = []; 
+  this.checkboxIds = []; 
+  this.fileuloadIds = []; 
+  this.urlIds = [];
+  this.decimalIds = []; 
+  this.percentageIds = []; 
+  this.buttonIds = [];
+}
+
+//////////// Text
+ids: any[] = [];
+setCondition(condition: any) {
+  this.ids.push(condition);
+}
+
+getConditions(): any[] {
+  return this.ids;
+}
+
+
+////////// Number
+numberIds: any[] = [];
+setnumber(id: any) {
+  this.numberIds.push(id);
+}
+
+getnumber(): any[] {
+  return this.numberIds;
+}
+////////////// password
+passwordIds: any[] = [];
+setpassword(id: any) {
+  this.passwordIds.push(id);
+}
+
+getpassword(): any[] {
+  return this.passwordIds;
+}
+
+////////////// Textarea
+textareaIds: any[] = [];
+setTextarea(id: any) {
+  this.textareaIds.push(id);
+}
+
+getTextarea(): any[] {
+  return this.textareaIds;
+}
+
+////////////// Date
+dateIds: any[] = [];
+setDate(id: any) {
+  this.dateIds.push(id);
+}
+
+getDate(): any[] {
+  return this.dateIds;
+}
+
+////////////// Datetime
+datetimeIds: any[] = [];
+setDatetime(id: any) {
+  this.datetimeIds.push(id);
+}
+
+getDatetime(): any[] {
+  return this.datetimeIds;
+}
+
+////////////// Email
+emailIds: any[] = [];
+setEmail(id: any) {
+  this.emailIds.push(id);
+}
+
+getEmail(): any[] {
+  return this.emailIds;
+}
+
+////////////// Select
+selectIds: any[] = [];
+setSelect(id: any) {
+  this.selectIds.push(id);
+}
+
+getSelect(): any[] {
+  return this.selectIds;
+}
+
+////////////// Radio
+radioIds: any[] = [];
+setRadio(id: any) {
+  this.radioIds.push(id);
+}
+
+getRadio(): any[] {
+  return this.radioIds;
+}
+
+////////////// Checkbox
+checkboxIds: any[] = [];
+setCheckbox(id: any) {
+  this.checkboxIds.push(id);
+}
+
+getCheckbox(): any[] {
+  return this.checkboxIds;
+}
+
+////////////// fileupload
+fileuloadIds: any[] = [];
+setFileUpload(id: any) {
+  this.fileuloadIds.push(id);
+}
+
+getFileupload(): any[] {
+  return this.fileuloadIds;
+}
+
+////////////// Url
+urlIds: any[] = [];
+setUrl(id: any) {
+  this.urlIds.push(id);
+}
+
+getUrl(): any[] {
+  return this.urlIds;
+}
+////////////// Decimal
+decimalIds: any[] = [];
+setDecimal(id: any) {
+  this.decimalIds.push(id);
+}
+
+getDecimal(): any[] {
+  return this.decimalIds;
+}
+////////////// Percentage
+percentageIds: any[] = [];
+setPercentage(id: any) {
+  this.percentageIds.push(id);
+}
+
+getPercentage(): any[] {
+  return this.percentageIds;
+}
+////////////// Button
+buttonIds: any[] = [];
+setButton(id: any) {
+  this.buttonIds.push(id);
+}
+
+getButton(): any[] {
+  return this.buttonIds;
+}
+
+
+
+
+
+
+
+
+
+getAllDash(): Observable<any> {
+  // create Request URL params
+  return this.apiRequest.get(`get_Dashboard_header`);
+  }
+
+getAllByModuleId(module_id: number,page?: number, size?: number): Observable<any> {
+  // create Request URL params
+  let me = this;
+  let params: HttpParams = new HttpParams();
+  params = params.append("page", typeof page === "number" ? page.toString() : "0");
+  params = params.append("size", typeof size === "number" ? size.toString() : "1000");
+  params = params.append("module_id", module_id.toString());
+  // get all
+  return this.apiRequest.get(this.getAllURL, params);
+  }
+
+///////schedule
+public saveData(data: any): Observable<any> {
+  return this.apiRequest.post(`DashboardSchedule/DashboardSchedule`, data);
+}
+
+public getDetails(): Observable<any> {
+  return this.apiRequest.get(`DashboardSchedule/DashboardSchedule`);
+}
+
+public getDetailsById(id: number): Observable<any> {
+  return this.apiRequest.get(`DashboardSchedule/DashboardSchedule/${id}`);
+}
+
+public deleteById(id: number): Observable<any> {
+  return this.apiRequest.delete(`DashboardSchedule/DashboardSchedule/${id}`);
+}
+
+public updateData(data: any, id: number): Observable<any> {
+  return this.apiRequest.put(`DashboardSchedule/DashboardSchedule/${id}`, data);
+}
+
+////////////////////////////////////////////////////////////////////////////
+
+
+public getDynamicDashDetails(): Observable<any> {
+  return this.apiRequest.get(`Dashboard/Dashboard`);
+}
+
+public getChartData(tableName: string, jobType: string, xAxis?:any,yAxes?:any ): Observable<any> {
+  const url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
+  return this._http.get(url);
+}
+
+public getUrlChartData(tableName: string, jobType: string, xAxis:any,yAxes:any,store:any,chartUrl:any): Observable<any> {
+  const url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&url=${chartUrl}&xAxis=${xAxis}&yAxes=${yAxes}&datastore_name=${store}`;
+  return this._http.get(url);
+}
+
+featchDynamicUrlDetails(url): Observable<any> {
+  return this._http.get(`${url}`);
+}
+
+
+private filteredDataSubject = new BehaviorSubject<any[]>([]);
+filteredData$ = this.filteredDataSubject.asObservable();
+
+updateFilteredData(filteredData: any[]) {
+  this.filteredDataSubject.next(filteredData);
+}
 }
diff --git a/frontend/angular-clarity-master/src/app/services/fnd/alerts.service.ts b/frontend/angular-clarity-master/src/app/services/fnd/alerts.service.ts
index 83f3c14..430879a 100644
--- a/frontend/angular-clarity-master/src/app/services/fnd/alerts.service.ts
+++ b/frontend/angular-clarity-master/src/app/services/fnd/alerts.service.ts
@@ -62,20 +62,7 @@ export class AlertsService {
       return this.apiRequest.get(`AlertRules/columnlist/${id}/${tableName}`);
     }
 
-    public getColumnfromurl(url: any, sureId?: number): Observable<any> {
-      let apiUrl = `chart/getAllKeys?apiUrl=${url}`;
-      if (sureId) {
-        apiUrl += `&sureId=${sureId}`;
-      }
-      return this.apiRequest.get(apiUrl);
+    public getColumnfromurl(url: any): Observable<any> {
+      return this.apiRequest.get(`chart/getAllKeys?apiUrl=${url}`);
     }
-    
-    // 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);
-    }
-}
\ No newline at end of file
+}
diff --git a/frontend/angular-clarity-master/src/app/services/scheduler.service.ts b/frontend/angular-clarity-master/src/app/services/scheduler.service.ts
deleted file mode 100644
index 85e5e44..0000000
--- a/frontend/angular-clarity-master/src/app/services/scheduler.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from "rxjs";
-import { HttpClient } from "@angular/common/http";
-import { ApiRequestService } from "src/app/services/api/api-request.service";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SchedulerService {
-  private baseURL = "scheduler";
-
-  constructor(
-    private http: HttpClient,
-    private apiRequest: ApiRequestService,
-  ) { }
-
-  // Get job by lake ID
-  getJobByLakeId(lakeId: number): Observable<any> {
-    const _http = `${this.baseURL}/lake/${lakeId}`;
-    return this.apiRequest.get(_http);
-  }
-
-  // Create a new job
-  createJob(jobData: any): Observable<any> {
-    const _http = `${this.baseURL}/create`;
-    return this.apiRequest.post(_http, jobData);
-  }
-
-  // Pause a job
-  pauseJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/pause/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Resume a job
-  resumeJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/resume/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Stop a job
-  stopJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/stop/${jobId}`;
-    return this.apiRequest.delete(_http);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/services/theme.service.ts b/frontend/angular-clarity-master/src/app/services/theme.service.ts
deleted file mode 100644
index b045c2e..0000000
--- a/frontend/angular-clarity-master/src/app/services/theme.service.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-export interface ThemeColors {
-  primary: string;
-  secondary: string;
-  accent: string;
-  background: string;
-  surface: string;
-  text: string;
-  textSecondary: string;
-}
-
-export interface Theme {
-  id: string;
-  name: string;
-  colors: ThemeColors;
-  borderRadius: string;
-  shadow: string;
-  fonts: {
-    primary: string;
-    secondary: string;
-    mono: string;
-  };
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ThemeService {
-  private currentThemeSubject = new BehaviorSubject<Theme>(this.getDefaultTheme());
-  public currentTheme$ = this.currentThemeSubject.asObservable();
-
-  private readonly STORAGE_KEY = 'cloudnsure-theme';
-
-  constructor() {
-    this.loadThemeFromStorage();
-  }
-
-  // Default theme
-  private getDefaultTheme(): Theme {
-    return {
-      id: 'default',
-      name: 'Default Blue',
-      colors: {
-        primary: '#0ea5e9',
-        secondary: '#64748b',
-        accent: '#8b5cf6',
-        background: '#f8fafc',
-        surface: '#ffffff',
-        text: '#1f2937',
-        textSecondary: '#6b7280'
-      },
-      borderRadius: '0.5rem',
-      shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-      fonts: {
-        primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-      }
-    };
-  }
-
-  // Predefined themes
-  getThemes(): Theme[] {
-    return [
-      this.getDefaultTheme(),
-      {
-        id: 'purple',
-        name: 'Purple Dream',
-        colors: {
-          primary: '#8b5cf6',
-          secondary: '#64748b',
-          accent: '#ec4899',
-          background: '#faf5ff',
-          surface: '#ffffff',
-          text: '#1f2937',
-          textSecondary: '#6b7280'
-        },
-        borderRadius: '0.75rem',
-        shadow: '0 10px 15px -3px rgba(139, 92, 246, 0.1)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      },
-      {
-        id: 'green',
-        name: 'Forest Green',
-        colors: {
-          primary: '#10b981',
-          secondary: '#64748b',
-          accent: '#f59e0b',
-          background: '#f0fdf4',
-          surface: '#ffffff',
-          text: '#1f2937',
-          textSecondary: '#6b7280'
-        },
-        borderRadius: '0.375rem',
-        shadow: '0 10px 15px -3px rgba(16, 185, 129, 0.1)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      },
-      {
-        id: 'orange',
-        name: 'Sunset Orange',
-        colors: {
-          primary: '#f59e0b',
-          secondary: '#64748b',
-          accent: '#ef4444',
-          background: '#fffbeb',
-          surface: '#ffffff',
-          text: '#1f2937',
-          textSecondary: '#6b7280'
-        },
-        borderRadius: '1rem',
-        shadow: '0 10px 15px -3px rgba(245, 158, 11, 0.1)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      },
-      {
-        id: 'dark',
-        name: 'Dark Mode',
-        colors: {
-          primary: '#3b82f6',
-          secondary: '#9ca3af',
-          accent: '#8b5cf6',
-          background: '#111827',
-          surface: '#1f2937',
-          text: '#f9fafb',
-          textSecondary: '#d1d5db'
-        },
-        borderRadius: '0.5rem',
-        shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.3)',
-        fonts: {
-          primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
-        }
-      }
-    ];
-  }
-
-  // Get current theme
-  getCurrentTheme(): Theme {
-    return this.currentThemeSubject.value;
-  }
-
-  // Apply theme
-  applyTheme(theme: Theme): void {
-    this.currentThemeSubject.next(theme);
-    this.saveThemeToStorage(theme);
-    this.updateCSSVariables(theme);
-  }
-
-  // Select theme by ID
-  selectTheme(themeId: string): void {
-    const theme = this.getThemes().find(t => t.id === themeId);
-    if (theme) {
-      this.applyTheme(theme);
-    }
-  }
-
-  // Update theme colors
-  updateThemeColors(colors: Partial<ThemeColors>): void {
-    const currentTheme = this.getCurrentTheme();
-    const updatedTheme = {
-      ...currentTheme,
-      colors: { ...currentTheme.colors, ...colors }
-    };
-    this.applyTheme(updatedTheme);
-  }
-
-  // Update theme fonts
-  updateThemeFonts(fonts: Partial<Theme['fonts']>): void {
-    const currentTheme = this.getCurrentTheme();
-    const updatedTheme = {
-      ...currentTheme,
-      fonts: { ...currentTheme.fonts, ...fonts }
-    };
-    this.applyTheme(updatedTheme);
-  }
-
-  // Update theme properties
-  updateThemeProperty(property: keyof Theme, value: any): void {
-    const currentTheme = this.getCurrentTheme();
-    const updatedTheme = {
-      ...currentTheme,
-      [property]: value
-    };
-    this.applyTheme(updatedTheme);
-  }
-
-  // Reset to default theme
-  resetToDefault(): void {
-    this.applyTheme(this.getDefaultTheme());
-  }
-
-  // Export theme
-  exportTheme(): string {
-    return JSON.stringify(this.getCurrentTheme(), null, 2);
-  }
-
-  // Import theme
-  importTheme(themeJson: string): boolean {
-    try {
-      const theme = JSON.parse(themeJson) as Theme;
-      if (this.validateTheme(theme)) {
-        this.applyTheme(theme);
-        return true;
-      }
-      return false;
-    } catch (error) {
-      console.error('Invalid theme JSON:', error);
-      return false;
-    }
-  }
-
-  // Validate theme structure
-  private validateTheme(theme: any): theme is Theme {
-    return (
-      theme &&
-      typeof theme.id === 'string' &&
-      typeof theme.name === 'string' &&
-      theme.colors &&
-      typeof theme.colors.primary === 'string' &&
-      typeof theme.colors.secondary === 'string' &&
-      typeof theme.colors.accent === 'string' &&
-      typeof theme.colors.background === 'string' &&
-      typeof theme.colors.surface === 'string' &&
-      typeof theme.colors.text === 'string' &&
-      typeof theme.colors.textSecondary === 'string'
-    );
-  }
-
-  // Update CSS custom properties
-  private updateCSSVariables(theme: Theme): void {
-    const root = document.documentElement;
-    
-    // Update color variables
-    root.style.setProperty('--theme-primary', theme.colors.primary);
-    root.style.setProperty('--theme-secondary', theme.colors.secondary);
-    root.style.setProperty('--theme-accent', theme.colors.accent);
-    root.style.setProperty('--theme-background', theme.colors.background);
-    root.style.setProperty('--theme-surface', theme.colors.surface);
-    root.style.setProperty('--theme-text', theme.colors.text);
-    root.style.setProperty('--theme-text-secondary', theme.colors.textSecondary);
-    
-    // Update other properties
-    root.style.setProperty('--theme-border-radius', theme.borderRadius);
-    root.style.setProperty('--theme-shadow', theme.shadow);
-    root.style.setProperty('--theme-font-primary', theme.fonts.primary);
-    root.style.setProperty('--theme-font-secondary', theme.fonts.secondary);
-    root.style.setProperty('--theme-font-mono', theme.fonts.mono);
-
-    // Update body class for theme-specific styling
-    document.body.className = document.body.className.replace(/theme-\w+/g, '');
-    document.body.classList.add(`theme-${theme.id}`);
-  }
-
-  // Load theme from localStorage
-  private loadThemeFromStorage(): void {
-    try {
-      const stored = localStorage.getItem(this.STORAGE_KEY);
-      if (stored) {
-        const theme = JSON.parse(stored) as Theme;
-        if (this.validateTheme(theme)) {
-          this.currentThemeSubject.next(theme);
-          this.updateCSSVariables(theme);
-        }
-      } else {
-        // Apply default theme on first load
-        this.updateCSSVariables(this.getDefaultTheme());
-      }
-    } catch (error) {
-      console.error('Error loading theme from storage:', error);
-      this.updateCSSVariables(this.getDefaultTheme());
-    }
-  }
-
-  // Save theme to localStorage
-  private saveThemeToStorage(theme: Theme): void {
-    try {
-      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(theme));
-    } catch (error) {
-      console.error('Error saving theme to storage:', error);
-    }
-  }
-
-  // Get color presets for color picker
-  getColorPresets(): { name: string; value: string }[] {
-    return [
-      { name: 'Blue', value: '#0ea5e9' },
-      { name: 'Purple', value: '#8b5cf6' },
-      { name: 'Green', value: '#10b981' },
-      { name: 'Orange', value: '#f59e0b' },
-      { name: 'Red', value: '#ef4444' },
-      { name: 'Pink', value: '#ec4899' },
-      { name: 'Indigo', value: '#6366f1' },
-      { name: 'Teal', value: '#14b8a6' },
-      { name: 'Yellow', value: '#eab308' },
-      { name: 'Gray', value: '#64748b' }
-    ];
-  }
-
-  // Get font options
-  getFontOptions(): { name: string; value: string }[] {
-    return [
-      { name: 'Inter', value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Poppins', value: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Roboto', value: 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' },
-      { name: 'Open Sans', value: '"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Lato', value: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Montserrat', value: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Source Sans Pro', value: '"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-      { name: 'Nunito', value: 'Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }
-    ];
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/dynamic-form/dynamic-form.component.ts b/frontend/angular-clarity-master/src/app/shared/components/dynamic-form/dynamic-form.component.ts
deleted file mode 100644
index ee68c75..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/dynamic-form/dynamic-form.component.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
-import { FieldConfig } from '../field-types/base-field.component';
-import { FieldFactoryService } from '../field-types/field-factory.service';
-
-@Component({
-  selector: 'app-dynamic-form',
-  template: `
-    <form [class]="formClass" (ngSubmit)="onSubmit()">
-      <div class="clr-row">
-        <div 
-          *ngFor="let field of fields" 
-          [class]="'clr-col-' + (field.colSpan || 12) + ' clr-col-sm-12'"
-        >
-          <ng-container #fieldContainer></ng-container>
-        </div>
-      </div>
-      
-      <div class="sq-form-actions" *ngIf="showActions">
-        <button 
-          type="button" 
-          class="sq-btn sq-btn-outline" 
-          (click)="onCancel()"
-          [disabled]="isSubmitting"
-        >
-          <clr-icon shape="times"></clr-icon>
-          <span>{{ cancelText }}</span>
-        </button>
-        <button 
-          type="submit" 
-          class="sq-btn sq-btn-primary" 
-          [disabled]="isSubmitting"
-        >
-          <clr-icon [attr.shape]="submitIcon"></clr-icon>
-          <span>{{ submitText }}</span>
-        </button>
-      </div>
-    </form>
-  `
-})
-export class DynamicFormComponent {
-  @Input() fields: FieldConfig[] = [];
-  @Input() formData: any = {};
-  @Input() formClass: string = 'sq-form';
-  @Input() showActions: boolean = true;
-  @Input() submitText: string = 'Submit';
-  @Input() cancelText: string = 'Cancel';
-  @Input() submitIcon: string = 'check';
-  
-  @Output() formSubmit = new EventEmitter<any>();
-  @Output() formCancel = new EventEmitter<void>();
-  
-  @ViewChild('fieldContainer', { read: ViewContainerRef }) fieldContainer: ViewContainerRef;
-  
-  isSubmitting = false;
-  
-  constructor(
-    private fieldFactory: FieldFactoryService,
-    private componentFactoryResolver: ComponentFactoryResolver
-  ) {}
-  
-  ngAfterViewInit() {
-    this.renderFields();
-  }
-  
-  renderFields() {
-    this.fieldContainer.clear();
-    
-    this.fields.forEach(field => {
-      this.fieldFactory.createField(
-        this.fieldContainer,
-        field.type,
-        field,
-        this.formData[field.name],
-        (value) => {
-          this.formData[field.name] = value;
-        }
-      );
-    });
-  }
-  
-  onSubmit() {
-    this.isSubmitting = true;
-    this.formSubmit.emit(this.formData);
-  }
-  
-  onCancel() {
-    this.formCancel.emit();
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/base-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/base-field.component.ts
deleted file mode 100644
index c0ca5fc..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/base-field.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-export interface FieldConfig {
-  name: string;
-  label: string;
-  type: string;
-  required?: boolean;
-  placeholder?: string;
-  validators?: any[];
-  options?: any[];
-  [key: string]: any; // For additional properties
-}
-
-@Component({
-  template: ''
-})
-export class BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: any;
-  @Output() valueChange = new EventEmitter<any>();
-  
-  onChange(value: any) {
-    this.valueChange.emit(value);
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-factory.service.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-factory.service.ts
deleted file mode 100644
index 4cd8b23..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-factory.service.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
-import { TextFieldComponent } from './text-field.component';
-import { NumberFieldComponent } from './number-field.component';
-import { PhoneFieldComponent } from './phone-field.component';
-import { ParagraphFieldComponent } from './paragraph-field.component';
-import { PasswordFieldComponent } from './password-field.component';
-import { TextareaFieldComponent } from './textarea-field.component';
-import { BaseFieldComponent } from './base-field.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class FieldFactoryService {
-  private componentMap: any = {
-    'text': TextFieldComponent,
-    'number': NumberFieldComponent,
-    'phone': PhoneFieldComponent,
-    'paragraph': ParagraphFieldComponent,
-    'password': PasswordFieldComponent,
-    'textarea': TextareaFieldComponent
-  };
-
-  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
-
-  createField(
-    container: ViewContainerRef,
-    fieldType: string,
-    fieldConfig: any,
-    value: any,
-    valueChangeCallback: (value: any) => void
-  ): any {
-    const component = this.componentMap[fieldType];
-    if (!component) {
-      throw new Error(`Unsupported field type: ${fieldType}`);
-    }
-
-    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
-    const componentRef = container.createComponent(factory);
-    
-    // Cast to BaseFieldComponent to access properties safely
-    const instance = componentRef.instance as BaseFieldComponent;
-    (instance as any).field = fieldConfig;
-    (instance as any).value = value;
-    
-    // Subscribe to value changes
-    if ((instance as any).valueChange && typeof (instance as any).valueChange.subscribe === 'function') {
-      (instance as any).valueChange.subscribe(valueChangeCallback);
-    }
-    
-    return componentRef;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.module.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.module.ts
deleted file mode 100644
index a3138f5..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.module.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ClarityModule } from '@clr/angular';
-
-import { BaseFieldComponent } from './base-field.component';
-import { TextFieldComponent } from './text-field.component';
-import { NumberFieldComponent } from './number-field.component';
-import { PhoneFieldComponent } from './phone-field.component';
-import { ParagraphFieldComponent } from './paragraph-field.component';
-import { PasswordFieldComponent } from './password-field.component';
-import { TextareaFieldComponent } from './textarea-field.component';
-import { DynamicFormComponent } from '../dynamic-form/dynamic-form.component';
-
-@NgModule({
-  declarations: [
-    BaseFieldComponent,
-    TextFieldComponent,
-    NumberFieldComponent,
-    PhoneFieldComponent,
-    ParagraphFieldComponent,
-    PasswordFieldComponent,
-    TextareaFieldComponent,
-    DynamicFormComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ClarityModule
-  ],
-  exports: [
-    BaseFieldComponent,
-    TextFieldComponent,
-    NumberFieldComponent,
-    PhoneFieldComponent,
-    ParagraphFieldComponent,
-    PasswordFieldComponent,
-    TextareaFieldComponent,
-    DynamicFormComponent
-  ],
-  providers: []
-})
-export class FieldTypesModule { }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.scss b/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.scss
deleted file mode 100644
index 4173f73..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/field-types.scss
+++ /dev/null
@@ -1,364 +0,0 @@
-// Shared field styles with modern UI enhancements following UI rules
-.field-container {
-  margin-bottom: 24px;
-  position: relative;
-  animation: fadeInUp 0.3s ease-out;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.sq-form-label {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--theme-text);
-  margin-bottom: 8px;
-  font-family: var(--theme-font-primary);
-  letter-spacing: 0.02em;
-  
-  .label-text {
-    flex: 1;
-  }
-  
-  .required-indicator {
-    color: var(--theme-error, #ef4444);
-    margin-left: 6px;
-    font-size: 16px;
-    line-height: 1;
-  }
-}
-
-.sq-form-input,
-.sq-form-textarea {
-  width: 100%;
-  padding: 14px 16px;
-  font-size: 15px;
-  line-height: 1.5;
-  color: var(--theme-text);
-  background: var(--theme-surface);
-  border: 2px solid rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  margin-bottom: 0;
-  font-family: var(--theme-font-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  backdrop-filter: blur(10px);
-  
-  &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
-    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
-    background: var(--theme-surface);
-    transform: translateY(-2px);
-  }
-
-  &:disabled {
-    background: var(--theme-background);
-    color: var(--theme-text-secondary);
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-
-  &.error {
-    border-color: var(--theme-error, #ef4444);
-    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
-    animation: shake 0.5s ease-in-out;
-  }
-
-  &::placeholder {
-    color: var(--theme-text-secondary);
-    font-style: italic;
-    opacity: 0.7;
-  }
-  
-  &:hover:not(:disabled):not(:focus) {
-    border-color: rgba(0, 0, 0, 0.15);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-    transform: translateY(-1px);
-  }
-}
-
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-5px); }
-  75% { transform: translateX(5px); }
-}
-
-.sq-form-textarea {
-  min-height: 120px;
-  resize: vertical;
-  border-radius: 12px;
-}
-
-.field-description {
-  color: var(--theme-text-secondary);
-  font-size: 13px;
-  margin-top: 8px;
-  font-style: italic;
-  line-height: 1.4;
-  display: flex;
-  align-items: flex-start;
-  
-  &::before {
-    content: "ℹ";
-    margin-right: 6px;
-    font-size: 12px;
-  }
-}
-
-.sq-error-message {
-  color: var(--theme-error, #ef4444);
-  font-size: 13px;
-  margin-top: 8px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  background: rgba(239, 68, 68, 0.05);
-  border-radius: 8px;
-  border-left: 3px solid var(--theme-error, #ef4444);
-  
-  &::before {
-    content: "⚠";
-    margin-right: 8px;
-    font-size: 16px;
-  }
-}
-
-// Phone field specific styles
-.phone-input-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  
-  .phone-input {
-    flex: 1;
-    border-radius: 12px;
-    padding-left: 100px;
-  }
-  
-  .country-code-selector {
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    bottom: 2px;
-    display: flex;
-    align-items: center;
-    padding: 0 12px;
-    background: var(--theme-background);
-    border-radius: 10px 0 0 10px;
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    z-index: 1;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    
-    &:hover {
-      background: var(--theme-surface);
-    }
-    
-    .country-flag {
-      margin-right: 8px;
-      font-size: 18px;
-    }
-    
-    .country-code {
-      font-weight: 500;
-      color: var(--theme-text);
-    }
-    
-    .dropdown-icon {
-      margin-left: 6px;
-      transition: transform 0.2s ease;
-    }
-  }
-  
-  .country-code-btn {
-    margin-left: 8px;
-    min-width: 80px;
-    border-radius: 12px;
-  }
-}
-
-// Password field specific styles with modern enhancements
-.password-input-container {
-  position: relative;
-  display: flex;
-  
-  .password-input {
-    flex: 1;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: none;
-  }
-  
-  .password-toggle {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: none;
-    height: 48px;
-    background: var(--theme-background);
-    border: 2px solid rgba(0, 0, 0, 0.08);
-    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--theme-text-secondary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 16px;
-    cursor: pointer;
-    
-    &:hover {
-      background: var(--theme-surface);
-      color: var(--theme-text);
-    }
-    
-    &:focus {
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
-      outline: none;
-    }
-    
-    clr-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-}
-
-.password-strength {
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-  padding: 12px;
-  background: var(--theme-background);
-  border-radius: 12px;
-  transition: all 0.3s ease;
-  
-  &.weak {
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.2);
-  }
-  
-  &.medium {
-    background: rgba(245, 158, 11, 0.1);
-    border: 1px solid rgba(245, 158, 11, 0.2);
-  }
-  
-  &.strong {
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.2);
-  }
-  
-  .strength-meter {
-    flex: 1;
-    height: 10px;
-    background-color: #e5e7eb;
-    border-radius: 5px;
-    overflow: hidden;
-    margin-right: 16px;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    
-    .strength-bar {
-      height: 100%;
-      border-radius: 5px;
-      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-      
-      &.weak {
-        background: linear-gradient(90deg, #ef4444 0%, #ef4444 100%);
-        width: 33%;
-      }
-      
-      &.medium {
-        background: linear-gradient(90deg, #ef4444 0%, #f59e0b 100%);
-        width: 66%;
-      }
-      
-      &.strong {
-        background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
-        width: 100%;
-      }
-    }
-  }
-  
-  .strength-label {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--theme-text-secondary);
-    min-width: 100px;
-    text-align: right;
-    
-    &.weak {
-      color: #ef4444;
-    }
-    
-    &.medium {
-      color: #f59e0b;
-    }
-    
-    &.strong {
-      color: #10b981;
-    }
-  }
-}
-
-// Character count for text areas with modern styling
-.character-count {
-  text-align: right;
-  font-size: 13px;
-  color: var(--theme-text-secondary);
-  margin-top: 8px;
-  font-weight: 500;
-  padding: 6px 12px;
-  background: var(--theme-background);
-  border-radius: 20px;
-  display: inline-block;
-  float: right;
-  transition: all 0.2s ease;
-  
-  &.warning {
-    color: #f59e0b;
-    background: rgba(245, 158, 11, 0.1);
-  }
-  
-  &.error {
-    color: #ef4444;
-    background: rgba(239, 68, 68, 0.1);
-  }
-}
-
-// Enhanced input group for better visual hierarchy
-.input-group {
-  position: relative;
-  margin-bottom: 24px;
-  
-  .input-group-prepend,
-  .input-group-append {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-    color: var(--theme-text-secondary);
-    padding: 0 12px;
-  }
-  
-  .input-group-prepend {
-    left: 12px;
-  }
-  
-  .input-group-append {
-    right: 12px;
-  }
-  
-  .input-with-addon {
-    padding-left: 40px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/index.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/index.ts
deleted file mode 100644
index c1ec2f7..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './base-field.component';
-export * from './text-field.component';
-export * from './number-field.component';
-export * from './phone-field.component';
-export * from './paragraph-field.component';
-export * from './password-field.component';
-export * from './textarea-field.component';
-export * from './field-factory.service';
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/number-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/number-field.component.ts
deleted file mode 100644
index 918e10c..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/number-field.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-number-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <input 
-        [id]="field.name"
-        type="number"
-        class="sq-form-input"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [min]="field.min"
-        [max]="field.max"
-        [step]="field.step || 1"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      />
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class NumberFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: number;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/paragraph-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/paragraph-field.component.ts
deleted file mode 100644
index 6c1b157..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/paragraph-field.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-paragraph-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <textarea
-        [id]="field.name"
-        class="sq-form-textarea"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [rows]="field.rows || 4"
-        [cols]="field.cols || 50"
-        [attr.maxlength]="field.maxLength"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      ></textarea>
-      <div class="character-count" *ngIf="field.showCharacterCount && field.maxLength" [ngClass]="{
-        'warning': value?.length > field.maxLength * 0.8,
-        'error': value?.length >= field.maxLength
-      }">
-        {{ value?.length || 0 }}/{{ field.maxLength }}
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class ParagraphFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-}     
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/password-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/password-field.component.ts
deleted file mode 100644
index b39671f..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/password-field.component.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-password-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <div class="password-input-container">
-        <input
-          [id]="field.name"
-          [type]="isPasswordVisible ? 'text' : 'password'"
-          class="sq-form-input password-input"
-          [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-          [value]="value"
-          (input)="onChange($event.target.value)"
-          [required]="field.required"
-          [attr.minlength]="field.minLength"
-          [attr.maxlength]="field.maxLength"
-          [readonly]="field.readonly"
-          [disabled]="field.disabled"
-        />
-        <button 
-          type="button"
-          class="password-toggle"
-          (click)="togglePasswordVisibility()"
-          [attr.aria-label]="isPasswordVisible ? 'Hide password' : 'Show password'"
-          [title]="isPasswordVisible ? 'Hide password' : 'Show password'"
-        >
-          <clr-icon [attr.shape]="isPasswordVisible ? 'eye-hide' : 'eye'"></clr-icon>
-        </button>
-      </div>
-      <div class="password-strength" *ngIf="field.showStrengthIndicator && value" [ngClass]="getPasswordStrengthClass()">
-        <div class="strength-meter">
-          <div class="strength-bar" [ngClass]="getPasswordStrengthClass()"></div>
-        </div>
-        <span class="strength-label" [ngClass]="getPasswordStrengthClass()">{{ passwordStrengthLabel }}</span>
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class PasswordFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-  
-  isPasswordVisible = false;
-  
-  get passwordStrength(): number {
-    if (!this.value) return 0;
-    
-    let strength = 0;
-    if (this.value.length >= 8) strength += 25;
-    if (/[A-Z]/.test(this.value)) strength += 25;
-    if (/[0-9]/.test(this.value)) strength += 25;
-    if (/[^A-Za-z0-9]/.test(this.value)) strength += 25;
-    
-    return strength;
-  }
-  
-  get passwordStrengthLabel(): string {
-    const strength = this.passwordStrength;
-    if (strength < 25) return 'Very Weak';
-    if (strength < 50) return 'Weak';
-    if (strength < 75) return 'Medium';
-    if (strength < 100) return 'Strong';
-    return 'Very Strong';
-  }
-  
-  getPasswordStrengthClass(): string {
-    const strength = this.passwordStrength;
-    if (strength < 25) return 'weak';
-    if (strength < 50) return 'weak';
-    if (strength < 75) return 'medium';
-    return 'strong';
-  }
-  
-  togglePasswordVisibility() {
-    this.isPasswordVisible = !this.isPasswordVisible;
-  }
-}  
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/phone-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/phone-field.component.ts
deleted file mode 100644
index 6483976..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/phone-field.component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-phone-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <div class="phone-input-container">
-        <div class="country-code-selector" (click)="toggleCountryCodeSelector()" *ngIf="field.showCountryCodeSelector">
-          <span class="country-flag">🇺🇸</span>
-          <span class="country-code">{{ selectedCountryCode }}</span>
-          <span class="dropdown-icon">▼</span>
-        </div>
-        <input 
-          [id]="field.name"
-          type="tel"
-          class="sq-form-input phone-input"
-          [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-          [value]="value"
-          (input)="onPhoneChange($event.target.value)"
-          [required]="field.required"
-          [pattern]="field.pattern || '.*'"
-          [readonly]="field.readonly"
-          [disabled]="field.disabled"
-        />
-        <button 
-          *ngIf="field.showCountryCodeSelector" 
-          class="sq-btn sq-btn-outline sq-btn-sm country-code-btn"
-          type="button"
-          (click)="toggleCountryCodeSelector()"
-        >
-          {{ selectedCountryCode }}
-        </button>
-      </div>
-      <div *ngIf="errorMessage" class="sq-error-message">
-        {{ errorMessage }}
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-    </div>
-  `
-})
-export class PhoneFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-  
-  selectedCountryCode = '+91';
-  errorMessage = '';
-  
-  onPhoneChange(value: string) {
-    // Validate phone number format
-    if (this.field.pattern) {
-      const regex = new RegExp(this.field.pattern);
-      if (!regex.test(value)) {
-        this.errorMessage = this.field.errorMessage || 'Please enter a valid phone number';
-      } else {
-        this.errorMessage = '';
-      }
-    }
-    this.onChange(value);
-  }
-  
-  toggleCountryCodeSelector() {
-    // Implementation for country code selector
-    // This would typically open a modal or dropdown
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/text-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/text-field.component.ts
deleted file mode 100644
index e45be34..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/text-field.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-text-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <input 
-        [id]="field.name"
-        type="text"
-        class="sq-form-input"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [attr.maxlength]="field.maxLength"
-        [attr.minlength]="field.minLength"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      />
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div class="character-count" *ngIf="field.showCharacterCount && value" [ngClass]="{
-        'warning': field.maxLength && value?.length > field.maxLength * 0.8,
-        'error': field.maxLength && value?.length >= field.maxLength
-      }">
-        {{ value?.length || 0 }}{{ field.maxLength ? '/' + field.maxLength : '' }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class TextFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/components/field-types/textarea-field.component.ts b/frontend/angular-clarity-master/src/app/shared/components/field-types/textarea-field.component.ts
deleted file mode 100644
index b51e29a..0000000
--- a/frontend/angular-clarity-master/src/app/shared/components/field-types/textarea-field.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { BaseFieldComponent, FieldConfig } from './base-field.component';
-
-@Component({
-  selector: 'app-textarea-field',
-  template: `
-    <div class="field-container">
-      <label [for]="field.name" class="sq-form-label">
-        <span class="label-text">{{ field.label }}</span>
-        <span *ngIf="field.required" class="required-indicator">*</span>
-      </label>
-      <textarea
-        [id]="field.name"
-        class="sq-form-textarea"
-        [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
-        [value]="value"
-        (input)="onChange($event.target.value)"
-        [required]="field.required"
-        [rows]="field.rows || 4"
-        [cols]="field.cols || 50"
-        [attr.maxlength]="field.maxLength"
-        [readonly]="field.readonly"
-        [disabled]="field.disabled"
-      ></textarea>
-      <div class="character-count" *ngIf="field.showCharacterCount && field.maxLength" [ngClass]="{
-        'warning': value?.length > field.maxLength * 0.8,
-        'error': value?.length >= field.maxLength
-      }">
-        {{ value?.length || 0 }}/{{ field.maxLength }}
-      </div>
-      <div *ngIf="field.description" class="field-description">
-        {{ field.description }}
-      </div>
-      <div *ngIf="field.errorMessage" class="sq-error-message">
-        {{ field.errorMessage }}
-      </div>
-    </div>
-  `
-})
-export class TextareaFieldComponent extends BaseFieldComponent {
-  @Input() field: FieldConfig;
-  @Input() value: string;
-}    
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/shared/shared.module.ts b/frontend/angular-clarity-master/src/app/shared/shared.module.ts
deleted file mode 100644
index ae35a71..0000000
--- a/frontend/angular-clarity-master/src/app/shared/shared.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FieldTypesModule } from './components/field-types/field-types.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FieldTypesModule
-  ],
-  exports: [
-    FieldTypesModule
-  ]
-})
-export class SharedModule { }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/assets/i18n/en.json b/frontend/angular-clarity-master/src/assets/i18n/en.json
index 21e94ba..0b299c4 100644
--- a/frontend/angular-clarity-master/src/assets/i18n/en.json
+++ b/frontend/angular-clarity-master/src/assets/i18n/en.json
@@ -343,7 +343,6 @@
   "Email_Field2": "Email_Field2",
   "Static": "Static",
   "District": "District",
-  "Ad10": "Ad10",
   "about_yourself": "about_yourself",
   "datagrid_Field2": "datagrid_Field2",
   "Toggle_Switch2": "Toggle_Switch2",
@@ -372,9 +371,5 @@
   "select_Field2": "select_Field2",
   "Password_Field": "Password_Field",
   "age": "age",
-  "Button_Field": "Button_Field",
-  "API_REGISTERY": "API Registry",
-  "API_REGISTERY_DESCRIPTION": "API Registry Description",
-  "TOKEN_REGISTERY": "Token Registry",
-  "TOKEN_REGISTERY_DESCRIPTION": "Token Registry Description"
+  "Button_Field": "Button_Field"
 }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/assets/i18n/hi.json b/frontend/angular-clarity-master/src/assets/i18n/hi.json
index eecc5d3..8f6d890 100644
--- a/frontend/angular-clarity-master/src/assets/i18n/hi.json
+++ b/frontend/angular-clarity-master/src/assets/i18n/hi.json
@@ -105,8 +105,6 @@
   "REPORT_DESCRIPTION": "रिपोर्ट विवरण",
   "API_REGISTERY": "एपीआई रजिस्ट्री",
   "API_REGISTERY_DESCRIPTION": "एपीआई रजिस्ट्री विवरण",
-  "TOKEN_REGISTERY": "टोकन रजिस्ट्री",
-  "TOKEN_REGISTERY_DESCRIPTION": "टोकन रजिस्ट्री विवरण",
   "ACTIVE": "सक्रिय",
   "FOLDER_NAME": "फ़ोल्डर नाम",
   "ACTION": "क्रिया",
diff --git a/frontend/angular-clarity-master/src/styles.scss b/frontend/angular-clarity-master/src/styles.scss
index 9152056..5428d3e 100644
--- a/frontend/angular-clarity-master/src/styles.scss
+++ b/frontend/angular-clarity-master/src/styles.scss
@@ -1,19 +1,7 @@
 @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 @import '~@clr/icons/clr-icons.min.css';
 
-// Modern Design System Imports
-@import './styles/design-tokens';
-@import './styles/theme-variables';
-@import './styles/base';
-@import './styles/components';
-@import './styles/animations';
-
-// Google Fonts - Modern Typography
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
-
-/* Legacy font set ==================== */
+/* font set ==================== */
 @import url(https://fonts.googleapis.com/css?family=Athiti|Bai+Jamjuree|Chakra+Petch|Charmonman|Chonburi|Fahkwang|Itim|K2D|Kanit|KoHo|Kodchasan|Krub|Maitree|Mali|Mitr|Niramit|Pattaya|Pridi|Prompt|Sriracha|Srisakdi|Taviraj|Trirong);
 
 .font-athiti { font-family: 'Athiti', sans-serif; }
@@ -208,78 +196,3 @@ margin-right: 0;
 .float-right {
   float: right !important;
 }
-
-// Global styles for enhanced components
-.btn {
-  @extend .modern-btn;
-}
-
-.modal-dialog {
-  @extend .modern-modal;
-  
-  .modal-header {
-    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-    color: $white;
-    border-radius: $radius-2xl $radius-2xl 0 0;
-    
-    .modal-title {
-      color: $white;
-      font-weight: $font-bold;
-    }
-    
-    .close {
-      color: $white;
-      opacity: 0.8;
-      
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-  
-  .modal-body {
-    padding: $space-6;
-  }
-  
-  .modal-footer {
-    padding: $space-5 $space-6;
-    background: $gray-50;
-    border-radius: 0 0 $radius-2xl $radius-2xl;
-  }
-}
-
-.datagrid {
-  @extend .modern-table;
-}
-
-.badge {
-  @extend .modern-badge;
-}
-
-.alert {
-  @extend .modern-alert;
-}
-
-.spinner {
-  @extend .modern-spinner;
-}
-
-.skeleton {
-  @extend .modern-skeleton;
-}
-
-.form-group {
-  @extend .modern-form-group;
-  
-  .form-label {
-    @extend .form-label;
-  }
-  
-  .form-input, .form-select {
-    @extend .form-input;
-  }
-  
-  .form-error {
-    @extend .form-error;
-  }
-}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/styles/_animations.scss b/frontend/angular-clarity-master/src/styles/_animations.scss
deleted file mode 100644
index 2471c2e..0000000
--- a/frontend/angular-clarity-master/src/styles/_animations.scss
+++ /dev/null
@@ -1,602 +0,0 @@
-// ========================================
-// ANIMATIONS - Smooth & Modern Transitions
-// ========================================
-
-@import './design-tokens';
-
-// Fade Animations
-// ========================================
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes fadeInRight {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-// Scale Animations
-// ========================================
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes scaleOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-}
-
-@keyframes scaleUp {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(1.05);
-  }
-}
-
-@keyframes scaleDown {
-  from {
-    transform: scale(1.05);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-// Slide Animations
-// ========================================
-
-@keyframes slideInUp {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInDown {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideOutUp {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes slideOutDown {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-// Rotation Animations
-// ========================================
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spinReverse {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes bounce {
-  0%, 20%, 53%, 80%, 100% {
-    transform: translate3d(0, 0, 0);
-  }
-  40%, 43% {
-    transform: translate3d(0, -8px, 0);
-  }
-  70% {
-    transform: translate3d(0, -4px, 0);
-  }
-  90% {
-    transform: translate3d(0, -2px, 0);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-2px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(2px);
-  }
-}
-
-@keyframes wiggle {
-  0%, 7% {
-    transform: rotateZ(0);
-  }
-  15% {
-    transform: rotateZ(-15deg);
-  }
-  20% {
-    transform: rotateZ(10deg);
-  }
-  25% {
-    transform: rotateZ(-10deg);
-  }
-  30% {
-    transform: rotateZ(6deg);
-  }
-  35% {
-    transform: rotateZ(-4deg);
-  }
-  40%, 100% {
-    transform: rotateZ(0);
-  }
-}
-
-// Loading Animations
-// ========================================
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-@keyframes shimmer2 {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes dots {
-  0%, 20% {
-    color: transparent;
-    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
-  }
-  40% {
-    color: currentColor;
-    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
-  }
-  60% {
-    text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 transparent;
-  }
-  80%, 100% {
-    text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 currentColor;
-  }
-}
-
-@keyframes wave {
-  0%, 60%, 100% {
-    transform: initial;
-  }
-  30% {
-    transform: translateY(-15px);
-  }
-}
-
-// Hover Animations
-// ========================================
-
-@keyframes float {
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
-
-@keyframes glow {
-  0% {
-    box-shadow: 0 0 5px rgba($primary-500, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba($primary-500, 0.8), 0 0 30px rgba($primary-500, 0.6);
-  }
-  100% {
-    box-shadow: 0 0 5px rgba($primary-500, 0.5);
-  }
-}
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-// Animation Classes
-// ========================================
-
-// Fade Classes
-.animate-fade-in {
-  animation: fadeIn $duration-300 $ease-out;
-}
-
-.animate-fade-out {
-  animation: fadeOut $duration-300 $ease-out;
-}
-
-.animate-fade-in-up {
-  animation: fadeInUp $duration-500 $ease-out;
-}
-
-.animate-fade-in-down {
-  animation: fadeInDown $duration-500 $ease-out;
-}
-
-.animate-fade-in-left {
-  animation: fadeInLeft $duration-500 $ease-out;
-}
-
-.animate-fade-in-right {
-  animation: fadeInRight $duration-500 $ease-out;
-}
-
-// Scale Classes
-.animate-scale-in {
-  animation: scaleIn $duration-300 $ease-out;
-}
-
-.animate-scale-out {
-  animation: scaleOut $duration-300 $ease-out;
-}
-
-.animate-scale-up {
-  animation: scaleUp $duration-200 $ease-out;
-}
-
-.animate-scale-down {
-  animation: scaleDown $duration-200 $ease-out;
-}
-
-// Slide Classes
-.animate-slide-in-up {
-  animation: slideInUp $duration-500 $ease-out;
-}
-
-.animate-slide-in-down {
-  animation: slideInDown $duration-500 $ease-out;
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft $duration-500 $ease-out;
-}
-
-.animate-slide-in-right {
-  animation: slideInRight $duration-500 $ease-out;
-}
-
-.animate-slide-out-up {
-  animation: slideOutUp $duration-300 $ease-out;
-}
-
-.animate-slide-out-down {
-  animation: slideOutDown $duration-300 $ease-out;
-}
-
-.animate-slide-out-left {
-  animation: slideOutLeft $duration-300 $ease-out;
-}
-
-.animate-slide-out-right {
-  animation: slideOutRight $duration-300 $ease-out;
-}
-
-// Rotation Classes
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.animate-spin-reverse {
-  animation: spinReverse 1s linear infinite;
-}
-
-.animate-bounce {
-  animation: bounce 1s infinite;
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.animate-shake {
-  animation: shake 0.5s ease-in-out;
-}
-
-.animate-wiggle {
-  animation: wiggle 1s ease-in-out;
-}
-
-// Loading Classes
-.animate-shimmer {
-  animation: shimmer 1.5s infinite;
-}
-
-.animate-shimmer2 {
-  animation: shimmer2 1.5s infinite;
-}
-
-.animate-dots {
-  animation: dots 1.4s infinite;
-}
-
-.animate-wave {
-  animation: wave 1.4s infinite;
-}
-
-// Hover Classes
-.animate-float {
-  animation: float 3s ease-in-out infinite;
-}
-
-.animate-glow {
-  animation: glow 2s ease-in-out infinite;
-}
-
-.animate-ripple {
-  animation: ripple 0.6s linear;
-}
-
-// Transition Classes
-// ========================================
-
-.transition-all {
-  transition: all $duration-300 $ease-out;
-}
-
-.transition-colors {
-  transition: color $duration-200 $ease-out, background-color $duration-200 $ease-out, border-color $duration-200 $ease-out;
-}
-
-.transition-opacity {
-  transition: opacity $duration-200 $ease-out;
-}
-
-.transition-transform {
-  transition: transform $duration-200 $ease-out;
-}
-
-.transition-shadow {
-  transition: box-shadow $duration-200 $ease-out;
-}
-
-// Hover Effects
-// ========================================
-
-.hover-lift {
-  transition: transform $duration-200 $ease-out, box-shadow $duration-200 $ease-out;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: $shadow-lg;
-  }
-}
-
-.hover-glow {
-  transition: box-shadow $duration-200 $ease-out;
-
-  &:hover {
-    box-shadow: 0 0 20px rgba($primary-500, 0.3);
-  }
-}
-
-.hover-scale {
-  transition: transform $duration-200 $ease-out;
-
-  &:hover {
-    transform: scale(1.05);
-  }
-}
-
-.hover-rotate {
-  transition: transform $duration-200 $ease-out;
-
-  &:hover {
-    transform: rotate(5deg);
-  }
-}
-
-.hover-bounce {
-  transition: transform $duration-200 $ease-bounce;
-
-  &:hover {
-    transform: translateY(-4px);
-  }
-}
-
-// Staggered Animations
-// ========================================
-
-.stagger-1 { animation-delay: 0.1s; }
-.stagger-2 { animation-delay: 0.2s; }
-.stagger-3 { animation-delay: 0.3s; }
-.stagger-4 { animation-delay: 0.4s; }
-.stagger-5 { animation-delay: 0.5s; }
-.stagger-6 { animation-delay: 0.6s; }
-.stagger-7 { animation-delay: 0.7s; }
-.stagger-8 { animation-delay: 0.8s; }
-
-// Animation States
-// ========================================
-
-.animation-paused {
-  animation-play-state: paused;
-}
-
-.animation-running {
-  animation-play-state: running;
-}
-
-// Reduced Motion Support
-// ========================================
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-
-  .animate-spin,
-  .animate-pulse,
-  .animate-bounce,
-  .animate-float,
-  .animate-glow {
-    animation: none;
-  }
-}
diff --git a/frontend/angular-clarity-master/src/styles/_base.scss b/frontend/angular-clarity-master/src/styles/_base.scss
deleted file mode 100644
index 2748726..0000000
--- a/frontend/angular-clarity-master/src/styles/_base.scss
+++ /dev/null
@@ -1,411 +0,0 @@
-// ========================================
-// BASE STYLES - Modern UI Foundation
-// ========================================
-
-@import './design-tokens';
-
-
-// CSS Reset & Base Styles
-// ========================================
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  font-family: $font-primary;
-  font-size: $text-base;
-  font-weight: $font-normal;
-  line-height: $leading-normal;
-  color: $gray-900;
-  background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%);
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-
-// Typography
-// ========================================
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: $font-secondary;
-  font-weight: $font-semibold;
-  line-height: $leading-tight;
-  color: $gray-900;
-  margin: 0;
-}
-
-h1 { font-size: $text-4xl; }
-h2 { font-size: $text-3xl; }
-h3 { font-size: $text-2xl; }
-h4 { font-size: $text-xl; }
-h5 { font-size: $text-lg; }
-h6 { font-size: $text-base; }
-
-p {
-  margin: 0 0 $space-4 0;
-  color: $gray-700;
-}
-
-a {
-  color: $primary-600;
-  text-decoration: none;
-  transition: color $duration-200 $ease-out;
-  
-  &:hover {
-    color: $primary-700;
-  }
-  
-  &:focus {
-    outline: 2px solid $primary-500;
-    outline-offset: 2px;
-    border-radius: $radius-sm;
-  }
-}
-
-// Lists
-ul, ol {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-// Images
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-// Form Elements
-// ========================================
-
-input, textarea, select {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-}
-
-button {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-// Focus Styles
-// ========================================
-
-:focus {
-  outline: 2px solid $primary-500;
-  outline-offset: 2px;
-}
-
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-:focus-visible {
-  outline: 2px solid $primary-500;
-  outline-offset: 2px;
-}
-
-// Selection Styles
-// ========================================
-
-::selection {
-  background-color: $primary-100;
-  color: $primary-900;
-}
-
-::-moz-selection {
-  background-color: $primary-100;
-  color: $primary-900;
-}
-
-// Scrollbar Styles
-// ========================================
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: $gray-100;
-  border-radius: $radius-full;
-}
-
-::-webkit-scrollbar-thumb {
-  background: $gray-300;
-  border-radius: $radius-full;
-  transition: background-color $duration-200 $ease-out;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: $gray-400;
-}
-
-::-webkit-scrollbar-corner {
-  background: $gray-100;
-}
-
-// Utility Classes
-// ========================================
-
-// Display
-.d-block { display: block; }
-.d-inline { display: inline; }
-.d-inline-block { display: inline-block; }
-.d-flex { display: flex; }
-.d-inline-flex { display: inline-flex; }
-.d-grid { display: grid; }
-.d-none { display: none; }
-
-// Flexbox
-.flex-row { flex-direction: row; }
-.flex-col { flex-direction: column; }
-.flex-wrap { flex-wrap: wrap; }
-.flex-nowrap { flex-wrap: nowrap; }
-
-.justify-start { justify-content: flex-start; }
-.justify-center { justify-content: center; }
-.justify-end { justify-content: flex-end; }
-.justify-between { justify-content: space-between; }
-.justify-around { justify-content: space-around; }
-
-.items-start { align-items: flex-start; }
-.items-center { align-items: center; }
-.items-end { align-items: flex-end; }
-.items-stretch { align-items: stretch; }
-
-.flex-1 { flex: 1 1 0%; }
-.flex-auto { flex: 1 1 auto; }
-.flex-initial { flex: 0 1 auto; }
-.flex-none { flex: none; }
-
-// Spacing
-.m-0 { margin: 0; }
-.m-1 { margin: $space-1; }
-.m-2 { margin: $space-2; }
-.m-3 { margin: $space-3; }
-.m-4 { margin: $space-4; }
-.m-5 { margin: $space-5; }
-.m-6 { margin: $space-6; }
-.m-8 { margin: $space-8; }
-
-.mt-0 { margin-top: 0; }
-.mt-1 { margin-top: $space-1; }
-.mt-2 { margin-top: $space-2; }
-.mt-3 { margin-top: $space-3; }
-.mt-4 { margin-top: $space-4; }
-.mt-5 { margin-top: $space-5; }
-.mt-6 { margin-top: $space-6; }
-.mt-8 { margin-top: $space-8; }
-
-.mb-0 { margin-bottom: 0; }
-.mb-1 { margin-bottom: $space-1; }
-.mb-2 { margin-bottom: $space-2; }
-.mb-3 { margin-bottom: $space-3; }
-.mb-4 { margin-bottom: $space-4; }
-.mb-5 { margin-bottom: $space-5; }
-.mb-6 { margin-bottom: $space-6; }
-.mb-8 { margin-bottom: $space-8; }
-
-.ml-0 { margin-left: 0; }
-.ml-1 { margin-left: $space-1; }
-.ml-2 { margin-left: $space-2; }
-.ml-3 { margin-left: $space-3; }
-.ml-4 { margin-left: $space-4; }
-.ml-5 { margin-left: $space-5; }
-.ml-6 { margin-left: $space-6; }
-.ml-8 { margin-left: $space-8; }
-
-.mr-0 { margin-right: 0; }
-.mr-1 { margin-right: $space-1; }
-.mr-2 { margin-right: $space-2; }
-.mr-3 { margin-right: $space-3; }
-.mr-4 { margin-right: $space-4; }
-.mr-5 { margin-right: $space-5; }
-.mr-6 { margin-right: $space-6; }
-.mr-8 { margin-right: $space-8; }
-
-.p-0 { padding: 0; }
-.p-1 { padding: $space-1; }
-.p-2 { padding: $space-2; }
-.p-3 { padding: $space-3; }
-.p-4 { padding: $space-4; }
-.p-5 { padding: $space-5; }
-.p-6 { padding: $space-6; }
-.p-8 { padding: $space-8; }
-
-.pt-0 { padding-top: 0; }
-.pt-1 { padding-top: $space-1; }
-.pt-2 { padding-top: $space-2; }
-.pt-3 { padding-top: $space-3; }
-.pt-4 { padding-top: $space-4; }
-.pt-5 { padding-top: $space-5; }
-.pt-6 { padding-top: $space-6; }
-.pt-8 { padding-top: $space-8; }
-
-.pb-0 { padding-bottom: 0; }
-.pb-1 { padding-bottom: $space-1; }
-.pb-2 { padding-bottom: $space-2; }
-.pb-3 { padding-bottom: $space-3; }
-.pb-4 { padding-bottom: $space-4; }
-.pb-5 { padding-bottom: $space-5; }
-.pb-6 { padding-bottom: $space-6; }
-.pb-8 { padding-bottom: $space-8; }
-
-.pl-0 { padding-left: 0; }
-.pl-1 { padding-left: $space-1; }
-.pl-2 { padding-left: $space-2; }
-.pl-3 { padding-left: $space-3; }
-.pl-4 { padding-left: $space-4; }
-.pl-5 { padding-left: $space-5; }
-.pl-6 { padding-left: $space-6; }
-.pl-8 { padding-left: $space-8; }
-
-.pr-0 { padding-right: 0; }
-.pr-1 { padding-right: $space-1; }
-.pr-2 { padding-right: $space-2; }
-.pr-3 { padding-right: $space-3; }
-.pr-4 { padding-right: $space-4; }
-.pr-5 { padding-right: $space-5; }
-.pr-6 { padding-right: $space-6; }
-.pr-8 { padding-right: $space-8; }
-
-// Text
-.text-xs { font-size: $text-xs; }
-.text-sm { font-size: $text-sm; }
-.text-base { font-size: $text-base; }
-.text-lg { font-size: $text-lg; }
-.text-xl { font-size: $text-xl; }
-.text-2xl { font-size: $text-2xl; }
-.text-3xl { font-size: $text-3xl; }
-.text-4xl { font-size: $text-4xl; }
-
-.font-thin { font-weight: $font-thin; }
-.font-light { font-weight: $font-light; }
-.font-normal { font-weight: $font-normal; }
-.font-medium { font-weight: $font-medium; }
-.font-semibold { font-weight: $font-semibold; }
-.font-bold { font-weight: $font-bold; }
-.font-extrabold { font-weight: $font-extrabold; }
-.font-black { font-weight: $font-black; }
-
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-.text-justify { text-align: justify; }
-
-.text-primary { color: $primary-600; }
-.text-secondary { color: $secondary-600; }
-.text-success { color: $success; }
-.text-warning { color: $warning; }
-.text-error { color: $error; }
-.text-gray-500 { color: $gray-500; }
-.text-gray-600 { color: $gray-600; }
-.text-gray-700 { color: $gray-700; }
-.text-gray-900 { color: $gray-900; }
-
-// Border Radius
-.rounded-none { border-radius: $radius-none; }
-.rounded-sm { border-radius: $radius-sm; }
-.rounded { border-radius: $radius-base; }
-.rounded-md { border-radius: $radius-md; }
-.rounded-lg { border-radius: $radius-lg; }
-.rounded-xl { border-radius: $radius-xl; }
-.rounded-2xl { border-radius: $radius-2xl; }
-.rounded-3xl { border-radius: $radius-3xl; }
-.rounded-full { border-radius: $radius-full; }
-
-// Shadows
-.shadow-sm { box-shadow: $shadow-sm; }
-.shadow { box-shadow: $shadow-base; }
-.shadow-md { box-shadow: $shadow-md; }
-.shadow-lg { box-shadow: $shadow-lg; }
-.shadow-xl { box-shadow: $shadow-xl; }
-.shadow-2xl { box-shadow: $shadow-2xl; }
-.shadow-inner { box-shadow: $shadow-inner; }
-
-// Transitions
-.transition { transition: all $duration-200 $ease-out; }
-.transition-fast { transition: all $duration-150 $ease-out; }
-.transition-slow { transition: all $duration-300 $ease-out; }
-
-// Responsive Utilities
-// ========================================
-
-@media (max-width: $breakpoint-sm) {
-  .sm\:hidden { display: none; }
-  .sm\:block { display: block; }
-  .sm\:flex { display: flex; }
-  .sm\:text-sm { font-size: $text-sm; }
-  .sm\:text-base { font-size: $text-base; }
-  .sm\:p-2 { padding: $space-2; }
-  .sm\:p-4 { padding: $space-4; }
-}
-
-@media (max-width: $breakpoint-md) {
-  .md\:hidden { display: none; }
-  .md\:block { display: block; }
-  .md\:flex { display: flex; }
-  .md\:text-sm { font-size: $text-sm; }
-  .md\:text-base { font-size: $text-base; }
-  .md\:p-2 { padding: $space-2; }
-  .md\:p-4 { padding: $space-4; }
-}
-
-@media (max-width: $breakpoint-lg) {
-  .lg\:hidden { display: none; }
-  .lg\:block { display: block; }
-  .lg\:flex { display: flex; }
-  .lg\:text-sm { font-size: $text-sm; }
-  .lg\:text-base { font-size: $text-base; }
-  .lg\:p-2 { padding: $space-2; }
-  .lg\:p-4 { padding: $space-4; }
-}
-
-// Accessibility
-// ========================================
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-// Reduced Motion
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
diff --git a/frontend/angular-clarity-master/src/styles/_components.scss b/frontend/angular-clarity-master/src/styles/_components.scss
deleted file mode 100644
index 5799161..0000000
--- a/frontend/angular-clarity-master/src/styles/_components.scss
+++ /dev/null
@@ -1,709 +0,0 @@
-// ========================================
-// COMPONENT STYLES - Modern UI Components
-// ========================================
-
-
-@import './design-tokens';
-
-// Card Components
-// ========================================
-
-.modern-card {
-  background: $card-bg;
-  backdrop-filter: $backdrop-blur-md;
-  border: 1px solid $card-border;
-  border-radius: $radius-xl;
-  box-shadow: $card-shadow;
-  padding: $space-6;
-  transition: all $duration-300 $ease-out;
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: $glass-gradient;
-  }
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: $shadow-xl;
-    border-color: rgba($primary-500, 0.2);
-  }
-
-  &.glassmorphism {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: $backdrop-blur-lg;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-
-  &.gradient {
-    background: $gradient-primary;
-    color: $white;
-    border: none;
-
-    &::before {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: $space-4;
-  padding-bottom: $space-4;
-  border-bottom: 1px solid $gray-200;
-
-  .card-title {
-    font-size: $text-xl;
-    font-weight: $font-semibold;
-    color: $gray-900;
-    margin: 0;
-  }
-
-  .card-actions {
-    display: flex;
-    gap: $space-2;
-  }
-}
-
-.card-body {
-  color: $gray-700;
-  line-height: $leading-relaxed;
-}
-
-.card-footer {
-  margin-top: $space-4;
-  padding-top: $space-4;
-  border-top: 1px solid $gray-200;
-  display: flex;
-  justify-content: flex-end;
-  gap: $space-3;
-}
-
-// Button Components
-// ========================================
-
-.modern-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: $space-2;
-  padding: $space-3 $space-6;
-  font-size: $text-sm;
-  font-weight: $font-medium;
-  line-height: 1;
-  border-radius: $radius-lg;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: all $duration-200 $ease-out;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-
-  &:focus {
-    outline: 2px solid $primary-500;
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  // Sizes
-  &.btn-sm {
-    padding: $space-2 $space-4;
-    font-size: $text-xs;
-    height: $btn-height-sm;
-  }
-
-  &.btn-md {
-    padding: $space-3 $space-6;
-    font-size: $text-sm;
-    height: $btn-height-md;
-  }
-
-  &.btn-lg {
-    padding: $space-4 $space-8;
-    font-size: $text-base;
-    height: $btn-height-lg;
-  }
-
-  // Variants
-  &.btn-primary {
-    background: $gradient-primary;
-    color: $white;
-    border-color: $primary-600;
-
-    &:hover {
-      background: linear-gradient(135deg, $primary-600 0%, $primary-800 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: $shadow-md;
-    }
-  }
-
-  &.btn-secondary {
-    background: $white;
-    color: $gray-700;
-    border-color: $gray-300;
-
-    &:hover {
-      background: $gray-50;
-      border-color: $gray-400;
-      transform: translateY(-1px);
-      box-shadow: $shadow-md;
-    }
-  }
-
-  &.btn-outline {
-    background: transparent;
-    color: $primary-600;
-    border-color: $primary-600;
-
-    &:hover {
-      background: $primary-50;
-      border-color: $primary-700;
-      color: $primary-700;
-    }
-  }
-
-  &.btn-ghost {
-    background: transparent;
-    color: $gray-600;
-    border-color: transparent;
-
-    &:hover {
-      background: $gray-100;
-      color: $gray-900;
-    }
-  }
-
-  &.btn-success {
-    background: $gradient-success;
-    color: $white;
-    border-color: $accent-green;
-
-    &:hover {
-      background: linear-gradient(135deg, #059669 0%, #047857 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-  }
-
-  &.btn-warning {
-    background: $gradient-warning;
-    color: $white;
-    border-color: $accent-orange;
-
-    &:hover {
-      background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-  }
-
-  &.btn-error {
-    background: $gradient-error;
-    color: $white;
-    border-color: $accent-red;
-
-    &:hover {
-      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-      transform: translateY(-1px);
-      box-shadow: $shadow-lg;
-    }
-  }
-
-  // Loading state
-  &.loading {
-    position: relative;
-    color: transparent;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      border: 2px solid transparent;
-      border-top: 2px solid currentColor;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// Form Components
-// ========================================
-
-.modern-form-group {
-  margin-bottom: $space-6;
-
-  .form-label {
-    display: block;
-    font-size: $text-sm;
-    font-weight: $font-medium;
-    color: $gray-700;
-    margin-bottom: $space-2;
-  }
-
-  .form-input {
-    width: 100%;
-    padding: $space-3 $space-4;
-    font-size: $text-sm;
-    line-height: $leading-normal;
-    color: $gray-900;
-    background: $white;
-    border: 1px solid $input-border;
-    border-radius: $radius-lg;
-    transition: all $duration-200 $ease-out;
-
-    &:focus {
-      outline: none;
-      border-color: $input-border-focus;
-      box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
-    }
-
-    &:disabled {
-      background: $gray-100;
-      color: $gray-500;
-      cursor: not-allowed;
-    }
-
-    &.error {
-      border-color: $input-border-error;
-      box-shadow: 0 0 0 3px rgba($error, 0.1);
-    }
-
-    &::placeholder {
-      color: $gray-400;
-    }
-  }
-
-  .form-textarea {
-    @extend .form-input;
-    min-height: 120px;
-    resize: vertical;
-  }
-
-  .form-select {
-    @extend .form-input;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right $space-3 center;
-    background-repeat: no-repeat;
-    background-size: 16px 12px;
-    padding-right: $space-10;
-    appearance: none;
-  }
-
-  .form-error {
-    margin-top: $space-1;
-    font-size: $text-xs;
-    color: $error;
-  }
-
-  .form-help {
-    margin-top: $space-1;
-    font-size: $text-xs;
-    color: $gray-500;
-  }
-}
-
-// Input Group
-.input-group {
-  display: flex;
-  align-items: stretch;
-
-  .input-group-prepend {
-    display: flex;
-    align-items: center;
-    padding: $space-3 $space-4;
-    background: $gray-100;
-    border: 1px solid $gray-300;
-    border-right: none;
-    border-radius: $radius-lg 0 0 $radius-lg;
-    color: $gray-600;
-  }
-
-  .input-group-append {
-    display: flex;
-    align-items: center;
-    padding: $space-3 $space-4;
-    background: $gray-100;
-    border: 1px solid $gray-300;
-    border-left: none;
-    border-radius: 0 $radius-lg $radius-lg 0;
-    color: $gray-600;
-  }
-
-  .form-input {
-    border-radius: 0;
-
-    &:first-child {
-      border-radius: $radius-lg 0 0 $radius-lg;
-    }
-
-    &:last-child {
-      border-radius: 0 $radius-lg $radius-lg 0;
-    }
-
-    &:only-child {
-      border-radius: $radius-lg;
-    }
-  }
-}
-
-// Table Components
-// ========================================
-
-.modern-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: $white;
-  border-radius: $radius-xl;
-  overflow: hidden;
-  box-shadow: $shadow-lg;
-
-  thead {
-    background: $gray-50;
-
-    th {
-      padding: $space-4 $space-6;
-      text-align: left;
-      font-size: $text-xs;
-      font-weight: $font-semibold;
-      color: $gray-600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      border-bottom: 1px solid $gray-200;
-
-      &:first-child {
-        padding-left: $space-8;
-      }
-
-      &:last-child {
-        padding-right: $space-8;
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      transition: background-color $duration-150 $ease-out;
-
-      &:hover {
-        background: $gray-50;
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid $gray-200;
-      }
-    }
-
-    td {
-      padding: $space-4 $space-6;
-      font-size: $text-sm;
-      color: $gray-700;
-
-      &:first-child {
-        padding-left: $space-8;
-      }
-
-      &:last-child {
-        padding-right: $space-8;
-      }
-    }
-  }
-}
-
-// Badge Components
-// ========================================
-
-.modern-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: $space-1 $space-3;
-  font-size: $text-xs;
-  font-weight: $font-medium;
-  border-radius: $radius-full;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-
-  &.badge-primary {
-    background: $primary-100;
-    color: $primary-800;
-  }
-
-  &.badge-secondary {
-    background: $secondary-100;
-    color: $secondary-800;
-  }
-
-  &.badge-success {
-    background: rgba($accent-green, 0.1);
-    color: $accent-green;
-  }
-
-  &.badge-warning {
-    background: rgba($accent-orange, 0.1);
-    color: $accent-orange;
-  }
-
-  &.badge-error {
-    background: rgba($accent-red, 0.1);
-    color: $accent-red;
-  }
-
-  &.badge-gray {
-    background: $gray-100;
-    color: $gray-700;
-  }
-}
-
-// Alert Components
-// ========================================
-
-.modern-alert {
-  padding: $space-4 $space-6;
-  border-radius: $radius-lg;
-  border: 1px solid;
-  margin-bottom: $space-4;
-  display: flex;
-  align-items: flex-start;
-  gap: $space-3;
-
-  .alert-icon {
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-
-  .alert-content {
-    flex: 1;
-
-    .alert-title {
-      font-weight: $font-semibold;
-      margin-bottom: $space-1;
-    }
-
-    .alert-message {
-      font-size: $text-sm;
-      line-height: $leading-relaxed;
-    }
-  }
-
-  &.alert-info {
-    background: rgba($primary-500, 0.05);
-    border-color: rgba($primary-500, 0.2);
-    color: $primary-800;
-
-    .alert-icon {
-      color: $primary-600;
-    }
-  }
-
-  &.alert-success {
-    background: rgba($accent-green, 0.05);
-    border-color: rgba($accent-green, 0.2);
-    color: #065f46;
-
-    .alert-icon {
-      color: $accent-green;
-    }
-  }
-
-  &.alert-warning {
-    background: rgba($accent-orange, 0.05);
-    border-color: rgba($accent-orange, 0.2);
-    color: #92400e;
-
-    .alert-icon {
-      color: $accent-orange;
-    }
-  }
-
-  &.alert-error {
-    background: rgba($accent-red, 0.05);
-    border-color: rgba($accent-red, 0.2);
-    color: #991b1b;
-
-    .alert-icon {
-      color: $accent-red;
-    }
-  }
-}
-
-// Modal Components
-// ========================================
-
-.modern-modal {
-  .modal-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba($black, 0.5);
-    backdrop-filter: $backdrop-blur-sm;
-    z-index: $z-modal-backdrop;
-    animation: fadeIn $duration-200 $ease-out;
-  }
-
-  .modal-dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: $white;
-    border-radius: $radius-2xl;
-    box-shadow: $shadow-2xl;
-    z-index: $z-modal;
-    max-width: 90vw;
-    max-height: 90vh;
-    overflow: hidden;
-    animation: slideIn $duration-300 $ease-out;
-
-    .modal-header {
-      padding: $space-6 $space-8;
-      border-bottom: 1px solid $gray-200;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .modal-title {
-        font-size: $text-xl;
-        font-weight: $font-semibold;
-        color: $gray-900;
-        margin: 0;
-      }
-
-      .modal-close {
-        background: none;
-        border: none;
-        color: $gray-400;
-        cursor: pointer;
-        padding: $space-2;
-        border-radius: $radius-md;
-        transition: all $duration-200 $ease-out;
-
-        &:hover {
-          background: $gray-100;
-          color: $gray-600;
-        }
-      }
-    }
-
-    .modal-body {
-      padding: $space-6 $space-8;
-      max-height: 60vh;
-      overflow-y: auto;
-    }
-
-    .modal-footer {
-      padding: $space-6 $space-8;
-      border-top: 1px solid $gray-200;
-      display: flex;
-      justify-content: flex-end;
-      gap: $space-3;
-    }
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -60%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
-// Loading Components
-// ========================================
-
-.modern-spinner {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid $gray-200;
-  border-top: 2px solid $primary-500;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-
-  &.spinner-sm {
-    width: 16px;
-    height: 16px;
-    border-width: 1.5px;
-  }
-
-  &.spinner-lg {
-    width: 32px;
-    height: 32px;
-    border-width: 3px;
-  }
-}
-
-.modern-skeleton {
-  background: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-  border-radius: $radius-md;
-
-  &.skeleton-text {
-    height: 1em;
-    margin-bottom: $space-2;
-  }
-
-  &.skeleton-title {
-    height: 1.5em;
-    margin-bottom: $space-4;
-  }
-
-  &.skeleton-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-
-  &.skeleton-button {
-    height: 40px;
-    width: 100px;
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
diff --git a/frontend/angular-clarity-master/src/styles/_design-tokens.scss b/frontend/angular-clarity-master/src/styles/_design-tokens.scss
deleted file mode 100644
index e91dfd5..0000000
--- a/frontend/angular-clarity-master/src/styles/_design-tokens.scss
+++ /dev/null
@@ -1,258 +0,0 @@
-// ========================================
-// DESIGN TOKENS - Modern UI Design System
-// ========================================
-
-// Dynamic Theme Variables (CSS Custom Properties)
-// ========================================
-:root {
-  // Default theme colors (fallback)
-  --theme-primary: #0ea5e9;
-  --theme-secondary: #64748b;
-  --theme-accent: #8b5cf6;
-  --theme-error: #ef4444;
-  --theme-error-dark: #dc2626;
-  --theme-background: #f8fafc;
-  --theme-surface: #ffffff;
-  --theme-text: #1f2937;
-  --theme-text-secondary: #6b7280;
-  --theme-border-radius: 0.5rem;
-  --theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  --theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-}
-
-// Color Palette
-// ========================================
-
-// Primary Colors (with theme support)
-$primary-50: #f0f9ff;
-$primary-100: #e0f2fe;
-$primary-200: #bae6fd;
-$primary-300: #7dd3fc;
-$primary-400: #38bdf8;
-$primary-500: var(--theme-primary, #0ea5e9);  // Dynamic primary
-$primary-600: #0284c7;
-$primary-700: #0369a1;
-$primary-800: #075985;
-$primary-900: #0c4a6e;
-
-// Secondary Colors (with theme support)
-$secondary-50: #f8fafc;
-$secondary-100: #f1f5f9;
-$secondary-200: #e2e8f0;
-$secondary-300: #cbd5e1;
-$secondary-400: #94a3b8;
-$secondary-500: var(--theme-secondary, #64748b);  // Dynamic secondary
-$secondary-600: #475569;
-$secondary-700: #334155;
-$secondary-800: #1e293b;
-$secondary-900: #0f172a;
-
-// Accent Colors (with theme support)
-$accent-purple: var(--theme-accent, #8b5cf6);
-$accent-green: #10b981;
-$accent-orange: #f59e0b;
-$accent-red: #ef4444;
-$accent-pink: #ec4899;
-
-// Neutral Colors (with theme support)
-$white: #ffffff;
-$gray-50: #f9fafb;
-$gray-100: #f3f4f6;
-$gray-200: #e5e7eb;
-$gray-300: #d1d5db;
-$gray-400: #9ca3af;
-$gray-500: #6b7280;
-$gray-600: #4b5563;
-$gray-700: #374151;
-$gray-800: #1f2937;
-$gray-900: var(--theme-text, #111827);  // Dynamic text color
-$black: #000000;
-
-// Theme-aware colors
-$theme-background: var(--theme-background, #f8fafc);
-$theme-surface: var(--theme-surface, #ffffff);
-$theme-text: var(--theme-text, #1f2937);
-$theme-text-secondary: var(--theme-text-secondary, #6b7280);
-
-// Semantic Colors
-$success: $accent-green;
-$warning: $accent-orange;
-$error: $accent-red;
-$info: $primary-500;
-
-// Typography
-// ========================================
-
-// Font Families (with theme support)
-$font-primary: var(--theme-font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
-$font-secondary: var(--theme-font-secondary, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
-$font-mono: var(--theme-font-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace);
-
-// Font Sizes
-$text-xs: 0.75rem;    // 12px
-$text-sm: 0.875rem;   // 14px
-$text-base: 1rem;     // 16px
-$text-lg: 1.125rem;   // 18px
-$text-xl: 1.25rem;    // 20px
-$text-2xl: 1.5rem;    // 24px
-$text-3xl: 1.875rem;  // 30px
-$text-4xl: 2.25rem;   // 36px
-$text-5xl: 3rem;      // 48px
-$text-6xl: 3.75rem;   // 60px
-
-// Font Weights
-$font-thin: 100;
-$font-light: 300;
-$font-normal: 400;
-$font-medium: 500;
-$font-semibold: 600;
-$font-bold: 700;
-$font-extrabold: 800;
-$font-black: 900;
-
-// Line Heights
-$leading-none: 1;
-$leading-tight: 1.25;
-$leading-snug: 1.375;
-$leading-normal: 1.5;
-$leading-relaxed: 1.625;
-$leading-loose: 2;
-
-// Spacing System
-// ========================================
-
-$space-0: 0;
-$space-1: 0.25rem;   // 4px
-$space-2: 0.5rem;    // 8px
-$space-3: 0.75rem;   // 12px
-$space-4: 1rem;      // 16px
-$space-5: 1.25rem;   // 20px
-$space-6: 1.5rem;    // 24px
-$space-8: 2rem;      // 32px
-$space-10: 2.5rem;   // 40px
-$space-12: 3rem;     // 48px
-$space-16: 4rem;     // 64px
-$space-20: 5rem;     // 80px
-$space-24: 6rem;     // 96px
-$space-32: 8rem;     // 128px
-
-// Border Radius (with theme support)
-// ========================================
-
-$radius-none: 0;
-$radius-sm: 0.125rem;   // 2px
-$radius-base: 0.25rem;  // 4px
-$radius-md: 0.375rem;   // 6px
-$radius-lg: var(--theme-border-radius, 0.5rem);     // Dynamic border radius
-$radius-xl: 0.75rem;    // 12px
-$radius-2xl: 1rem;      // 16px
-$radius-3xl: 1.5rem;    // 24px
-$radius-full: 9999px;
-
-// Shadows (with theme support)
-// ========================================
-
-$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$shadow-lg: var(--theme-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));  // Dynamic shadow
-$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-
-// Glassmorphism Shadows
-$glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-$glass-shadow-lg: 0 20px 40px 0 rgba(31, 38, 135, 0.4);
-
-// Animation
-// ========================================
-
-// Timing Functions
-$ease-in: cubic-bezier(0.4, 0, 1, 1);
-$ease-out: cubic-bezier(0, 0, 0.2, 1);
-$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-$ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-// Duration
-$duration-75: 75ms;
-$duration-100: 100ms;
-$duration-150: 150ms;
-$duration-200: 200ms;
-$duration-300: 300ms;
-$duration-500: 500ms;
-$duration-700: 700ms;
-$duration-1000: 1000ms;
-
-// Responsive Breakpoints
-// ========================================
-
-$breakpoint-sm: 640px;   // Small devices
-$breakpoint-md: 768px;   // Medium devices
-$breakpoint-lg: 1024px;  // Large devices
-$breakpoint-xl: 1280px;  // Extra large devices
-$breakpoint-2xl: 1536px; // 2X large devices
-
-// Z-Index Scale
-// ========================================
-
-$z-dropdown: 1000;
-$z-sticky: 1020;
-$z-fixed: 1030;
-$z-modal-backdrop: 1040;
-$z-modal: 1050;
-$z-popover: 1060;
-$z-tooltip: 1070;
-$z-toast: 1080;
-
-// Component Specific Variables
-// ========================================
-
-// Header
-$header-height: 4rem; // 64px
-$header-bg: rgba(255, 255, 255, 0.95);
-$header-border: rgba(0, 0, 0, 0.1);
-
-// Sidebar
-$sidebar-width: 16rem; // 256px
-$sidebar-width-collapsed: 4rem; // 64px
-$sidebar-bg: rgba(255, 255, 255, 0.98);
-$sidebar-border: rgba(0, 0, 0, 0.05);
-
-// Cards
-$card-bg: rgba(255, 255, 255, 0.9);
-$card-border: rgba(0, 0, 0, 0.05);
-$card-shadow: $shadow-lg;
-
-// Buttons
-$btn-height-sm: 2rem; // 32px
-$btn-height-md: 2.5rem; // 40px
-$btn-height-lg: 3rem; // 48px
-
-// Form Elements
-$input-height: 2.5rem; // 40px
-$input-border: rgba(0, 0, 0, 0.1);
-$input-border-focus: $primary-500;
-$input-border-error: $error;
-
-// Gradients
-// ========================================
-
-$gradient-primary: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
-$gradient-secondary: linear-gradient(135deg, $secondary-500 0%, $secondary-700 100%);
-$gradient-accent: linear-gradient(135deg, $accent-purple 0%, $accent-pink 100%);
-$gradient-success: linear-gradient(135deg, $accent-green 0%, #059669 100%);
-$gradient-warning: linear-gradient(135deg, $accent-orange 0%, #d97706 100%);
-$gradient-error: linear-gradient(135deg, $accent-red 0%, #dc2626 100%);
-
-// Glassmorphism Gradients
-$glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
-$glass-gradient-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
-
-// Backdrop Blur
-$backdrop-blur-sm: blur(4px);
-$backdrop-blur-md: blur(8px);
-$backdrop-blur-lg: blur(16px);
-$backdrop-blur-xl: blur(24px);
diff --git a/frontend/angular-clarity-master/src/styles/_theme-variables.scss b/frontend/angular-clarity-master/src/styles/_theme-variables.scss
deleted file mode 100644
index dbb184a..0000000
--- a/frontend/angular-clarity-master/src/styles/_theme-variables.scss
+++ /dev/null
@@ -1,367 +0,0 @@
-// ========================================
-// DYNAMIC THEME VARIABLES
-// ========================================
-@import './design-tokens';
-// CSS Custom Properties for Dynamic Theming
-// These variables will be set by the ThemeService at runtime
-
-:root {
-  // Default theme variables (fallback values)
-  --theme-primary: #0ea5e9;
-  --theme-secondary: #64748b;
-  --theme-accent: #8b5cf6;
-  --theme-background: #f8fafc;
-  --theme-surface: #ffffff;
-  --theme-text: #111827;
-  --theme-text-secondary: #6b7280;
-  
-  // Font variables
-  --theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-  
-  // Other theme properties
-  --theme-border-radius: 0.75rem;
-  --theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  
-  // Derived colors for better theme integration
-  --theme-primary-50: #{rgba(#0ea5e9, 0.05)};
-  --theme-primary-100: #{rgba(#0ea5e9, 0.1)};
-  --theme-primary-200: #{rgba(#0ea5e9, 0.2)};
-  --theme-primary-300: #{rgba(#0ea5e9, 0.3)};
-  --theme-primary-500: #0ea5e9;
-  --theme-primary-600: #{darken(#0ea5e9, 10%)};
-  --theme-primary-700: #{darken(#0ea5e9, 20%)};
-  --theme-primary-800: #{darken(#0ea5e9, 30%)};
-  --theme-primary-900: #{darken(#0ea5e9, 40%)};
-  
-  // Gradient definitions using theme colors
-  --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-700) 100%);
-  --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, #{darken(#64748b, 20%)} 100%);
-  --theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, #{darken(#8b5cf6, 20%)} 100%);
-  
-  // Glassmorphism effects
-  --theme-glass-bg: rgba(255, 255, 255, 0.1);
-  --theme-glass-border: rgba(255, 255, 255, 0.2);
-  --theme-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-}
-
-// Dark theme overrides
-[data-theme="dark"] {
-  --theme-background: #111827;
-  --theme-surface: #1f2937;
-  --theme-text: #f9fafb;
-  --theme-text-secondary: #d1d5db;
-  --theme-glass-bg: rgba(0, 0, 0, 0.1);
-  --theme-glass-border: rgba(255, 255, 255, 0.1);
-  --theme-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
-}
-
-// Theme-aware utility classes
-// ========================================
-
-// Background colors
-.bg-theme-primary { background-color: var(--theme-primary) !important; }
-.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
-.bg-theme-accent { background-color: var(--theme-accent) !important; }
-.bg-theme-background { background-color: var(--theme-background) !important; }
-.bg-theme-surface { background-color: var(--theme-surface) !important; }
-
-// Text colors
-.text-theme-primary { color: var(--theme-primary) !important; }
-.text-theme-secondary { color: var(--theme-secondary) !important; }
-.text-theme-accent { color: var(--theme-accent) !important; }
-.text-theme-text { color: var(--theme-text) !important; }
-.text-theme-text-secondary { color: var(--theme-text-secondary) !important; }
-
-// Border colors
-.border-theme-primary { border-color: var(--theme-primary) !important; }
-.border-theme-secondary { border-color: var(--theme-secondary) !important; }
-.border-theme-accent { border-color: var(--theme-accent) !important; }
-
-// Gradients
-.bg-gradient-theme-primary { background: var(--theme-gradient-primary) !important; }
-.bg-gradient-theme-secondary { background: var(--theme-gradient-secondary) !important; }
-.bg-gradient-theme-accent { background: var(--theme-gradient-accent) !important; }
-
-// Font families
-.font-theme-primary { font-family: var(--theme-font-primary) !important; }
-.font-theme-secondary { font-family: var(--theme-font-secondary) !important; }
-.font-theme-mono { font-family: var(--theme-font-mono) !important; }
-
-// Border radius
-.rounded-theme { border-radius: var(--theme-border-radius) !important; }
-
-// Shadows
-.shadow-theme { box-shadow: var(--theme-shadow) !important; }
-
-// Glassmorphism effects
-.glass-theme {
-  background: var(--theme-glass-bg) !important;
-  backdrop-filter: blur(16px) !important;
-  border: 1px solid var(--theme-glass-border) !important;
-  box-shadow: var(--theme-glass-shadow) !important;
-}
-
-// Theme-aware component overrides
-// ========================================
-
-// Update existing component styles to use theme variables
-.modern-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border: 1px solid rgba(var(--theme-text-secondary), 0.1);
-  box-shadow: var(--theme-shadow);
-}
-
-.modern-btn {
-  &.btn-primary {
-    background: var(--theme-gradient-primary);
-    color: white;
-    border-color: var(--theme-primary-600);
-  }
-
-  &.btn-secondary {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(var(--theme-text-secondary), 0.2);
-  }
-
-  &.btn-outline {
-    background: transparent;
-    color: var(--theme-primary);
-    border-color: var(--theme-primary);
-  }
-}
-
-.modern-form-group {
-  .form-label {
-    color: var(--theme-text);
-  }
-
-  .form-input {
-    background: var(--theme-surface);
-    color: var(--theme-text);
-    border-color: rgba(var(--theme-text-secondary), 0.2);
-
-    &:focus {
-      border-color: var(--theme-primary);
-      box-shadow: 0 0 0 3px var(--theme-primary-100);
-    }
-
-    &::placeholder {
-      color: var(--theme-text-secondary);
-    }
-  }
-}
-
-.modern-table {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-
-  thead {
-    background: var(--theme-background);
-
-    th {
-      color: var(--theme-text-secondary);
-    }
-  }
-
-  tbody {
-    tr {
-      &:hover {
-        background: var(--theme-background);
-      }
-    }
-
-    td {
-      color: var(--theme-text);
-    }
-  }
-}
-
-.modern-alert {
-  &.alert-info {
-    background: var(--theme-primary-100);
-    border-color: var(--theme-primary-200);
-    color: var(--theme-primary-800);
-  }
-
-  &.alert-success {
-    background: rgba(16, 185, 129, 0.1);
-    border-color: rgba(16, 185, 129, 0.2);
-    color: #065f46;
-  }
-
-  &.alert-warning {
-    background: rgba(245, 158, 11, 0.1);
-    border-color: rgba(245, 158, 11, 0.2);
-    color: #92400e;
-  }
-
-  &.alert-error {
-    background: rgba(239, 68, 68, 0.1);
-    border-color: rgba(239, 68, 68, 0.2);
-    color: #991b1b;
-  }
-}
-
-// Layout component theme integration
-// ========================================
-
-.modern-layout {
-  background: var(--theme-background);
-}
-
-.modern-header {
-  background: rgba(var(--theme-surface), 0.95);
-  border-bottom: 1px solid rgba(var(--theme-text-secondary), 0.1);
-  color: var(--theme-text);
-}
-
-.modern-branding {
-  .company-title {
-    color: var(--theme-text);
-  }
-
-  .company-subtitle {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.modern-sidebar {
-  background: rgba(var(--theme-surface), 0.98);
-  border-right: 1px solid rgba(var(--theme-text-secondary), 0.05);
-  color: var(--theme-text);
-}
-
-.modern-nav-link,
-.modern-nav-link-single {
-  color: var(--theme-text-secondary);
-
-  &:hover {
-    background: var(--theme-primary-100);
-    color: var(--theme-primary-700);
-  }
-
-  &.active {
-    background: var(--theme-primary-100);
-    color: var(--theme-primary-800);
-  }
-}
-
-.modern-user-button {
-  background: transparent;
-  color: var(--theme-text);
-  border-color: rgba(var(--theme-text-secondary), 0.2);
-
-  &:hover {
-    background: var(--theme-background);
-    border-color: rgba(var(--theme-text-secondary), 0.3);
-  }
-}
-
-.modern-dropdown-menu {
-  background: var(--theme-surface);
-  border-color: rgba(var(--theme-text-secondary), 0.2);
-  color: var(--theme-text);
-}
-
-.modern-dropdown-item {
-  color: var(--theme-text);
-
-  &:hover {
-    background: var(--theme-background);
-    color: var(--theme-text);
-  }
-}
-
-// Dashboard theme integration
-// ========================================
-
-.modern-dashboard {
-  background: var(--theme-background);
-}
-
-.welcome-section {
-  background: var(--theme-gradient-primary);
-  color: white;
-}
-
-.stats-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border: 1px solid rgba(var(--theme-text-secondary), 0.1);
-
-  .stats-value {
-    color: var(--theme-text);
-  }
-
-  .stats-label {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.action-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-  border-color: rgba(var(--theme-text-secondary), 0.2);
-
-  &:hover {
-    border-color: var(--theme-primary-300);
-  }
-
-  h3 {
-    color: var(--theme-text);
-  }
-
-  p {
-    color: var(--theme-text-secondary);
-  }
-}
-
-.activity-card {
-  background: var(--theme-surface);
-  color: var(--theme-text);
-
-  .activity-item {
-    border-bottom-color: rgba(var(--theme-text-secondary), 0.1);
-
-    &:hover {
-      background: var(--theme-background);
-    }
-
-    .activity-title {
-      color: var(--theme-text);
-    }
-
-    .activity-time {
-      color: var(--theme-text-secondary);
-    }
-  }
-}
-
-// Responsive theme adjustments
-// ========================================
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --theme-background: #111827;
-    --theme-surface: #1f2937;
-    --theme-text: #f9fafb;
-    --theme-text-secondary: #d1d5db;
-  }
-}
-
-// Print styles
-// ========================================
-
-@media print {
-  :root {
-    --theme-background: white;
-    --theme-surface: white;
-    --theme-text: black;
-    --theme-text-secondary: #666;
-    --theme-shadow: none;
-  }
-}