site builder

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html

@@ -4,7 +4,7 @@
 <div class="dg-wrapper">
   <div class="clr-row">
     <div class="clr-col-8">
-      <h3>DesignLbrary </h3>
+      <h3>Design Library </h3>
     </div>
     <div class="clr-col-4" style="text-align: right;">
       <button *ngIf="cardButton" id="add" class="btn btn-primary btn-icon" (click)="changeView()">

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.html

@@ -31,6 +31,9 @@
         </div>
       </div>
       <div class="controls">
+        <button class="control-btn" (click)="saveTreeData()" title="Save">
+          <i class="fas fa-save"></i>
+        </button>
         <button class="control-btn" (click)="zoomIn()" title="Zoom In">
           <i class="fas fa-plus"></i>
         </button>
@@ -40,9 +43,7 @@
         <button class="control-btn" (click)="resetZoom()" title="Reset Zoom">
           <i class="fas fa-expand"></i>
         </button>
-        <button class="control-btn" (click)="saveTreeData()" title="Save">
+
-          <i class="fas fa-save"></i>
-        </button>
       </div>
     </div>
   </div>
@@ -51,9 +52,7 @@
       <div class="editor-title">Edit Section: {{ selectedSection.type }}</div>
       <div class="form-group">
         <label class="form-label">Content</label>
-        <textarea 
+        <textarea class="form-textarea" [(ngModel)]="selectedSection.content"></textarea>
-          class="form-textarea" 
-          [(ngModel)]="selectedSection.content"></textarea>
       </div>
       <div class="form-actions">
         <button class="btn btn-secondary" (click)="cancelEdit()">Cancel</button>
@@ -67,7 +66,8 @@
       <button class="close-btn" (click)="closeOffcanvas()">&times;</button>
     </div>
     <div class="offcanvas-body">
-      <div class="section-template" *ngFor="let template of sectionTemplates" (click)="addSectionFromTemplate(template)">
+      <div class="section-template" *ngFor="let template of sectionTemplates"
+        (click)="addSectionFromTemplate(template)">
         <div class="section-template-title">{{ template.type }}</div>
         <div class="section-template-desc">{{ template.description }}</div>
       </div>
@@ -79,7 +79,8 @@
         </div>
         <div class="mb-3">
           <label class="form-label">Content</label>
-          <textarea class="form-control" [(ngModel)]="customSectionContent" rows="4" placeholder="Enter content"></textarea>
+          <textarea class="form-control" [(ngModel)]="customSectionContent" rows="4"
+            placeholder="Enter content"></textarea>
         </div>
         <button class="btn btn-primary" [disabled]="!customSectionType" (click)="addCustomSection()">
           Add Custom Section
@@ -103,7 +104,8 @@
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" (click)="closeAddChildModal()">Cancel</button>
-          <button type="button" class="btn btn-primary" [disabled]="!newPageName" (click)="addChildPage()">Add Page</button>
+          <button type="button" class="btn btn-primary" [disabled]="!newPageName" (click)="addChildPage()">Add
+            Page</button>
         </div>
       </div>
     </div>
@@ -113,47 +115,41 @@
     <div class="loading-text">Processing...</div>
   </div>
   <ng-template #pageTemplate let-page>
-    <div class="node-container" 
+    <div class="node-container" draggable="true" (dragstart)="onPageDragStart(page)" (dragend)="onPageDragEnd()"
-         draggable="true"
+      (dragover)="$event.preventDefault()" (drop)="onPageDrop(page); $event.preventDefault()">
-         (dragstart)="onPageDragStart(page)"
-         (dragend)="onPageDragEnd()"
-         (dragover)="$event.preventDefault()"
-         (drop)="onPageDrop(page); $event.preventDefault()">
       <div class="connection-line" *ngIf="page.parent && page.parent !== rootPage"></div>
-      <div class="node-card" 
+      <div class="node-card" [class.selected]="selectedPage === page" (click)="selectPage(page)">
-           [class.selected]="selectedPage === page" 
-           (click)="selectPage(page)">
         <div class="node-header">
           <i class="node-icon" [class]="getNodeIcon(page)"></i>
           <span class="node-title">{{ page.name }}</span>
         </div>
         <div class="sections-container" cdkDropList [cdkDropListData]="page.sections">
-         <!-- Update the section card template within the #pageTemplate -->
+          <!-- Update the section card template within the #pageTemplate -->
-         <!-- Section card with improved hover button placement -->
+          <!-- Section card with improved hover button placement -->
-<div class="section-card" *ngFor="let section of page.sections; let i = index" 
+          <div class="section-card" *ngFor="let section of page.sections; let i = index" cdkDrag
-cdkDrag
+            (click)="selectSection(section); $event.stopPropagation()">
-(click)="selectSection(section); $event.stopPropagation()">
+            <div class="section-title">{{ section.type }}</div>
-<div class="section-title">{{ section.type }}</div>
+            <div class="section-content" [innerHTML]="getSectionContentHtml(section.content)"></div>
-<div class="section-content" [innerHTML]="getSectionContentHtml(section.content)"></div>
+            <div class="section-actions">
-<div class="section-actions">
+              <button class="section-action-btn" title="Edit Section" (click)="editSection(section, $event)">
-<button class="section-action-btn" title="Edit Section" (click)="editSection(section, $event)">
+                <i class="fas fa-pencil-alt"></i>
- <i class="fas fa-pencil-alt"></i>
+              </button>
-</button>
+              <button class="section-action-btn" title="Delete Section" (click)="deleteSection(section, page, $event)">
-<button class="section-action-btn" title="Delete Section" (click)="deleteSection(section, page, $event)">
+                <i class="fas fa-trash"></i>
- <i class="fas fa-trash"></i>
+              </button>
-</button>
+            </div>
-</div>
+            <!-- Repositioned add button that appears on hover -->
-<!-- Repositioned add button that appears on hover -->
+            <div class="add-section-hover-btn" (click)="openSectionOffcanvas(page, i, $event)" title="Add Section">
-<div class="add-section-hover-btn" (click)="openSectionOffcanvas(page, i, $event)" title="Add Section">
+              <i class="fas fa-plus"></i>
-<i class="fas fa-plus"></i>
+            </div>
-</div>
+          </div>
-</div>
           <!-- <div class="add-section-btn" (click)="openSectionOffcanvas(page); $event.stopPropagation()">
             <i class="fas fa-plus"></i> Add Section
           </div> -->
         </div>
         <div class="node-actions">
-          <button class="node-action-btn" title="Add Child Page" (click)="showAddChildPageModal(page); $event.stopPropagation()">
+          <button class="node-action-btn" title="Add Child Page"
+            (click)="showAddChildPageModal(page); $event.stopPropagation()">
             <i class="fas fa-plus"></i>
           </button>
           <button class="node-action-btn" title="Delete Page" (click)="deletePage(page, $event)">
@@ -171,4 +167,4 @@ cdkDrag
       </div>
     </div>
   </ng-template>
-</div>
+</div>

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts

@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
+import { ToastrService } from 'ngx-toastr';
 
 interface Section {
   type: string;
@@ -27,23 +28,23 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
   // Canvas properties
   @ViewChild('canvasContainer') canvasContainer!: ElementRef;
   private destroy$ = new Subject<void>();
-  
+
   // Grid movement properties
   private isDraggingCanvas = false;
   private startX = 0;
   private startY = 0;
   private panning = false;
-  
+
   // Zoom properties
   currentScale = 1;
   private maxScale = 2;
   private minScale = 0.5;
   private scaleFactor = 0.1;
-  
+
   // Grid position
   gridTranslateX = 0;
   gridTranslateY = 0;
-  
+
   // Site structure data
   rootPage: Page | null = null;
   selectedPage: Page | null = null;
@@ -52,19 +53,19 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
   siteId: number = 0;
   loading = false;
   hasUnsavedChanges = false;
-  
+
   // Section management
   availableSectionTypes: string[] = [];
   showOffcanvas = false;
   currentParentPage: Page | null = null;
   customSectionType = '';
   customSectionContent = '';
-  
+
   // Adding child pages
   showAddChildModal = false;
   newPageName = '';
   currentParentForChild: Page | null = null;
-  
+
   // For drag and drop
   draggedPage: Page | null = null;
   draggedSection: Section | null = null;
@@ -72,7 +73,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   currentSectionIndex: number = -1;
 
-  
+
   // Section templates with better descriptions
   sectionTemplates = [
     {
@@ -129,174 +130,177 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   constructor(
     private siteTreeService: SiteTreeservice,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
-  ) {}
+    private toastr: ToastrService
-  
+
+
+  ) { }
+
   ngOnInit(): void {
     this.siteId = this.route.snapshot.params['id'];
     this.fetchSiteTree();
   }
-  
+
   ngAfterViewInit(): void {
     this.initCanvasControls();
-    
+
     // Set up touch events for mobile
     const canvas = this.canvasContainer.nativeElement;
     canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
     canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
     canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
-    
+
     // Center grid after initial load
     setTimeout(() => {
       this.centerGrid();
     }, 500);
   }
-  
+
   ngOnDestroy(): void {
     // Auto-save changes before component destruction
     if (this.hasUnsavedChanges) {
       this.saveTreeData(true);
     }
-    
+
     this.destroy$.next();
     this.destroy$.complete();
   }
-  
+
   // GRID MOVEMENT METHODS
-  
+
   initCanvasControls(): void {
     const canvas = this.canvasContainer.nativeElement;
-    
+
     // Mouse down event for dragging
     canvas.addEventListener('mousedown', (e: MouseEvent) => {
       // Only initiate drag if not clicking on interactive elements
       if ((e.target as HTMLElement).closest('.node-card, .node-header, button, input, select, textarea, .modal, .editor-form, .section-card, .add-button')) {
         return;
       }
-      
+
       this.panning = true;
       this.startX = e.clientX - this.gridTranslateX;
       this.startY = e.clientY - this.gridTranslateY;
       canvas.style.cursor = 'grabbing';
       e.preventDefault();
     });
-    
+
     // Mouse move for dragging the grid
     document.addEventListener('mousemove', (e: MouseEvent) => {
       if (!this.panning) return;
-      
+
       // Calculate new position
       const newX = e.clientX - this.startX;
       const newY = e.clientY - this.startY;
-      
+
       // Update position
       this.gridTranslateX = newX;
       this.gridTranslateY = newY;
       this.applyGridTransform();
     });
-    
+
     // Mouse up to end dragging
     document.addEventListener('mouseup', () => {
       this.panning = false;
       canvas.style.cursor = 'grab';
     });
-    
+
     // Mouse wheel for zooming
     canvas.addEventListener('wheel', (e: WheelEvent) => {
       e.preventDefault();
-      
+
       // Calculate zoom based on wheel direction
       const delta = e.deltaY < 0 ? this.scaleFactor : -this.scaleFactor;
       const newScale = Math.min(this.maxScale, Math.max(this.minScale, this.currentScale + delta));
-      
+
       // Get mouse position relative to canvas
       const rect = canvas.getBoundingClientRect();
       const mouseX = e.clientX - rect.left;
       const mouseY = e.clientY - rect.top;
-      
+
       // Calculate zoom around mouse position
       this.zoomAtPoint(newScale, mouseX, mouseY);
     }, { passive: false });
   }
-  
+
   // Touch event handlers for mobile devices
   handleTouchStart(e: TouchEvent): void {
     if (e.touches.length !== 1) return;
-    
+
     const touch = e.touches[0];
     this.panning = true;
     this.startX = touch.clientX - this.gridTranslateX;
     this.startY = touch.clientY - this.gridTranslateY;
     e.preventDefault();
   }
-  
+
   handleTouchMove(e: TouchEvent): void {
     if (!this.panning || e.touches.length !== 1) return;
-    
+
     const touch = e.touches[0];
     this.gridTranslateX = touch.clientX - this.startX;
     this.gridTranslateY = touch.clientY - this.startY;
     this.applyGridTransform();
     e.preventDefault();
   }
-  
+
   handleTouchEnd(): void {
     this.panning = false;
   }
-  
+
   // Apply transform to the grid
   applyGridTransform(): void {
     const grid = document.querySelector('.sitemap-grid') as HTMLElement;
     if (!grid) return;
-    
+
     grid.style.transform = `translate(${this.gridTranslateX}px, ${this.gridTranslateY}px) scale(${this.currentScale})`;
   }
-  
+
   // Public method to get total transform for template binding
   getTotalTransform(): string {
     return `translate(${this.gridTranslateX}px, ${this.gridTranslateY}px) scale(${this.currentScale})`;
   }
-  
+
   // Zoom at a specific point
   zoomAtPoint(newScale: number, x: number, y: number): void {
     if (newScale === this.currentScale) return;
-    
+
     // Calculate offset change to zoom at mouse position
     const scaleFactor = newScale / this.currentScale;
     const dx = x - x * scaleFactor;
     const dy = y - y * scaleFactor;
-    
+
     // Apply new position and scale
     this.gridTranslateX = this.gridTranslateX * scaleFactor + dx;
     this.gridTranslateY = this.gridTranslateY * scaleFactor + dy;
     this.currentScale = newScale;
-    
+
     this.applyGridTransform();
   }
-  
+
   // Center the grid in the viewport
   centerGrid(): void {
     const canvas = this.canvasContainer.nativeElement;
     const grid = document.querySelector('.tree-grid') as HTMLElement;
     const rootNode = document.querySelector('.home-node') as HTMLElement;
-    
+
     if (!canvas || !grid) {
       setTimeout(() => this.centerGrid(), 100);
       return;
     }
-    
+
     const canvasRect = canvas.getBoundingClientRect();
     const gridRect = grid.getBoundingClientRect();
-    
+
     // Calculate scale to fit content within the fixed box
     const scaleX = canvasRect.width / gridRect.width * 0.2;
     const scaleY = canvasRect.height / gridRect.height * 0.2;
     const scale = Math.min(Math.max(this.minScale, Math.min(scaleX, scaleY)), 1);
-    
+
     // Position the grid - centered horizontally, but align top of tree with top of viewport
     this.currentScale = scale;
     this.gridTranslateX = -700; // Set left position to -900px
-    
+
     // Position vertically to place root node near top with some padding
     const topPadding = 50; // Pixels from top of viewport
     if (rootNode) {
@@ -307,38 +311,38 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
       // Fallback if root node not found
       this.gridTranslateY = topPadding;
     }
-    
+
     this.applyGridTransform();
   }
-  
+
   // ZOOM CONTROL METHODS
-  
+
   zoomIn(): void {
     const canvas = this.canvasContainer.nativeElement;
     const rect = canvas.getBoundingClientRect();
     const centerX = rect.width / 2;
     const centerY = rect.height / 2;
-    
+
     const newScale = Math.min(this.maxScale, this.currentScale + this.scaleFactor);
     this.zoomAtPoint(newScale, centerX, centerY);
   }
-  
+
   zoomOut(): void {
     const canvas = this.canvasContainer.nativeElement;
     const rect = canvas.getBoundingClientRect();
     const centerX = rect.width / 2;
     const centerY = rect.height / 2;
-    
+
     const newScale = Math.max(this.minScale, this.currentScale - this.scaleFactor);
     this.zoomAtPoint(newScale, centerX, centerY);
   }
-  
+
   resetZoom(): void {
     this.centerGrid();
   }
-  
+
   // TREE DATA METHODS
-  
+
   fetchSiteTree(): void {
     this.loading = true;
     this.siteTreeService.getById(this.siteId).subscribe({
@@ -348,7 +352,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
         const raw = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
         const rootTitle = raw.title || 'Site Structure';
         const pagesObj = raw.data?.Children || raw.Children || raw.data || raw;
-        this.processSiteData( pagesObj,rootTitle);
+        this.processSiteData(pagesObj, rootTitle);
       },
       error: () => {
         this.loading = false;
@@ -356,7 +360,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
       }
     });
   }
-  
+
   // Create a default structure
   createDefaultStructure(): void {
     const defaultData = {
@@ -370,7 +374,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
     };
     this.processSiteData(defaultData);
   }
-  
+
   processSiteData(pagesObj: any, rootTitle?: string): void {
     // Initialize root with dynamic title
     this.rootPage = { id: 'root', name: rootTitle, sections: [], children: [] };
@@ -398,8 +402,8 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
               content: Array.isArray(val)
                 ? val.join('\n')
                 : typeof val === 'object'
-                ? JSON.stringify(val, null, 2)
+                  ? JSON.stringify(val, null, 2)
-                : String(val)
+                  : String(val)
             });
             if (!this.availableSectionTypes.includes(prop)) {
               this.availableSectionTypes.push(prop);
@@ -417,7 +421,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
     this.rootPage.children = buildPages(pagesObj, this.rootPage);
     setTimeout(() => this.centerGrid(), 100);
   }
-  
+
   createPageFromData(pageName: string, pageData: any, idPrefix: string): Page {
     const page: Page = {
       id: idPrefix,
@@ -425,19 +429,19 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
       sections: [],
       children: []
     };
-    
+
     // Extract sections
     if (pageData) {
       // Process properties as sections
       Object.keys(pageData).forEach(key => {
         if (key !== 'Children') {
           const value = pageData[key];
-          
+
           // Add to available section types if not already included
           if (!this.availableSectionTypes.includes(key)) {
             this.availableSectionTypes.push(key);
           }
-          
+
           // Handle different value types
           if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
             // Object value
@@ -460,7 +464,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
           }
         }
       });
-      
+
       // Process children recursively if the Children key exists
       if (pageData.Children) {
         let childId = 0;
@@ -472,26 +476,26 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
         });
       }
     }
-    
+
     return page;
   }
-  
+
   // Generate output JSON from tree structure
   generateOutputJson(): any {
     const output: any = {};
-    
+
     if (this.rootPage?.children) {
       this.rootPage.children.forEach(page => {
         output[page.name] = this.convertPageToJsonObject(page);
       });
     }
-    
+
     return output;
   }
-  
+
   convertPageToJsonObject(page: Page): any {
     const pageObj: any = {};
-    
+
     // Add sections
     page.sections.forEach(section => {
       try {
@@ -508,45 +512,45 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
         pageObj[section.type] = section.content;
       }
     });
-    
+
     // Add children
     if (page.children && page.children.length > 0) {
       pageObj.Children = {};
-      
+
       page.children.forEach(childPage => {
         pageObj.Children[childPage.name] = this.convertPageToJsonObject(childPage);
       });
     }
-    
+
     return pageObj;
   }
-  
+
   // PAGE AND SECTION MANAGEMENT
-  
+
   selectPage(page: Page): void {
     this.selectedPage = page;
     this.selectedSection = null;
   }
-  
+
   selectSection(section: Section): void {
     this.selectedSection = section;
     this.editMode = 'section';
   }
-  
+
   // Show modal to add a child page
   showAddChildPageModal(parent: Page): void {
     this.currentParentForChild = parent;
     this.newPageName = '';
     this.showAddChildModal = true;
   }
-  
+
   // Add a child page
   addChildPage(): void {
     if (this.currentParentForChild && this.newPageName) {
       if (!this.currentParentForChild.children) {
         this.currentParentForChild.children = [];
       }
-      
+
       const newPage: Page = {
         id: `page-${Date.now()}`,
         name: this.newPageName,
@@ -554,51 +558,51 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
         children: [],
         parent: this.currentParentForChild
       };
-      
+
       this.currentParentForChild.children.push(newPage);
       this.hasUnsavedChanges = true;
       this.closeAddChildModal();
-      
+
       // Auto-select the new page
       this.selectPage(newPage);
     }
   }
-  
+
   closeAddChildModal(): void {
     this.showAddChildModal = false;
     this.currentParentForChild = null;
     this.newPageName = '';
   }
-  
+
   // Delete a page
   deletePage(page: Page, event: Event): void {
     event.stopPropagation();
-    
+
     if (!page.parent || !page.parent.children) return;
-    
+
     if (confirm(`Are you sure you want to delete "${page.name}" and all its children?`)) {
       const index = page.parent.children.indexOf(page);
       if (index !== -1) {
         page.parent.children.splice(index, 1);
-        
+
         if (this.selectedPage === page) {
           this.selectedPage = null;
           this.editMode = null;
         }
-        
+
         this.hasUnsavedChanges = true;
       }
     }
   }
-  
+
   // Format section content as HTML with colored text
   getSectionContentHtml(content: string): string {
     if (!content) return '';
-    
+
     // Replace line breaks with <br> for proper display
     return content.replace(/\n/g, '<br>');
   }
-  
+
   // Show add section offcanvas
   openSectionOffcanvas(page: Page, sectionIndex: number = -1, event?: Event): void {
     if (event) {
@@ -610,14 +614,14 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
     this.customSectionContent = '';
     this.showOffcanvas = true;
   }
-  
+
   // Close the offcanvas
   closeOffcanvas(): void {
     this.showOffcanvas = false;
     this.currentParentPage = null;
     this.currentSectionIndex = -1;
   }
-  
+
   // Add section from a template
   addSectionFromTemplate(template: any): void {
     if (this.currentParentPage) {
@@ -625,104 +629,104 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
         type: template.type,
         content: template.content
       };
-      
+
       // Insert at specific position if provided, otherwise add to end
       if (this.currentSectionIndex >= 0) {
         this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection);
       } else {
         this.currentParentPage.sections.push(newSection);
       }
-      
+
       if (!this.availableSectionTypes.includes(template.type)) {
         this.availableSectionTypes.push(template.type);
       }
-      
+
       this.hasUnsavedChanges = true;
       this.closeOffcanvas();
     }
   }
-  
+
   // Add custom section
- 
+
-// Similar update for addCustomSection
+  // Similar update for addCustomSection
-addCustomSection(): void {
+  addCustomSection(): void {
-  if (this.currentParentPage && this.customSectionType) {
+    if (this.currentParentPage && this.customSectionType) {
-    const newSection: Section = {
+      const newSection: Section = {
-      type: this.customSectionType,
+        type: this.customSectionType,
-      content: this.customSectionContent || ''
+        content: this.customSectionContent || ''
-    };
+      };
-    
+
-    // Insert at specific position if provided, otherwise add to end
+      // Insert at specific position if provided, otherwise add to end
-    if (this.currentSectionIndex >= 0) {
+      if (this.currentSectionIndex >= 0) {
-      this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection);
+        this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection);
-    } else {
+      } else {
-      this.currentParentPage.sections.push(newSection);
+        this.currentParentPage.sections.push(newSection);
+      }
+
+      if (!this.availableSectionTypes.includes(this.customSectionType)) {
+        this.availableSectionTypes.push(this.customSectionType);
+      }
+
+      this.hasUnsavedChanges = true;
+      this.closeOffcanvas();
     }
-    
-    if (!this.availableSectionTypes.includes(this.customSectionType)) {
-      this.availableSectionTypes.push(this.customSectionType);
-    }
-    
-    this.hasUnsavedChanges = true;
-    this.closeOffcanvas();
   }
-}
+
-  
   // Edit section
   editSection(section: Section, event: Event): void {
     event.stopPropagation();
     this.selectedSection = section;
     this.editMode = 'section';
   }
-  
+
   // Cancel edit
   cancelEdit(): void {
     this.editMode = null;
     this.selectedSection = null;
   }
-  
+
   // Save edit
   saveEdit(): void {
     this.editMode = null;
     this.hasUnsavedChanges = true;
   }
-  
+
   // Delete section
   deleteSection(section: Section, page: Page, event: Event): void {
     event.stopPropagation();
-    
+
     if (confirm(`Are you sure you want to delete this "${section.type}" section?`)) {
       const index = page.sections.indexOf(section);
       if (index !== -1) {
         page.sections.splice(index, 1);
-        
+
         if (this.selectedSection === section) {
           this.selectedSection = null;
           this.editMode = null;
         }
-        
+
         this.hasUnsavedChanges = true;
       }
     }
   }
-  
+
   // DRAG AND DROP METHODS
-  
+
   // Handle page drag start
   onPageDragStart(page: Page): void {
     this.draggedPage = page;
   }
-  
+
   // Handle page drag end
   onPageDragEnd(): void {
     this.draggedPage = null;
     this.dropTargetPage = null;
   }
-  
+
   // Handle page drop
   onPageDrop(targetPage: Page): void {
     if (!this.draggedPage || this.draggedPage === targetPage) return;
-    
+
     // Remove from current parent
     if (this.draggedPage.parent && this.draggedPage.parent.children) {
       const sourceIndex = this.draggedPage.parent.children.indexOf(this.draggedPage);
@@ -730,19 +734,19 @@ addCustomSection(): void {
         this.draggedPage.parent.children.splice(sourceIndex, 1);
       }
     }
-    
+
     // Add to new parent
     if (!targetPage.children) {
       targetPage.children = [];
     }
-    
+
     // Update parent reference
     this.draggedPage.parent = targetPage;
     targetPage.children.push(this.draggedPage);
-    
+
     this.hasUnsavedChanges = true;
   }
-  
+
   // Handle section drag drop
   onSectionDrop(event: CdkDragDrop<Section[]>): void {
     if (event.previousContainer === event.container) {
@@ -757,12 +761,12 @@ addCustomSection(): void {
         event.currentIndex
       );
     }
-    
+
     this.hasUnsavedChanges = true;
   }
-  
+
   // UI HELPER METHODS
-  
+
   getNodeIcon(page: Page): string {
     if (page.name.toLowerCase() === 'home') {
       return 'fas fa-home';
@@ -772,39 +776,43 @@ addCustomSection(): void {
       return 'fas fa-file';
     }
   }
-  
+
   // Save tree data
   saveTreeData(silent: boolean = false): void {
     const outputData = this.generateOutputJson();
     const jsonData = JSON.stringify(outputData, null, 2);
-    
+
     if (this.siteId) {
       this.loading = true;
-      
+
-      this.siteTreeService.update(this.siteId, { 
+      this.siteTreeService.update(this.siteId, {
-        id: this.siteId, 
+        id: this.siteId,
-        model: jsonData 
+        model: jsonData
       }).subscribe({
         next: () => {
           this.loading = false;
           this.hasUnsavedChanges = false;
-          
+
           if (!silent) {
-            alert('Site structure saved successfully');
+            // alert('Site structure saved successfully');
+            this.toastr.success("Site structure saved successfully");
+
           }
         },
         error: (err) => {
           this.loading = false;
           console.error('Error saving data:', err);
-          
+
           if (!silent) {
-            alert('Failed to save site structure');
+            // alert('Failed to save site structure');
+            this.toastr.error("Failed to save site structure");
+
           }
         }
       });
     }
   }
-  
+
   @HostListener('window:beforeunload', ['$event'])
   beforeUnloadHandler(event: BeforeUnloadEvent): void {
     if (this.hasUnsavedChanges) {
@@ -812,7 +820,7 @@ addCustomSection(): void {
       event.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
     }
   }
-  
+
   @HostListener('window:resize')
   onWindowResize(): void {
     this.centerGrid();

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts

@@ -303,50 +303,106 @@ button:hover {
 }
 
 /* ======= TESTIMONIAL SECTION ======= */
+/* 🔲 Main Section */
 .testimonial-section {
-  padding: 60px 20px;
+  padding: 80px 40px;
   text-align: center;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  color: #fff;
 }
 
+/* 🔳 Optional Background Overlay */
+.testimonial-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+}
+
+.testimonial-section > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* 🏷️ Heading */
 .testimonial-heading {
-  font-size: 28px;
+  font-size: 2rem;
   font-weight: bold;
   margin-bottom: 10px;
+  letter-spacing: 1px;
 }
 
 .testimonial-subtitle {
-  color: #666;
+  color: #ddd;
   margin-bottom: 40px;
+  font-size: 1rem;
 }
 
+/* 🧑‍💼 Grid Layout */
 .testimonial-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 20px;
+  gap: 30px;
+  justify-content: center;
 }
 
+/* 📦 Testimonial Card */
 .testimonial-card {
-  background: white;
+  background: #fff;
-  padding: 20px;
+  color: #222;
+  padding: 25px;
   border-radius: 12px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
   max-width: 320px;
+  margin: 0 auto;
+  text-align: center;
+  transition: transform 0.3s ease;
 }
+
+.testimonial-card:hover {
+  transform: translateY(-5px);
+}
+
+/* 🖼️ Avatar Wrapper with fallback */
+.testimonial-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #ccc;
+  overflow: hidden;
+  margin: 0 auto 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.testimonial-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 🗣️ Quote Text */
+.testimonial-card blockquote {
+  font-style: italic;
+  color: #444;
+  margin: 15px 0;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+/* ⭐ Star Ratings */
 .stars {
   color: #f39c12;
   font-size: 1.2rem;
+  margin-bottom: 8px;
 }
-.author {
+  /* 🔲 Placeholder block */
-  margin-top: 15px;
+.profile {
-  text-align: center;
-}
-.author .avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-}
-
-.testimonial-card .profile {
   width: 40px;
   height: 40px;
   background: #ccc;
@@ -354,10 +410,74 @@ button:hover {
   margin: 0 auto 10px;
 }
 
-.testimonial-card blockquote {
+/* 🧑 Avatar image */
-  font-style: italic;
+.avatar {
-  color: #444;
+  width: 50px;
-  margin: 10px 0;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto;
+}
+
+/* 🧾 Author Info */
+.author {
+  margin-top: 15px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 🟡 CTA Button */
+.testimonial-cta {
+  display: inline-block;
+  margin-top: 40px;
+  background: #ffc107;
+  color: #000;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: 0.3s ease;
+}
+
+.testimonial-cta:hover {
+  background: #e6ac00;
+}
+
+/* 📞 Contact Info */
+.testimonial-contact {
+  margin-top: 30px;
+  font-size: 14px;
+  color: #ccc;
+}
+
+.testimonial-contact p {
+  margin: 5px 0;
+}
+
+/* 📱 Responsive Adjustments */
+@media (max-width: 768px) {
+  .testimonial-heading {
+    font-size: 1.5rem;
+  }
+
+  .testimonial-subtitle {
+    font-size: 0.95rem;
+  }
+
+  .testimonial-card {
+    max-width: 100%;
+  }
+
+  .testimonial-grid {
+    gap: 20px;
+  }
+
+  .testimonial-cta {
+    width: 100%;
+    max-width: 300px;
+  }
 }
 
 
@@ -1250,25 +1370,105 @@ button {
 
 
 /* === FAQ === */
+/* 🔲 Base Layout */
 .faq-section {
   padding: 60px 20px;
+  max-width: 1200px;
+  margin: auto;
 }
+
+/*  Title and Subtitle */
 .faq-title {
   font-size: 2rem;
   margin-bottom: 20px;
+  text-align: center;
 }
+
 .faq-subtitle {
   font-size: 1rem;
   color: #666;
   margin-bottom: 30px;
+  text-align: center;
 }
+
+/* 🔍 Search Bar */
+.faq-search {
+  padding: 12px 20px;
+  width: 100%;
+  max-width: 400px;
+  font-size: 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  margin: 0 auto 40px;
+  display: block;
+}
+
+/* 📦 Illustration + List Wrapper */
+.faq-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+/* 🖼️ Left Illustration */
+.faq-illustration {
+  flex: 1 1 40%;
+  max-width: 400px;
+}
+
+.faq-image {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+/* ❓ Q&A List */
+.faq-list {
+  flex: 1 1 55%;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.faq-item {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 15px;
+}
+
+/* 🗂️ Q & A */
 .faq-question {
   font-weight: bold;
   margin-top: 15px;
+  font-size: 1.1rem;
 }
+
 .faq-answer {
   margin-bottom: 20px;
   color: #444;
+  font-size: 0.95rem;
+}
+
+/* 📱 Responsive */
+@media (max-width: 768px) {
+  .faq-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .faq-illustration,
+  .faq-list {
+    max-width: 100%;
+  }
+
+  .faq-title {
+    font-size: 1.5rem;
+  }
+
+  .faq-question {
+    font-size: 1rem;
+  }
 }
 
 /* === Logo Showcase === */
@@ -2612,6 +2812,95 @@ button.light {
   }
 }
 
+.blog-template {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+.blog-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.blog-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.blog-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.blog-nav ul {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 40px;
+}
+
+.blog-nav li {
+  font-weight: 500;
+  cursor: pointer;
+  color: #007bff;
+}
+
+.blog-layout {
+  display: flex;
+  gap: 40px;
+  flex-wrap: wrap;
+}
+
+.blog-main {
+  flex: 1 1 65%;
+}
+
+.content-block {
+  margin-bottom: 30px;
+}
+
+.content-heading {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.content-text {
+  font-size: 1rem;
+  color: #444;
+  line-height: 1.6;
+}
+
+.blog-sidebar {
+  flex: 1 1 30%;
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.sidebar-widget {
+  margin-bottom: 20px;
+  font-weight: 500;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .blog-layout {
+    flex-direction: column;
+  }
+  .blog-nav ul {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+
 /* ✅ Clean and responsive logo section */
 .logo-cloud {
   padding: 60px 20px;
@@ -2685,6 +2974,377 @@ button.light {
   background: #555;
 }
 
+ /* feature section */
+/* 🔲 Feature Section Base */
+.feature-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  gap: 40px;
+  flex-wrap: wrap;
+}
 
+/* 🖼️ Image Block */
+ .feature-image {
+  flex: 1 1 40%;
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  align-self: center;
+}
+
+/* 📄 Text Content */
+.feature-content {
+  flex: 1 1 50%;
+  max-width: 600px;
+}
+
+.feature-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.3;
+}
+
+.feature-description {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+/* 📋 Feature List */
+.feature-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.feature-list li {
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: #444;
+}
+
+.feature-list li::before {
+  content: "✔";
+  position: absolute;
+  left: 0;
+  color: #008060;
+  font-weight: bold;
+}
+
+/* 🔁 Responsive Layout */
+@media (max-width: 768px) {
+  .feature-section {
+    flex-direction: column;
+    text-align: center;
+    gap: 30px;
+  }
+
+  .feature-content {
+    max-width: 100%;
+  }
+
+  .feature-title {
+    font-size: 22px;
+  }
+
+  .feature-description {
+    font-size: 15px;
+  }
+
+  .feature-image {
+    max-width: 100%;
+  }
+}
+/* 🔲 SECTION WRAPPER */
+.brand-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+/* 🧾 PROJECT INFO */
+.project-info {
+  margin-bottom: 40px;
+  text-align: center;
+}
+.brand-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.brand-meta {
+  font-size: 0.95rem;
+  color: #555;
+}
+
+/* 🖼️ LOGO SECTION */
+.logo-section {
+  margin-bottom: 40px;
+}
+.section-heading {
+  font-size: 1.3rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+.logo-label {
+  font-weight: 600;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.logo-img,
+.logo-mono-group,
+.logo-social-group {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 🔳 INDIVIDUAL LOGOS */
+.default-img {
+  max-height: 60px;
+  object-fit: contain;
+  background-color: #f0f0f0;
+  padding: 6px;
+  border-radius: 6px;
+  display: block;
+}
+.logo-primary {
+  height: 60px;
+  width: auto;
+}
+
+.logo-icon {
+  height: 40px;
+  width: 40px;
+}
+
+.logo-mono {
+  height: 40px;
+  width: auto;
+}
+
+.logo-social-square,
+.logo-social-round {
+  height: 40px;
+  width: 40px;
+}
+
+
+/* 🎨 BRAND COLORS */
+.brand-colors {
+  margin-bottom: 40px;
+}
+.color-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+.color-block {
+  width: 160px;
+  height: 100px;
+  border-radius: 8px;
+  padding: 10px;
+  color: #000;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  font-size: 0.85rem;
+  text-align: center;
+}
+.color-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.color-usage {
+  font-style: italic;
+  font-size: 0.8rem;
+  color: #444;
+}
+
+/* 🎨 COLOR BACKGROUNDS */
+.color-block.primary-blue {
+  background-color: #1E9FFF;
+}
+.color-block.light-grey {
+  background-color: #C6CBD6;
+}
+.color-block.charcoal-black {
+  background-color: #2B2B2B;
+  color: #fff;
+}
+.color-block.white {
+  background-color: #FFFFFF;
+  border: 1px solid #ddd;
+}
+
+/* ✍️ TYPOGRAPHY */
+.typography-section {
+  margin-top: 40px;
+  text-align: center;
+}
+.font-block {
+  margin-bottom: 20px;
+}
+.font-role {
+  font-weight: 600;
+  font-size: 1rem;
+}
+.font-family {
+  font-family: monospace;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 📱 RESPONSIVE */
+@media (max-width: 768px) {
+  .logo-img,
+  .logo-mono-group,
+  .logo-social-group,
+  .color-group {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .color-block {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .logo-primary,
+  .logo-icon,
+  .logo-mono,
+  .logo-social-square,
+  .logo-social-round {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.logo-grid-section {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.logo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 30px;
+}
+
+.logo-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  padding: 20px;
+  text-align: center;
+}
+
+.logo-img.placeholder {
+  width: 100%;
+  height: 140px;
+  background-color: #eee;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  background-image: url('/assets/images/placeholder.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.logo-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.logo-meta {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+
+.logo-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+.guideline-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.guideline-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+.guideline-meta {
+  color: #666;
+  font-size: 0.95rem;
+}
+.guideline-section {
+  margin-bottom: 50px;
+}
+.section-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.section-description {
+  font-size: 1rem;
+  color: #444;
+  margin-bottom: 15px;
+}
+.cover-version {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #888;
+}
+.cover-title {
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin: 8px 0;
+}
+.cover-subtitle {
+  color: #666;
+  font-size: 0.95rem;
+}
+.font-preview {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 6px;
+  text-align: center;
+}
+.font-name {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+.font-usage {
+  font-size: 0.95rem;
+  color: #555;
+}
+.placeholder {
+  background: #eee;
+  border-radius: 6px;
+  height: 180px;
+  background-image: url('/assets/images/placeholder.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin-top: 10px;
+}
 
 `;

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts

@@ -324,7 +324,10 @@ HTML Only. No CSS.
     copyToClipboard(pageName: string) {
         const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
         navigator.clipboard.writeText(fullHtml).then(() => {
-            alert(`📋 HTML copied for page: ${pageName}`);
+            // alert(`📋 HTML copied for page: ${pageName}`);
+            this.toastr.success(`📋 HTML copied for page: ${pageName}`);
+
+
         });
     }