chart

bar chart
Update unified-chart.component.html
2025-11-01 16:20:59 +05:30 · 2025-11-01 12:34:16 +05:30 · 2025-11-01 12:18:01 +05:30 · 2025-11-01 11:00:10 +05:30 · 2025-11-01 10:54:41 +05:30 · 2025-11-01 10:03:00 +05:30
70 changed files with 1075 additions and 8935 deletions
--- 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
@@ -97,6 +97,7 @@ export class LoginPageComponent implements OnInit {
      .subscribe(
        resp => {
          console.log('API Response received:', resp);
+          // Always reset loading state when response is received
          this.isLoading = false;
          
          // Handle different response formats
@@ -106,7 +107,7 @@ export class LoginPageComponent implements OnInit {
            return;
          }
          // Handle different response formats
-          if (resp.success === 'false') {
+          if (resp.success === 'false' || resp.success === false) {
            this.isError = true;
            this.errMsg = resp.message || 'Login failed';
            return;
@@ -123,6 +124,7 @@ export class LoginPageComponent implements OnInit {
        },
        (errResponse: HttpErrorResponse) => {
          console.log('API Error received:', errResponse);
+          // Always reset loading state when error occurs
          this.isLoading = false;
          this.isError = true;
          
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew
--- 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
@@ -71,19 +71,13 @@
            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>
+          </ng-container></clr-dg-column>
        <!-- end -->

        <clr-dg-row *clrDgItems="let user of product" [clrDgItem]="user">
@@ -110,7 +104,7 @@
              <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 ? '...' : ''}}
+                {{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>
@@ -144,14 +138,11 @@
            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>
+            <div style="display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;">
              <clr-signpost>
                <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
                    style="color: rgb(0, 130, 236);"></clr-icon></span>
@@ -166,47 +157,20 @@
              </clr-signpost>

              <!-- New JSON Update button -->
-            <button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
+              <button class="btn btn-icon btn-sm" (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">
+              <button class="btn btn-icon btn-sm" (click)="fetchAvailableKeys(user, false)" 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">
+              <button class="btn btn-icon btn-sm" (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>
+            </div>
          </clr-dg-cell>

          <!-- who colmn -->
@@ -445,16 +409,16 @@
            instanceId="edit-form-{{rowSelected.id}}"></app-cron-job-builder>
        </div>

-        <!-- <div class="clr-col-sm-12">
+        <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 Endpoint</label>
+          <label>Url</label>
          <input class="clr-input" type="text" [(ngModel)]="rowSelected.url_endpoint" name="url_endpoint" />
-        </div> -->
+        </div>

        <div class="clr-col-sm-12">
          <label>Batch Volume</label>
@@ -470,30 +434,8 @@
          </select>
        </div>

-        <!-- Data Lake Type -->
+        <!-- Add ref_datalake_id dropdown -->
        <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>
@@ -596,16 +538,16 @@
            (cronExpressionChange)="onAddCronExpressionChange($event)" instanceId="add-form"></app-cron-job-builder>
        </div>

-        <!-- <div class="clr-col-sm-12">
+        <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>

-        <!-- <div class="clr-col-sm-12">
+        <div class="clr-col-sm-12">
          <label> Url Endpoint</label>
          <input class="clr-input" type="text" formControlName="url_endpoint" />
-        </div> -->
+        </div>

        <div class="clr-col-sm-12">
          <label> Batch Volume</label>
@@ -621,29 +563,8 @@
          </select>
        </div>

-        <!-- Data Lake Type -->
+        <!-- Add ref_datalake_id dropdown -->
        <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>
@@ -995,195 +916,4 @@
  </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>
+<!-- htmlpopup -->   
--- 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
@@ -384,494 +384,3 @@
  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;
-}
--- 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
@@ -2,7 +2,6 @@ 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';
@@ -11,7 +10,6 @@ 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',
@@ -68,12 +66,6 @@ export class Data_lakeComponent implements OnInit {
  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[] = [];
@@ -107,36 +99,10 @@ export class Data_lakeComponent implements OnInit {
  
  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,
@@ -158,25 +124,23 @@ export class Data_lakeComponent implements OnInit {
    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
-    });

-    // Set default SureConnect value after form initialization if list is already loaded
-    if (this.sureConnectList && this.sureConnectList.length > 0) {
-      const defaultSureConnectId = this.sureConnectList[0].id;
-      this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
-    }
+      sure_connect_id: [null], // Add SureConnect field
+      ref_datalake_id: [null], // Add Data Lake reference field

+    }); // component_button200
    // form code start
    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
      console.log(data);
@@ -268,20 +232,6 @@ export class Data_lakeComponent implements OnInit {
    this.sureConnectService.getAll().subscribe((data: any[]) => {
      this.sureConnectList = data;
      console.log('SureConnect List:', this.sureConnectList);
-      
-      // Set default SureConnect value if list is not empty
-      if (this.sureConnectList && this.sureConnectList.length > 0) {
-        // Set the first SureConnect item as default
-        const defaultSureConnectId = this.sureConnectList[0].id;
-        
-        // Set default for ADD form if it exists
-        if (this.entryForm && this.entryForm.get('sure_connect_id')) {
-          // Only set default if no value is already selected
-          if (!this.entryForm.get('sure_connect_id')?.value) {
-            this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
-          }
-        }
-      }
    }, (error) => {
      console.log('Error fetching SureConnect list:', error);
    });
@@ -290,7 +240,8 @@ export class Data_lakeComponent implements OnInit {
  // Fetch Data Lake list for reference dropdown
  getDataLakeList() {
    this.mainService.getAll().subscribe((data: any[]) => {
-      this.dataLakeList = data;
+      // Filter out the current item to avoid self-reference
+      this.dataLakeList = data.filter(item => item.id !== (this.rowSelected?.id || 0));
      console.log('Data Lake List:', this.dataLakeList);
    }, (error) => {
      console.log('Error fetching Data Lake list:', error);
@@ -735,22 +686,8 @@ export class Data_lakeComponent implements OnInit {
    this.editCronExpression = row.cron_job || '';
    // Set the selected SureConnect for edit form
    this.selectedSureConnect = row.sure_connect_id || null;
-    
-    // If no SureConnect is selected, set the first one as default
-    if (!this.rowSelected.sure_connect_id && this.sureConnectList && this.sureConnectList.length > 0) {
-      this.rowSelected.sure_connect_id = this.sureConnectList[0].id;
-      this.selectedSureConnect = this.sureConnectList[0].id;
-    }
-    
-    // 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 = [];
-    }
-    
+    // Set the selected Data Lake for edit form
+    this.selectedDataLake = row.ref_datalake_id || null;
    // Use setTimeout to ensure the component has time to initialize
    setTimeout(() => {
      this.modalEdit = true;
@@ -901,33 +838,18 @@ export class Data_lakeComponent implements OnInit {
  }
  
  goToAdd(row) {
-    this.modalAdd = false;
+    this.modalAdd = true;
    this.addCronExpression = '';
    this.selectedSureConnect = null; // Reset SureConnect selection
+    this.selectedDataLake = null; // Reset Data Lake 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('');

-      // Set default SureConnect value if available
-      if (this.sureConnectList && this.sureConnectList.length > 0) {
-        const defaultSureConnectId = this.sureConnectList[0].id;
-        // Only set default if no value is already selected
-        if (!this.entryForm.get('sure_connect_id')?.value) {
-          this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
    }
-      } else {
-        this.entryForm.get('sure_connect_id')?.setValue('');
-      }
-    }
-    this.modalAdd = true;
  }
  submitted = false;
  onSubmit() {
@@ -1368,433 +1290,4 @@ export class Data_lakeComponent implements OnInit {
      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);
-  }
 }
--- 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
@@ -42,12 +42,6 @@ export class Data_lakeservice{
    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;
@@ -57,11 +51,5 @@ export class Data_lakeservice{
    };
    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
 }
--- 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
@@ -1,15 +1,6 @@
 <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>
@@ -37,7 +28,7 @@
      </div>
    </div>
    
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
+    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-6 clr-col-12">
      <div class="form-group">
        <label>Month</label>
        <select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
@@ -46,7 +37,7 @@
      </div>
    </div>
    
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
+    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-12 clr-col-12">
      <div class="form-group">
        <label>Day of Week</label>
        <select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">
--- 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
@@ -10,8 +10,7 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
  @Input() instanceId: string = ''; // Unique identifier for each instance
  @Output() cronExpressionChange = new EventEmitter<string>();
  
-  // Cron job fields (now starting with seconds)
-  second: string = '*';
+  // Cron job fields
  minute: string = '*';
  hour: string = '*';
  dayOfMonth: string = '*';
@@ -22,7 +21,6 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
  cronDescription: string = '';
  
  // Options for selectors
-  secondOptions: any[] = [];
  minuteOptions: any[] = [];
  hourOptions: any[] = [];
  dayOfMonthOptions: any[] = [];
@@ -31,10 +29,9 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {

  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.minuteOptions = this.generateOptions(0, 59);
+    this.hourOptions = this.generateOptions(0, 23);
+    this.dayOfMonthOptions = this.generateOptions(1, 31);
    this.monthOptions = [
      { value: '*', label: 'Every month' },
      { value: '1', label: 'January' },
@@ -76,8 +73,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
    }
  }

-  generateOptions(start: number, end: number, type: string): any[] {
-    const options = [{ value: '*', label: `Every ${type} (${start === 0 ? '0' : start}-${end})` }];
+  generateOptions(start: number, end: number): any[] {
+    const options = [{ value: '*', label: `Every (${start === 0 ? '0' : start}-${end})` }];
    for (let i = start; i <= end; i++) {
      options.push({ value: i.toString(), label: i.toString() });
    }
@@ -86,16 +83,7 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {

  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';
+    if (parts.length >= 5) {
      this.minute = parts[0];
      this.hour = parts[1];
      this.dayOfMonth = parts[2];
@@ -107,33 +95,19 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
  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';
-      }
+      description += 'every minute';
    } else if (this.minute.includes('/')) {
      const interval = this.minute.split('/')[1];
-      description += ` of every ${interval} minutes`;
+      description += `every ${interval} minutes`;
    } else {
-      description += ` at minute ${this.minute}`;
+      description += `at minute ${this.minute}`;
    }
    
    // Hour description
    if (this.hour === '*') {
-      if (this.minute === '*' && this.second === '*') {
+      if (this.minute === '*') {
        description += '';
      } else {
        description += ' past every hour';
@@ -172,23 +146,21 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
    }
    
    // Special case for simple patterns
-    if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
+    if (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 === '*') {
+    } else if (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 === '*') {
+    } else if (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';
+    } else if (this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+      description = 'Runs every minute';
    }
    
    this.cronDescription = description;
  }

  buildCronExpression() {
-    const expression = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
+    const expression = `${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
    this.cronExpressionChange.emit(expression);
    this.generateDescription(); // Update description when expression changes
    return expression;
--- 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
@@ -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);
-  }
-}
--- 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,13 +1,13 @@
 <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>
+  </ol>
  
-<br>
+  <br>
  
-<div class="dg-wrapper">
+  <div class="dg-wrapper">
      <div class="clr-row">
-    <div class="clr-col-8">x
+        <div class="clr-col-8">
          <h3>{{ 'Dashboard_builder' | translate }}</h3>
        </div>
        <div class="clr-col-4" style="text-align: right;">
@@ -17,10 +17,6 @@
          <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>
@@ -31,10 +27,8 @@
      </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-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}">
@@ -50,17 +44,17 @@
              <ng-container *clrDgHideableColumn="{hidden: false}">
                {{ 'Description' | translate }}
              </ng-container>
-    </clr-dg-column>
+          </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 >
          <clr-dg-column [clrDgField]="'add_to_home'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
              {{ 'Add_to_home' | translate }}
            </ng-container>
-    </clr-dg-column>
+        </clr-dg-column >
          <!-- <clr-dg-column [clrDgField]="'formType'">
            <ng-container *clrDgHideableColumn="{hidden: false}">
              Build Status
@@ -76,8 +70,7 @@
            </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><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>
@@ -87,16 +80,13 @@
        <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>
+              <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>
+                <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>
@@ -109,8 +99,7 @@
            
              </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)="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>
@@ -123,16 +112,16 @@
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
-</div>
+    </div>
  
-<clr-modal [(clrModalOpen)]="addModall" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+    <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>
+              <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>
@@ -142,15 +131,15 @@
              </div>
            </div>
      </div>
-</clr-modal>
+    </clr-modal>
  
-<clr-modal [(clrModalOpen)]="modalDelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+    <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>
+          <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{ 'Delete' | translate }}</button>
        </div>
      </div>
-</clr-modal>
+    </clr-modal>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/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});
-
-  }
 }
--- 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
@@ -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>
--- 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
@@ -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;
-  }
-}
--- 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
@@ -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;
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-}
--- 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
@@ -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;
-  }
-}
--- 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
@@ -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);
-  }
-}
--- 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
@@ -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);
-  }
-}
--- 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
@@ -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;
-      })
-    );
-  }
-}
--- 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
@@ -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);
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-}
--- 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
@@ -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();
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-}
--- 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
@@ -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();
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-}
--- 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
@@ -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();
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-}
--- 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
@@ -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();
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-}
--- 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
@@ -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();
-  }
-}
--- 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
@@ -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);
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-      }
-    }
-  }
-}
--- 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
@@ -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']);
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-        }
-      }
-    }
-  }
-}
--- 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
@@ -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']);
-    }
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-        }
-      }
-    }
-  }
-}
--- 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
@@ -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;
-      }
-    });
-  }
-}
--- 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
@@ -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 { }
--- 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
@@ -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>
--- 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
@@ -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;
-        }
-      }
-    }
-  }
-}
--- 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
@@ -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']);
-    }
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-        }
-      }
-    }
-  }
-}
--- 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
@@ -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']);
-    }
-  }
-}
--- 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
@@ -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);
-  }
-}
--- 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
@@ -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>
--- 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
@@ -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;
-    }
-  }
-}    
-    
--- 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
@@ -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;
-        }
-      });
-    }
-  }
-}
--- 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
@@ -1,4 +0,0 @@
-<div class="chart-config-modal">
-  <h3>Chart Configuration Manager</h3>
-  <app-chart-config-manager></app-chart-config-manager>
-</div>
--- 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
@@ -1,5 +0,0 @@
-.chart-config-modal {
-  padding: 20px;
-  max-height: 80vh;
-  overflow-y: auto;
-}
--- 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
@@ -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
-}
--- 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
@@ -17,9 +17,6 @@
  <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>
@@ -42,8 +39,7 @@
    </ul>
  </nav>
  <div style="width: 100%;">
-    <!-- Remove the (drop) event binding since it's already handled by gridster's emptyCellDropCallback -->
-    <gridster [options]="options" style="background-color: transparent;">
+    <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">
--- 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
@@ -30,8 +30,6 @@ import { CompactFilterComponent } from '../common-filter';
 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';

 function isNullArray(arr) {
  return !Array.isArray(arr) || arr.length === 0;
@@ -60,60 +58,59 @@ export class EditnewdashComponent implements OnInit {
  // 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: '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: 'Grid View',
-    //   identifier: 'grid_view'
-    // },
+    {
+      name: 'Radar Chart',
+      identifier: 'radar_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: 'Grid View',
+      identifier: 'grid_view'
+    },
    {
      name: 'Compact Filter',
      identifier: 'compact_filter'
@@ -209,9 +206,6 @@ export class EditnewdashComponent implements OnInit {
  // Add drilldown column data property
  drilldownColumnData = []; // Add drilldown column data property

-  // Add chart types property for dynamic chart selection
-  chartTypes: any[] = [];
-
  constructor(private route: ActivatedRoute,
    private router: Router,
    private dashboardService: Dashboard3Service,
@@ -220,8 +214,7 @@ export class EditnewdashComponent implements OnInit {
    private datastoreService: DatastoreService,
    private alertService: AlertsService,
    private sureconnectService: SureconnectService,
-    private filterService: FilterService,
-    private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
+    private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor

  // Add property to track if coming from dashboard runner
  fromRunner: boolean = false;
@@ -306,9 +299,6 @@ export class EditnewdashComponent implements OnInit {
      apiUrl: ['']
    });
    
-    // Load chart types for dynamic chart selection
-    this.loadChartTypesForSelection();
-    
    // Load sureconnect data first, then load dashboard data
    this.loadSureconnectData();
    
@@ -316,37 +306,6 @@ export class EditnewdashComponent implements OnInit {
    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);
-    }
-  });
-}
-
-  
  // Add method to load sureconnect data
  loadSureconnectData() {
    this.sureconnectService.getAll().subscribe((data: any[]) => {
@@ -489,7 +448,6 @@ export class EditnewdashComponent implements OnInit {
        '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
@@ -546,11 +504,9 @@ export class EditnewdashComponent implements OnInit {
    //this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
  }

-  onDrop = (ev) => {
-    console.log("on drop event ", ev);
+  onDrop(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
@@ -564,26 +520,155 @@ export class EditnewdashComponent implements OnInit {
    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);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Radar Chart",
+          chartType: 'radar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "line_chart":
-        return this.createDynamicChart('line', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 7,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Line Chart",
+          chartType: 'line',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "doughnut_chart":
-        return this.createDynamicChart('doughnut', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Doughnut Chart",
+          chartType: 'doughnut',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "bar_chart":
-        return this.createDynamicChart('bar', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Bar Chart",
+          chartType: 'bar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "pie_chart":
-        return this.createDynamicChart('pie', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Pie Chart",
+          chartType: 'pie',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "polar_area_chart":
-        return this.createDynamicChart('polar', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Polar Area Chart",
+          chartType: 'polar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "bubble_chart":
-        return this.createDynamicChart('bubble', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Bubble Chart",
+          chartType: 'bubble',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "scatter_chart":
-        return this.createDynamicChart('scatter', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Scatter Chart",
+          chartType: 'scatter',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "dynamic_chart":
-        return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Dynamic Chart",
+          chartType: 'line', // Default to line for dynamic chart
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "financial_chart":
-        return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Financial Chart",
+          chartType: 'line', // Default to line for financial chart
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
      case "to_do_chart":
        return this.dashboardArray.push({
          cols: 5,
@@ -630,16 +715,21 @@ export class EditnewdashComponent implements OnInit {
          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);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Unified Chart",
+          // Add default configuration for unified chart
+          chartType: 'bar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
    }
  }
  removeItem(item) {
@@ -1053,10 +1143,14 @@ export class EditnewdashComponent implements OnInit {
    }
    
    // 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') {
+    // Check for specific chart names that use UnifiedChartComponent
+    const unifiedChartNames = [
+      'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 
+      'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
+      'Dynamic Chart', 'Financial Chart', 'Unified Chart'
+    ];
+    
+    if (unifiedChartNames.includes(item.name)) {
      const unifiedChartInputs = {
        chartType: item.chartType || 'bar',
        xAxis: item.xAxis,
@@ -1865,7 +1959,7 @@ export class EditnewdashComponent implements OnInit {
  
  // Add method to handle item resize events
  itemResize(item: any, itemComponent: any) {
-    // console.log('Item resized:', item);
+    console.log('Item resized:', item);
    // Trigger a window resize event to notify charts to resize
    window.dispatchEvent(new Event('resize'));
    
@@ -1951,264 +2045,4 @@ export class EditnewdashComponent implements OnInit {
    }
  }

-  // 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);
-              
-              // Update the dashboard collection and trigger refresh
-              this.itemChange();
-            },
-            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 and trigger refresh
-    this.itemChange();
-  }
-
-  // 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';
-    }
-  }
-
 }
--- 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
@@ -14,39 +14,130 @@
  </div>

  <!-- Filter toggle icon -->
-  <div class="filter-toggle-icon" *ngIf="hasFilters()" (click)="toggleFilters()">
+  <div class="filter-toggle-icon" *ngIf="baseFilters && baseFilters.length > 0" 
+       (click)="toggleFilters()" 
+       style="cursor: pointer; text-align: right; padding: 5px;">
    <clr-icon shape="filter" size="24" 
              [style.color]="showFilters ? '#007cba' : '#666'"
              title="Toggle Filters">
    </clr-icon>
-    <span>
+    <span style="margin-left: 5px; font-size: 12px; color: #666;">
      {{ 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">
+    <!-- Bar Chart -->
+    <div *ngIf="chartType === 'bar'" class="chart-canvas-container">
      <canvas baseChart
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="chartLegend"
-        [type]="chartType || 'bar'"
+        [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">
+    <!-- Line Chart -->
+    <div *ngIf="chartType === 'line'" class="chart-canvas-container">
      <canvas baseChart
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="chartLegend"
-        [type]="'bar'"
+        [chartType]="'line'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Pie Chart -->
+    <div *ngIf="chartType === 'pie'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'pie'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Doughnut Chart -->
+    <div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'doughnut'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Bubble Chart -->
+    <div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="bubbleChartData"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'bubble'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Radar Chart -->
+    <div *ngIf="chartType === 'radar'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'radar'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Polar Area Chart -->
+    <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'polarArea'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Scatter Chart -->
+    <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'scatter'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Default/Unknown Chart Type -->
+    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'bar'"
        (chartClick)="chartClicked($event)"
        (chartHover)="chartHovered($event)">
      </canvas>
--- 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
@@ -1,10 +1,9 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild } 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',
@@ -76,151 +75,9 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
  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
+    private filterService: FilterService
  ) { }

  ngOnInit(): void {
@@ -231,20 +88,6 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
      })
    );
    
-    // 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();
@@ -253,21 +96,12 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
    
    // 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,
@@ -331,11 +165,6 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
      });
    }
    
-    // 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 ||
@@ -374,179 +203,10 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
    }
  }

-  // 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);
+    console.log('Checking for filters - baseFilters:', this.baseFilters, 'hasBaseFilters:', hasBaseFilters);
    return hasBaseFilters;
  }

@@ -675,37 +335,31 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
      }
    };
    
-    // 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;
+      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();
    }
@@ -923,7 +577,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
          mode: 'point',
          intersect: false,
          callbacks: {
-            label: function (context: any) {
+            label: function(context: any) {
              const point: any = context.raw;
              if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
                const yValue = parseFloat(point.y);
@@ -1609,17 +1263,17 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
      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;
+        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);
+      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
+      b = hue2rgb(p, q, h - 1/3);
    }
    
    return {
@@ -2034,8 +1688,6 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
    return 0;
  }

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


 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -38,7 +60,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';
@@ -84,6 +109,13 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
 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';
@@ -94,15 +126,10 @@ import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.c
 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';
+
+
+
+
 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' },
@@ -195,12 +222,6 @@ 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 },
        ]
      },
      
@@ -308,8 +329,178 @@ const routes: Routes = [



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

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


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


 import { CommonModule } from '@angular/common';
@@ -53,6 +75,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';
@@ -113,7 +138,13 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
 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';
@@ -131,37 +162,6 @@ import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.c

 // 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';

@NgModule({
  declarations: [
@@ -173,35 +173,6 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
    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
-    
-
    DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
    // Add CompactFilterRunnerComponent to declarations
    CompactFilterRunnerComponent,
@@ -214,7 +185,7 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
    ApiregisterylineComponent,
    DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
    MappingruleaddComponent,
-    MappingruleeditComponent, Stepper_workflowComponent,
+    MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
    Data_lakeComponent,
    SureconnectComponent,
    EditsureconnectComponent,
@@ -227,8 +198,32 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner


    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,
@@ -255,10 +250,8 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
  providers: [
    CookieService,
    WireframeService,
-    DynamicChartLoaderService
-  ],
-  exports: [
-    ChartConfigManagerComponent
+
+
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
--- a/frontend/angular-clarity-master/src/app/services/api/login.service.ts
+++ b/frontend/angular-clarity-master/src/app/services/api/login.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';

-import { Observable, BehaviorSubject } from 'rxjs';
+import { Observable, BehaviorSubject, Subject } from 'rxjs';
 import { UserInfoService, LoginInfoInStorage} from '../user-info.service';
 import { ApiRequestService } from './api-request.service';
 import { HttpClient } from '@angular/common/http';
@@ -43,11 +43,14 @@ export class LoginService {

        */

-        let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
+        // let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
+       let loginDataSubject: Subject<any> = new Subject<any>();
+
        let loginInfoReturn:LoginInfoInStorage; // Object that we want to send back to Login Page

        this.apiRequest.loginAuthentication('token/session', bodyData)
-            .subscribe(jsonResp => {
+            .subscribe({
+                next: (jsonResp) => {
                    console.log('login response in service : ', jsonResp);
                    if (jsonResp.operationMessage=='Login Failed') {
                      this.toastr.warning('Not Login Getting Error check your Username and password');
@@ -78,7 +81,7 @@ export class LoginService {
                        this.userInfoService.storeUserInfo(JSON.stringify(loginInfoReturn.user));
                    }
                    else {
-                    //Create a faliure object that we want to send back to login page
+                        //Create a failure object that we want to send back to login page
                        loginInfoReturn = {
                            "success":false,
                            "message":jsonResp.operationMessage,
@@ -86,8 +89,9 @@ export class LoginService {
                        };
                    }
                    loginDataSubject.next(loginInfoReturn);
+                    loginDataSubject.complete(); // Complete the subject
                },
-            err => {
+                error: (err) => {
                    console.log('login error ', err);
                    loginInfoReturn = {
                        "success": false,
@@ -97,6 +101,9 @@ export class LoginService {
                    if (err) {
                        this.toastr.error('Getting Server Error');
                    }
+                    loginDataSubject.next(loginInfoReturn); // Send the error response
+                    loginDataSubject.complete(); // Complete the subject
+                }
            });

        return loginDataSubject;
--- a/frontend/angular-clarity-master/src/app/services/scheduler.service.ts
+++ b/frontend/angular-clarity-master/src/app/services/scheduler.service.ts
@@ -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);
-  }
-}
Author	SHA1	Message	Date
Gaurav Kumar	807058e40d	chart	2025-11-01 16:20:59 +05:30
Gaurav Kumar	c6022b0e22	bar chart	2025-11-01 12:34:16 +05:30
Gaurav Kumar	9aed6e0d43	Update unified-chart.component.html	2025-11-01 12:18:01 +05:30
Gaurav Kumar	64b664e625	Update editnewdash.component.ts	2025-11-01 11:00:10 +05:30
Gaurav Kumar	49f1a2fbf2	Update unified-chart.component.ts	2025-11-01 10:54:41 +05:30
Gaurav Kumar	6bfe890cd9	Update editnewdash.component.ts	2025-11-01 10:03:00 +05:30
Gaurav Kumar	3e70f85644	dashboard	2025-10-31 17:19:18 +05:30
Gaurav Kumar	482805b5cf	Update editnewdash.component.ts	2025-10-31 17:17:01 +05:30
Gaurav Kumar	ffda17e6b1	unified	2025-10-31 16:35:15 +05:30
Gaurav Kumar	7396843bc6	Update report-build2all.component.html	2025-10-31 16:03:37 +05:30
Gaurav Kumar	4f75ecb3e0	builder	2025-10-31 15:51:28 +05:30
Gaurav Kumar	7c1a487114	dashboard	2025-10-31 10:47:43 +05:30
Gaurav Kumar	47e9fb92e3	Update compact-filter.component.ts	2025-10-30 12:46:39 +05:30
Gaurav Kumar	7f735dcada	Update editnewdash.component.ts	2025-10-30 12:29:22 +05:30
Gaurav Kumar	bd315f42a3	compact	2025-10-29 17:55:05 +05:30
Gaurav Kumar	e8c1f46430	Update editnewdash.component.html	2025-10-29 17:30:13 +05:30
Gaurav Kumar	fa96ca81bd	runner	2025-10-29 17:18:26 +05:30
Gaurav Kumar	c384f44c0c	doughnut	2025-10-29 17:01:50 +05:30
Gaurav Kumar	50df914ca9	pie	2025-10-29 16:52:45 +05:30
Gaurav Kumar	e0bd888c45	polr	2025-10-29 16:14:45 +05:30
Gaurav Kumar	02b82fcaf8	Update polar-chart.component.ts	2025-10-29 16:07:59 +05:30
Gaurav Kumar	557afc348f	bubble	2025-10-29 15:55:01 +05:30
Gaurav Kumar	1dec787062	Update bubble-chart.component.ts	2025-10-29 15:50:08 +05:30
Gaurav Kumar	8853cf75cf	Update bubble-chart.component.ts	2025-10-29 15:42:21 +05:30
Gaurav Kumar	ad57f11f8a	bubble	2025-10-29 15:34:10 +05:30
Gaurav Kumar	9b775a8c63	fin	2025-10-29 12:59:20 +05:30
Gaurav Kumar	cf4fc1be93	todo	2025-10-29 12:21:24 +05:30
Gaurav Kumar	4c135c4901	to do	2025-10-29 12:16:54 +05:30
Gaurav Kumar	0b738ca7ca	scatter	2025-10-29 11:35:09 +05:30
Gaurav Kumar	1b17bb706d	scatter	2025-10-29 11:11:36 +05:30
Gaurav Kumar	f740076d60	bar chart	2025-10-28 17:04:02 +05:30
Gaurav Kumar	bedcc0822d	chart	2025-10-28 16:31:45 +05:30
Gaurav Kumar	87810acc9e	line	2025-10-28 15:41:36 +05:30
Gaurav Kumar	96b90e5dbd	barchart	2025-10-28 15:32:37 +05:30
Gaurav Kumar	ced99e0940	grid view	2025-10-28 15:11:40 +05:30
Gaurav Kumar	4f82ae8698	grid view	2025-10-28 12:40:01 +05:30
Gaurav Kumar	e6779e8f34	filter	2025-10-28 12:29:10 +05:30
Gaurav Kumar	82425d5377	Update editnewdash.component.html	2025-10-28 12:13:15 +05:30
Gaurav Kumar	2995328ec1	compact filter	2025-10-27 20:36:22 +05:30
Gaurav Kumar	afc2c1f8a1	filter with runner	2025-10-27 20:12:22 +05:30
Gaurav Kumar	418b02acd7	checkbox multislect filter, in edit new dash	2025-10-27 19:02:47 +05:30
Gaurav Kumar	cdd752469c	builder	2025-10-27 18:48:16 +05:30
Gaurav Kumar	cdcf1e07c7	Update compact-filter.component.ts	2025-10-25 21:57:10 +05:30
Gaurav Kumar	c6ad8b5c2f	filter	2025-10-25 21:46:54 +05:30
Gaurav Kumar	98e0908920	sheild	2025-10-25 20:15:06 +05:30
Gaurav Kumar	8266bfdc01	dashboard	2025-10-25 20:08:04 +05:30
Gaurav Kumar	f2b6a4d145	dashboard	2025-10-25 19:28:03 +05:30
Gaurav Kumar	02f37a1bc5	shield	2025-10-25 17:55:46 +05:30
Gaurav Kumar	f24138cfbd	shield dashboard	2025-10-25 16:15:16 +05:30
Gaurav Kumar	aade12d6ff	filter	2025-10-25 15:02:26 +05:30
Gaurav Kumar	6c01e71d04	dashboard	2025-10-25 14:43:42 +05:30
Gaurav Kumar	f60657ca64	filter	2025-10-25 10:33:16 +05:30