datalake

frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts

@@ -97,7 +97,6 @@ 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
@@ -107,7 +106,7 @@ export class LoginPageComponent implements OnInit {
             return;
           }
           // Handle different response formats
-          if (resp.success === 'false' || resp.success === false) {
+          if (resp.success === 'false') {
             this.isError = true;
             this.errMsg = resp.message || 'Login failed';
             return;
@@ -124,7 +123,6 @@ 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;
           

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.html

@@ -71,13 +71,19 @@
             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">
@@ -104,7 +110,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>
@@ -138,11 +144,14 @@
             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>
@@ -157,20 +166,47 @@
             </clr-signpost>
 
             <!-- New JSON Update button -->
-              <button class="btn btn-icon btn-sm" (click)="updateJson(user.id)" title="Update JSON">
+            <button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
               <clr-icon shape="refresh"></clr-icon>
             </button>
 
             <!-- Calculated Field button -->
-              <button class="btn btn-icon btn-sm" (click)="fetchAvailableKeys(user, false)" title="Create Calculated Field">
+            <button class="btn btn-icon" (click)="fetchAvailableKeys(user)" title="Create Calculated Field">
               <clr-icon shape="calculator"></clr-icon>
             </button>
 
             <!-- Group By button -->
-              <button class="btn btn-icon btn-sm" (click)="openGroupByModal(user)" title="Group By Configuration">
+            <button class="btn btn-icon" (click)="openGroupByModal(user)" title="Group By Configuration">
               <clr-icon shape="group"></clr-icon>
             </button>
-            </div>
+
+            <!-- Blending Keys button (only shown for blending type with non-empty blending_lakeids) -->
+            <button class="btn btn-icon" (click)="fetchBlendingKeys(user)" title="Configure Blending Query"
+              *ngIf="canShowBlendingAction(user)">
+              <clr-icon shape="code"></clr-icon>
+            </button>
+
+            <!-- Field Mapping button -->
+            <button class="btn btn-icon" (click)="openFieldMappingModal(user)" title="Field Mapping"
+              *ngIf="user.url && user.sure_connect_id">
+              <clr-icon shape="map"></clr-icon>
+            </button>
+
+            <!-- Scheduler button -->
+            <button class="btn btn-icon" (click)="openSchedulerModal(user)" title="Scheduler">
+              <clr-icon shape="clock"></clr-icon>
+            </button>
+
+            <!-- Webhook toggle button -->
+            <button class="btn btn-icon" (click)="toggleWebhook(user)" title="Toggle Webhook">
+              <clr-icon shape="network-globe"></clr-icon>
+            </button>
+
+            <!-- Copy Webhook URL button -->
+            <button class="btn btn-icon" (click)="copyWebhookUrl(user.webhook_url)" title="Copy Webhook URL"
+              *ngIf="user.webhook_url && user.webhook_url.trim() !== ''">
+              <clr-icon shape="copy-to-clipboard"></clr-icon>
+            </button>
           </clr-dg-cell>
 
           <!-- who colmn -->
@@ -409,16 +445,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</label>
+          <label>Url Endpoint</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>
@@ -434,8 +470,30 @@
           </select>
         </div>
 
-        <!-- Add ref_datalake_id dropdown -->
+        <!-- Data Lake Type -->
         <div class="clr-col-sm-12">
+          <label>Data Lake Type</label>
+          <select class="clr-input" [(ngModel)]="rowSelected.datalake_type" name="datalake_type">
+            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
+          </select>
+        </div>
+
+        <!-- Blending Data Lakes (only show when blending type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
+          <label>Blending Data Lakes</label>
+          <div class="checkbox-container">
+            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
+              <input type="checkbox" [value]="dataLake.id"
+                (change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
+                [checked]="isEditBlendingLakeSelected(dataLake.id)">
+              <label>{{ dataLake.name }}</label>
+            </div>
+          </div>
+          <small class="clr-subtext">Select data lakes to blend</small>
+        </div>
+
+        <!-- Reference Data Lake (only show when normal type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'normal'">
           <label>Reference Data Lake</label>
           <select class="clr-input" [(ngModel)]="rowSelected.ref_datalake_id" name="ref_datalake_id">
             <option value="">Select Data Lake</option>
@@ -538,16 +596,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>
@@ -563,8 +621,29 @@
           </select>
         </div>
 
-        <!-- Add ref_datalake_id dropdown -->
+        <!-- Data Lake Type -->
         <div class="clr-col-sm-12">
+          <label>Data Lake Type</label>
+          <select formControlName="datalake_type">
+            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
+          </select>
+        </div>
+
+        <!-- Blending Data Lakes (only show when blending type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
+          <label>Blending Data Lakes</label>
+          <div class="checkbox-container">
+            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
+              <input type="checkbox" [value]="dataLake.id" (change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
+                [checked]="isBlendingLakeSelected(dataLake.id)">
+              <label>{{ dataLake.name }}</label>
+            </div>
+          </div>
+          <small class="clr-subtext">Select data lakes to blend</small>
+        </div>
+
+        <!-- Reference Data Lake (only show when normal type is selected) -->
+        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'normal'">
           <label>Reference Data Lake</label>
           <select formControlName="ref_datalake_id">
             <option value="">Select Data Lake</option>
@@ -916,4 +995,195 @@
   </div>
 </clr-modal>
 
-<!-- htmlpopup -->   
+<!-- 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>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.scss

@@ -384,3 +384,494 @@
   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;
+}

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.ts

@@ -2,6 +2,7 @@ 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';
@@ -10,6 +11,7 @@ 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',
@@ -66,6 +68,12 @@ 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[] = [];
@@ -99,10 +107,36 @@ 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,
@@ -124,23 +158,25 @@ 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
+    });
     
-      sure_connect_id: [null], // Add SureConnect field
-      ref_datalake_id: [null], // Add Data Lake reference 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);
+    }
     
-    }); // component_button200
     // form code start
     this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
       console.log(data);
@@ -232,6 +268,20 @@ 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);
     });
@@ -240,8 +290,7 @@ export class Data_lakeComponent implements OnInit {
   // Fetch Data Lake list for reference dropdown
   getDataLakeList() {
     this.mainService.getAll().subscribe((data: any[]) => {
-      // Filter out the current item to avoid self-reference
-      this.dataLakeList = data.filter(item => item.id !== (this.rowSelected?.id || 0));
+      this.dataLakeList = data;
       console.log('Data Lake List:', this.dataLakeList);
     }, (error) => {
       console.log('Error fetching Data Lake list:', error);
@@ -686,8 +735,22 @@ 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;
-    // Set the selected Data Lake for edit form
-    this.selectedDataLake = row.ref_datalake_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 = [];
+    }
+    
     // Use setTimeout to ensure the component has time to initialize
     setTimeout(() => {
       this.modalEdit = true;
@@ -838,18 +901,33 @@ export class Data_lakeComponent implements OnInit {
   }
   
   goToAdd(row) {
-    this.modalAdd = true;
+    this.modalAdd = false;
     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() {
@@ -1290,4 +1368,433 @@ 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);
+  }
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.service.ts

@@ -42,6 +42,12 @@ 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;
@@ -51,5 +57,11 @@ 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
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.html

@@ -1,6 +1,15 @@
 <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>
@@ -28,7 +37,7 @@
       </div>
     </div>
     
-    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-6 clr-col-12">
+    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
       <div class="form-group">
         <label>Month</label>
         <select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
@@ -37,7 +46,7 @@
       </div>
     </div>
     
-    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-12 clr-col-12">
+    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
       <div class="form-group">
         <label>Day of Week</label>
         <select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.ts

@@ -10,7 +10,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
   @Input() instanceId: string = ''; // Unique identifier for each instance
   @Output() cronExpressionChange = new EventEmitter<string>();
   
-  // Cron job fields
+  // Cron job fields (now starting with seconds)
+  second: string = '*';
   minute: string = '*';
   hour: string = '*';
   dayOfMonth: string = '*';
@@ -21,6 +22,7 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
   cronDescription: string = '';
   
   // Options for selectors
+  secondOptions: any[] = [];
   minuteOptions: any[] = [];
   hourOptions: any[] = [];
   dayOfMonthOptions: any[] = [];
@@ -29,9 +31,10 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     // Initialize options for each instance
-    this.minuteOptions = this.generateOptions(0, 59);
-    this.hourOptions = this.generateOptions(0, 23);
-    this.dayOfMonthOptions = this.generateOptions(1, 31);
+    this.secondOptions = this.generateOptions(0, 59, 'second');
+    this.minuteOptions = this.generateOptions(0, 59, 'minute');
+    this.hourOptions = this.generateOptions(0, 23, 'hour');
+    this.dayOfMonthOptions = this.generateOptions(1, 31, 'day');
     this.monthOptions = [
       { value: '*', label: 'Every month' },
       { value: '1', label: 'January' },
@@ -73,8 +76,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
     }
   }
 
-  generateOptions(start: number, end: number): any[] {
-    const options = [{ value: '*', label: `Every (${start === 0 ? '0' : start}-${end})` }];
+  generateOptions(start: number, end: number, type: string): any[] {
+    const options = [{ value: '*', label: `Every ${type} (${start === 0 ? '0' : start}-${end})` }];
     for (let i = start; i <= end; i++) {
       options.push({ value: i.toString(), label: i.toString() });
     }
@@ -83,7 +86,16 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
 
   parseCronExpression(expression: string) {
     const parts = expression.split(' ');
-    if (parts.length >= 5) {
+    if (parts.length >= 6) {  // Now expecting 6 parts with seconds
+      this.second = parts[0];
+      this.minute = parts[1];
+      this.hour = parts[2];
+      this.dayOfMonth = parts[3];
+      this.month = parts[4];
+      this.dayOfWeek = parts[5];
+    } else if (parts.length >= 5) {  // For backward compatibility with 5-part cron expressions
+      // Default seconds to 0 if not provided
+      this.second = '0';
       this.minute = parts[0];
       this.hour = parts[1];
       this.dayOfMonth = parts[2];
@@ -95,19 +107,33 @@ 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 === '*') {
-      description += 'every minute';
+      if (this.second === '*') {
+        description += '';
+      } else {
+        description += ' of every minute';
+      }
     } else if (this.minute.includes('/')) {
       const interval = this.minute.split('/')[1];
-      description += `every ${interval} minutes`;
+      description += ` of every ${interval} minutes`;
     } else {
       description += ` at minute ${this.minute}`;
     }
     
     // Hour description
     if (this.hour === '*') {
-      if (this.minute === '*') {
+      if (this.minute === '*' && this.second === '*') {
         description += '';
       } else {
         description += ' past every hour';
@@ -146,21 +172,23 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
     }
     
     // Special case for simple patterns
-    if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
+    if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
       description = 'Runs at midnight on the first day of every month';
-    } else if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+    } else if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
       description = 'Runs at midnight every day';
-    } else if (this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+    } else if (this.second === '0' && this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
       description = 'Runs at the top of every hour';
-    } else if (this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
-      description = 'Runs every minute';
+    } else if (this.second === '0' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+      description = 'Runs at the top of every minute';
+    } else if (this.second === '*' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
+      description = 'Runs every second';
     }
     
     this.cronDescription = description;
   }
 
   buildCronExpression() {
-    const expression = `${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
+    const expression = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
     this.cronExpressionChange.emit(expression);
     this.generateDescription(); // Update description when expression changes
     return expression;

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/dataLakescheduler.service.ts

@@ -0,0 +1,47 @@
+
+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);
+  }
+}

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts

@@ -0,0 +1,125 @@
+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;
+      })
+    );
+  }
+}

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts

@@ -127,6 +127,7 @@ export class ChartTypeFieldsComponent implements OnInit {
       return;
     }
 
+    console.log('Updating dynamic field:', this.selectedDynamicField);
     this.loadingState = ClrLoadingState.LOADING;
     this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
       next: (data) => {

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html

@@ -17,6 +17,9 @@
   <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>
@@ -39,7 +42,8 @@
     </ul>
   </nav>
   <div style="width: 100%;">
-    <gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
+    <!-- Remove the (drop) event binding since it's already handled by gridster's emptyCellDropCallback -->
+    <gridster [options]="options" 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">

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts

@@ -30,6 +30,8 @@ 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;
@@ -58,59 +60,60 @@ 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'
@@ -206,6 +209,9 @@ 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,
@@ -214,7 +220,8 @@ export class EditnewdashComponent implements OnInit {
     private datastoreService: DatastoreService,
     private alertService: AlertsService,
     private sureconnectService: SureconnectService,
-    private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor
+    private filterService: FilterService,
+    private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
 
   // Add property to track if coming from dashboard runner
   fromRunner: boolean = false;
@@ -299,6 +306,9 @@ 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();
     
@@ -306,6 +316,37 @@ 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[]) => {
@@ -448,6 +489,7 @@ 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
@@ -504,9 +546,11 @@ export class EditnewdashComponent implements OnInit {
     //this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
   }
 
-  onDrop(ev) {
+  onDrop = (ev) => {
+    console.log("on drop event ", ev);
     const componentType = ev.dataTransfer.getData("widgetIdentifier");
     // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
+    console.log("on drop ", componentType);
     let maxChartId = 0;
     if (this.dashboardArray && this.dashboardArray.length > 0) {
       const validChartIds = this.dashboardArray
@@ -520,155 +564,26 @@ export class EditnewdashComponent implements OnInit {
     switch (componentType) {
       // Handle all chart types by converting them to unified charts
       case "radar_chart":
-        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
-        });
+        // Use dynamic chart creation for all chart types
+        return this.createDynamicChart('radar', maxChartId);
       case "line_chart":
-        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
-        });
+        return this.createDynamicChart('line', maxChartId);
       case "doughnut_chart":
-        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
-        });
+        return this.createDynamicChart('doughnut', maxChartId);
       case "bar_chart":
-        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
-        });
+        return this.createDynamicChart('bar', maxChartId);
       case "pie_chart":
-        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
-        });
+        return this.createDynamicChart('pie', maxChartId);
       case "polar_area_chart":
-        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
-        });
+        return this.createDynamicChart('polar', maxChartId);
       case "bubble_chart":
-        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
-        });
+        return this.createDynamicChart('bubble', maxChartId);
       case "scatter_chart":
-        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
-        });
+        return this.createDynamicChart('scatter', maxChartId);
       case "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
-        });
+        return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
       case "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
-        });
+        return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
       case "to_do_chart":
         return this.dashboardArray.push({
           cols: 5,
@@ -715,21 +630,16 @@ export class EditnewdashComponent implements OnInit {
           name: "Grid View"
         });
       case "unified_chart":
-        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
-        });
+        return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
+      default:
+        // Handle any other chart types dynamically
+        // Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
+        const chartTypeName = componentType.replace('_chart', '');
+        console.log('Creating dynamic chart of type:', chartTypeName);
+        console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
+        
+        // Use dynamic chart creation for all chart types
+        return this.createDynamicChart(chartTypeName, maxChartId);
     }
   }
   removeItem(item) {
@@ -1143,14 +1053,10 @@ export class EditnewdashComponent implements OnInit {
     }
     
     // For UnifiedChartComponent, pass chart properties with chartType
-    // 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)) {
+    // Check if the component is UnifiedChartComponent dynamically
+    if (item.component === UnifiedChartComponent || 
+        (item.component && item.component.name === 'UnifiedChartComponent') ||
+        item.name === 'Unified Chart') {
       const unifiedChartInputs = {
         chartType: item.chartType || 'bar',
         xAxis: item.xAxis,
@@ -1959,7 +1865,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'));
     
@@ -2045,4 +1951,264 @@ 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';
+    }
+  }
+
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html

@@ -26,116 +26,27 @@
 
   <!-- Render different chart types based on chartType input -->
   <div class="chart-wrapper">
-    <!-- Bar Chart -->
-    <div *ngIf="chartType === 'bar'" class="chart-canvas-container">
+    <!-- Dynamic Chart Container - uses extracted dynamic options and styles but static template -->
+    <div *ngIf="dynamicTemplate || chartType" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'bar'"
+        [type]="chartType || 'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
     </div>
 
-    <!-- Line Chart -->
-    <div *ngIf="chartType === 'line'" class="chart-canvas-container">
+    <!-- Fallback for when no chart type is specified -->
+    <div *ngIf="!dynamicTemplate && !chartType" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [chartType]="'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'"
+        [type]="'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { Dashboard3Service } from '../../../../../../services/builder/dashboard3.service';
 import { FilterService } from '../../common-filter/filter.service';
 import { Subscription } from 'rxjs';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartDataset } from 'chart.js';
+import { DynamicChartLoaderService } from '../../chart-config/dynamic-chart-loader.service';
 
 @Component({
   selector: 'app-unified-chart',
@@ -75,9 +76,151 @@ 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 filterService: FilterService,
+    private dynamicChartLoader: DynamicChartLoaderService,
+    private renderer: Renderer2,
+    private el: ElementRef
   ) { }
 
   ngOnInit(): void {
@@ -110,12 +253,21 @@ 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,
@@ -179,6 +331,11 @@ 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 ||
@@ -217,10 +374,179 @@ 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;
   }
 
@@ -349,31 +675,37 @@ 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();
     }

frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts

@@ -1,25 +1,3 @@
-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';
@@ -60,10 +38,7 @@ 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';
@@ -109,13 +84,6 @@ 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';
@@ -127,10 +95,14 @@ 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' },
@@ -224,6 +196,11 @@ const routes: Routes = [
           { 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 },
         ]
       },
 
@@ -331,178 +308,8 @@ 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 },
 
 

frontend/angular-clarity-master/src/app/modules/main/main.module.ts

@@ -1,25 +1,3 @@
-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';
@@ -75,9 +53,6 @@ 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';
@@ -138,13 +113,7 @@ 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';
@@ -165,11 +134,34 @@ import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-das
 // Import UnifiedChartComponent
 import { UnifiedChartComponent } from './builder/dashboardnew/gadgets/unified-chart/unified-chart.component';
 // Import ChartConfigManagerComponent
-import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config-manager/chart-config-manager.component';
+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: [
@@ -189,6 +181,27 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
     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,
@@ -201,7 +214,7 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
     ApiregisterylineComponent,
     DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
     MappingruleaddComponent,
-    MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
+    MappingruleeditComponent, Stepper_workflowComponent,
     Data_lakeComponent,
     SureconnectComponent,
     EditsureconnectComponent,
@@ -214,32 +227,8 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
 
 
     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,
@@ -266,8 +255,10 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
   providers: [
     CookieService,
     WireframeService,
-
-
+    DynamicChartLoaderService
+  ],
+  exports: [
+    ChartConfigManagerComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

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, Subject } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { UserInfoService, LoginInfoInStorage} from '../user-info.service';
 import { ApiRequestService } from './api-request.service';
 import { HttpClient } from '@angular/common/http';
@@ -43,14 +43,11 @@ 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: Subject<any> = new Subject<any>();
-
+        let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
         let loginInfoReturn:LoginInfoInStorage; // Object that we want to send back to Login Page
 
         this.apiRequest.loginAuthentication('token/session', bodyData)
-            .subscribe({
-                next: (jsonResp) => {
+            .subscribe(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');
@@ -81,7 +78,7 @@ export class LoginService {
                     this.userInfoService.storeUserInfo(JSON.stringify(loginInfoReturn.user));
                 }
                 else {
-                        //Create a failure object that we want to send back to login page
+                    //Create a faliure object that we want to send back to login page
                     loginInfoReturn = {
                         "success":false,
                         "message":jsonResp.operationMessage,
@@ -89,9 +86,8 @@ export class LoginService {
                     };
                 }
                 loginDataSubject.next(loginInfoReturn);
-                    loginDataSubject.complete(); // Complete the subject
             },
-                error: (err) => {
+            err => {
                 console.log('login error ', err);
               loginInfoReturn = {
                 "success": false,
@@ -101,9 +97,6 @@ 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;

frontend/angular-clarity-master/src/app/services/scheduler.service.ts

@@ -0,0 +1,46 @@
+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);
+  }
+}