property

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

@@ -97,6 +97,7 @@ export class LoginPageComponent implements OnInit {
       .subscribe(
         resp => {
           console.log('API Response received:', resp);
+          // Always reset loading state when response is received
           this.isLoading = false;
           
           // Handle different response formats
@@ -106,7 +107,7 @@ export class LoginPageComponent implements OnInit {
             return;
           }
           // Handle different response formats
-          if (resp.success === 'false') {
+          if (resp.success === 'false' || resp.success === false) {
             this.isError = true;
             this.errMsg = resp.message || 'Login failed';
             return;
@@ -123,6 +124,7 @@ export class LoginPageComponent implements OnInit {
         },
         (errResponse: HttpErrorResponse) => {
           console.log('API Error received:', errResponse);
+          // Always reset loading state when error occurs
           this.isLoading = false;
           this.isError = true;
           

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

@@ -71,19 +71,13 @@
             Calculated Fields
           </ng-container></clr-dg-column>
 
-        <!-- Webhook Status Column -->
+
-        <clr-dg-column>
-          <ng-container *clrDgHideableColumn="{hidden: false}">
-            Webhook Status
-          </ng-container>
-        </clr-dg-column>
 
         <!-- who column -->
         <clr-dg-column>
           <ng-container *clrDgHideableColumn="{hidden: false}">
             <clr-icon shape="bars"></clr-icon> Action
-          </ng-container>
+          </ng-container></clr-dg-column>
-        </clr-dg-column>
         <!-- end -->
 
         <clr-dg-row *clrDgItems="let user of product" [clrDgItem]="user">
@@ -110,7 +104,7 @@
               <span
                 style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
                 title="{{user.url_endpoint}}" (click)="showFullUrl(user.url_endpoint)">
-                {{user.url | slice:0:30}}{{user?.url_endpoint?.length > 30 ? '...' : ''}}
+                {{user.url | slice:0:30}}{{user.url_endpoint.length > 30 ? '...' : ''}}
               </span>
               <button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url_endpoint)" title="Copy URL">
                 <clr-icon shape="copy-to-clipboard"></clr-icon>
@@ -144,14 +138,11 @@
             style="cursor: pointer; align-items: center;"><clr-icon shape="details"
               *ngIf="user.calculated_field_json"></clr-icon></clr-dg-cell>
 
-          <!-- Webhook Status Cell -->
+
-          <clr-dg-cell>
-            <span *ngIf="user.webhook_url && user.webhook_url.trim() !== ''" class="webhook-enabled">Enabled</span>
-            <span *ngIf="!user.webhook_url || user.webhook_url.trim() === ''" class="webhook-disabled">Disabled</span>
-          </clr-dg-cell>
 
           <!-- who column -->
           <clr-dg-cell>
+            <div style="display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;">
               <clr-signpost>
                 <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
                     style="color: rgb(0, 130, 236);"></clr-icon></span>
@@ -166,47 +157,20 @@
               </clr-signpost>
 
               <!-- New JSON Update button -->
-            <button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
+              <button class="btn btn-icon btn-sm" (click)="updateJson(user.id)" title="Update JSON">
                 <clr-icon shape="refresh"></clr-icon>
               </button>
 
               <!-- Calculated Field button -->
-            <button class="btn btn-icon" (click)="fetchAvailableKeys(user)" title="Create Calculated Field">
+              <button class="btn btn-icon btn-sm" (click)="fetchAvailableKeys(user, false)" title="Create Calculated Field">
                 <clr-icon shape="calculator"></clr-icon>
               </button>
 
               <!-- Group By button -->
-            <button class="btn btn-icon" (click)="openGroupByModal(user)" title="Group By Configuration">
+              <button class="btn btn-icon btn-sm" (click)="openGroupByModal(user)" title="Group By Configuration">
                 <clr-icon shape="group"></clr-icon>
               </button>
-
+            </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 -->
@@ -445,16 +409,16 @@
             instanceId="edit-form-{{rowSelected.id}}"></app-cron-job-builder>
         </div>
 
-        <!-- <div class="clr-col-sm-12">
+        <div class="clr-col-sm-12">
           <label> json</label>
           <input id="name" type="Text" class="form-control" style="border: none; outline: none; height:33px !important;"
             [(ngModel)]="rowSelected.json" name=" json " />
         </div>
 
         <div class="clr-col-sm-12">
-          <label>Url Endpoint</label>
+          <label>Url</label>
           <input class="clr-input" type="text" [(ngModel)]="rowSelected.url_endpoint" name="url_endpoint" />
-        </div> -->
+        </div>
 
         <div class="clr-col-sm-12">
           <label>Batch Volume</label>
@@ -470,30 +434,8 @@
           </select>
         </div>
 
-        <!-- Data Lake Type -->
+        <!-- Add ref_datalake_id dropdown -->
         <div class="clr-col-sm-12">
-          <label>Data Lake Type</label>
-          <select class="clr-input" [(ngModel)]="rowSelected.datalake_type" name="datalake_type">
-            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
-          </select>
-        </div>
-
-        <!-- Blending Data Lakes (only show when blending type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
-          <label>Blending Data Lakes</label>
-          <div class="checkbox-container">
-            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
-              <input type="checkbox" [value]="dataLake.id"
-                (change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
-                [checked]="isEditBlendingLakeSelected(dataLake.id)">
-              <label>{{ dataLake.name }}</label>
-            </div>
-          </div>
-          <small class="clr-subtext">Select data lakes to blend</small>
-        </div>
-
-        <!-- Reference Data Lake (only show when normal type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'normal'">
           <label>Reference Data Lake</label>
           <select class="clr-input" [(ngModel)]="rowSelected.ref_datalake_id" name="ref_datalake_id">
             <option value="">Select Data Lake</option>
@@ -596,16 +538,16 @@
             (cronExpressionChange)="onAddCronExpressionChange($event)" instanceId="add-form"></app-cron-job-builder>
         </div>
 
-        <!-- <div class="clr-col-sm-12">
+        <div class="clr-col-sm-12">
           <label>json</label>
           <input class="form-control" type="Text" formControlName="json"
             style="border: none; outline: none; height:33px !important;" />
-        </div> -->
+        </div>
 
-        <!-- <div class="clr-col-sm-12">
+        <div class="clr-col-sm-12">
           <label> Url Endpoint</label>
           <input class="clr-input" type="text" formControlName="url_endpoint" />
-        </div> -->
+        </div>
 
         <div class="clr-col-sm-12">
           <label> Batch Volume</label>
@@ -621,29 +563,8 @@
           </select>
         </div>
 
-        <!-- Data Lake Type -->
+        <!-- Add ref_datalake_id dropdown -->
         <div class="clr-col-sm-12">
-          <label>Data Lake Type</label>
-          <select formControlName="datalake_type">
-            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
-          </select>
-        </div>
-
-        <!-- Blending Data Lakes (only show when blending type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
-          <label>Blending Data Lakes</label>
-          <div class="checkbox-container">
-            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
-              <input type="checkbox" [value]="dataLake.id" (change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
-                [checked]="isBlendingLakeSelected(dataLake.id)">
-              <label>{{ dataLake.name }}</label>
-            </div>
-          </div>
-          <small class="clr-subtext">Select data lakes to blend</small>
-        </div>
-
-        <!-- Reference Data Lake (only show when normal type is selected) -->
-        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'normal'">
           <label>Reference Data Lake</label>
           <select formControlName="ref_datalake_id">
             <option value="">Select Data Lake</option>
@@ -995,195 +916,4 @@
   </div>
 </clr-modal>
 
-<!-- Blending Keys Panel -->
+<!-- htmlpopup -->   
-<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,494 +384,3 @@
   border: 1px solid #ccc;
   border-radius: 4px;
 }
-
-/* Data Lake Type Styles */
-.clr-subtext {
-  display: block;
-  margin-top: 5px;
-  font-size: 12px;
-  color: #666;
-}
-
-[data-multiple] {
-  height: auto !important;
-  min-height: 80px;
-}
-
-/* Checkbox Styles for Blending Data Lakes */
-.checkbox-container {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 10px;
-  max-height: 200px;
-  overflow-y: auto;
-  background-color: #f9f9f9;
-}
-
-.checkbox-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.checkbox-item input[type="checkbox"] {
-  margin-right: 8px;
-}
-
-.checkbox-item label {
-  margin-bottom: 0;
-  cursor: pointer;
-}
-
-/* Blending Keys Panel Styles */
-.blending-keys-panel {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: white;
-  border-top: 1px solid #ccc;
-  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
-  z-index: 1000;
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  border-bottom: 1px solid #eee;
-  background-color: #f5f5f5;
-}
-
-.panel-header h3 {
-  margin: 0;
-  color: #333;
-}
-
-.panel-content {
-  padding: 15px;
-}
-
-.keys-container {
-  margin-bottom: 20px;
-  padding: 10px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  background-color: #fafafa;
-}
-
-.keys-container h4 {
-  margin-top: 0;
-  color: #555;
-}
-
-.headers-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 10px;
-}
-
-.header-tag {
-  display: inline-block;
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 12px;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-family: monospace;
-}
-
-.sql-editor-container {
-  margin-top: 20px;
-}
-
-.sql-textarea {
-  width: 100%;
-  font-family: 'Courier New', monospace;
-  font-size: 14px;
-}
-
-.editor-actions {
-  margin-top: 10px;
-  text-align: right;
-}
-
-/* Blending Configuration Modal Styles */
-.blending-config-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.section-title {
-  color: #0072a0;
-  font-weight: 600;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-}
-
-.section-icon {
-  margin-right: 10px;
-}
-
-.keys-section {
-  padding: 15px;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.key-card {
-  background-color: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 15px;
-  margin-bottom: 15px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.key-header h5 {
-  margin: 0 0 10px 0;
-  color: #333;
-  font-weight: 500;
-}
-
-.headers-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.header-tag {
-  display: inline-flex;
-  align-items: center;
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 20px;
-  padding: 6px 12px;
-  margin: 4px;
-  font-size: 13px;
-  font-family: monospace;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.header-tag:hover {
-  background-color: #bbdefb;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.sql-editor-section {
-  padding: 15px;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.sql-editor-container {
-  background-color: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 15px;
-}
-
-.sql-textarea {
-  width: 100%;
-  font-family: 'Courier New', monospace;
-  font-size: 14px;
-  min-height: 150px;
-}
-
-.editor-hint {
-  margin-top: 10px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 15px;
-  border-top: 1px solid #eee;
-}
-
-/* Field Mapping Modal Styles */
-.field-mapping-container {
-  padding: 10px;
-}
-
-.instructions {
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 4px;
-  padding: 15px;
-  margin-bottom: 20px;
-}
-
-.instructions p {
-  margin: 0;
-  color: #1976d2;
-}
-
-.mapping-table-container {
-  overflow-x: auto;
-}
-
-.mapping-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.mapping-table th {
-  background-color: #f5f5f5;
-  padding: 12px 15px;
-  text-align: left;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 2px solid #ddd;
-}
-
-.mapping-table td {
-  padding: 12px 15px;
-  border-bottom: 1px solid #eee;
-}
-
-.original-field {
-  vertical-align: middle;
-}
-
-.field-tag {
-  display: inline-block;
-  background-color: #e0e0e0;
-  border: 1px solid #bdbdbd;
-  border-radius: 4px;
-  padding: 6px 10px;
-  font-family: monospace;
-  font-size: 13px;
-}
-
-.mapping-input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.mapping-input:focus {
-  outline: none;
-  border-color: #0072a0;
-  box-shadow: 0 0 0 2px rgba(0, 114, 160, 0.2);
-}
-
-.no-data-message {
-  text-align: center;
-  padding: 30px;
-  color: #666;
-  font-style: italic;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 15px;
-  border-top: 1px solid #eee;
-}
-
-/* Scheduler Modal Styles */
-.scheduler-container {
-  padding: 10px;
-}
-
-.data-lake-info h4 {
-  margin: 0 0 20px 0;
-  color: #333;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 10px;
-}
-
-.job-info-section {
-  background-color: #f9f9f9;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-
-.job-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.job-header h5 {
-  margin: 0;
-  color: #333;
-}
-
-.badge {
-  padding: 5px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.badge-success {
-  background-color: #4caf50;
-  color: white;
-}
-
-.badge-warning {
-  background-color: #ff9800;
-  color: white;
-}
-
-.badge-danger {
-  background-color: #f44336;
-  color: white;
-}
-
-.badge-light {
-  background-color: #e0e0e0;
-  color: #333;
-}
-
-.job-details {
-  margin-bottom: 20px;
-}
-
-.detail-row {
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.detail-row label {
-  font-weight: 500;
-  width: 120px;
-  color: #555;
-}
-
-.detail-row span {
-  flex: 1;
-}
-
-.job-actions {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.job-actions .btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.no-job-section {
-  text-align: center;
-  padding: 30px 20px;
-}
-
-.no-job-message p {
-  margin: 10px 0;
-  color: #666;
-}
-
-.no-job-message p:first-child {
-  font-size: 18px;
-  color: #333;
-}
-
-.create-job-actions {
-  margin-top: 20px;
-}
-
-.create-job-actions .btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 15px;
-  border-top: 1px solid #eee;
-}
-
-/* Webhook Status Styles */
-.webhook-enabled {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-  background-color: #4caf50;
-  color: white;
-}
-
-.webhook-disabled {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-  background-color: #f44336;
-  color: white;
-}
-
-/* Webhook Status Styles */
-.webhook-status {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.webhook-status.enabled {
-  background-color: #4caf50;
-  color: white;
-}
-
-.webhook-status.disabled {
-  background-color: #f44336;
-  color: white;
-}
-
-/* Webhook Modal Styles */
-.webhook-container {
-  padding: 10px;
-}
-
-.webhook-container .data-lake-info h4 {
-  margin: 0 0 20px 0;
-  color: #333;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 10px;
-}
-
-.webhook-form {
-  margin-bottom: 20px;
-}
-
-.webhook-info {
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-  border-radius: 4px;
-  padding: 15px;
-  margin-top: 20px;
-}
-
-.webhook-info p {
-  margin: 0;
-  color: #1976d2;
-}

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

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { AlertService } from 'src/app/services/alert.service';
 import { Data_lakeservice } from './Data_lake.service';
-import { SchedulerService } from 'src/app/services/scheduler.service';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
 import { ExtensionService } from 'src/app/services/fnd/extension.service';
 import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
@@ -11,7 +10,6 @@ import { UserInfoService } from 'src/app/services/user-info.service';
 import { SureconnectService } from '../sureconnect/sureconnect.service';
 import { HttpClient } from '@angular/common/http';
 import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { DataLakeSchedulerService } from './dataLakescheduler.service';
 declare var JsBarcode: any;
 @Component({
   selector: 'app-Data_lake',
@@ -68,12 +66,6 @@ export class Data_lakeComponent implements OnInit {
   dataLakeList: any[] = [];
   selectedDataLake: any = null;
 
-  // New properties for data lake type
-  dataLakeTypes = [
-    { value: 'normal', label: 'Normal' },
-    { value: 'blending', label: 'Blending' }
-  ];
-
   // Calculated field properties
   calculatedFieldModalOpen = false;
   availableKeys: string[] = [];
@@ -107,36 +99,10 @@ export class Data_lakeComponent implements OnInit {
   
   selectedAggregationFields: { field: string; operation: string }[] = [];
   
-  // New property to store selected blending lake IDs as string
-  selectedBlendingLakeIds: string[] = [];
-  editSelectedBlendingLakeIds: string[] = [];
-  
-  // New properties for blending functionality
-  showBlendingKeys = false;
-  blendingKeysData: any[] = [];
-  sqlQueryText = '';
-  selectedBlendingItem: any = null;
-  
-  // New properties for field mapping
-  showFieldMappingModal = false;
-  fieldMappingData: any[] = [];
-  fieldMappings: { [key: string]: string } = {};
-  selectedMappingItem: any = null;
-  
-  // New properties for scheduler functionality
-  showSchedulerModal = false;
-  schedulerJob: any = null;
-  selectedSchedulerItem: any = null;
-  
-  // New properties for webhook functionality
-  showWebhookModal = false;
-  selectedWebhookItem: any = null;
-  
   constructor(
     private extensionService: ExtensionService,
     private userInfoService: UserInfoService,
     private mainService: Data_lakeservice,
-    private schedulerService: DataLakeSchedulerService,
     private alertService: AlertService,
     private toastr: ToastrService,
     private _fb: FormBuilder,
@@ -158,25 +124,23 @@ export class Data_lakeComponent implements OnInit {
     this.getDataLakeList(); // Fetch Data Lake list for reference dropdown
     this.entryForm = this._fb.group({
       name: [null],
+
       url: [null],
+
       schedule: [null],
+
       cron_job: [null],
+
       json: [null],
+
       url_endpoint: [null],
+
       batch_volume: [null],
-      sure_connect_id: [null],
-      ref_datalake_id: [null],
-      datalake_type: ['normal'], // Default to normal
-      blending_lakeids: [[]], // Array for multiple selections
-      webhook_url: [null] // Add webhook_url field
-    });
 
-    // Set default SureConnect value after form initialization if list is already loaded
+      sure_connect_id: [null], // Add SureConnect field
-    if (this.sureConnectList && this.sureConnectList.length > 0) {
+      ref_datalake_id: [null], // Add Data Lake reference field
-      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);
@@ -268,20 +232,6 @@ export class Data_lakeComponent implements OnInit {
     this.sureConnectService.getAll().subscribe((data: any[]) => {
       this.sureConnectList = data;
       console.log('SureConnect List:', this.sureConnectList);
-      
-      // Set default SureConnect value if list is not empty
-      if (this.sureConnectList && this.sureConnectList.length > 0) {
-        // Set the first SureConnect item as default
-        const defaultSureConnectId = this.sureConnectList[0].id;
-        
-        // Set default for ADD form if it exists
-        if (this.entryForm && this.entryForm.get('sure_connect_id')) {
-          // Only set default if no value is already selected
-          if (!this.entryForm.get('sure_connect_id')?.value) {
-            this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
-          }
-        }
-      }
     }, (error) => {
       console.log('Error fetching SureConnect list:', error);
     });
@@ -290,7 +240,8 @@ export class Data_lakeComponent implements OnInit {
   // Fetch Data Lake list for reference dropdown
   getDataLakeList() {
     this.mainService.getAll().subscribe((data: any[]) => {
-      this.dataLakeList = data;
+      // Filter out the current item to avoid self-reference
+      this.dataLakeList = data.filter(item => item.id !== (this.rowSelected?.id || 0));
       console.log('Data Lake List:', this.dataLakeList);
     }, (error) => {
       console.log('Error fetching Data Lake list:', error);
@@ -735,22 +686,8 @@ export class Data_lakeComponent implements OnInit {
     this.editCronExpression = row.cron_job || '';
     // Set the selected SureConnect for edit form
     this.selectedSureConnect = row.sure_connect_id || null;
-    
+    // Set the selected Data Lake for edit form
-    // If no SureConnect is selected, set the first one as default
+    this.selectedDataLake = row.ref_datalake_id || null;
-    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;
@@ -901,33 +838,18 @@ export class Data_lakeComponent implements OnInit {
   }
   
   goToAdd(row) {
-    this.modalAdd = false;
+    this.modalAdd = true;
     this.addCronExpression = '';
     this.selectedSureConnect = null; // Reset SureConnect selection
+    this.selectedDataLake = null; // Reset Data Lake selection
     this.submitted = false;
-    // Reset blending lake IDs for add form
-    this.selectedBlendingLakeIds = [];
-    
     // Reset the form control for cron_job and sure_connect_id
     if (this.entryForm) {
       if (this.entryForm.get('cron_job')) {
         this.entryForm.get('cron_job')?.setValue('');
       }
-      // Reset blending_lakeids to empty string
-      this.entryForm.get('blending_lakeids')?.setValue('');
 
-      // Set default SureConnect value if available
-      if (this.sureConnectList && this.sureConnectList.length > 0) {
-        const defaultSureConnectId = this.sureConnectList[0].id;
-        // Only set default if no value is already selected
-        if (!this.entryForm.get('sure_connect_id')?.value) {
-          this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
     }
-      } else {
-        this.entryForm.get('sure_connect_id')?.setValue('');
-      }
-    }
-    this.modalAdd = true;
   }
   submitted = false;
   onSubmit() {
@@ -1368,433 +1290,4 @@ export class Data_lakeComponent implements OnInit {
       return [];
     }
   }
-  
-  // Method to check if blending action should be available
-  canShowBlendingAction(item: any): boolean {
-    return item.datalake_type === 'blending' && 
-           item.blending_lakeids && 
-           item.blending_lakeids.trim() !== '';
-  }
-  
-  // Method to insert header into SQL query at cursor position
-  insertHeaderIntoQuery(header: string) {
-    const textarea = document.querySelector('.sql-textarea') as HTMLTextAreaElement;
-    if (textarea) {
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const text = textarea.value;
-      const before = text.substring(0, start);
-      const after = text.substring(end, text.length);
-      
-      // Insert the header at cursor position
-      this.sqlQueryText = before + header + after;
-      
-      // Set cursor position after the inserted text
-      setTimeout(() => {
-        textarea.selectionStart = start + header.length;
-        textarea.selectionEnd = start + header.length;
-        textarea.focus();
-      }, 0);
-    } else {
-      // Fallback: append to end of text
-      this.sqlQueryText += header;
-    }
-  }
-  
-  // Method to fetch blending keys
-  fetchBlendingKeys(item: any) {
-    this.selectedBlendingItem = item;
-    this.blendingKeysData = [];
-    this.showBlendingKeys = true;
-    
-    // Initialize SQL query text from existing data
-    if (item.sqlquery_json) {
-      this.sqlQueryText = item.sqlquery_json;
-    } else {
-      this.sqlQueryText = '';
-    }
-    
-    // Parse blending_lakeids string to array
-    const lakeIds = item.blending_lakeids.split(',').map(id => id.trim()).filter(id => id !== '');
-    
-    // Fetch keys for each lake ID
-    lakeIds.forEach(lakeId => {
-      this.mainService.fetchBlendingKeys(Number(lakeId)).subscribe(
-        (data: any) => {
-          this.blendingKeysData.push({
-            lakeId: lakeId,
-            tableName: data.tableName,
-            headers: data.headers
-          });
-        },
-        (error) => {
-          console.error('Error fetching keys for lake ID:', lakeId, error);
-          this.toastr.error(`Failed to fetch keys for Data Lake ${lakeId}`);
-        }
-      );
-    });
-  }
-  
-  // Method to update SQL query
-  updateSqlQuery() {
-    if (!this.selectedBlendingItem) {
-      this.toastr.error('No blending item selected');
-      return;
-    }
-    
-    // Update the SQL query JSON field
-    this.selectedBlendingItem.sqlquery_json = this.sqlQueryText;
-    
-    // Call update service
-    this.mainService.update(this.selectedBlendingItem.id, this.selectedBlendingItem).subscribe(
-      (response) => {
-        this.toastr.success('SQL query updated successfully');
-        // Update the local data
-        const index = this.product.findIndex(p => p.id === this.selectedBlendingItem.id);
-        if (index !== -1) {
-          this.product[index] = {...this.selectedBlendingItem};
-        }
-      },
-      (error) => {
-        console.error('Error updating SQL query:', error);
-        this.toastr.error('Failed to update SQL query');
-      }
-    );
-  }
-  
-  // Method to close blending keys panel
-  closeBlendingKeys() {
-    this.showBlendingKeys = false;
-    this.blendingKeysData = [];
-    this.sqlQueryText = '';
-    this.selectedBlendingItem = null;
-  }
-  
-  // Method to handle checkbox change for blending lakes (ADD form)
-  onBlendingLakeCheckboxChange(event: any, lakeId: number) {
-    const lakeIdStr = lakeId.toString();
-    if (event.target.checked) {
-      // Add to selected blending lake IDs
-      if (!this.selectedBlendingLakeIds.includes(lakeIdStr)) {
-        this.selectedBlendingLakeIds.push(lakeIdStr);
-      }
-    } else {
-      // Remove from selected blending lake IDs
-      const index = this.selectedBlendingLakeIds.indexOf(lakeIdStr);
-      if (index > -1) {
-        this.selectedBlendingLakeIds.splice(index, 1);
-      }
-    }
-    
-    // Update the form control value as a comma-separated string
-    this.entryForm.get('blending_lakeids')?.setValue(this.selectedBlendingLakeIds.join(','));
-  }
-  
-  // Method to check if a blending lake is selected (ADD form)
-  isBlendingLakeSelected(lakeId: number): boolean {
-    return this.selectedBlendingLakeIds.includes(lakeId.toString());
-  }
-  
-  // Method to handle checkbox change for blending lakes (EDIT form)
-  onEditBlendingLakeCheckboxChange(event: any, lakeId: number) {
-    const lakeIdStr = lakeId.toString();
-    if (event.target.checked) {
-      // Add to selected blending lake IDs
-      if (!this.editSelectedBlendingLakeIds.includes(lakeIdStr)) {
-        this.editSelectedBlendingLakeIds.push(lakeIdStr);
-      }
-    } else {
-      // Remove from selected blending lake IDs
-      const index = this.editSelectedBlendingLakeIds.indexOf(lakeIdStr);
-      if (index > -1) {
-        this.editSelectedBlendingLakeIds.splice(index, 1);
-      }
-    }
-    
-    // Update the rowSelected value as a comma-separated string
-    this.rowSelected.blending_lakeids = this.editSelectedBlendingLakeIds.join(',');
-  }
-  
-  // Method to check if a blending lake is selected (EDIT form)
-  isEditBlendingLakeSelected(lakeId: number): boolean {
-    return this.editSelectedBlendingLakeIds.includes(lakeId.toString());
-  }
-  
-  // Method to open field mapping modal
-  openFieldMappingModal(item: any) {
-    this.selectedMappingItem = item;
-    this.fieldMappingData = [];
-    this.fieldMappings = {};
-    this.showFieldMappingModal = true;
-    
-    // Fetch available keys using the same API as calculated fields
-    this.mainService.fetchAvailableKeys(item.url, item.sure_connect_id).subscribe(
-      (keys: string[]) => {
-        // Initialize field mappings with empty values
-        this.fieldMappingData = keys.map(key => ({
-          original: key,
-          mapped: ''
-        }));
-        
-        // If there's existing mapping data, populate it
-        if (item.mapping_json) {
-          try {
-            const existingMappings = JSON.parse(item.mapping_json);
-            this.fieldMappingData.forEach(field => {
-              if (existingMappings[field.original]) {
-                field.mapped = existingMappings[field.original];
-              }
-            });
-          } catch (e) {
-            console.error('Error parsing existing mapping JSON:', e);
-          }
-        }
-      },
-      (error) => {
-        console.error('Error fetching keys for field mapping:', error);
-        this.toastr.error('Failed to fetch available keys for field mapping');
-      }
-    );
-  }
-  
-  // Method to update field mappings
-  updateFieldMappings() {
-    if (!this.selectedMappingItem) {
-      this.toastr.error('No item selected for mapping');
-      return;
-    }
-    
-    // Create mapping object
-    const mappings: { [key: string]: string } = {};
-    this.fieldMappingData.forEach(field => {
-      if (field.mapped && field.mapped.trim() !== '') {
-        mappings[field.original] = field.mapped.trim();
-      }
-    });
-    
-    // Convert to JSON string
-    const mappingJson = JSON.stringify(mappings);
-    
-    // Update the mapping JSON field
-    this.selectedMappingItem.mapping_json = mappingJson;
-    
-    // Call update service
-    this.mainService.update(this.selectedMappingItem.id, this.selectedMappingItem).subscribe(
-      (response) => {
-        this.toastr.success('Field mappings updated successfully');
-        // Update the local data
-        const index = this.product.findIndex(p => p.id === this.selectedMappingItem.id);
-        if (index !== -1) {
-          this.product[index] = {...this.selectedMappingItem};
-        }
-        this.closeFieldMappingModal();
-      },
-      (error) => {
-        console.error('Error updating field mappings:', error);
-        this.toastr.error('Failed to update field mappings');
-      }
-    );
-  }
-  
-  // Method to close field mapping modal
-  closeFieldMappingModal() {
-    this.showFieldMappingModal = false;
-    this.fieldMappingData = [];
-    this.fieldMappings = {};
-    this.selectedMappingItem = null;
-  }
-  
-  // Method to update individual field mapping
-  updateFieldMapping(index: number, value: string) {
-    if (index >= 0 && index < this.fieldMappingData.length) {
-      this.fieldMappingData[index].mapped = value;
-    }
-  }
-  
-  
-  // Method to open scheduler modal
-  openSchedulerModal(item: any) {
-    this.selectedSchedulerItem = item;
-    this.schedulerJob = null;
-    this.showSchedulerModal = true;
-    
-    // Fetch job by lake ID
-    this.schedulerService.getJobByLakeId(item.id).subscribe(
-      (job: any) => {
-        this.schedulerJob = job;
-      },
-      (error) => {
-        // If job not found, it's expected - we'll show create option
-        if (error.status === 404) {
-          this.schedulerJob = null;
-        } else {
-          console.error('Error fetching scheduler job:', error);
-          this.toastr.error('Failed to fetch scheduler job information');
-        }
-      }
-    );
-  }
-  
-  // Method to create a new job
-  createJob() {
-    if (!this.selectedSchedulerItem) {
-      this.toastr.error('No data lake selected');
-      return;
-    }
-    
-    const jobData = {
-      name: this.selectedSchedulerItem.name,
-      status: 'RUNNING',
-      description: `Scheduled job for ${this.selectedSchedulerItem.name}`,
-      jobType: 'DATALAKE',
-      lakeid: this.selectedSchedulerItem.id
-    };
-    
-    this.schedulerService.createJob(jobData).subscribe(
-      (job: any) => {
-        this.schedulerJob = job;
-        this.toastr.success('Job created successfully');
-      },
-      (error) => {
-        console.error('Error creating job:', error);
-        this.toastr.error('Failed to create job');
-      }
-    );
-  }
-  
-  // Method to pause a job
-  pauseJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    this.schedulerService.pauseJob(this.schedulerJob.id).subscribe(
-      (response: any) => {
-        this.schedulerJob.status = 'PAUSED';
-        this.toastr.success('Job paused successfully');
-      },
-      (error) => {
-        console.error('Error pausing job:', error);
-        this.toastr.error('Failed to pause job');
-      }
-    );
-  }
-  
-  // Method to resume a job
-  resumeJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    this.schedulerService.resumeJob(this.schedulerJob.id).subscribe(
-      (response: any) => {
-        this.schedulerJob.status = 'RUNNING';
-        this.toastr.success('Job resumed successfully');
-      },
-      (error) => {
-        console.error('Error resuming job:', error);
-        this.toastr.error('Failed to resume job');
-      }
-    );
-  }
-  
-  // Method to stop a job
-  stopJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    this.schedulerService.stopJob(this.schedulerJob.id).subscribe(
-      (response: any) => {
-        this.schedulerJob.status = 'STOPPED';
-        this.toastr.success('Job stopped successfully');
-      },
-      (error) => {
-        console.error('Error stopping job:', error);
-        this.toastr.error('Failed to stop job');
-      }
-    );
-  }
-  
-  // Method to restart a stopped job
-  restartJob() {
-    if (!this.schedulerJob || !this.schedulerJob.id) {
-      this.toastr.error('No job selected');
-      return;
-    }
-    
-    // To restart a job, we need to create a new job with the same parameters
-    const jobData = {
-      name: this.schedulerJob.name,
-      status: 'RUNNING',
-      description: this.schedulerJob.description,
-      jobType: this.schedulerJob.jobType,
-      lakeid: this.schedulerJob.lakeid
-    };
-    
-    this.schedulerService.createJob(jobData).subscribe(
-      (job: any) => {
-        this.schedulerJob = job;
-        this.toastr.success('Job restarted successfully');
-      },
-      (error) => {
-        console.error('Error restarting job:', error);
-        this.toastr.error('Failed to restart job');
-      }
-    );
-  }
-  
-  // Method to close scheduler modal
-  closeSchedulerModal() {
-    this.showSchedulerModal = false;
-    this.schedulerJob = null;
-    this.selectedSchedulerItem = null;
-  }
-  
-  // Method to get status badge class
-  getStatusBadgeClass(status: string): string {
-    switch (status) {
-      case 'RUNNING':
-        return 'badge-success';
-      case 'PAUSED':
-        return 'badge-warning';
-      case 'STOPPED':
-        return 'badge-danger';
-      default:
-        return 'badge-light';
-    }
-  }
-  
-  // Method to toggle webhook for a data lake item
-  toggleWebhook(item: any) {
-    // Call the enableWebhook service method
-    this.mainService.enableWebhook(item.id).subscribe(
-      (updatedItem: any) => {
-        // Update the local data with the response from the server
-        const index = this.product.findIndex(p => p.id === item.id);
-        if (index !== -1) {
-          this.product[index] = {...updatedItem};
-        }
-        
-        // Show success message based on the new webhook status
-        if (updatedItem.webhook_url && updatedItem.webhook_url.trim() !== '') {
-          this.toastr.success('Webhook enabled successfully');
-        } else {
-          this.toastr.success('Webhook disabled successfully');
-        }
-      },
-      (error) => {
-        console.error('Error toggling webhook:', error);
-        this.toastr.error('Failed to toggle webhook');
-      }
-    );
-  }
-  
-  // Method to copy webhook URL to clipboard
-  copyWebhookUrl(webhookUrl: string) {
-    this.copyToClipboard(webhookUrl);
-  }
 }

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

@@ -42,12 +42,6 @@ export class Data_lakeservice{
     return this.apiRequest.get(apiUrl);
   }
 
-  // Method to fetch blending keys for a specific lake ID
-  fetchBlendingKeys(lakeId: number): Observable<any> {
-    const _http = `${this.baseURL}/keys/${lakeId}`;
-    return this.apiRequest.get(_http);
-  }
-  
   // Method to update calculated fields for a data lake item
   updateCalculatedFields(id: number, calculatedFieldJson: string, isCalculatedField: boolean): Observable<any> {
     const _http = this.baseURL + "/" + id;
@@ -57,11 +51,5 @@ export class Data_lakeservice{
     };
     return this.apiRequest.put(_http, data);
   }
-  
-  // Method to enable webhook for a data lake item
-  enableWebhook(id: number): Observable<any> {
-    const _http = `${this.baseURL}/webhook/${id}`;
-    return this.apiRequest.get(_http);
-  }
 // updateaction
 }

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

@@ -1,15 +1,6 @@
 <div class="cron-job-builder">
   <h4>Cron Job Builder</h4>
   <div class="clr-row">
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
-      <div class="form-group">
-        <label>Second</label>
-        <select class="form-control" [(ngModel)]="second" (change)="onFieldChange()">
-          <option *ngFor="let option of secondOptions" [value]="option.value">{{ option.label }}</option>
-        </select>
-      </div>
-    </div>
-    
     <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
       <div class="form-group">
         <label>Minute</label>
@@ -37,7 +28,7 @@
       </div>
     </div>
     
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
+    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-6 clr-col-12">
       <div class="form-group">
         <label>Month</label>
         <select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
@@ -46,7 +37,7 @@
       </div>
     </div>
     
-    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
+    <div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-12 clr-col-12">
       <div class="form-group">
         <label>Day of Week</label>
         <select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">

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

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

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

@@ -1,47 +0,0 @@
-
-import { Injectable } from '@angular/core';
-import { Observable } from "rxjs";
-import { HttpClient } from "@angular/common/http";
-import { ApiRequestService } from "src/app/services/api/api-request.service";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DataLakeSchedulerService {
-  private baseURL = "scheduler";
-
-  constructor(
-    private http: HttpClient,
-    private apiRequest: ApiRequestService,
-  ) { }
-
-  // Get job by lake ID
-  getJobByLakeId(lakeId: number): Observable<any> {
-    const _http = `${this.baseURL}/lake/${lakeId}`;
-    return this.apiRequest.get(_http);
-  }
-
-  // Create a new job
-  createJob(jobData: any): Observable<any> {
-    const _http = `${this.baseURL}/create`;
-    return this.apiRequest.post(_http, jobData);
-  }
-
-  // Pause a job
-  pauseJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/pause/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Resume a job
-  resumeJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/resume/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Stop a job
-  stopJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/stop/${jobId}`;
-    return this.apiRequest.delete(_http);
-  }
-}

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

@@ -1,125 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, forkJoin } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ApiRequestService } from 'src/app/services/api/api-request.service';
-import { ChartType, UiComponent, ComponentProperty, ChartTemplate, DynamicField } from './chart-config-manager.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DynamicChartLoaderService {
-  private chartTypesUrl = 'api/chart-types';
-  private uiComponentsUrl = 'api/ui-components';
-  private componentPropertiesUrl = 'api/component-properties';
-  private chartTemplatesUrl = 'api/chart-templates';
-  private dynamicFieldsUrl = 'api/dynamic-fields';
-
-  constructor(private apiRequest: ApiRequestService) { }
-
-  /**
-   * Load all chart configurations dynamically
-   * This method fetches all chart types and their associated components, templates, and fields
-   */
-  loadAllChartConfigurations(): Observable<any> {
-    console.log('Loading all chart configurations dynamically');
-
-    // Load all chart types first
-    return this.apiRequest.get(this.chartTypesUrl).pipe(
-      map(chartTypes => {
-        console.log('Loaded chart types:', chartTypes);
-        return chartTypes;
-      })
-    );
-  }
-
-  /**
-   * Load complete configuration for a specific chart type
-   * This includes UI components, templates, and dynamic fields
-   */
-  loadChartConfiguration(chartTypeId: number): Observable<{
-    chartType: ChartType,
-    uiComponents: UiComponent[],
-    templates: ChartTemplate[],
-    dynamicFields: DynamicField[]
-  }> {
-    console.log(`Loading complete configuration for chart type ${chartTypeId}`);
-
-    // Load all related data in parallel
-    return forkJoin({
-      chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
-      uiComponents: this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`),
-      templates: this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`),
-      dynamicFields: this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`)
-    }).pipe(
-      map(result => {
-        console.log(`Loaded complete configuration for chart type ${chartTypeId}:`, result);
-        return result;
-      })
-    );
-  }
-
-  /**
-   * Load chart template for a specific chart type
-   * This is used to render the chart UI dynamically
-   */
-  loadChartTemplate(chartTypeId: number): Observable<ChartTemplate[]> {
-    console.log(`Loading chart templates for chart type ${chartTypeId}`);
-    return this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`);
-  }
-
-  /**
-   * Load UI components for a specific chart type
-   * These define what configuration fields are needed for the chart
-   */
-  loadUiComponents(chartTypeId: number): Observable<UiComponent[]> {
-    console.log(`Loading UI components for chart type ${chartTypeId}`);
-    return this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`);
-  }
-
-  /**
-   * Load dynamic fields for a specific chart type
-   * These define additional dynamic fields that can be used in the chart
-   */
-  loadDynamicFields(chartTypeId: number): Observable<DynamicField[]> {
-    console.log(`Loading dynamic fields for chart type ${chartTypeId}`);
-    return this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`);
-  }
-
-  /**
-   * Get chart type by name
-   * This is useful for finding a chart type by its name rather than ID
-   */
-  // getChartTypeByName(name: string): Observable<ChartType | null> {
-  //   console.log(`Finding chart type by name: ${name}`);
-  //   return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
-  //     map((chartTypes: ChartType[]) => {
-  //       console.log('Available chart types:', chartTypes);
-  //       const chartType = chartTypes.find(ct => ct.name === name);
-  //       console.log(`Found chart type for name ${name}:`, chartType);
-  //       return chartType || null;
-  //     })
-  //   );
-  // }
-
-  getChartTypeByName(name: string): Observable<any> {
-    console.log(`Finding chart type by name: ${name}`);
-    return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
-  }
-
-
-
-  /**
-   * Load all active chart types
-   * This is used to populate the chart selection in the dashboard editor
-   */
-  loadActiveChartTypes(): Observable<ChartType[]> {
-    console.log('Loading active chart types');
-    return this.apiRequest.get(`${this.chartTypesUrl}`).pipe(
-      map((chartTypes: ChartType[]) => {
-        const activeChartTypes = chartTypes.filter(ct => ct.isActive);
-        console.log('Loaded active chart types:', activeChartTypes);
-        return activeChartTypes;
-      })
-    );
-  }
-}

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

@@ -127,7 +127,6 @@ 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,9 +17,6 @@
   <div style="display: inline; float: right;">
     <!-- <button class="btn btn-primary">Build</button>
       <button class="btn btn-primary" (click)="onSchedule()">Schedule</button> -->
-    <button class="btn btn-success" (click)="testDynamicChartCreation()" style="margin-left: 10px;" *ngIf="!fromRunner">
-      <clr-icon shape="test"></clr-icon> Test Dynamic Chart
-    </button>
   </div>
 
 </div>
@@ -42,8 +39,7 @@
     </ul>
   </nav>
   <div style="width: 100%;">
-    <!-- Remove the (drop) event binding since it's already handled by gridster's emptyCellDropCallback -->
+    <gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
-    <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,8 +30,6 @@ import { CompactFilterComponent } from '../common-filter';
 import { FilterService } from '../common-filter/filter.service';
 // Add the UnifiedChartComponent import
 import { UnifiedChartComponent } from '../gadgets/unified-chart';
-// Add the DynamicChartLoaderService import
-import { DynamicChartLoaderService } from '../chart-config/dynamic-chart-loader.service';
 
 function isNullArray(arr) {
   return !Array.isArray(arr) || arr.length === 0;
@@ -60,60 +58,59 @@ export class EditnewdashComponent implements OnInit {
   // Add availableKeys property for compact filter
   availableKeys: string[] = [];
 
-  // Initialize with default widgets and update dynamically
   WidgetsMock: WidgetModel[] = [
     {
       name: 'Common Filter',
       identifier: 'common_filter'
     },
-    // {
+    {
-    //   name: 'Radar Chart',
+      name: 'Radar Chart',
-    //   identifier: 'radar_chart'
+      identifier: 'radar_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Doughnut Chart',
+      name: 'Doughnut Chart',
-    //   identifier: 'doughnut_chart'
+      identifier: 'doughnut_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Line Chart',
+      name: 'Line Chart',
-    //   identifier: 'line_chart'
+      identifier: 'line_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Bar Chart',
+      name: 'Bar Chart',
-    //   identifier: 'bar_chart'
+      identifier: 'bar_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Pie Chart',
+      name: 'Pie Chart',
-    //   identifier: 'pie_chart'
+      identifier: 'pie_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Polar Area Chart',
+      name: 'Polar Area Chart',
-    //   identifier: 'polar_area_chart'
+      identifier: 'polar_area_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Bubble Chart',
+      name: 'Bubble Chart',
-    //   identifier: 'bubble_chart'
+      identifier: 'bubble_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Scatter Chart',
+      name: 'Scatter Chart',
-    //   identifier: 'scatter_chart'
+      identifier: 'scatter_chart'
-    // },
+    },
-    // {
+    {
-    // name: 'Dynamic Chart',
+    name: 'Dynamic Chart',
-    // identifier: 'dynamic_chart'
+    identifier: 'dynamic_chart'
-    // },
+    },
-    // {
+    {
-    // name: 'Financial Chart',
+    name: 'Financial Chart',
-    // identifier: 'financial_chart'
+    identifier: 'financial_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'To Do',
+      name: 'To Do',
-    //   identifier: 'to_do_chart'
+      identifier: 'to_do_chart'
-    // },
+    },
-    // {
+    {
-    //   name: 'Grid View',
+      name: 'Grid View',
-    //   identifier: 'grid_view'
+      identifier: 'grid_view'
-    // },
+    },
     {
       name: 'Compact Filter',
       identifier: 'compact_filter'
@@ -209,9 +206,6 @@ export class EditnewdashComponent implements OnInit {
   // Add drilldown column data property
   drilldownColumnData = []; // Add drilldown column data property
 
-  // Add chart types property for dynamic chart selection
-  chartTypes: any[] = [];
-
   constructor(private route: ActivatedRoute,
     private router: Router,
     private dashboardService: Dashboard3Service,
@@ -220,8 +214,7 @@ export class EditnewdashComponent implements OnInit {
     private datastoreService: DatastoreService,
     private alertService: AlertsService,
     private sureconnectService: SureconnectService,
-    private filterService: FilterService,
+    private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor
-    private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
 
   // Add property to track if coming from dashboard runner
   fromRunner: boolean = false;
@@ -306,9 +299,6 @@ export class EditnewdashComponent implements OnInit {
       apiUrl: ['']
     });
     
-    // Load chart types for dynamic chart selection
-    this.loadChartTypesForSelection();
-    
     // Load sureconnect data first, then load dashboard data
     this.loadSureconnectData();
     
@@ -316,37 +306,6 @@ export class EditnewdashComponent implements OnInit {
     this.loadCommonFilterData();
   }
   
-  // Add method to load all chart types for dynamic selection
-  loadChartTypesForSelection() {
-  console.log('Loading chart types for selection');
-  this.dynamicChartLoader.loadActiveChartTypes().subscribe({
-    next: (chartTypes) => {
-      console.log('Loaded chart types for selection:', chartTypes);
-      this.chartTypes = chartTypes;
-
-      // Convert each chart type to a WidgetModel
-      const newWidgets = chartTypes.map(ct => ({
-        name: ct.displayName || ct.name,
-        // identifier: ct.name.toLowerCase().replace(/\s+/g, '_')
-        identifier: `${ct.name.toLowerCase().replace(/\s+/g, '_')}_chart`
-      }));
-
-      // Filter out duplicates by identifier
-      const existingIds = new Set(this.WidgetsMock.map(w => w.identifier));
-      const uniqueNewWidgets = newWidgets.filter(w => !existingIds.has(w.identifier));
-
-      // Append unique new widgets to WidgetsMock
-      this.WidgetsMock = [...this.WidgetsMock, ...uniqueNewWidgets];
-
-      console.log('Updated WidgetsMock:', this.WidgetsMock);
-    },
-    error: (error) => {
-      console.error('Error loading chart types for selection:', error);
-    }
-  });
-}
-
-  
   // Add method to load sureconnect data
   loadSureconnectData() {
     this.sureconnectService.getAll().subscribe((data: any[]) => {
@@ -489,7 +448,6 @@ export class EditnewdashComponent implements OnInit {
         'polar': 'Polar Area Chart',
         'bubble': 'Bubble Chart',
         'scatter': 'Scatter Chart'
-        // Removed hardcoded heatmap entry to make it fully dynamic
       };
       
       // If this is a unified chart, set the name back to the appropriate chart name
@@ -546,11 +504,9 @@ export class EditnewdashComponent implements OnInit {
     //this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
   }
 
-  onDrop = (ev) => {
+  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
@@ -564,26 +520,155 @@ export class EditnewdashComponent implements OnInit {
     switch (componentType) {
       // Handle all chart types by converting them to unified charts
       case "radar_chart":
-        // Use dynamic chart creation for all chart types
+        return this.dashboardArray.push({
-        return this.createDynamicChart('radar', maxChartId);
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Radar Chart",
+          chartType: 'radar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "line_chart":
-        return this.createDynamicChart('line', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 7,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Line Chart",
+          chartType: 'line',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "doughnut_chart":
-        return this.createDynamicChart('doughnut', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Doughnut Chart",
+          chartType: 'doughnut',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "bar_chart":
-        return this.createDynamicChart('bar', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Bar Chart",
+          chartType: 'bar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "pie_chart":
-        return this.createDynamicChart('pie', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Pie Chart",
+          chartType: 'pie',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "polar_area_chart":
-        return this.createDynamicChart('polar', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Polar Area Chart",
+          chartType: 'polar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "bubble_chart":
-        return this.createDynamicChart('bubble', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Bubble Chart",
+          chartType: 'bubble',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "scatter_chart":
-        return this.createDynamicChart('scatter', maxChartId);
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Scatter Chart",
+          chartType: 'scatter',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "dynamic_chart":
-        return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Dynamic Chart",
+          chartType: 'line', // Default to line for dynamic chart
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "financial_chart":
-        return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
+        return this.dashboardArray.push({
+          cols: 5,
+          rows: 6,
+          x: 0,
+          y: 0,
+          chartid: maxChartId + 1,
+          component: UnifiedChartComponent,
+          name: "Financial Chart",
+          chartType: 'line', // Default to line for financial chart
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
       case "to_do_chart":
         return this.dashboardArray.push({
           cols: 5,
@@ -630,16 +715,21 @@ export class EditnewdashComponent implements OnInit {
           name: "Grid View"
         });
       case "unified_chart":
-        return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
+        return this.dashboardArray.push({
-      default:
+          cols: 5,
-        // Handle any other chart types dynamically
+          rows: 6,
-        // Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
+          x: 0,
-        const chartTypeName = componentType.replace('_chart', '');
+          y: 0,
-        console.log('Creating dynamic chart of type:', chartTypeName);
+          chartid: maxChartId + 1,
-        console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
+          component: UnifiedChartComponent,
-        
+          name: "Unified Chart",
-        // Use dynamic chart creation for all chart types
+          // Add default configuration for unified chart
-        return this.createDynamicChart(chartTypeName, maxChartId);
+          chartType: 'bar',
+          xAxis: '',
+          yAxis: '',
+          table: '',
+          connection: undefined
+        });
     }
   }
   removeItem(item) {
@@ -1053,10 +1143,14 @@ export class EditnewdashComponent implements OnInit {
     }
     
     // For UnifiedChartComponent, pass chart properties with chartType
-    // Check if the component is UnifiedChartComponent dynamically
+    // Check for specific chart names that use UnifiedChartComponent
-    if (item.component === UnifiedChartComponent || 
+    const unifiedChartNames = [
-        (item.component && item.component.name === 'UnifiedChartComponent') ||
+      'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart', 
-        item.name === 'Unified Chart') {
+      'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
+      'Dynamic Chart', 'Financial Chart', 'Unified Chart'
+    ];
+    
+    if (unifiedChartNames.includes(item.name)) {
       const unifiedChartInputs = {
         chartType: item.chartType || 'bar',
         xAxis: item.xAxis,
@@ -1865,7 +1959,7 @@ export class EditnewdashComponent implements OnInit {
   
   // Add method to handle item resize events
   itemResize(item: any, itemComponent: any) {
-    // console.log('Item resized:', item);
+    console.log('Item resized:', item);
     // Trigger a window resize event to notify charts to resize
     window.dispatchEvent(new Event('resize'));
     
@@ -1951,264 +2045,4 @@ export class EditnewdashComponent implements OnInit {
     }
   }
 
-  // Add method to apply dynamic template to a chart
-  applyDynamicTemplate(chartItem: any, template: any) {
-    console.log('Applying dynamic template to chart:', chartItem, template);
-    
-    // Apply HTML template
-    if (template.templateHtml) {
-      // In a real implementation, you would dynamically render the HTML template
-      // For now, we'll just log it
-      console.log('HTML Template:', template.templateHtml);
-    }
-    
-    // Apply CSS styles
-    if (template.templateCss) {
-      // In a real implementation, you would dynamically apply the CSS styles
-      // For now, we'll just log it
-      console.log('CSS Template:', template.templateCss);
-    }
-    
-    // Return the chart item with template applied
-    return {
-      ...chartItem,
-      template: template
-    };
-  }
-  
-  // Add method to test dynamic chart creation
-  testDynamicChartCreation() {
-    console.log('Testing dynamic chart creation');
-    
-    // Show a success message to the user
-    alert('Dynamic chart test started. Check the browser console for detailed output.');
-    
-    // Load all chart types
-    this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
-      next: (chartTypes) => {
-        console.log('Loaded chart types:', chartTypes);
-        
-        // Find bar chart type
-        const barChartType = chartTypes.find((ct: any) => ct.name === 'bar');
-        if (barChartType) {
-          console.log('Found bar chart type:', barChartType);
-          
-          // Load configuration for bar chart
-          this.dynamicChartLoader.loadChartConfiguration(barChartType.id).subscribe({
-            next: (config) => {
-              console.log('Loaded bar chart configuration:', config);
-              
-              // Create a test chart item
-              const chartItem = {
-                cols: 5,
-                rows: 6,
-                x: 0,
-                y: 0,
-                chartid: 100,
-                component: UnifiedChartComponent,
-                name: 'Test Dynamic Bar Chart',
-                chartType: 'bar',
-                xAxis: '',
-                yAxis: '',
-                table: '',
-                connection: undefined,
-                // Add dynamic fields from configuration
-                dynamicFields: config.dynamicFields || []
-              };
-              
-              console.log('Created test chart item:', chartItem);
-              
-              // If we have templates, apply the default one
-              if (config.templates && config.templates.length > 0) {
-                const defaultTemplate = config.templates.find((t: any) => t.isDefault) || config.templates[0];
-                if (defaultTemplate) {
-                  console.log('Applying default template:', defaultTemplate);
-                  const chartWithTemplate = this.applyDynamicTemplate(chartItem, defaultTemplate);
-                  console.log('Chart with template:', chartWithTemplate);
-                  
-                  // Show success message
-                  alert('Dynamic chart test completed successfully! Check console for details.');
-                }
-              } else {
-                // Show success message even without templates
-                alert('Dynamic chart test completed successfully! No templates found. Check console for details.');
-              }
-            },
-            error: (error) => {
-              console.error('Error loading bar chart configuration:', error);
-              alert('Error loading bar chart configuration. Check console for details.');
-            }
-          });
-        } else {
-          console.warn('Bar chart type not found');
-          alert('Bar chart type not found in the database.');
-        }
-      },
-      error: (error) => {
-        console.error('Error loading chart types:', error);
-        alert('Error loading chart types. Check console for details.');
-      }
-    });
-  }
-
-  // Add method to load dynamic chart configuration
-  loadDynamicChartConfiguration(chartTypeId: number) {
-    console.log(`Loading dynamic chart configuration for chart type ${chartTypeId}`);
-    this.dynamicChartLoader.loadChartConfiguration(chartTypeId).subscribe({
-      next: (config) => {
-        console.log('Loaded dynamic chart configuration:', config);
-        // Here you would apply the configuration to the UI
-        // For example, populate form fields, set up templates, etc.
-      },
-      error: (error) => {
-        console.error('Error loading dynamic chart configuration:', error);
-      }
-    });
-  }
-
-  
-
-  // Add method to create a dynamic chart with configuration from database
-  createDynamicChart = (chartTypeName: string, maxChartId: number) => {
-    console.log(`Creating dynamic chart of type: ${chartTypeName}`);
-    
-    // First, get the chart type by name
-    this.dynamicChartLoader.getChartTypeByName(chartTypeName).subscribe({
-      next: (chartType) => {
-        if (chartType) {
-          console.log(`Found chart type:`, chartType);
-          
-          // Load the complete configuration for this chart type
-          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
-            next: (config) => {
-              console.log(`Loaded configuration for ${chartTypeName}:`, config);
-              
-              // Create the chart item with dynamic configuration
-              const chartItem = {
-                cols: 5,
-                rows: 6,
-                x: 0,
-                y: 0,
-                chartid: maxChartId + 1,
-                component: UnifiedChartComponent,
-                name: chartType.displayName || chartTypeName,
-                chartType: chartType.name,
-                xAxis: '',
-                yAxis: '',
-                table: '',
-                connection: undefined,
-                // Add any dynamic fields from the configuration
-                dynamicFields: config.dynamicFields || []
-              };
-              
-              // Add UI components as configuration properties
-              if (config.uiComponents && config.uiComponents.length > 0) {
-                config.uiComponents.forEach(component => {
-                  chartItem[component.componentName] = '';
-                });
-              }
-              
-              this.dashboardArray.push(chartItem);
-              console.log(`Created dynamic chart:`, chartItem);
-              
-              // Update the dashboard collection and trigger refresh
-              this.itemChange();
-            },
-            error: (error) => {
-              console.error(`Error loading configuration for ${chartTypeName}:`, error);
-              // Fallback to default configuration
-              this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
-            }
-          });
-        } else {
-          console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
-          this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
-        }
-      },
-      error: (error) => {
-        console.error('Error loading configuration for chart type:', error);
-        // Fallback to default configuration
-        this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
-      }
-    });
-  }
-  
-  // Fallback method to create default chart configuration
-  createDefaultChart = (chartTypeName: string, chartDisplayName: string) => {
-    console.log(`Creating default chart for ${chartTypeName}`);
-    
-    // Map chart type names to chart types - making it fully dynamic
-    const chartTypeMap = {
-      'bar': 'bar',
-      'line': 'line',
-      'pie': 'pie',
-      'doughnut': 'doughnut',
-      'radar': 'radar',
-      'polar': 'polar',
-      'bubble': 'bubble',
-      'scatter': 'scatter'
-      // Removed hardcoded heatmap entry to make it fully dynamic
-    };
-    
-    // Get the chart type from the name - default to bubble for unknown chart types
-    const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bubble';
-    
-    // Safely calculate maxChartId, handling cases where chartid might be NaN or missing
-    let maxChartId = 0;
-    if (this.dashboardArray && this.dashboardArray.length > 0) {
-      const validChartIds = this.dashboardArray
-        .map(item => item.chartid)
-        .filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
-      
-      if (validChartIds.length > 0) {
-        maxChartId = Math.max(...validChartIds);
-      }
-    }
-    
-    const chartItem = {
-      cols: 5,
-      rows: 6,
-      x: 0,
-      y: 0,
-      chartid: maxChartId + 1,
-      component: UnifiedChartComponent,
-      name: chartDisplayName,
-      chartType: chartType,
-      xAxis: '',
-      yAxis: '',
-      table: '',
-      connection: undefined
-    };
-    
-    this.dashboardArray.push(chartItem);
-    console.log('Created default chart:', chartItem);
-    
-    // Update the dashboard collection and trigger refresh
-    this.itemChange();
-  }
-
-  // Helper method to get display name for chart type - making it fully dynamic
-  getChartDisplayName = (chartTypeName: string): string => {
-    const displayNameMap = {
-      'bar': 'Bar Chart',
-      'line': 'Line Chart',
-      'pie': 'Pie Chart',
-      'doughnut': 'Doughnut Chart',
-      'radar': 'Radar Chart',
-      'polar': 'Polar Area Chart',
-      'bubble': 'Bubble Chart',
-      'scatter': 'Scatter Chart'
-      // Removed hardcoded heatmap entry to make it fully dynamic
-    };
-    
-    // For unknown chart types, create a display name by capitalizing the first letter and adding ' Chart'
-    const displayName = displayNameMap[chartTypeName.toLowerCase()];
-    if (displayName) {
-      return displayName;
-    } else {
-      // Capitalize first letter and add ' Chart'
-      return chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
-    }
-  }
-
 }

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

@@ -26,27 +26,116 @@
 
   <!-- Render different chart types based on chartType input -->
   <div class="chart-wrapper">
-    <!-- Dynamic Chart Container - uses extracted dynamic options and styles but static template -->
+    <!-- Bar Chart -->
-    <div *ngIf="dynamicTemplate || chartType" class="chart-canvas-container">
+    <div *ngIf="chartType === 'bar'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [type]="chartType || 'bar'"
+        [chartType]="'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>
     </div>
 
-    <!-- Fallback for when no chart type is specified -->
+    <!-- Line Chart -->
-    <div *ngIf="!dynamicTemplate && !chartType" class="chart-canvas-container">
+    <div *ngIf="chartType === 'line'" class="chart-canvas-container">
       <canvas baseChart
         [datasets]="chartData"
         [labels]="chartLabels"
         [options]="chartOptions"
         [legend]="chartLegend"
-        [type]="'bar'"
+        [chartType]="'line'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Pie Chart -->
+    <div *ngIf="chartType === 'pie'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'pie'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Doughnut Chart -->
+    <div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'doughnut'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Bubble Chart -->
+    <div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="bubbleChartData"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'bubble'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Radar Chart -->
+    <div *ngIf="chartType === 'radar'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'radar'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Polar Area Chart -->
+    <div *ngIf="chartType === 'polar'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'polarArea'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Scatter Chart -->
+    <div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'scatter'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Default/Unknown Chart Type -->
+    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
+      <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'bar'"
         (chartClick)="chartClicked($event)"
         (chartHover)="chartHovered($event)">
       </canvas>

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

@@ -1,10 +1,9 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
 import { Dashboard3Service } from '../../../../../../services/builder/dashboard3.service';
 import { FilterService } from '../../common-filter/filter.service';
 import { Subscription } from 'rxjs';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartDataset } from 'chart.js';
-import { DynamicChartLoaderService } from '../../chart-config/dynamic-chart-loader.service';
 
 @Component({
   selector: 'app-unified-chart',
@@ -76,151 +75,9 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
   private documentClickHandler: ((event: MouseEvent) => void) | null = null;
   private filtersInitialized: boolean = false;
 
-  // Dynamic template properties
-  dynamicTemplate: string = '';
-  dynamicStyles: string = '';
-  dynamicOptions: any = null;
-  
-  // Properties to hold extracted values from dynamic template
-  extractedChartType: string = '';
-  extractedDatasetsBinding: string = '';
-  extractedLabelsBinding: string = '';
-  extractedOptionsBinding: string = '';
-  extractedLegendBinding: string = '';
-  extractedChartClickBinding: string = '';
-  extractedChartHoverBinding: string = '';
-
-  // Add setter to log when dynamicTemplate changes
-  setDynamicTemplate(value: string) {
-    console.log('Setting dynamic template:', value);
-    this.dynamicTemplate = value;
-    
-    // Extract values from the dynamic template
-    this.extractTemplateValues(value);
-    
-    // Apply dynamic options if they were extracted
-    if (this.dynamicOptions) {
-      this.mergeDynamicOptions();
-    }
-    
-    // Apply dynamic styles if they were extracted
-    if (this.dynamicStyles) {
-      this.applyDynamicStyles();
-    }
-    
-    // Trigger change detection to ensure the template is rendered
-    setTimeout(() => {
-      console.log('Dynamic template updated in DOM');
-      // Check if the dynamic template container exists
-      const dynamicContainer = this.el.nativeElement.querySelector('.dynamic-template-container');
-      console.log('Dynamic template container:', dynamicContainer);
-      if (dynamicContainer) {
-        console.log('Dynamic container innerHTML:', dynamicContainer.innerHTML);
-      }
-      // Check if the canvas element exists in the DOM
-      const canvasElements = this.el.nativeElement.querySelectorAll('canvas');
-      console.log('Canvas elements found in DOM:', canvasElements.length);
-      if (canvasElements.length > 0) {
-        console.log('First canvas element:', canvasElements[0]);
-        // Check if it has the baseChart directive processed
-        const firstCanvas = canvasElements[0];
-        console.log('Canvas has baseChart directive processed:', firstCanvas.classList.contains('chartjs-render-monitor'));
-      } else {
-        console.log('No canvas elements found - checking if template was inserted but not processed');
-        // Check if there's HTML content in the dynamic container
-        if (dynamicContainer) {
-          const htmlContent = dynamicContainer.innerHTML;
-          console.log('HTML content in dynamic container:', htmlContent);
-          if (htmlContent && htmlContent.includes('canvas')) {
-            console.log('Canvas tag found in HTML but not processed by Angular');
-          }
-        }
-      }
-    }, 100);
-  }
-
-  // Extract values from dynamic template HTML
-  private extractTemplateValues(template: string): void {
-    console.log('Extracting values from template:', template);
-    
-    // Reset extracted values
-    this.extractedChartType = this.chartType || '';
-    this.extractedDatasetsBinding = 'chartData';
-    this.extractedLabelsBinding = 'chartLabels';
-    this.extractedOptionsBinding = 'chartOptions';
-    this.extractedLegendBinding = 'chartLegend';
-    this.extractedChartClickBinding = 'chartClicked($event)';
-    this.extractedChartHoverBinding = 'chartHovered($event)';
-    
-    if (!template) {
-      console.log('No template to extract values from');
-      return;
-    }
-    
-    // Parse the template to extract bindings
-    // Look for [chartType] binding
-    const chartTypeMatch = template.match(/\[chartType\]="([^"]+)"/);
-    if (chartTypeMatch && chartTypeMatch[1]) {
-      this.extractedChartType = chartTypeMatch[1];
-      console.log('Extracted chartType binding:', this.extractedChartType);
-    }
-    
-    // Look for [datasets] binding
-    const datasetsMatch = template.match(/\[datasets\]="([^"]+)"/);
-    if (datasetsMatch && datasetsMatch[1]) {
-      this.extractedDatasetsBinding = datasetsMatch[1];
-      console.log('Extracted datasets binding:', this.extractedDatasetsBinding);
-    }
-    
-    // Look for [labels] binding
-    const labelsMatch = template.match(/\[labels\]="([^"]+)"/);
-    if (labelsMatch && labelsMatch[1]) {
-      this.extractedLabelsBinding = labelsMatch[1];
-      console.log('Extracted labels binding:', this.extractedLabelsBinding);
-    }
-    
-    // Look for [options] binding
-    const optionsMatch = template.match(/\[options\]="([^"]+)"/);
-    if (optionsMatch && optionsMatch[1]) {
-      this.extractedOptionsBinding = optionsMatch[1];
-      console.log('Extracted options binding:', this.extractedOptionsBinding);
-    }
-    
-    // Look for [legend] binding
-    const legendMatch = template.match(/\[legend\]="([^"]+)"/);
-    if (legendMatch && legendMatch[1]) {
-      this.extractedLegendBinding = legendMatch[1];
-      console.log('Extracted legend binding:', this.extractedLegendBinding);
-    }
-    
-    // Look for (chartClick) binding
-    const chartClickMatch = template.match(/\(chartClick\)="([^"]+)"/);
-    if (chartClickMatch && chartClickMatch[1]) {
-      this.extractedChartClickBinding = chartClickMatch[1];
-      console.log('Extracted chartClick binding:', this.extractedChartClickBinding);
-    }
-    
-    // Look for (chartHover) binding
-    const chartHoverMatch = template.match(/\(chartHover\)="([^"]+)"/);
-    if (chartHoverMatch && chartHoverMatch[1]) {
-      this.extractedChartHoverBinding = chartHoverMatch[1];
-      console.log('Extracted chartHover binding:', this.extractedChartHoverBinding);
-    }
-    
-    // Extract CSS styles if present in the template
-    const styleMatch = template.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
-    if (styleMatch && styleMatch[1]) {
-      this.dynamicStyles = styleMatch[1];
-      console.log('Extracted CSS styles:', this.dynamicStyles);
-    }
-  }
-
   constructor(
     private dashboardService: Dashboard3Service,
-    private filterService: FilterService,
+    private filterService: FilterService
-    private dynamicChartLoader: DynamicChartLoaderService,
-    private renderer: Renderer2,
-    private el: ElementRef
   ) { }
 
   ngOnInit(): void {
@@ -253,21 +110,12 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     
     // Initialize chart options with default structure
     this.initializeChartOptions();
-
-    // Load dynamic template and options for this chart type
-    this.loadDynamicChartConfig();
-
     this.fetchChartData();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     console.log('UnifiedChartComponent input changes:', changes);
     
-    // Log chartType changes specifically
-    if (changes.chartType) {
-      console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
-    }
-
     // Log all input values for debugging
     console.log('Current input values:', {
       chartType: this.chartType,
@@ -331,11 +179,6 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       });
     }
     
-    // Load dynamic template and options if chart type changed
-    if (chartTypeChanged) {
-      this.loadDynamicChartConfig();
-    }
-
     // Only fetch data if the actual chart configuration changed and we're not already fetching
     if (!this.isFetchingData && (chartTypeChanged || xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
@@ -374,179 +217,10 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  // Load dynamic chart configuration (template, styles, and options) for the current chart type
-  private loadDynamicChartConfig(): void {
-    if (!this.chartType) {
-      console.log('No chart type specified, skipping dynamic chart config loading');
-      return;
-    }
-
-    console.log(`Loading dynamic chart configuration for chart type: ${this.chartType}`);
-    console.log('Current dynamic template:', this.dynamicTemplate);
-
-    // Get chart type by name and load its configuration
-    console.log('Calling getChartTypeByName with:', this.chartType);
-    this.dynamicChartLoader.getChartTypeByName(this.chartType).subscribe({
-      next: (chartType) => {
-        console.log('Received chart type by name :', chartType);
-        if (chartType) {
-          console.log('Found chart type:', chartType);
-
-          // Load the complete configuration for this chart type
-          console.log('Loading chart configuration for chart type ID:', chartType.id);
-          this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
-            next: (config) => {
-              console.log('Received chart configuration:', config);
-              console.log('Loaded chart configuration:', config);
-
-              // Apply the first template if available (for CSS styles)
-              if (config.templates && config.templates.length > 0) {
-                const defaultTemplate = config.templates.find(t => t.isDefault) || config.templates[0];
-                if (defaultTemplate) {
-                  const templateHtml = defaultTemplate.templateHtml || '';
-                  console.log('Template HTML to be set:', templateHtml);
-                  this.setDynamicTemplate(templateHtml);
-                  this.dynamicStyles = defaultTemplate.templateCss || '';
-
-                  // Apply styles to the component
-                  this.applyDynamicStyles();
-
-                  console.log('Applied dynamic template and styles', {
-                    template: this.dynamicTemplate,
-                    styles: this.dynamicStyles
-                  });
-                }
-              } else {
-                console.log('No templates found for chart type:', this.chartType);
-              }
-
-              // Apply dynamic options if available
-              console.log('Checking for dynamic fields:', config.dynamicFields);
-              if (config.dynamicFields && config.dynamicFields.length > 0) {
-                // Find the field that contains chart options
-                const optionsField = config.dynamicFields.find(field =>
-                  field.fieldName === 'chartOptions' || field.fieldName.toLowerCase().includes('options'));
-
-                if (!optionsField) {
-                  console.log('No chartOptions field found in dynamic fields');
-                }
-
-                if (optionsField && optionsField.fieldOptions) {
-                  try {
-                    this.dynamicOptions = JSON.parse(optionsField.fieldOptions);
-                    console.log('Applied dynamic chart options:', this.dynamicOptions);
-
-                    // Merge dynamic options with current chart options
-                    this.mergeDynamicOptions();
-                  } catch (e) {
-                    console.error('Error parsing dynamic chart options:', e);
-                  }
-                }
-              } else {
-                console.log('No dynamic fields found for chart type:', this.chartType);
-              }
-            },
-            error: (error) => {
-              console.error('Error loading chart configuration:', error);
-            }
-          });
-        } else {
-          console.log(`Chart type ${this.chartType} not found in database`);
-          // Log available chart types for debugging
-          console.log('Available chart types in database:');
-          this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
-            next: (chartTypes) => {
-              console.log('All chart types:', chartTypes);
-            },
-            error: (error) => {
-              console.error('Error loading chart types:', error);
-            }
-          });
-        }
-      },
-      error: (error) => {
-        console.error('Error loading chart type:', error);
-      }
-    });
-  }
-
-  // Merge dynamic options with current chart options
-  private mergeDynamicOptions(): void {
-    if (this.dynamicOptions) {
-      console.log('Merging dynamic options with existing chart options:', {
-        existing: this.chartOptions,
-        dynamic: this.dynamicOptions
-      });
-      
-      // Deep merge dynamic options with existing chart options
-      this.chartOptions = this.deepMerge(this.chartOptions, this.dynamicOptions);
-      
-      console.log('Merged chart options:', this.chartOptions);
-
-      // If we have a chart instance, update it
-      if (this.chart) {
-        this.chart.options = this.chartOptions;
-        this.chart.render();
-      }
-    }
-  }
-  
-  // Helper method for deep merging objects
-  private deepMerge(target: any, source: any): any {
-    const result = { ...target };
-    
-    for (const key in source) {
-      if (source.hasOwnProperty(key)) {
-        if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
-          // Recursively merge objects
-          result[key] = this.deepMerge(result[key] || {}, source[key]);
-        } else {
-          // Override with source value
-          result[key] = source[key];
-        }
-      }
-    }
-    
-    return result;
-  }
-
-  // Apply dynamic styles to the component
-  private applyDynamicStyles(): void {
-    // Remove any previously applied dynamic styles
-    const existingStyles = this.el.nativeElement.querySelectorAll('.dynamic-chart-styles');
-    existingStyles.forEach((style: HTMLElement) => {
-      style.remove();
-    });
-
-    // Apply new styles if available
-    if (this.dynamicStyles) {
-      const styleElement = this.renderer.createElement('style');
-      this.renderer.setAttribute(styleElement, 'class', 'dynamic-chart-styles');
-      this.renderer.setProperty(styleElement, 'textContent', this.dynamicStyles);
-      this.renderer.appendChild(this.el.nativeElement, styleElement);
-      console.log('Applied dynamic styles to component');
-    }
-  }
-
-  // Initialize chart after dynamic template is rendered
-  private initializeDynamicChart(): void {
-    // This is a complex issue - Angular directives in dynamically inserted HTML
-    // don't get processed automatically. We would need to use a different approach
-    // such as creating components dynamically or using a different template mechanism.
-    console.log('Initializing dynamic chart - this is where we would handle chart initialization');
-    
-    // NOTE: The baseChart directive in dynamically inserted HTML via [innerHTML] 
-    // will not be processed by Angular. This is a limitation of Angular's change detection.
-    // Possible solutions:
-    // 1. Use Angular's dynamic component creation API
-    // 2. Modify the approach to use a different template mechanism
-    // 3. Keep the canvas element in the static template and only load options dynamically
-  }
-
   // Check if filters are available
   hasFilters(): boolean {
     const hasBaseFilters = this.baseFilters && this.baseFilters.length > 0;
-    // console.log('Checking for filters - baseFilters:', this.baseFilters, 'hasBaseFilters:', hasBaseFilters);
+    console.log('Checking for filters - baseFilters:', this.baseFilters, 'hasBaseFilters:', hasBaseFilters);
     return hasBaseFilters;
   }
 
@@ -675,37 +349,31 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       }
     };
     
-    // If we have dynamic options, use them instead of the default ones
-    if (this.dynamicOptions) {
-      this.mergeDynamicOptions();
-      return;
-    }
-
     switch (this.chartType) {
-      // case 'bar':
+      case 'bar':
-      //   this.initializeBarChartOptions();
+        this.initializeBarChartOptions();
-      //   break;
+        break;
-      // case 'line':
+      case 'line':
-      //   this.initializeLineChartOptions();
+        this.initializeLineChartOptions();
-      //   break;
+        break;
-      // case 'pie':
+      case 'pie':
-      //   this.initializePieChartOptions();
+        this.initializePieChartOptions();
-      //   break;
+        break;
-      // case 'doughnut':
+      case 'doughnut':
-      //   this.initializeDoughnutChartOptions();
+        this.initializeDoughnutChartOptions();
-      //   break;
+        break;
-      // case 'bubble':
+      case 'bubble':
-      //   this.initializeBubbleChartOptions();
+        this.initializeBubbleChartOptions();
-      //   break;
+        break;
-      // case 'radar':
+      case 'radar':
-      //   this.initializeRadarChartOptions();
+        this.initializeRadarChartOptions();
-      //   break;
+        break;
-      // case 'polar':
+      case 'polar':
-      //   this.initializePolarChartOptions();
+        this.initializePolarChartOptions();
-      //   break;
+        break;
-      // case 'scatter':
+      case 'scatter':
-      //   this.initializeScatterChartOptions();
+        this.initializeScatterChartOptions();
-      //   break;
+        break;
       default:
         this.initializeDefaultChartOptions();
     }
@@ -923,7 +591,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
           mode: 'point',
           intersect: false,
           callbacks: {
-            label: function (context: any) {
+            label: function(context: any) {
               const point: any = context.raw;
               if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
                 const yValue = parseFloat(point.y);
@@ -1609,17 +1277,17 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
       const hue2rgb = (p: number, q: number, t: number) => {
         if (t < 0) t += 1;
         if (t > 1) t -= 1;
-        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1/6) return p + (q - p) * 6 * t;
-        if (t < 1 / 2) return q;
+        if (t < 1/2) return q;
-        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
         return p;
       };
       
       const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
       const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1 / 3);
+      r = hue2rgb(p, q, h + 1/3);
       g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
+      b = hue2rgb(p, q, h - 1/3);
     }
     
     return {

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

@@ -1,3 +1,25 @@
+import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
+
+import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
+
+
+import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
+import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
+import { StateComponent } from './BuilderComponents/testdata/State/State.component';
+import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
+import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
+import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
+import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
+import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
+import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
+import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
+import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
+import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
+import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
+import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
+import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
+import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
+import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
 
 
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -38,7 +60,10 @@ import { AccesstypeComponent } from './admin/accesstype/accesstype.component';
 import { ModulesComponent } from './admin/modules/modules.component';
 
 import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
+import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
 import { ReportrunnerallComponent } from './builder/report-runner/reportrunnerall/reportrunnerall.component';
+import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
+import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
 import { ReportBuildComponent } from './builder/report-build/report-build.component';
 import { ReportbuildallComponent } from './builder/report-build/reportbuildall/reportbuildall.component';
 import { ReportbuildaddComponent } from './builder/report-build/reportbuildadd/reportbuildadd.component';
@@ -84,6 +109,13 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
 import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
 import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
 import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
+import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
+import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
+import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
+import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
+import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
+import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
+import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
 import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
 import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
 import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -95,14 +127,10 @@ 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' },
@@ -196,11 +224,6 @@ 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 },
         ]
       },
       
@@ -308,8 +331,178 @@ const routes: Routes = [
 
 
 
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Adv3', component: Adv3Component },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      { path: 'Ad10', component: Ad10Component },
+
+
+      { path: 'Childform', component: ChildformComponent },
+
+
+      { path: 'District', component: DistrictComponent },
+
+
+      { path: 'State', component: StateComponent },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Ad9', component: Ad9Component },
+
+
+      { path: 'Ad8', component: Ad8Component },
+
+
+      { path: 'Ad7', component: Ad7Component },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      { path: 'Ad6', component: Ad6Component },
+
+
+      { path: 'Adv5', component: Adv5Component },
+
+
+      { path: 'Support', component: SupportComponent },
+
+
+      { path: 'Adv3', component: Adv3Component },
+
+
       { path: 'tokenregistery', component: Token_registeryComponent },
 
+
+      { path: 'Defatest', component: DefatestComponent },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Defatest', component: DefatestComponent },
+
+      { path: 'Test2', component: Test2Component },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+
+      { path: 'Test2', component: Test2Component },
+
+      { path: 'Childform', component: ChildformComponent },
+
+
+      { path: 'District', component: DistrictComponent },
+
+
+      { path: 'State', component: StateComponent },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Ad9', component: Ad9Component },
+
+
+      { path: 'Ad8', component: Ad8Component },
+
+
+      { path: 'Ad7', component: Ad7Component },
+
+
+      { path: 'Ad6', component: Ad6Component },
+
+
+      { path: 'Adv5', component: Adv5Component },
+
+
+      { path: 'Adv4', component: Adv4Component },
+
+
+      { path: 'Support', component: SupportComponent },
+
+
+      { path: 'Adv3', component: Adv3Component },
+
+
+      { path: 'Dv2', component: Dv2Component },
+
+
+      { path: 'Adv1', component: Adv1Component },
+
+
+      { path: 'Basicp3', component: Basicp3Component },
+
+
+      { path: 'Basicp2', component: Basicp2Component },
+
+
+      { path: 'Basicp1', component: Basicp1Component },
+      { path: 'cust', component: Customer_informationComponent },
+
+      { path: 'Order_summary', component: Order_summaryComponent },
+
+
+      { path: 'Types', component: TypesComponent },
+
+
+      { path: 'Product', component: ProductComponent },
+
+
+      { path: 'Manufacturer', component: ManufacturerComponent },
+
+
+      { path: 'Deployment_type', component: Deployment_typeComponent },
+
+
+
+
       { path: 'Stepper_workflow', component: Stepper_workflowComponent },
 
 

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

@@ -1,3 +1,25 @@
+import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
+
+import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
+
+import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
+import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
+import { StateComponent } from './BuilderComponents/testdata/State/State.component';
+import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
+import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
+import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
+import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
+import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
+import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
+import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
+import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
+import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
+import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
+import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
+import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
+import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
+import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
+
 
 
 import { CommonModule } from '@angular/common';
@@ -53,6 +75,9 @@ import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit
 import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
 import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
 import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
+import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
+import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
+import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
 
 
 import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
@@ -113,7 +138,13 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
 import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
 import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
 import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
-
+import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
+import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
+import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
+import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
+import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
+import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
+import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
 import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
 import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
 import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -134,34 +165,11 @@ 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/chart-config-manager.component';
+import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config-manager/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: [
@@ -181,27 +189,6 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
     ChartTypeManagerComponent,
     // Add ChartTypePageComponent to declarations
     ChartTypePageComponent,
-    // Add AddChartTypeComponent to declarations
-    AddChartTypeComponent,
-    // Add EditChartTypeComponent to declarations
-    EditChartTypeComponent,
-    // Add ChartTypeUiComponentsComponent to declarations
-    ChartTypeUiComponentsComponent,
-    // Add ChartTypeTemplatesComponent to declarations
-    ChartTypeTemplatesComponent,
-    // Add ChartTypeFieldsComponent to declarations
-    ChartTypeFieldsComponent,
-    // Add new form components to declarations
-    ChartTypeFormComponent,
-    UiComponentFormComponent,
-    ComponentPropertyFormComponent,
-    ChartTemplateFormComponent,
-    DynamicFieldFormComponent,
-    // Add ChartConfigModalComponent to declarations
-    ChartConfigModalComponent,
-    // Add ChartTypeDisplayComponent to declarations
-    
-
     DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
     // Add CompactFilterRunnerComponent to declarations
     CompactFilterRunnerComponent,
@@ -214,7 +201,7 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
     ApiregisterylineComponent,
     DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
     MappingruleaddComponent,
-    MappingruleeditComponent, Stepper_workflowComponent,
+    MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
     Data_lakeComponent,
     SureconnectComponent,
     EditsureconnectComponent,
@@ -227,8 +214,32 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
 
 
     ThemeCustomizationComponent,
-   
+    Ad10Component,
     Token_registeryComponent,
+    DefatestComponent,
+    Test2Component,
+    Order_summaryComponent,
+    TypesComponent,
+    ProductComponent,
+    ManufacturerComponent,
+    Deployment_typeComponent,
+    ChildformComponent,
+    DistrictComponent,
+    StateComponent,
+    CountryComponent,
+    Ad9Component,
+    Ad8Component,
+    Ad7Component,
+    Ad6Component,
+    Adv5Component,
+    Adv4Component,
+    SupportComponent,
+    Adv3Component,
+    Dv2Component,
+    Adv1Component,
+    Basicp3Component,
+    Basicp2Component,
+    Basicp1Component,
   ],
   imports: [
     QRCodeModule,
@@ -255,10 +266,8 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
   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 } from 'rxjs';
+import { Observable, BehaviorSubject, Subject } from 'rxjs';
 import { UserInfoService, LoginInfoInStorage} from '../user-info.service';
 import { ApiRequestService } from './api-request.service';
 import { HttpClient } from '@angular/common/http';
@@ -43,11 +43,14 @@ export class LoginService {
 
         */
 
-        let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
+        // let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
+       let loginDataSubject: Subject<any> = new Subject<any>();
+
         let loginInfoReturn:LoginInfoInStorage; // Object that we want to send back to Login Page
 
         this.apiRequest.loginAuthentication('token/session', bodyData)
-            .subscribe(jsonResp => {
+            .subscribe({
+                next: (jsonResp) => {
                     console.log('login response in service : ', jsonResp);
                     if (jsonResp.operationMessage=='Login Failed') {
                       this.toastr.warning('Not Login Getting Error check your Username and password');
@@ -78,7 +81,7 @@ export class LoginService {
                         this.userInfoService.storeUserInfo(JSON.stringify(loginInfoReturn.user));
                     }
                     else {
-                    //Create a faliure object that we want to send back to login page
+                        //Create a failure object that we want to send back to login page
                         loginInfoReturn = {
                             "success":false,
                             "message":jsonResp.operationMessage,
@@ -86,8 +89,9 @@ export class LoginService {
                         };
                     }
                     loginDataSubject.next(loginInfoReturn);
+                    loginDataSubject.complete(); // Complete the subject
                 },
-            err => {
+                error: (err) => {
                     console.log('login error ', err);
                     loginInfoReturn = {
                         "success": false,
@@ -97,6 +101,9 @@ export class LoginService {
                     if (err) {
                         this.toastr.error('Getting Server Error');
                     }
+                    loginDataSubject.next(loginInfoReturn); // Send the error response
+                    loginDataSubject.complete(); // Complete the subject
+                }
             });
 
         return loginDataSubject;

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

@@ -1,46 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from "rxjs";
-import { HttpClient } from "@angular/common/http";
-import { ApiRequestService } from "src/app/services/api/api-request.service";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SchedulerService {
-  private baseURL = "scheduler";
-
-  constructor(
-    private http: HttpClient,
-    private apiRequest: ApiRequestService,
-  ) { }
-
-  // Get job by lake ID
-  getJobByLakeId(lakeId: number): Observable<any> {
-    const _http = `${this.baseURL}/lake/${lakeId}`;
-    return this.apiRequest.get(_http);
-  }
-
-  // Create a new job
-  createJob(jobData: any): Observable<any> {
-    const _http = `${this.baseURL}/create`;
-    return this.apiRequest.post(_http, jobData);
-  }
-
-  // Pause a job
-  pauseJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/pause/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Resume a job
-  resumeJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/resume/${jobId}`;
-    return this.apiRequest.post(_http, {});
-  }
-
-  // Stop a job
-  stopJob(jobId: number): Observable<any> {
-    const _http = `${this.baseURL}/stop/${jobId}`;
-    return this.apiRequest.delete(_http);
-  }
-}