build_app

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java

@@ -80,6 +80,12 @@ public class BuilderService {
 //		}
 
 		// ADD OTHER SERVICE
+addCustomMenu( "College","College",  "Transcations"); 
+
+
+addCustomMenu( "Student_info","Student_info",  "Transcations"); 
+
+
 
 		System.out.println("dashboard and menu inserted...");
 

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/CollegeController.java

@@ -0,0 +1,99 @@
+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.College;
+import com.realnet.basicp1.Services.CollegeService ;
+
+
+
+
+
+
+@RequestMapping(value = "/College")
+ @CrossOrigin("*") 
+@RestController
+public class CollegeController {
+	@Autowired
+	private CollegeService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+	@PostMapping("/College")
+		  public College Savedata(@RequestBody College data) {
+		College save = Service.Savedata(data)	;
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/College/{id}")
+	public  College update(@RequestBody College data,@PathVariable Integer id ) {
+		College update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/College/getall/page")
+	public Page<College> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<College> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/College")
+	public List<College> getdetails() {
+		 List<College> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/College")
+	public List<College> getallwioutsec() {
+		 List<College> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/College/{id}")
+	public  College  getdetailsbyId(@PathVariable Integer id ) {
+		College  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/College/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/Student_infoController.java

@@ -0,0 +1,171 @@
+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.Student_info;
+import com.realnet.basicp1.Services.Student_infoService ;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@RequestMapping(value = "/Student_info")
+ @CrossOrigin("*") 
+@RestController
+public class Student_infoController {
+	@Autowired
+	private Student_infoService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+	@PostMapping("/Student_info")
+		  public Student_info Savedata(@RequestBody Student_info data) {
+		Student_info save = Service.Savedata(data)	;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Student_info/{id}")
+	public  Student_info update(@RequestBody Student_info data,@PathVariable Integer id ) {
+		Student_info update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Student_info/getall/page")
+	public Page<Student_info> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Student_info> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Student_info")
+	public List<Student_info> getdetails() {
+		 List<Student_info> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Student_info")
+	public List<Student_info> getallwioutsec() {
+		 List<Student_info> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Student_info/{id}")
+	public  Student_info  getdetailsbyId(@PathVariable Integer id ) {
+		Student_info  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Student_info/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/tokenFree_CollegeController.java

@@ -0,0 +1,99 @@
+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.College;
+import com.realnet.basicp1.Services.CollegeService ;
+
+
+
+
+
+
+@RequestMapping(value = "/token/College")
+ @CrossOrigin("*") 
+@RestController
+public class tokenFree_CollegeController {
+	@Autowired
+	private CollegeService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+	@PostMapping("/College")
+		  public College Savedata(@RequestBody College data) {
+		College save = Service.Savedata(data)	;
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/College/{id}")
+	public  College update(@RequestBody College data,@PathVariable Integer id ) {
+		College update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/College/getall/page")
+	public Page<College> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<College> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/College")
+	public List<College> getdetails() {
+		 List<College> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/College")
+	public List<College> getallwioutsec() {
+		 List<College> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/College/{id}")
+	public  College  getdetailsbyId(@PathVariable Integer id ) {
+		College  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/College/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Controllers/tokenFree_Student_infoController.java

@@ -0,0 +1,171 @@
+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.Student_info;
+import com.realnet.basicp1.Services.Student_infoService ;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@RequestMapping(value = "/token/Student_info")
+ @CrossOrigin("*") 
+@RestController
+public class tokenFree_Student_infoController {
+	@Autowired
+	private Student_infoService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+	@PostMapping("/Student_info")
+		  public Student_info Savedata(@RequestBody Student_info data) {
+		Student_info save = Service.Savedata(data)	;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Student_info/{id}")
+	public  Student_info update(@RequestBody Student_info data,@PathVariable Integer id ) {
+		Student_info update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Student_info/getall/page")
+	public Page<Student_info> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Student_info> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Student_info")
+	public List<Student_info> getdetails() {
+		 List<Student_info> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Student_info")
+	public List<Student_info> getallwioutsec() {
+		 List<Student_info> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Student_info/{id}")
+	public  Student_info  getdetailsbyId(@PathVariable Integer id ) {
+		Student_info  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Student_info/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Entity/College.java

@@ -0,0 +1,33 @@
+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    College 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 Boolean active;
+
+
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Entity/Student_info.java

@@ -0,0 +1,72 @@
+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    Student_info extends Extension { 
+ /**
+	 * 
+	 */
+	private static final long serialVersionUID = 1L;
+
+ @Id
+ @GeneratedValue(strategy = GenerationType.IDENTITY)
+ private Integer id;
+
+private String  student_name;
+
+@Column(length = 2000)
+private String address;
+
+ private String phone_number;
+
+private String email_field;
+
+private String password_field;
+@Transient
+private String confirmpassword_field;
+
+private int percentage_field;
+
+private Boolean is_active;
+
+ private String gender;
+
+private String  imageupload_fieldname;
+private String  imageupload_fieldpath ;
+
+private String distric;
+
+private String qrcode_field;
+
+private String currency;
+
+
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Repository/CollegeRepository.java

@@ -0,0 +1,30 @@
+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.College;
+
+@Repository
+public interface  CollegeRepository  extends  JpaRepository<College, Integer>  { 
+
+@Query(value = "select * from college where  created_by=?1", nativeQuery = true)
+	List<College> findAll(Long creayedBy);
+
+@Query(value = "select * from college where  created_by=?1", nativeQuery = true)
+	Page<College> findAll( Long creayedBy,Pageable page);
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Repository/Student_infoRepository.java

@@ -0,0 +1,48 @@
+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.Student_info;
+
+@Repository
+public interface  Student_infoRepository  extends  JpaRepository<Student_info, Integer>  { 
+
+@Query(value = "select * from student_info where  created_by=?1", nativeQuery = true)
+	List<Student_info> findAll(Long creayedBy);
+
+@Query(value = "select * from student_info where  created_by=?1", nativeQuery = true)
+	Page<Student_info> findAll( Long creayedBy,Pageable page);
+}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Services/CollegeService.java

@@ -0,0 +1,93 @@
+package com.realnet.basicp1.Services;
+import com.realnet.basicp1.Repository.CollegeRepository;
+import com.realnet.basicp1.Entity.College
+;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 CollegeService {
+@Autowired
+private CollegeRepository Repository;
+	@Autowired
+	private AppUserServiceImpl userService; 
+@Autowired
+	private RealmService realmService;
+
+
+
+
+
+public College Savedata(College data) {
+
+
+
+
+
+
+	data.setUpdatedBy(getUser().getUserId());
+		data.setCreatedBy(getUser().getUserId());
+		data.setAccountId(getUser().getAccount().getAccount_id());
+College save = Repository.save(data);
+				return save;	
+			}
+
+
+//	get all with pagination
+	public Page<College> getAllWithPagination(Pageable page) {
+		return Repository.findAll( getUser().getUserId(),page);
+	}			
+public List<College> getdetails() {  
+		List<Realm> realm = realmService.findByUserId(getUser().getUserId());
+List<College> all = Repository.findAll(getUser().getUserId());
+		
+		return all ;		}
+
+
+public College getdetailsbyId(Integer id) {
+	return Repository.findById(id).get();
+			}
+
+
+	public void delete_by_id(Integer id) {
+ Repository.deleteById(id);
+}
+
+
+public College update(College data,Integer id) {
+	College old = Repository.findById(id).get();
+old.setName(data.getName());
+
+old.setDescription(data.getDescription());
+
+old.setActive (data.getActive());
+
+final College test = Repository.save(old);
+		data.setUpdatedBy(getUser().getUserId());
+  return test;} 
+
+
+
+
+
+
+ public AppUser getUser() {
+		AppUser user = userService.getLoggedInUser();
+		return user;
+
+	}}

schoolmanagementsystem001-back-b/authsec_springboot/backend/src/main/java/com/realnet/basicp1/Services/Student_infoService.java

@@ -0,0 +1,183 @@
+package com.realnet.basicp1.Services;
+import com.realnet.basicp1.Repository.Student_infoRepository;
+import com.realnet.basicp1.Entity.Student_info
+;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 Student_infoService {
+@Autowired
+private Student_infoRepository Repository;
+	@Autowired
+	private AppUserServiceImpl userService; 
+@Autowired
+	private RealmService realmService;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+public Student_info Savedata(Student_info data) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+	data.setUpdatedBy(getUser().getUserId());
+		data.setCreatedBy(getUser().getUserId());
+		data.setAccountId(getUser().getAccount().getAccount_id());
+Student_info save = Repository.save(data);
+				return save;	
+			}
+
+
+//	get all with pagination
+	public Page<Student_info> getAllWithPagination(Pageable page) {
+		return Repository.findAll( getUser().getUserId(),page);
+	}			
+public List<Student_info> getdetails() {  
+		List<Realm> realm = realmService.findByUserId(getUser().getUserId());
+List<Student_info> all = Repository.findAll(getUser().getUserId());
+		
+		return all ;		}
+
+
+public Student_info getdetailsbyId(Integer id) {
+	return Repository.findById(id).get();
+			}
+
+
+	public void delete_by_id(Integer id) {
+ Repository.deleteById(id);
+}
+
+
+public Student_info update(Student_info data,Integer id) {
+	Student_info old = Repository.findById(id).get();
+old.setStudent_name(data.getStudent_name());
+
+old.setAddress(data.getAddress());
+
+old.setPhone_number(data.getPhone_number());
+
+old.setEmail_field(data.getEmail_field());
+
+old.setPassword_field(data.getPassword_field());
+
+old.setPercentage_field(data.getPercentage_field());
+
+old.setIs_active (data.getIs_active());
+
+old.setGender(data.getGender());
+
+ 
+
+old.setDistric(data.getDistric());
+
+old.setQrcode_field(data.getQrcode_field());
+
+old.setCurrency(data.getCurrency());
+
+final Student_info test = Repository.save(old);
+		data.setUpdatedBy(getUser().getUserId());
+  return test;} 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public AppUser getUser() {
+		AppUser user = userService.getLoggedInUser();
+		return user;
+
+	}}

schoolmanagementsystem001-dbs-d/authsec_mysql/mysql/wf_table/wf_table.sql

@@ -0,0 +1,4 @@
+CREATE TABLE dbs.Student_info(id BIGINT NOT NULL AUTO_INCREMENT, distric VARCHAR(400), address VARCHAR(400), is_active VARCHAR(400), gender VARCHAR(400), qrcode_field VARCHAR(400), currency VARCHAR(400), percentage_field int, phone_number VARCHAR(400), imageupload_field VARCHAR(400), email_field VARCHAR(400), password_field VARCHAR(400), student_name VARCHAR(400),  PRIMARY KEY (id));
+
+CREATE TABLE dbs.College(id BIGINT NOT NULL AUTO_INCREMENT, active VARCHAR(400), description VARCHAR(400), name VARCHAR(400),  PRIMARY KEY (id));
+

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/College/College.component.html

@@ -0,0 +1,322 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> College</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">College</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]="'active'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Active
+    </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.active }}</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>Active</span><strong>{{user.active}}</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)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add College</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 class="ug-form-label">Active</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="active" formControlName="active" clrToggle>
+                <label for="active">Active</label>
+              </div>
+            </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 College</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>
+           
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">Active</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="active" name="active" clrToggle [(ngModel)]="rowSelected.active">
+                <label for="active">Active</label>
+              </div>
+            </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">Active:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.active}}</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 -->

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/College/College.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;
+    }
+  }}

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/College/College.component.ts

@@ -0,0 +1,354 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Collegeservice} from './College.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 { Collegecardvariable } from './College_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-College',
+  templateUrl: './College.component.html',
+  styleUrls: ['./College.component.scss']
+})
+export class CollegeComponent implements OnInit {
+  cardButton = Collegecardvariable.cardButton;
+  cardmodeldata = Collegecardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Collegecardvariable.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 = 'College_formCode'
+tableName = 'College';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Collegeservice,
+    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],
+
+active : [true],
+
+
+ 
+
+
+
+
+
+  }); // 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 === "College_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?.active || '').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;   }
+
+
+
+
+  // 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
+}
+
+
+
+
+

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/College/College.service.ts

@@ -0,0 +1,39 @@
+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 Collegeservice{
+  private baseURL = "College/College" ;  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
+}

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/College/College_cardvariable.ts

@@ -0,0 +1,4 @@
+export const Collegecardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Student_info/Student_info.component.html

@@ -0,0 +1,795 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Student info</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">Student info</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]="'student_name'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      student Name
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'address'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      address
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'phone_number'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Phone Number
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'email_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Email Field
+    </ng-container>
+  </clr-dg-column>
+
+
+ <clr-dg-column [clrDgField]="'password_field'"> <ng-container *clrDgHideableColumn="{hidden: false}">Password Field
+						 </ng-container></clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'percentage_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Percentage Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'is_active'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      is active
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'gender'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      gender
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+
+
+ <clr-dg-column [clrDgField]="'distric'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      distric
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'qrcode_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      QRCode Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'currency'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Currency
+    </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.student_name }}</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringaddress (user.address)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.phone_number }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.email_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.password_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.percentage_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.is_active }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.gender }}</clr-dg-cell>
+
+
+
+
+<clr-dg-cell>{{user.distric }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.qrcode_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.currency }}</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>student Name</span><strong>{{user.student_name}}</strong></div>
+
+
+      <div class="ug-kv"><span>address</span><strong>{{user.address}}</strong></div>
+
+
+      <div class="ug-kv"><span>Phone Number</span><strong>{{user.phone_number}}</strong></div>
+
+
+      <div class="ug-kv"><span>Email Field</span><strong>{{user.email_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Password Field</span><strong>{{user.password_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Percentage Field</span><strong>{{user.percentage_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>is active</span><strong>{{user.is_active}}</strong></div>
+
+
+      <div class="ug-kv"><span>gender</span><strong>{{user.gender}}</strong></div>
+
+
+      <div class="ug-kv"><span>Imageupload Field</span><strong>{{user.imageupload_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>distric</span><strong>{{user.distric}}</strong></div>
+
+
+      <div class="ug-kv"><span>QRCode Field</span><strong>{{user.qrcode_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Currency</span><strong>{{user.currency}}</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)]="rsModaladdress" [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 Student info</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="student_name" class="ug-form-label">student Name<span class="required-field">*</span></label>
+        <input type="text" id="student_name" class="ug-form-input" formControlName="student_name">
+        <div *ngIf="submitted && entryForm.controls.student_name.errors" class="ug-form-error">
+          <div *ngIf="submitted && entryForm.controls.student_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="address" class="ug-form-label">address</label>
+              <textarea 
+                id="address" 
+                class="ug-form-input" 
+                formControlName="address" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="phone_number" class="ug-form-label">Phone Number</label>
+              <input type="text" id="phone_number" class="ug-form-input" formControlName="phone_number" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+              <div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls['phone_number'].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="email_field" class="ug-form-label">Email Field</label>
+              <input type="email" id="email_field" class="ug-form-input" formControlName="email_field" placeholder="Enter Email Field">
+              <div *ngIf="entryForm.controls['email_field'].errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls['email_field'].hasError('pattern')" class="error_mess">* Email must be a valid email address</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+        <!-- Password Fields -->
+        <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="password_field" class="ug-form-label">Password Field</label>
+              <div class="password-input-container">
+                <input 
+                  [type]="newaddpHidepassword_field ? 'password' : 'text'" 
+                  id="password_field" 
+                  class="ug-form-input password-input" 
+                  formControlName="password_field" 
+                  placeholder="Enter Password Field"
+                  autocomplete="new-password">
+                <button 
+                  type="button" 
+                  class="password-toggle" 
+                  (click)="newaddChangerpassword_field()" 
+                  [attr.aria-label]="newaddpHidepassword_field? 'Show password' : 'Hide password'">
+                  <clr-icon [attr.shape]="newaddIconpassword_field"></clr-icon>
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="confirmpassword_field" class="ug-form-label">Confirm Password Field</label>
+              <input 
+                type="password" 
+                id="confirmpassword_field" 
+                class="ug-form-input" 
+                formControlName="confirmpassword_field" 
+                placeholder="Confirm password"
+                autocomplete="new-password">
+              <div *ngIf="entryForm.controls.confirmpassword_field.errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls.confirmpassword_field.errors.confirmedpassword_fieldValidator">* Password and Confirm Password must match.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+<div class="form-row">
+            <div class="form-col"> 
+<div class="ug-form-group">
+              <label for="percentage_field" class="ug-form-label">Percentage Field<span class="required-field">*</span></label>
+              <input type="number" id="percentage_field" class="ug-form-input" formControlName="percentage_field" placeholder="Enter Percentage Field">
+              <div *ngIf="submitted && entryForm.controls.percentage_field.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.percentage_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 class="ug-form-label">is active</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="is_active" formControlName="is_active" clrToggle>
+                <label for="is_active">is active</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+<div class="clr-col-sm-12">
+            <label>gender</label>
+            <clr-radio-container clrInline style="margin-top: 0;"> 
+
+ 
+   <clr-radio-wrapper>
+                <input type="radio" clrRadio formControlName="gender" (change)="updategender('other')" [checked]="entryForm.get('gender').value === 'other'" />
+                <label> other </label>
+              </clr-radio-wrapper>     
+ 
+
+ 
+   <clr-radio-wrapper>
+                <input type="radio" clrRadio formControlName="gender" (change)="updategender('female')" [checked]="entryForm.get('gender').value === 'female'" />
+                <label> female </label>
+              </clr-radio-wrapper>     
+ 
+
+ 
+   <clr-radio-wrapper>
+                <input type="radio" clrRadio formControlName="gender" (change)="updategender('male')" [checked]="entryForm.get('gender').value === 'male'" />
+                <label> male </label>
+              </clr-radio-wrapper>     
+ 
+
+    
+ </clr-radio-container>
+          </div> 
+
+
+
+
+
+
+<div class="clr-col-sm-12">             
+	 <label>distric</label>
+							 <select formControlName="distric">
+							    <option [value]="null">Select  distric </option> 
+								
+ 
+								<option> buldana </option>
+								 
+
+ 
+								<option> pune </option>
+								 
+
+						</select></div>
+
+<!-- qrCode field start -->   
+<div class="clr-col-sm-12">
+	    <label>QRCode Field</label>
+	    <input class="clr-input" type="text" formControlName="qrcode_field" />
+	    <qrcode [qrdata]="entryForm.value.qrcode_field  ? entryForm.value.qrcode_field : '' " [width]="135" [errorCorrectionLevel]="'M'"  ></qrcode>   </div>
+	<!-- qrCode field end -->
+
+<!-- currency field start -->
+      <div class="clr-col-sm-12">        
+ <label> Currency</label>         
+<input type="number"  class="clr-input"   formControlName="currency"  [value]="entryForm.value.currency | number:'1.2-2' | removeCommas">   
+    </div> 
+	      <!-- currency field end -->
+
+
+      <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 Student info</h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    
+
+
+
+<div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="student_name" class="ug-form-label">student Name<span class="required-field">*</span></label>
+                <input type="text" id="student_name" class="ug-form-input" [(ngModel)]="rowSelected.student_name" name="student_name"
+                  placeholder="Enter student Name">
+              </div>
+            </div>
+          </div>
+
+
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="address" class="ug-form-label">address</label>
+                <textarea id="address" class="ug-form-input" [(ngModel)]="rowSelected.address"
+                  name="address" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
+
+
+ <!-- Phone Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="phone_number" class="ug-form-label">Phone Number</label>
+                <input type="text" id="phone_number" class="ug-form-input" [(ngModel)]="rowSelected.phone_number"
+                  name="phone_number" placeholder="+91 Enter 10 digit Mobile Number"
+                  pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+                <div *ngIf="rowSelected.phone_number && !isValidPhone_number(rowSelected.phone_number)"
+                  class="ug-form-error">
+                  * Please Follow your pattern,+91 Enter 10 digit Mobile Number.
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="email_field" class="ug-form-label">Email Field</label>
+              <input type="email" id="email_field" class="ug-form-input" [(ngModel)]="rowSelected.email_field" name="email_field" placeholder="Enter email address">
+              <div *ngIf="rowSelected.email_field && !isValidemail_field(rowSelected.email_field)" class="ug-form-error">
+                * Email must be a valid email address.
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+          <!-- Password Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="password_field" class="ug-form-label">Password Field</label>
+                <div class="password-input-container">
+                  <input [type]="newpHidepassword_field ? 'password' : 'text'" id="password_field"
+                    class="ug-form-input password-input" [(ngModel)]="rowSelected.password_field" name="password_field"
+                    placeholder="Enter Password Field">
+                  <button type="button" class="password-toggle" (click)="newShapeChangerpassword_field()"
+                    [attr.aria-label]="newpHidepassword_field ? 'Show password' : 'Hide password'">
+                    <clr-icon [attr.shape]="newIconpassword_field"></clr-icon>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+ <!-- Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="percentage_field" class="ug-form-label">Percentage Field</label>
+                <input type="number" id="percentage_field" class="ug-form-input" [(ngModel)]="rowSelected.percentage_field"
+                  name="percentage_field" placeholder="Enter Percentage Field">
+              </div>
+            </div>
+          </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">is active</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="is_active" name="is_active" clrToggle [(ngModel)]="rowSelected.is_active">
+                <label for="is_active">is active</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+ <div class="clr-col-sm-12">            
+            <label> gender</label>             
+           <clr-radio-container clrInline style="margin-top: 0;">
+               
+ 
+               <clr-radio-wrapper>
+                                 <input type="radio" clrRadio  (change)="updategenderEdit('other')" [checked]="rowSelected.gender  === 'other'" />
+                                 <label>other</label>
+                               </clr-radio-wrapper>
+                
+
+ 
+               <clr-radio-wrapper>
+                                 <input type="radio" clrRadio  (change)="updategenderEdit('female')" [checked]="rowSelected.gender  === 'female'" />
+                                 <label>female</label>
+                               </clr-radio-wrapper>
+                
+
+ 
+               <clr-radio-wrapper>
+                                 <input type="radio" clrRadio  (change)="updategenderEdit('male')" [checked]="rowSelected.gender  === 'male'" />
+                                 <label>male</label>
+                               </clr-radio-wrapper>
+                
+
+               </clr-radio-container>           </div>
+
+
+
+<div class="clr-col-sm-12">
+ <label> distric</label> 
+<select name="distric" [(ngModel)]="rowSelected.distric">
+    <option [value]="null">Selectdistric
+    </option>
+
+
+    
+ 
+
+    <option> buldana </option>
+     
+
+ 
+
+    <option> pune </option>
+     
+
+
+  </select> </div>
+
+<!-- qrCode field start -->
+<div class="clr-col-sm-12">
+  <label> QRCode Field</label>
+  <input class="clr-input" type="text" name="qrcode_field" [(ngModel)]="rowSelected.qrcode_field" />
+  <qrcode [qrdata]="rowSelected.qrcode_field  ? rowSelected.qrcode_field : '' " [width]="135" [errorCorrectionLevel]="'M'"></qrcode>
+</div>
+<!-- qrCode field end -->
+
+<!-- currency field start -->
+<div class="clr-col-sm-12">
+  <label> Currency</label>
+  <input type="number" class="clr-input" [(ngModel)]="rowSelected.currency" name="currency" (blur)="formatCurrencycurrency()" [value]="rowSelected.currency  | removeCommas">
+</div>
+<!-- currency field end -->
+
+
+    <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">student Name:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.student_name}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">address:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.address}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Phone Number:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.phone_number}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Email Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.email_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Password Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.password_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Percentage Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.percentage_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">is active:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.is_active}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">gender:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.gender}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Imageupload Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.imageupload_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">distric:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.distric}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">QRCode Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.qrcode_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Currency:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.currency}}</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 -->

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Student_info/Student_info.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;
+    }
+  }}

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Student_info/Student_info.component.ts

@@ -0,0 +1,686 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Student_infoservice} from './Student_info.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 { Student_infocardvariable } from './Student_info_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-Student_info',
+  templateUrl: './Student_info.component.html',
+  styleUrls: ['./Student_info.component.scss']
+})
+export class Student_infoComponent implements OnInit {
+  cardButton = Student_infocardvariable.cardButton;
+  cardmodeldata = Student_infocardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Student_infocardvariable.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 = 'Student_info_formCode'
+tableName = 'Student_info';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Student_infoservice,
+    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({
+student_name : [null],
+
+address : [null],
+
+phone_number: ['+91'],
+
+email_field : [null,[Validators.required]],
+
+password_field : [null],
+confirmpassword_field : [null],
+
+percentage_field : [null,[Validators.required]],
+
+is_active : [true],
+
+gender : [null],
+
+
+
+distric : [null],
+
+qrcode_field : [null],
+
+currency : [null, { updateOn: 'blur' }],
+
+
+ 
+
+
+
+
+
+
+
+    }, {
+        validator: Confirmedpassword_fieldValidator('password_field', 'confirmpassword_field')
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }); // 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 === "Student_info_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?.student_name || '').toString()).toLowerCase().includes(text) ||
+
+((g?.address || '').toString()).toLowerCase().includes(text) ||
+
+((g?.phone_number || '').toString()).toLowerCase().includes(text) ||
+
+((g?.email_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.password_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.percentage_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.is_active || '').toString()).toLowerCase().includes(text) ||
+
+((g?.gender || '').toString()).toLowerCase().includes(text) ||
+
+((g?.imageupload_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.distric || '').toString()).toLowerCase().includes(text) ||
+
+((g?.qrcode_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.currency || '').toString()).toLowerCase().includes(text) 
+
+    ));
+  }
+
+  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
+  onExport() {
+    this.excel.exportAsExcelFile(this.product, 'user_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+FileDataImageupload_field: any[];
+  selectedImageupload_field: any[];
+
+
+
+
+
+
+
+ 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.selectedimageupload_field = [];
+    this.mainService.uploadImageupload_fieldgetById(row.id,this.tableName).subscribe(uploaddata =>{
+      console.log(uploaddata);
+      this.FileDataimageupload_field = uploaddata;
+    
+    })
+
+
+
+
+
+
+
+
+    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);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+for (let i = 0; i < this.selectedimageupload_field.length; i++){
+
+  this.mainService.uploadImageupload_field(data.id,this.tableName,this.selectedimageupload_field[i]).subscribe(uploaddata =>{
+    console.log(uploaddata);
+  })
+}
+
+
+
+
+
+
+
+      }, (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);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+for (let i = 0; i < this.selectedimageupload_field.length; i++){
+
+  this.mainService.uploadImageupload_field(data.id,this.tableName,this.selectedimageupload_field[i]).subscribe(uploaddata =>{
+    console.log(uploaddata);
+  })
+}
+
+
+
+
+
+
+
+
+      }, (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;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+this.FileDataImageupload_field = [];
+this.selectedImageupload_field =[];
+
+
+
+
+
+
+
+
+  }
+ submitted = false;
+onSubmit() {
+  console.log(this.entryForm.value);
+ this.submitted = true;
+  if (this.entryForm.invalid) {
+    return;
+  }this.onCreate();
+
+} 
+
+
+rsModaladdress = false;   
+goToReplaceStringaddress(row){
+this.rowSelected = row;     this.rsModaladdress  =true;   }
+
+isValidPhone_number(phone: string): boolean {
+  const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
+  return phonePattern.test(phone);
+}
+
+isValidemail_field(email: string): boolean {
+						 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+						    return emailPattern.test(email);   }
+
+newpHidepassword_field: boolean = true;
+ newIconpassword_field: string = "eye"; 
+newShapeChangerpassword_field() {
+this.newpHidepassword_field = !this.newpHidepassword_field;  
+ if(this.newpHidepassword_field){
+this.newIconpassword_field = 'eye'   } else {     this.newIconpassword_field = 'eye-hide'   }
+} 
+
+ newaddpHidepassword_field: boolean = true;
+ newaddIconpassword_field: string = "eye";
+newaddChangerpassword_field() {   this.newaddpHidepassword_field = !this.newaddpHidepassword_field;
+ if(this.newaddpHidepassword_field){     this.newaddIconpassword_field = 'eye'   } else {
+  this.newaddIconpassword_field = 'eye-hide'   } }
+
+
+
+
+
+updategender (gender : string): void {    
+ this.entryForm.get('gender').setValue(gender);   }
+
+updategenderEdit(gender : string): void {    this.rowSelected.gender  =  gender }
+						 ;
+
+filePreviewimageupload_field: string | ArrayBuffer | null = null;
+FileDataimageupload_field: {uploadedfile_name?:any, filePreview: string | ArrayBuffer | null }[] = []; // Initialize the array
+selectedimageupload_field: File[]=[]; 
+public onFileChangedimageupload_field(event, index) {
+  const files = event.target.files;
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    this.FileDataimageupload_field[index].uploadedfile_name = files[i].name;
+    this.selectedimageupload_field.push(files[i]);
+    if (file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        // Set the file preview source
+        const filePreview = e.target?.result as string;
+        this.FileDataimageupload_field[index] = {
+          ...this.FileDataimageupload_field[index], // Preserve existing properties
+          filePreview: filePreview // Update only the filePreview property
+        };
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+}
+    onAddLinesimageupload_field(){
+      this.FileDataimageupload_field.push({
+        uploadedfile_name: "",
+        filePreview: "",
+        // f3: "",
+      });
+    }
+    deleteRowimageupload_field(index,id) {
+      this.FileDataimageupload_field.splice(index, 1);
+
+      if(id){
+      this.mainService.uploadImageupload_fielddelete(id).subscribe(data =>{
+        console.log(data);
+      })
+      }
+    }
+
+
+
+
+
+//currency  field start
+   formatCurrencycurrency () {
+    // Format the currency with two decimal places    
+	this.rowSelected.currency = Number(this.rowSelected.currency ).toFixed(2);
+    // Remove commas from the formatted currency   
+	 this.rowSelected.currency = this.rowSelected.currency?.replace(/,/g, '');  }
+  //currency  field end
+
+
+  // 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
+}
+
+
+
+
+
+
+
+export function Confirmedpassword_fieldValidator(controlName: string, matchingControlName: string){
+  return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (matchingControl.errors && !matchingControl.errors.confirmedpassword_fieldValidator) {
+          return;
+      }
+      if (control.value !== matchingControl.value) {
+          matchingControl.setErrors({ confirmedpassword_fieldValidator: true });
+      } else {
+          matchingControl.setErrors(null);
+      }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Student_info/Student_info.service.ts

@@ -0,0 +1,70 @@
+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 Student_infoservice{
+  private baseURL = "Student_info/Student_info" ;  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);
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  uploadImageupload_field(ref:any, Student_info:any, file:any): Observable<any>{
+    const formData = new FormData();
+    formData.append('file', file);
+    return this.apiRequest.postFormData(`FileUpload/Uploadeddocs/${ref}/${Student_info}`, formData);
+  }
+
+  uploadImageupload_fieldgetById(ref:any, Student_info:any,): Observable<any> {
+    return this.apiRequest.get(`FileUpload/Uploadeddocs/${ref}/${Student_info}`);
+  }
+
+
+  uploadImageupload_fielddelete(id: number): Observable<any> {
+    return this.apiRequest.delete(`FileUpload/Uploadeddocs/${id}`);
+  }
+
+
+
+
+
+
+
+// updateaction
+}

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basicp1/Student_info/Student_info_cardvariable.ts

@@ -0,0 +1,4 @@
+export const Student_infocardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts

@@ -1,3 +1,5 @@
+import { CollegeComponent } from './BuilderComponents/basicp1/College/College.component';
+import { Student_infoComponent } from './BuilderComponents/basicp1/Student_info/Student_info.component';
 
 
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -302,6 +304,12 @@ const routes: Routes = [
 
 
       // buildercomponents
+{path:'College',component:CollegeComponent},
+
+
+{path:'Student_info',component:Student_infoComponent},
+
+
 
 
 

schoolmanagementsystem001-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts

@@ -1,3 +1,5 @@
+import { CollegeComponent } from './BuilderComponents/basicp1/College/College.component';
+import { Student_infoComponent } from './BuilderComponents/basicp1/Student_info/Student_info.component';
 
 
 import { CommonModule } from '@angular/common';
@@ -224,6 +226,12 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
 
 
     // buildercomponents
+CollegeComponent,
+
+
+Student_infoComponent,
+
+
 
 
     ThemeCustomizationComponent,