diff --git a/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
index f9801fb..21cb9c0 100644
--- a/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
+++ b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
@@ -69,6 +69,9 @@ public class BuilderService {
 		executeDump(true);
 
 		// ADD OTHER SERVICE
+addCustomMenu( "Form","Form",  "Transcations"); 
+
+
 
 		System.out.println("dashboard and menu inserted...");
 
diff --git a/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/FormController.java b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/FormController.java
new file mode 100644
index 0000000..7c53771
--- /dev/null
+++ b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/FormController.java
@@ -0,0 +1,115 @@
+package com.realnet.basicp1.Controllers;
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+ import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import org.springframework.web.bind.annotation.CrossOrigin;
+import com.fasterxml.jackson.databind.JsonMappingException;
+import com.realnet.config.EmailService;
+import com.realnet.users.entity1.AppUser;
+import com.realnet.users.service1.AppUserServiceImpl;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.springframework.data.domain.*;
+import com.realnet.fnd.response.EntityResponse;
+import org.springframework.http.*;
+import org.springframework.beans.factory.annotation.*;
+import com.realnet.basicp1.Entity.Form;
+import com.realnet.basicp1.Services.FormService ;
+
+
+
+
+
+
+
+
+
+
+@RequestMapping(value = "/Form")
+ @CrossOrigin("*") 
+@RestController
+public class FormController {
+	@Autowired
+	private FormService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+
+
+
+
+	@PostMapping("/Form")
+		  public Form Savedata(@RequestBody Form data) {
+		Form save = Service.Savedata(data)	;
+
+
+
+
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Form/{id}")
+	public  Form update(@RequestBody Form data,@PathVariable Integer id ) {
+		Form update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Form/getall/page")
+	public Page<Form> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Form> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Form")
+	public List<Form> getdetails() {
+		 List<Form> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Form")
+	public List<Form> getallwioutsec() {
+		 List<Form> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Form/{id}")
+	public  Form  getdetailsbyId(@PathVariable Integer id ) {
+		Form  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Form/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/tokenFree_FormController.java b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/tokenFree_FormController.java
new file mode 100644
index 0000000..236da2d
--- /dev/null
+++ b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/tokenFree_FormController.java
@@ -0,0 +1,115 @@
+package com.realnet.basicp1.Controllers;
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+ import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import org.springframework.web.bind.annotation.CrossOrigin;
+import com.fasterxml.jackson.databind.JsonMappingException;
+import com.realnet.config.EmailService;
+import com.realnet.users.entity1.AppUser;
+import com.realnet.users.service1.AppUserServiceImpl;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.springframework.data.domain.*;
+import com.realnet.fnd.response.EntityResponse;
+import org.springframework.http.*;
+import org.springframework.beans.factory.annotation.*;
+import com.realnet.basicp1.Entity.Form;
+import com.realnet.basicp1.Services.FormService ;
+
+
+
+
+
+
+
+
+
+
+@RequestMapping(value = "/token/Form")
+ @CrossOrigin("*") 
+@RestController
+public class tokenFree_FormController {
+	@Autowired
+	private FormService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+
+
+
+
+	@PostMapping("/Form")
+		  public Form Savedata(@RequestBody Form data) {
+		Form save = Service.Savedata(data)	;
+
+
+
+
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Form/{id}")
+	public  Form update(@RequestBody Form data,@PathVariable Integer id ) {
+		Form update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Form/getall/page")
+	public Page<Form> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Form> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Form")
+	public List<Form> getdetails() {
+		 List<Form> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Form")
+	public List<Form> getallwioutsec() {
+		 List<Form> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Form/{id}")
+	public  Form  getdetailsbyId(@PathVariable Integer id ) {
+		Form  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Form/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Entity/Form.java b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Entity/Form.java
new file mode 100644
index 0000000..6e6e54b
--- /dev/null
+++ b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Entity/Form.java
@@ -0,0 +1,43 @@
+package com.realnet.basicp1.Entity;
+ import lombok.*;
+import com.realnet.WhoColumn.Entity.Extension; 
+ import javax.persistence.*;
+ import java.time.LocalDateTime;
+ import java.util.*;
+
+
+
+
+
+
+
+
+
+
+ @Entity 
+ @Data
+ public class    Form extends Extension { 
+ /**
+	 * 
+	 */
+	private static final long serialVersionUID = 1L;
+
+ @Id
+ @GeneratedValue(strategy = GenerationType.IDENTITY)
+ private Integer id;
+
+private String  name;
+
+@Column(length = 2000)
+private String description;
+
+private int number_field;
+
+ private String phone_numbers;
+
+
+@Column(length = 2000)
+private String paragraph_fields;
+
+
+}
diff --git a/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Repository/FormRepository.java b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Repository/FormRepository.java
new file mode 100644
index 0000000..e6dbaa5
--- /dev/null
+++ b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Repository/FormRepository.java
@@ -0,0 +1,34 @@
+package com.realnet.basicp1.Repository;
+
+
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+
+import org.springframework.stereotype.Repository; 
+import java.util.*;
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+import com.realnet.basicp1.Entity.Form;
+
+@Repository
+public interface  FormRepository  extends  JpaRepository<Form, Integer>  { 
+
+@Query(value = "select * from form where  created_by=?1", nativeQuery = true)
+	List<Form> findAll(Long creayedBy);
+
+@Query(value = "select * from form where  created_by=?1", nativeQuery = true)
+	Page<Form> findAll( Long creayedBy,Pageable page);
+}
\ No newline at end of file
diff --git a/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Services/FormService.java b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Services/FormService.java
new file mode 100644
index 0000000..41045e9
--- /dev/null
+++ b/testnewang12-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Services/FormService.java
@@ -0,0 +1,113 @@
+package com.realnet.basicp1.Services;
+import com.realnet.basicp1.Repository.FormRepository;
+import com.realnet.basicp1.Entity.Form
+;import java.util.*;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import com.realnet.SequenceGenerator.Service.SequenceService;
+import org.springframework.data.domain.Page;
+import com.realnet.realm.Entity.Realm;
+import com.realnet.realm.Services.RealmService;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.*;
+import com.realnet.users.service1.AppUserServiceImpl;
+import com.realnet.users.entity1.AppUser;
+
+
+
+
+
+
+
+
+
+
+	import org.springframework.stereotype.Service;
+
+@Service
+ public class FormService {
+@Autowired
+private FormRepository Repository;
+	@Autowired
+	private AppUserServiceImpl userService; 
+@Autowired
+	private RealmService realmService;
+
+
+
+
+
+
+
+
+
+public Form Savedata(Form data) {
+
+
+
+
+
+
+
+
+
+
+	data.setUpdatedBy(getUser().getUserId());
+		data.setCreatedBy(getUser().getUserId());
+		data.setAccountId(getUser().getAccount().getAccount_id());
+Form save = Repository.save(data);
+				return save;	
+			}
+
+
+//	get all with pagination
+	public Page<Form> getAllWithPagination(Pageable page) {
+		return Repository.findAll( getUser().getUserId(),page);
+	}			
+public List<Form> getdetails() {  
+		List<Realm> realm = realmService.findByUserId(getUser().getUserId());
+List<Form> all = Repository.findAll(getUser().getUserId());
+		
+		return all ;		}
+
+
+public Form getdetailsbyId(Integer id) {
+	return Repository.findById(id).get();
+			}
+
+
+	public void delete_by_id(Integer id) {
+ Repository.deleteById(id);
+}
+
+
+public Form update(Form data,Integer id) {
+	Form old = Repository.findById(id).get();
+old.setName(data.getName());
+
+old.setDescription(data.getDescription());
+
+old.setNumber_field(data.getNumber_field());
+
+old.setPhone_numbers(data.getPhone_numbers());
+
+old.setParagraph_fields(data.getParagraph_fields());
+
+final Form test = Repository.save(old);
+		data.setUpdatedBy(getUser().getUserId());
+  return test;} 
+
+
+
+
+
+
+
+
+
+
+ public AppUser getUser() {
+		AppUser user = userService.getLoggedInUser();
+		return user;
+
+	}}
diff --git a/testnewang12-ds-d/authsec_mysql/mysql/wf_table/wf_table.sql b/testnewang12-ds-d/authsec_mysql/mysql/wf_table/wf_table.sql
new file mode 100755
index 0000000..5e2f347
--- /dev/null
+++ b/testnewang12-ds-d/authsec_mysql/mysql/wf_table/wf_table.sql
@@ -0,0 +1,2 @@
+CREATE TABLE ds.Form(id BIGINT NOT NULL AUTO_INCREMENT, description VARCHAR(400), number_field int, phone_numbers VARCHAR(400), paragraph_fields VARCHAR(400), name VARCHAR(400),  PRIMARY KEY (id));
+
diff --git a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.html b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.html
new file mode 100644
index 0000000..c031575
--- /dev/null
+++ b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.html
@@ -0,0 +1,423 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Form</a></li>
+</ol>
+<section class="ug-hero">
+  <div class="ug-hero__content">
+    <div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
+    <div>
+      <h2 class="ug-hero__title">Form</h2>
+    </div>
+  </div>
+  <div class="ug-hero__actions"> 
+    <button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
+      <clr-icon shape="plus"></clr-icon>
+      <span class="ug-btn-text">ADD</span>
+    </button>
+   
+  </div>
+</section>
+
+
+<div class="ug-toolbar">
+  <div class="ug-toolbar__left">
+    <div class="ug-search">
+      <clr-icon shape="search"></clr-icon>
+      <input class="ug-search__input" type="text" placeholder="SEARCH" [(ngModel)]="filterText" />
+    </div>
+  </div>
+  <div class="ug-toolbar__right">
+    <div class="ug-view-toggle">
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
+        <clr-icon shape="view-cards"></clr-icon>
+      </button>
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+        <clr-icon shape="table"></clr-icon>
+      </button>
+    </div>
+  </div>
+</div> 
+<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
+  <clr-dg-placeholder>
+    <ng-template #loadingSpinner>
+      <clr-spinner>LOADING ... </clr-spinner>
+    </ng-template>
+    <div *ngIf="error;else loadingSpinner">{{error}}</div>
+  </clr-dg-placeholder>
+
+
+
+ <clr-dg-column [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Name
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'description'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Description
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'number_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Number Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'phone_numbers'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Phone Numbers
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'paragraph_fields'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Paragraph Fields
+    </ng-container>
+  </clr-dg-column>
+
+ 
+ <!-- who column -->
+      <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
+        <clr-icon shape="bars"></clr-icon> Action
+      </ng-container></clr-dg-column>
+      <!-- end --> 
+  <clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
+
+<clr-dg-cell>{{user.name }}</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringdescription (user.description)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.number_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.phone_numbers }}</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringparagraph_fields(user.paragraph_fields)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon></clr-dg-cell>
+
+ 
+  <!-- who column -->
+<clr-dg-cell>
+  <clr-signpost>
+   <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
+   <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+     <h5 style="margin-top: 0">Who Column</h5>
+           <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
+           <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
+           <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
+           <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+           <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
+   </clr-signpost-content>
+ </clr-signpost>
+ </clr-dg-cell>
+ 
+ <!-- who colmn --> 
+ 
+ 
+    <clr-dg-action-overflow>
+      <!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button> -->
+      <button class="ug-action-item" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button>
+      <button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon>
+ DELETE
+      </button>
+    </clr-dg-action-overflow>
+
+</clr-dg-row>
+
+  <clr-dg-footer class="ug-grid-footer">
+    <clr-dg-pagination #pagination [clrDgPageSize]="10">
+      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+      of {{pagination.totalItems}} Records
+    </clr-dg-pagination>
+  </clr-dg-footer>
+</clr-datagrid>
+
+<div class="ug-cards" *ngIf="viewMode==='cards'">
+  <div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
+ <div class="ug-card-item__body"> 
+    
+      <div class="ug-kv"><span>Name</span><strong>{{user.name}}</strong></div>
+
+
+      <div class="ug-kv"><span>Description</span><strong>{{user.description}}</strong></div>
+
+
+      <div class="ug-kv"><span>Number Field</span><strong>{{user.number_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Phone Numbers</span><strong>{{user.phone_numbers}}</strong></div>
+
+
+      <div class="ug-kv"><span>Paragraph Fields</span><strong>{{user.paragraph_fields}}</strong></div>
+
+
+ </div>
+    <div class="ug-card-item__footer">
+      
+      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon> Edit
+      </button>
+      <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon> Delete
+      </button>
+    </div>
+  </div>
+</div>
+
+
+<clr-modal [(clrModalOpen)]="rsModaldescription" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+
+
+
+
+
+<clr-modal [(clrModalOpen)]="rsModalparagraph_fields" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Form</h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+<div class="form-row">
+            <div class="form-col">
+<div class="ug-form-group">
+        <label for="name" class="ug-form-label">Name<span class="required-field">*</span></label>
+        <input type="text" id="name" class="ug-form-input" formControlName="name">
+        <div *ngIf="submitted && entryForm.controls.name.errors" class="ug-form-error">
+          <div *ngIf="submitted && entryForm.controls.name.errors.required">*This field is Required</div>
+        </div>
+      </div>
+</div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="description" class="ug-form-label">Description</label>
+              <textarea 
+                id="description" 
+                class="ug-form-input" 
+                formControlName="description" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col"> 
+<div class="ug-form-group">
+              <label for="number_field" class="ug-form-label">Number Field<span class="required-field">*</span></label>
+              <input type="number" id="number_field" class="ug-form-input" formControlName="number_field" placeholder="Enter Number Field">
+              <div *ngIf="submitted && entryForm.controls.number_field.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.number_field.errors.required">*This field is Required</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="phone_numbers" class="ug-form-label">Phone Numbers</label>
+              <input type="text" id="phone_numbers" class="ug-form-input" formControlName="phone_numbers" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+              <div *ngIf="submitted && entryForm.controls['phone_numbers'].errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls['phone_numbers'].hasError('pattern')">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="paragraph_fields" class="ug-form-label">Paragraph Fields</label>
+              <input type="text" id="paragraph_fields" class="ug-form-input" formControlName="paragraph_fields" placeholder="Enter paragraph">
+            </div>
+ </div>
+            </div>
+
+
+      <div class="modal-footer">
+        <button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="ug-btn ug-btn-primary">ADD</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Update Form</h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    
+
+
+
+<div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="name" class="ug-form-label">Name<span class="required-field">*</span></label>
+                <input type="text" id="name" class="ug-form-input" [(ngModel)]="rowSelected.name" name="name"
+                  placeholder="Enter Name">
+              </div>
+            </div>
+          </div>
+
+
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="description" class="ug-form-label">Description</label>
+                <textarea id="description" class="ug-form-input" [(ngModel)]="rowSelected.description"
+                  name="description" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
+
+
+ <!-- Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="number_field" class="ug-form-label">Number Field</label>
+                <input type="number" id="number_field" class="ug-form-input" [(ngModel)]="rowSelected.number_field"
+                  name="number_field" placeholder="Enter Number Field">
+              </div>
+            </div>
+          </div>
+
+
+ <!-- Phone Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="phone_numbers" class="ug-form-label">Phone Numbers</label>
+                <input type="text" id="phone_numbers" class="ug-form-input" [(ngModel)]="rowSelected.phone_numbers"
+                  name="phone_numbers" placeholder="+91 Enter 10 digit Mobile Number"
+                  pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+                <div *ngIf="rowSelected.phone_numbers && !isValidPhone_numbers(rowSelected.phone_numbers)"
+                  class="ug-form-error">
+                  * Please Follow your pattern,+91 Enter 10 digit Mobile Number.
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+  <!-- Paragraph Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="paragraph_fields" class="ug-form-label">Paragraph Fields</label>
+                <input type="text" id="paragraph_fields" class="ug-form-input"
+                  [(ngModel)]="rowSelected.paragraph_fields" name="paragraph_fields" placeholder="Enter Paragraph Fields">
+              </div>
+            </div>
+            </div>
+
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modalEdit = false">Cancel</button>
+      <button type="submit" (click)="onUpdate(rowSelected.id)" class="ug-btn ug-btn-primary">Update</button>
+    </div>
+
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <div class="ug-delete-header">
+      <div class="ug-delete-icon">
+        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
+      </div>
+      <h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
+      <p class="ug-delete-subtitle">This action cannot be undone</p>
+    </div>
+
+<div class="ug-delete-details"><div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Name:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.name}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Description:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.description}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Number Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.number_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Phone Numbers:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.phone_numbers}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Paragraph Fields:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.paragraph_fields}}</span>
+      </div>
+
+ 
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <h3 class="modal-title">Import File</h3>
+  <div class="modal-body">
+    <div class="ug-form-group">
+      <label class="ug-form-label">Select CSV File</label>
+      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
+    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+  </div>
+</clr-modal>
+
+
+
+
+
+
+
+
+
+  <!-- htmlpopup -->
diff --git a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.scss b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.scss
new file mode 100644
index 0000000..a35f132
--- /dev/null
+++ b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.scss
@@ -0,0 +1,870 @@
+
+@import '../../../../../../styles.scss';
+
+// Import design tokens
+@import '../../../../../../styles/design-tokens';
+// Newbasicp1 Styles
+.ug-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: var(--theme-font-primary);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__icon {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    clr-icon {
+      width: 36px;
+      height: 36px;
+      color: white;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+    font-family: var(--theme-font-secondary);
+  }
+
+  &__subtitle {
+    font-size: 16px;
+    margin: 0;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.ug-btn-text {
+  margin-left: 8px;
+}
+
+// Modern Button Styles using ThemeService
+.ug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+
+  &:focus {
+    outline: 2px solid var(--theme-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Sizes
+  &.ug-btn-sm {
+    padding: 8px 16px;
+    font-size: 13px;
+    height: 32px;
+  }
+
+  &.ug-btn-md {
+    padding: 12px 20px;
+    font-size: 14px;
+    height: 40px;
+  }
+
+  &.ug-btn-lg {
+    padding: 16px 24px;
+    font-size: 16px;
+    height: 48px;
+  }
+
+  // Variants
+  &.ug-btn-primary {
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-color: var(--theme-primary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &.ug-btn-secondary {
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-background);
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-outline {
+    background: transparent;
+    color: var(--theme-secondary);
+    border-color: var(--theme-secondary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+      border-color: var(--theme-secondary);
+      color: var(--theme-secondary);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-error {
+    background: var(--theme-error, #ef4444);
+    color: white;
+    border-color: var(--theme-error, #ef4444);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-error-dark, #dc2626);
+      border-color: var(--theme-error-dark, #dc2626);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  &.ug-btn-ghost {
+    background: transparent;
+    color: var(--theme-text-secondary);
+    border-color: transparent;
+
+    &:hover {
+      background: var(--theme-background);
+      color: var(--theme-text);
+    }
+  }
+}
+
+.ug-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  &__left {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+// Form Container Styles
+.form-container {
+  padding: 20px 0;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px 16px -12px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin: 0 0 16px 0;
+  }
+}
+
+.form-col {
+  flex: 1;
+  padding: 0 12px;
+  min-width: 250px;
+  
+  @media (max-width: 768px) {
+    padding: 0;
+    min-width: 100%;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Password Input Container
+.password-input-container {
+  position: relative;
+  
+  .password-input {
+    padding-right: 40px;
+  }
+  
+  .password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-text-secondary);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 200ms ease-out;
+    
+    &:hover {
+      color: var(--theme-text);
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    clr-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// Textarea Styles
+textarea.ug-form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.ug-search {
+  position: relative;
+  max-width: 400px;
+
+  clr-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    z-index: 1;
+  }
+
+  &__input {
+    width: 100%;
+    padding: 12px 12px 12px 40px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    font-size: 14px;
+    transition: all 200ms ease-out;
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:focus {
+      outline: none;
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+    }
+  }
+}
+
+.ug-view-toggle {
+  display: flex;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .ug-btn {
+    border-radius: 0;
+    border: none;
+    background: var(--theme-surface);
+    color: var(--theme-text-secondary);
+
+    &:first-child {
+      border-right: 1px solid #d1d5db;
+    }
+
+    &.ug-btn-primary {
+      background: var(--theme-primary);
+      color: white;
+    }
+  }
+}
+
+// Modern Table Styles
+.ug-grid {
+  background: var(--theme-surface);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+
+  ::ng-deep .datagrid {
+    .datagrid-head {
+      background: var(--theme-background);
+      
+      .datagrid-column {
+        padding: 16px 24px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--theme-text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-bottom: 1px solid #e5e7eb;
+      }
+    }
+
+    .datagrid-row {
+      transition: background-color 150ms ease-out;
+
+      &:hover {
+        background: var(--theme-background);
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e5e7eb;
+      }
+
+      .datagrid-cell {
+        padding: 16px 24px;
+        font-size: 14px;
+        color: var(--theme-text);
+      }
+    }
+
+    .datagrid-footer {
+      background: var(--theme-background);
+      border-top: 1px solid #e5e7eb;
+      padding: 16px 24px;
+    }
+  }
+}
+
+.ug-grid-footer {
+  background: var(--theme-background);
+  border-top: 1px solid #e5e7eb;
+}
+
+// Modern Card Styles - More beautiful design
+.ug-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.ug-card-item {
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: var(--theme-border-radius); // Using theme variable
+  box-shadow: var(--theme-shadow); // Using theme variable
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px;
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
+    min-height: 60px;
+  }
+
+  &__icon {
+    clr-icon {
+      width: 24px;
+      height: 24px;
+      color: var(--theme-primary);
+    }
+  }
+
+  &__title {
+    font-weight: 700;
+    flex: 1 1 auto;
+    font-size: 18px;
+    color: var(--theme-text);
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__footer {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background: var(--theme-background);
+  }
+}
+
+.ug-kv {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  
+  span {
+    color: var(--theme-text-secondary);
+  }
+
+  strong {
+    color: var(--theme-text);
+    font-weight: 500;
+    text-align: right;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Theme the card footer buttons
+.ug-card-item__footer .ug-btn {
+  border-radius: 10px;
+  flex: 1;
+  justify-content: center;
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-outline {
+  border: 1px solid var(--theme-secondary);
+  color: var(--theme-secondary);
+  background: transparent;
+  
+  &:hover {
+    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+    border-color: var(--theme-secondary);
+    color: var(--theme-secondary);
+  }
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-error {
+  background: var(--theme-error, #ef4444);
+  color: #fff;
+  border-color: var(--theme-error, #ef4444);
+  
+  &:hover {
+    background: var(--theme-error-dark, #dc2626);
+    border-color: var(--theme-error-dark, #dc2626);
+    transform: translateY(-2px);
+  }
+}
+
+// Table view action buttons
+.ug-action-item {
+  @extend .ug-btn;
+  @extend .ug-btn-ghost;
+  @extend .ug-btn-sm;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 4px;
+  text-align: left;
+  
+  clr-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  
+  &.ug-btn-error {
+    color: var(--theme-error, #ef4444);
+    
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+}
+
+// Ensure action overflow is visible
+::ng-deep .datagrid-action-overflow {
+  button.action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    padding: 8px 12px;
+    
+    clr-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Status Badges
+.ug-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ug-status-enabled {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
+  color: #10b981;
+}
+
+.ug-status-disabled {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
+  color: #ef4444;
+}
+
+// Form Styles
+.ug-form-group {
+  margin-bottom: 20px;
+}
+
+.ug-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+
+.ug-form-input, .ug-form-select {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+  margin-bottom: 0;
+  font-family: var(--theme-font-primary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+  }
+
+  &:disabled {
+    background: var(--theme-background);
+    color: var(--theme-text-secondary);
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+
+  &::placeholder {
+    color: var(--theme-text-secondary);
+  }
+}
+
+.ug-form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px 12px;
+  padding-right: 40px;
+  appearance: none;
+}
+
+.ug-form-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.required-field {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.ug-file-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: var(--theme-surface);
+  color: var(--theme-text);
+  
+  &::file-selector-button {
+    @extend .ug-btn;
+    @extend .ug-btn-secondary;
+    margin-right: 12px;
+    padding: 8px 16px;
+    border: none;
+  }
+}
+
+// Delete Modal Styles
+.ug-delete-header {
+  text-align: center;
+  padding: 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.ug-delete-icon {
+  color: #ef4444;
+  margin-bottom: 16px;
+}
+
+.ug-delete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--theme-text);
+  margin: 0 0 8px 0;
+}
+
+.ug-delete-subtitle {
+  font-size: 16px;
+  color: var(--theme-text-secondary);
+  margin: 0;
+}
+
+.ug-delete-details {
+  padding: 24px;
+}
+
+.ug-delete-detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ug-delete-detail-label {
+  font-weight: 500;
+  color: var(--theme-text-secondary);
+}
+
+.ug-delete-detail-value {
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.delete {
+  color: #ef4444;
+  text-align: center;
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.heading {
+  text-align: center;
+  margin-bottom: 24px;
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+// Modal Header
+::ng-deep .modal-header {
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px 16px 0 0 !important;
+  padding: 20px 24px !important;
+  
+  .modal-title {
+    color: white;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0;
+    font-family: var(--theme-font-secondary);
+  }
+  
+  .close {
+    color: white;
+    opacity: 0.8;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Modal Body
+::ng-deep .modal-body {
+  padding: 24px !important;
+}
+
+// Modal Footer
+::ng-deep .modal-footer {
+  padding: 20px 24px !important;
+  background: var(--theme-background);
+  border-radius: 0 0 16px 16px !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// Recaptcha Container Styles
+.recaptcha-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recaptcha-code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--theme-background);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  
+  b {
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// Toggle Styles
+.clr-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  label {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--theme-text);
+  }
+}
+
+// URL Field Styles
+.ug-form-input[type="url"] {
+  font-family: monospace;
+}
+// Responsive adjustments
+@media (max-width: 768px) {
+  .ug-hero {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    
+    &__content {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    &__actions {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .ug-toolbar {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .ug-search {
+    max-width: 100%;
+  }
+  
+  .ug-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .ug-card-item {
+    &__header {
+      flex-direction: column;
+      text-align: center;
+      
+      &__icon {
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+    
+    &__footer {
+      justify-content: center;
+    }
+  }
+.recaptcha-code {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .ug-btn {
+      align-self: flex-end;
+    }
+  }}
\ No newline at end of file
diff --git a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.ts b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.ts
new file mode 100644
index 0000000..cf9697d
--- /dev/null
+++ b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.component.ts
@@ -0,0 +1,411 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Formservice} from './Form.service';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
+import { ExtensionService } from 'src/app/services/fnd/extension.service';
+import { DashboardContentModel2 } from 'src/app/models/builder/dashboard'; 
+import { Formcardvariable } from './Form_cardvariable';
+import { UserInfoService } from 'src/app/services/user-info.service';
+import { CsvService } from 'src/app/services/csv.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from 'src/app/services/theme.service';
+import { Subscription } from 'rxjs';
+import { ExcelService } from 'src/app/services/excel.service';
+import * as moment from 'moment';
+declare var JsBarcode: any; 
+@Component({
+  selector: 'app-Form',
+  templateUrl: './Form.component.html',
+  styleUrls: ['./Form.component.scss']
+})
+export class FormComponent implements OnInit {
+  cardButton = Formcardvariable.cardButton;
+  cardmodeldata = Formcardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Formcardvariable.cardButton;
+  cardmodal;  changeView(){
+  this.isCardview = !this.isCardview;
+  }
+    beforeText(fieldtext: string): string { // Extract the text before the first '<'
+    const index = fieldtext.indexOf('<');
+    return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
+  }
+  afterText(fieldtext: string): string { // Extract the text after the last '>'
+    const index = fieldtext.lastIndexOf('>');
+    return index !== -1 ? fieldtext.substring(index + 1) : '';
+  }
+  transform(fieldtext: string): string {
+    const match = fieldtext.match(/<([^>]*)>/);
+    return match ? match[1] : ''; // Extract the text between '<' and '>'
+  }
+ userrole;
+  rowSelected :any= {};
+  modaldelete=false;
+  modalEdit=false;
+  modalAdd= false;
+  public entryForm: FormGroup;
+  loading = false;
+  product;
+  modalOpenedforNewLine = false;
+  newLine:any;
+ additionalFieldsFromBackend: any[] = [];
+  formcode = 'Form_formCode'
+tableName = 'Form';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Formservice,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+private csvService: CsvService,
+    private translate: TranslateService,
+    private themeService: ThemeService, 
+private excel: ExcelService,    private _fb: FormBuilder,
+  ) { }
+
+  switchLanguage(language: string) {
+    this.translate.use(language);
+  } 
+  private editInterval: any;
+// component button 
+  ngOnInit(): void {
+ this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
+      // Theme changes will automatically update CSS variables
+      // This triggers a re-render of themed elements
+    });
+    if(this.cardmodeldata !== ''){
+     this.cardmodal = JSON.parse(this.cardmodeldata);
+    this.dashboardArray = this.cardmodal.dashboard.slice();
+    console.log(this.dashboardArray)
+    }
+    this.userrole=this.userInfoService.getRoles();
+    this.getData();
+    this.entryForm = this._fb.group({
+name : [null],
+
+description : [null],
+
+number_field : [null,[Validators.required]],
+
+phone_numbers: ['+91'],
+
+paragraph_fields : [null],
+
+
+ 
+
+
+
+
+
+
+
+
+
+  }); // component_button200
+ // form code start
+    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
+      console.log(data);
+      const jsonArray = data.map((str) => JSON.parse(str));
+      this.additionalFieldsFromBackend = jsonArray;
+      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Form_formCode");
+      console.log(this.checkFormCode);
+      console.log(this.additionalFieldsFromBackend);
+      if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
+        this.additionalFieldsFromBackend.forEach(field => {
+          if (field.formCode === this.formcode) {
+            if (!this.entryForm.contains(field.extValue)) {
+              // Add the control only if it doesn't exist in the form
+              this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
+            }
+          }
+        });
+      }
+    });
+    console.log(this.entryForm.value);
+    // form code end 
+
+
+
+
+
+
+
+
+
+
+
+  }
+ ngOnDestroy(): void {
+ if (this.themeSubscription) {
+      this.themeSubscription.unsubscribe();
+    }
+    if (this.editInterval) {
+      clearInterval(this.editInterval);
+    }
+  }
+  get filteredGroups(): any[] {
+    const items: any[] = (this.product as unknown as any[]) || [];
+    const text = (this.filterText || '').toLowerCase();
+    if (!text) { return items; }
+    return items.filter(g => (
+((g?.name || '').toString()).toLowerCase().includes(text) ||
+
+((g?.description || '').toString()).toLowerCase().includes(text) ||
+
+((g?.number_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.phone_numbers || '').toString()).toLowerCase().includes(text) ||
+
+((g?.paragraph_fields || '').toString()).toLowerCase().includes(text) 
+
+    ));
+  }
+
+  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
+  onExport() {
+    this.excel.exportAsExcelFile(this.product, 'user_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+
+
+
+
+
+
+
+
+
+ error; 
+  getData() {
+    this.mainService.getAll().subscribe((data) => {
+      console.log(data);
+      this.product = data;
+this.product = [...this.product].reverse(); if(this.product.length==0){
+        this.error="No Data Available"
+     }   
+    },(error) => {
+      console.log(error);
+      if(error){
+       this.error="Server Error";
+     }
+    });
+  }
+  onEdit(row) {
+    this.rowSelected = row;
+
+
+
+
+
+
+
+
+
+
+
+    this.modalEdit = true;
+  }
+   onDelete(row) {
+    this.rowSelected = row;
+     this.modaldelete=true;
+  }
+  delete(id)
+  {
+    this.modaldelete = false;
+    console.log("in delete  "+id);
+    this.mainService.delete(id).subscribe(
+      (data) => {
+        console.log(data);
+        this.ngOnInit();
+  if (data) {				      this.toastr.success('Deleted successfully');      }
+    });
+  }
+    onUpdate(id) {
+    this.modalEdit = false;
+
+
+
+
+
+
+
+
+
+
+    //console.log("in update");
+    console.log("id  " + id);
+    console.log(this.rowSelected);
+    //console.log("out update");
+    this.mainService.update(id, this.rowSelected).subscribe(
+      (data) => {
+        console.log(data);
+        if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Update Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("update Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Updated");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Updated");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  } 
+onCreate() {
+     this.modalAdd=false;
+
+
+
+
+
+
+
+
+
+
+  this.mainService.create(this.entryForm.value).subscribe(
+    (data) => {
+      console.log(data);
+  if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Added Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("Added Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Added");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Added");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  }
+  goToAdd() {
+this.modalAdd = true; this.submitted = false;
+
+
+
+
+
+
+
+
+
+
+  }
+ submitted = false;
+onSubmit() {
+  console.log(this.entryForm.value);
+ this.submitted = true;
+  if (this.entryForm.invalid) {
+    return;
+  }this.onCreate();
+
+} 
+
+
+rsModaldescription = false;   
+goToReplaceStringdescription(row){
+this.rowSelected = row;     this.rsModaldescription  =true;   }
+
+
+
+isValidPhone_numbers(phone: string): boolean {
+  const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
+  return phonePattern.test(phone);
+}
+
+rsModalparagraph_fields = false;  
+ goToReplaceStringparagraph_fields (row){
+						    this.rowSelected = row;     this.rsModalparagraph_fields  =true;   }
+
+
+  // csv
+
+  modalCsv = false;
+  selectedFiles: File;
+  fileList;
+  ttype = 'usergroupmaintenance';
+
+
+  // Import CSV
+  public selectFile(event) {
+    this.selectedFiles = event.target.files[0];
+    // this.saveCsv();
+  }
+
+  csvImport() {
+    console.log("import CSV");
+    this.modalCsv = true;
+  }
+  saveCsv() {
+    this.csvService.importCsv(this.selectedFiles, this.ttype).subscribe(data => {
+      console.log(data);
+      this.fileList = data;
+      this.modalCsv = false;
+    },
+      (error) => {
+        console.log(error);
+        if (error.status == 202) {
+          this.toastr.success(error.error.text)
+        }
+      });
+  }
+
+  downloadFiles() {
+    this.csvService.downloadCsvs(this.ttype);
+
+  }
+// updateaction
+}
+
+
+
+
+
+
+
+
+
diff --git a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.service.ts b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.service.ts
new file mode 100644
index 0000000..d6cfe69
--- /dev/null
+++ b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form.service.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
+import { ApiRequestService } from "src/app/services/api/api-request.service";
+import { environment } from 'src/environments/environment';
+@Injectable({
+  providedIn: 'root'
+})
+export class Formservice{
+  private baseURL = "Form/Form" ;  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService,
+  ) { }
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.get(_http);
+  }
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.put(_http, data);
+  }
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.delete(_http);
+  }
+
+
+
+
+
+
+
+
+
+
+// updateaction
+}
\ No newline at end of file
diff --git a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form_cardvariable.ts b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form_cardvariable.ts
new file mode 100644
index 0000000..a646ee8
--- /dev/null
+++ b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Form/Form_cardvariable.ts
@@ -0,0 +1,4 @@
+export const Formcardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}
\ No newline at end of file
diff --git a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
index 33d8388..c8f50b9 100644
--- a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
+++ b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
@@ -1,3 +1,4 @@
+import { FormComponent } from './BuilderComponents/basicp1/Form/Form.component';
 
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
 import { Component, NgModule } from '@angular/core';
@@ -261,6 +262,9 @@ const routes: Routes = [
 
 
       // buildercomponents
+{path:'Form',component:FormComponent},
+
+
 
       { path: 'tokenregistery', component: Token_registeryComponent },
 
diff --git a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
index 2dcc8f1..1129c93 100644
--- a/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
+++ b/testnewang12-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
@@ -1,3 +1,4 @@
+import { FormComponent } from './BuilderComponents/basicp1/Form/Form.component';
 
 
 import { CommonModule } from '@angular/common';
@@ -136,6 +137,9 @@ import { ThemeCustomizationComponent } from './theme-customization/theme-customi
 
 
     // buildercomponents
+FormComponent,
+
+