From 3e8b16737d276b414b327823ce15eb504c784372 Mon Sep 17 00:00:00 2001
From: risadmin_prod <ganeshk@dekatc.com>
Date: Wed, 28 Jan 2026 07:56:42 +0000
Subject: [PATCH] build_app

---
 .../Builders/Services/BuilderService.java     |   6 +
 .../basic/Controllers/BillController.java     | 115 +++
 .../Controllers/tokenFree_BillController.java | 115 +++
 .../java/com/realnet/basic/Entity/Bill.java   |  41 +
 .../basic/Repository/BillRepository.java      |  34 +
 .../realnet/basic/Services/BillService.java   | 113 +++
 .../log/Controllers/LoginController.java      |  99 ++
 .../tokenFree_LoginController.java            |  99 ++
 .../java/com/realnet/log/Entity/Login.java    |  34 +
 .../log/Repository/LoginRepository.java       |  30 +
 .../realnet/log/Services/LoginService.java    |  93 ++
 .../basic/Bill/Bill.component.html            | 434 +++++++++
 .../basic/Bill/Bill.component.scss            | 870 ++++++++++++++++++
 .../basic/Bill/Bill.component.ts              | 427 +++++++++
 .../basic/Bill/Bill.service.ts                |  48 +
 .../basic/Bill/Bill_cardvariable.ts           |   4 +
 .../log/Login/Login.component.html            | 363 ++++++++
 .../log/Login/Login.component.scss            | 870 ++++++++++++++++++
 .../log/Login/Login.component.ts              | 398 ++++++++
 .../log/Login/Login.service.ts                |  44 +
 .../log/Login/Login_cardvariable.ts           |   4 +
 .../app/modules/main/main-routing.module.ts   |   8 +
 .../src/app/modules/main/main.module.ts       |   8 +
 .../authsec_mysql/mysql/wf_table/wf_table.sql |   4 +
 24 files changed, 4261 insertions(+)
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/BillController.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/tokenFree_BillController.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Entity/Bill.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Repository/BillRepository.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Services/BillService.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/LoginController.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/tokenFree_LoginController.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Entity/Login.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Repository/LoginRepository.java
 create mode 100644 shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Services/LoginService.java
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.html
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.scss
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.ts
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.service.ts
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill_cardvariable.ts
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.html
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.scss
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.ts
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.service.ts
 create mode 100644 shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login_cardvariable.ts
 create mode 100755 shopmanagement-hbs-d/authsec_mysql/mysql/wf_table/wf_table.sql

diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
index 2ae85df..eeaf9ea 100644
--- a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/Builders/Services/BuilderService.java
+++ b/shopmanagement-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( "Bill","Bill",  "Master"); 
+
+
+addCustomMenu( "Login","Login",  "Master"); 
+
+
 
 		System.out.println("dashboard and menu inserted...");
 
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/BillController.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/BillController.java
new file mode 100644
index 0000000..97e3aa7
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/BillController.java
@@ -0,0 +1,115 @@
+package com.realnet.basic.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.basic.Entity.Bill;
+import com.realnet.basic.Services.BillService ;
+
+
+
+
+
+
+
+
+
+
+@RequestMapping(value = "/Bill")
+ @CrossOrigin("*") 
+@RestController
+public class BillController {
+	@Autowired
+	private BillService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+
+
+
+
+	@PostMapping("/Bill")
+		  public Bill Savedata(@RequestBody Bill data) {
+		Bill save = Service.Savedata(data)	;
+
+
+
+
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Bill/{id}")
+	public  Bill update(@RequestBody Bill data,@PathVariable Integer id ) {
+		Bill update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Bill/getall/page")
+	public Page<Bill> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Bill> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Bill")
+	public List<Bill> getdetails() {
+		 List<Bill> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Bill")
+	public List<Bill> getallwioutsec() {
+		 List<Bill> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Bill/{id}")
+	public  Bill  getdetailsbyId(@PathVariable Integer id ) {
+		Bill  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Bill/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/tokenFree_BillController.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/tokenFree_BillController.java
new file mode 100644
index 0000000..52039f7
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Controllers/tokenFree_BillController.java
@@ -0,0 +1,115 @@
+package com.realnet.basic.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.basic.Entity.Bill;
+import com.realnet.basic.Services.BillService ;
+
+
+
+
+
+
+
+
+
+
+@RequestMapping(value = "/token/Bill")
+ @CrossOrigin("*") 
+@RestController
+public class tokenFree_BillController {
+	@Autowired
+	private BillService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+
+
+
+
+	@PostMapping("/Bill")
+		  public Bill Savedata(@RequestBody Bill data) {
+		Bill save = Service.Savedata(data)	;
+
+
+
+
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Bill/{id}")
+	public  Bill update(@RequestBody Bill data,@PathVariable Integer id ) {
+		Bill update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Bill/getall/page")
+	public Page<Bill> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Bill> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Bill")
+	public List<Bill> getdetails() {
+		 List<Bill> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Bill")
+	public List<Bill> getallwioutsec() {
+		 List<Bill> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Bill/{id}")
+	public  Bill  getdetailsbyId(@PathVariable Integer id ) {
+		Bill  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Bill/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Entity/Bill.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Entity/Bill.java
new file mode 100644
index 0000000..5ee830c
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Entity/Bill.java
@@ -0,0 +1,41 @@
+package com.realnet.basic.Entity;
+ import lombok.*;
+import com.realnet.WhoColumn.Entity.Extension; 
+ import javax.persistence.*;
+ import java.time.LocalDateTime;
+ import java.util.*;
+
+
+
+
+
+
+
+
+
+
+ @Entity 
+ @Data
+ public class    Bill 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;
+
+ private String phoneno;
+
+private String date;
+
+
+}
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Repository/BillRepository.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Repository/BillRepository.java
new file mode 100644
index 0000000..6f38344
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Repository/BillRepository.java
@@ -0,0 +1,34 @@
+package com.realnet.basic.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.basic.Entity.Bill;
+
+@Repository
+public interface  BillRepository  extends  JpaRepository<Bill, Integer>  { 
+
+@Query(value = "select * from bill where  created_by=?1", nativeQuery = true)
+	List<Bill> findAll(Long creayedBy);
+
+@Query(value = "select * from bill where  created_by=?1", nativeQuery = true)
+	Page<Bill> findAll( Long creayedBy,Pageable page);
+}
\ No newline at end of file
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Services/BillService.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Services/BillService.java
new file mode 100644
index 0000000..ae8e7e2
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/basic/Services/BillService.java
@@ -0,0 +1,113 @@
+package com.realnet.basic.Services;
+import com.realnet.basic.Repository.BillRepository;
+import com.realnet.basic.Entity.Bill
+;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 BillService {
+@Autowired
+private BillRepository Repository;
+	@Autowired
+	private AppUserServiceImpl userService; 
+@Autowired
+	private RealmService realmService;
+
+
+
+
+
+
+
+
+
+public Bill Savedata(Bill data) {
+
+
+
+
+
+
+
+
+
+
+	data.setUpdatedBy(getUser().getUserId());
+		data.setCreatedBy(getUser().getUserId());
+		data.setAccountId(getUser().getAccount().getAccount_id());
+Bill save = Repository.save(data);
+				return save;	
+			}
+
+
+//	get all with pagination
+	public Page<Bill> getAllWithPagination(Pageable page) {
+		return Repository.findAll( getUser().getUserId(),page);
+	}			
+public List<Bill> getdetails() {  
+		List<Realm> realm = realmService.findByUserId(getUser().getUserId());
+List<Bill> all = Repository.findAll(getUser().getUserId());
+		
+		return all ;		}
+
+
+public Bill getdetailsbyId(Integer id) {
+	return Repository.findById(id).get();
+			}
+
+
+	public void delete_by_id(Integer id) {
+ Repository.deleteById(id);
+}
+
+
+public Bill update(Bill data,Integer id) {
+	Bill old = Repository.findById(id).get();
+old.setName(data.getName());
+
+old.setDescription(data.getDescription());
+
+old.setActive (data.getActive());
+
+old.setPhoneno(data.getPhoneno());
+
+old.setDate(data.getDate());
+
+final Bill test = Repository.save(old);
+		data.setUpdatedBy(getUser().getUserId());
+  return test;} 
+
+
+
+
+
+
+
+
+
+
+ public AppUser getUser() {
+		AppUser user = userService.getLoggedInUser();
+		return user;
+
+	}}
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/LoginController.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/LoginController.java
new file mode 100644
index 0000000..3fa4a3f
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/LoginController.java
@@ -0,0 +1,99 @@
+package com.realnet.log.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.log.Entity.Login;
+import com.realnet.log.Services.LoginService ;
+
+
+
+
+
+
+@RequestMapping(value = "/Login")
+ @CrossOrigin("*") 
+@RestController
+public class LoginController {
+	@Autowired
+	private LoginService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+	@PostMapping("/Login")
+		  public Login Savedata(@RequestBody Login data) {
+		Login save = Service.Savedata(data)	;
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Login/{id}")
+	public  Login update(@RequestBody Login data,@PathVariable Integer id ) {
+		Login update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Login/getall/page")
+	public Page<Login> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Login> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Login")
+	public List<Login> getdetails() {
+		 List<Login> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Login")
+	public List<Login> getallwioutsec() {
+		 List<Login> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Login/{id}")
+	public  Login  getdetailsbyId(@PathVariable Integer id ) {
+		Login  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Login/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/tokenFree_LoginController.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/tokenFree_LoginController.java
new file mode 100644
index 0000000..e8e675f
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Controllers/tokenFree_LoginController.java
@@ -0,0 +1,99 @@
+package com.realnet.log.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.log.Entity.Login;
+import com.realnet.log.Services.LoginService ;
+
+
+
+
+
+
+@RequestMapping(value = "/token/Login")
+ @CrossOrigin("*") 
+@RestController
+public class tokenFree_LoginController {
+	@Autowired
+	private LoginService Service;
+
+@Value("${projectPath}")
+	private String projectPath;
+ 
+
+
+
+
+
+
+	@PostMapping("/Login")
+		  public Login Savedata(@RequestBody Login data) {
+		Login save = Service.Savedata(data)	;
+
+
+
+
+
+		System.out.println("data saved..." + save);
+
+ return save;
+	  }
+@PutMapping("/Login/{id}")
+	public  Login update(@RequestBody Login data,@PathVariable Integer id ) {
+		Login update = Service.update(data,id);
+		System.out.println("data update..." + update);
+		return update;
+	}	 
+//	get all with pagination
+	@GetMapping("/Login/getall/page")
+	public Page<Login> getall(@RequestParam(value = "page", required = false) Integer page,
+			@RequestParam(value = "size", required = false) Integer size) {
+		Pageable paging = PageRequest.of(page, size);
+		Page<Login> get = Service.getAllWithPagination(paging);
+
+		return get;
+
+	}	
+	@GetMapping("/Login")
+	public List<Login> getdetails() {
+		 List<Login> get = Service.getdetails();		
+		return get;
+}
+// get all without authentication 
+
+	@GetMapping("/token/Login")
+	public List<Login> getallwioutsec() {
+		 List<Login> get = Service.getdetails();		
+		return get;
+}
+@GetMapping("/Login/{id}")
+	public  Login  getdetailsbyId(@PathVariable Integer id ) {
+		Login  get = Service.getdetailsbyId(id);
+		return get;
+	}
+@DeleteMapping("/Login/{id}")
+	public  ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
+	Service.delete_by_id(id);
+			return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
+	
+	}
+
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Entity/Login.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Entity/Login.java
new file mode 100644
index 0000000..4438467
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Entity/Login.java
@@ -0,0 +1,34 @@
+package com.realnet.log.Entity;
+ import lombok.*;
+import com.realnet.WhoColumn.Entity.Extension; 
+ import javax.persistence.*;
+ import java.time.LocalDateTime;
+ import java.util.*;
+
+
+
+
+
+
+ @Entity 
+ @Data
+ public class    Login extends Extension { 
+ /**
+	 * 
+	 */
+	private static final long serialVersionUID = 1L;
+
+ @Id
+ @GeneratedValue(strategy = GenerationType.IDENTITY)
+ private Integer id;
+
+private String  username;
+
+private Boolean active;
+
+private String password;
+@Transient
+private String confirmpassword;
+
+
+}
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Repository/LoginRepository.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Repository/LoginRepository.java
new file mode 100644
index 0000000..04a3fa3
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Repository/LoginRepository.java
@@ -0,0 +1,30 @@
+package com.realnet.log.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.log.Entity.Login;
+
+@Repository
+public interface  LoginRepository  extends  JpaRepository<Login, Integer>  { 
+
+@Query(value = "select * from login where  created_by=?1", nativeQuery = true)
+	List<Login> findAll(Long creayedBy);
+
+@Query(value = "select * from login where  created_by=?1", nativeQuery = true)
+	Page<Login> findAll( Long creayedBy,Pageable page);
+}
\ No newline at end of file
diff --git a/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Services/LoginService.java b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Services/LoginService.java
new file mode 100644
index 0000000..0a9565d
--- /dev/null
+++ b/shopmanagement-back-b/authsec_springboot/backend/src/main/java/com/realnet/log/Services/LoginService.java
@@ -0,0 +1,93 @@
+package com.realnet.log.Services;
+import com.realnet.log.Repository.LoginRepository;
+import com.realnet.log.Entity.Login
+;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 LoginService {
+@Autowired
+private LoginRepository Repository;
+	@Autowired
+	private AppUserServiceImpl userService; 
+@Autowired
+	private RealmService realmService;
+
+
+
+
+
+public Login Savedata(Login data) {
+
+
+
+
+
+
+	data.setUpdatedBy(getUser().getUserId());
+		data.setCreatedBy(getUser().getUserId());
+		data.setAccountId(getUser().getAccount().getAccount_id());
+Login save = Repository.save(data);
+				return save;	
+			}
+
+
+//	get all with pagination
+	public Page<Login> getAllWithPagination(Pageable page) {
+		return Repository.findAll( getUser().getUserId(),page);
+	}			
+public List<Login> getdetails() {  
+		List<Realm> realm = realmService.findByUserId(getUser().getUserId());
+List<Login> all = Repository.findAll(getUser().getUserId());
+		
+		return all ;		}
+
+
+public Login getdetailsbyId(Integer id) {
+	return Repository.findById(id).get();
+			}
+
+
+	public void delete_by_id(Integer id) {
+ Repository.deleteById(id);
+}
+
+
+public Login update(Login data,Integer id) {
+	Login old = Repository.findById(id).get();
+old.setUsername(data.getUsername());
+
+old.setActive (data.getActive());
+
+old.setPassword(data.getPassword());
+
+final Login test = Repository.save(old);
+		data.setUpdatedBy(getUser().getUserId());
+  return test;} 
+
+
+
+
+
+
+ public AppUser getUser() {
+		AppUser user = userService.getLoggedInUser();
+		return user;
+
+	}}
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.html b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.html
new file mode 100644
index 0000000..3ffb1da
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.html
@@ -0,0 +1,434 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Bill</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">Bill</h2>
+    </div>
+  </div>
+  <div class="ug-hero__actions"><!-- upload and download template -->
+ 
+  <button class="ug-btn ug-btn-secondary" (click)="downloadFiles()">
+      <clr-icon shape="download"></clr-icon>
+      <span class="ug-btn-text">DOWNLOAD TEMPLATE</span>
+    </button>
+    <button class="ug-btn ug-btn-secondary" (click)="csvImport()">
+      <clr-icon shape="import"></clr-icon>
+      <span class="ug-btn-text">IMPORT</span>
+    </button>
+    <button class="ug-btn ug-btn-secondary" (click)="onExport()">
+      <clr-icon shape="export"></clr-icon>
+      <span class="ug-btn-text">EXPORT XLSX</span>
+    </button> 
+    <!-- upload and download template end here--> 
+    <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>
+
+
+
+
+ <clr-dg-column [clrDgField]="'phoneno'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      PhoneNo
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'date'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Date
+    </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>
+
+
+<clr-dg-cell>{{user.phoneno }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.date }}</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 class="ug-kv"><span>PhoneNo</span><strong>{{user.phoneno}}</strong></div>
+
+
+      <div class="ug-kv"><span>Date</span><strong>{{user.date}}</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 Bill</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="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="phoneno" class="ug-form-label">PhoneNo</label>
+              <input type="text" id="phoneno" class="ug-form-input" formControlName="phoneno" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+              <div *ngIf="submitted && entryForm.controls['phoneno'].errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls['phoneno'].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="date" class="ug-form-label">Date</label>
+              <input type="date" id="date" class="ug-form-input" formControlName="date">
+            </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 Bill</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>
+
+
+ <!-- Phone Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="phoneno" class="ug-form-label">PhoneNo</label>
+                <input type="text" id="phoneno" class="ug-form-input" [(ngModel)]="rowSelected.phoneno"
+                  name="phoneno" placeholder="+91 Enter 10 digit Mobile Number"
+                  pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+                <div *ngIf="rowSelected.phoneno && !isValidPhoneno(rowSelected.phoneno)"
+                  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="date" class="ug-form-label">Date</label>
+              <input type="date" id="date" class="ug-form-input" [(ngModel)]="rowSelected.date" name="date">
+            </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 class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">PhoneNo:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.phoneno}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Date:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.date}}</span>
+      </div>
+
+ 
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <h3 class="modal-title">Import File</h3>
+  <div class="modal-body">
+    <div class="ug-form-group">
+      <label class="ug-form-label">Select CSV File</label>
+      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
+    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+  </div>
+</clr-modal>
+
+
+
+
+
+
+
+
+
+  <!-- htmlpopup -->
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.scss b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.scss
new file mode 100644
index 0000000..a35f132
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.scss
@@ -0,0 +1,870 @@
+
+@import '../../../../../../styles.scss';
+
+// Import design tokens
+@import '../../../../../../styles/design-tokens';
+// Newbasicp1 Styles
+.ug-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: var(--theme-font-primary);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__icon {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    clr-icon {
+      width: 36px;
+      height: 36px;
+      color: white;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+    font-family: var(--theme-font-secondary);
+  }
+
+  &__subtitle {
+    font-size: 16px;
+    margin: 0;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.ug-btn-text {
+  margin-left: 8px;
+}
+
+// Modern Button Styles using ThemeService
+.ug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+
+  &:focus {
+    outline: 2px solid var(--theme-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Sizes
+  &.ug-btn-sm {
+    padding: 8px 16px;
+    font-size: 13px;
+    height: 32px;
+  }
+
+  &.ug-btn-md {
+    padding: 12px 20px;
+    font-size: 14px;
+    height: 40px;
+  }
+
+  &.ug-btn-lg {
+    padding: 16px 24px;
+    font-size: 16px;
+    height: 48px;
+  }
+
+  // Variants
+  &.ug-btn-primary {
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-color: var(--theme-primary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &.ug-btn-secondary {
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-background);
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-outline {
+    background: transparent;
+    color: var(--theme-secondary);
+    border-color: var(--theme-secondary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+      border-color: var(--theme-secondary);
+      color: var(--theme-secondary);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-error {
+    background: var(--theme-error, #ef4444);
+    color: white;
+    border-color: var(--theme-error, #ef4444);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-error-dark, #dc2626);
+      border-color: var(--theme-error-dark, #dc2626);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  &.ug-btn-ghost {
+    background: transparent;
+    color: var(--theme-text-secondary);
+    border-color: transparent;
+
+    &:hover {
+      background: var(--theme-background);
+      color: var(--theme-text);
+    }
+  }
+}
+
+.ug-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  &__left {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+// Form Container Styles
+.form-container {
+  padding: 20px 0;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px 16px -12px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin: 0 0 16px 0;
+  }
+}
+
+.form-col {
+  flex: 1;
+  padding: 0 12px;
+  min-width: 250px;
+  
+  @media (max-width: 768px) {
+    padding: 0;
+    min-width: 100%;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Password Input Container
+.password-input-container {
+  position: relative;
+  
+  .password-input {
+    padding-right: 40px;
+  }
+  
+  .password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-text-secondary);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 200ms ease-out;
+    
+    &:hover {
+      color: var(--theme-text);
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    clr-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// Textarea Styles
+textarea.ug-form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.ug-search {
+  position: relative;
+  max-width: 400px;
+
+  clr-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    z-index: 1;
+  }
+
+  &__input {
+    width: 100%;
+    padding: 12px 12px 12px 40px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    font-size: 14px;
+    transition: all 200ms ease-out;
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:focus {
+      outline: none;
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+    }
+  }
+}
+
+.ug-view-toggle {
+  display: flex;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .ug-btn {
+    border-radius: 0;
+    border: none;
+    background: var(--theme-surface);
+    color: var(--theme-text-secondary);
+
+    &:first-child {
+      border-right: 1px solid #d1d5db;
+    }
+
+    &.ug-btn-primary {
+      background: var(--theme-primary);
+      color: white;
+    }
+  }
+}
+
+// Modern Table Styles
+.ug-grid {
+  background: var(--theme-surface);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+
+  ::ng-deep .datagrid {
+    .datagrid-head {
+      background: var(--theme-background);
+      
+      .datagrid-column {
+        padding: 16px 24px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--theme-text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-bottom: 1px solid #e5e7eb;
+      }
+    }
+
+    .datagrid-row {
+      transition: background-color 150ms ease-out;
+
+      &:hover {
+        background: var(--theme-background);
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e5e7eb;
+      }
+
+      .datagrid-cell {
+        padding: 16px 24px;
+        font-size: 14px;
+        color: var(--theme-text);
+      }
+    }
+
+    .datagrid-footer {
+      background: var(--theme-background);
+      border-top: 1px solid #e5e7eb;
+      padding: 16px 24px;
+    }
+  }
+}
+
+.ug-grid-footer {
+  background: var(--theme-background);
+  border-top: 1px solid #e5e7eb;
+}
+
+// Modern Card Styles - More beautiful design
+.ug-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.ug-card-item {
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: var(--theme-border-radius); // Using theme variable
+  box-shadow: var(--theme-shadow); // Using theme variable
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px;
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
+    min-height: 60px;
+  }
+
+  &__icon {
+    clr-icon {
+      width: 24px;
+      height: 24px;
+      color: var(--theme-primary);
+    }
+  }
+
+  &__title {
+    font-weight: 700;
+    flex: 1 1 auto;
+    font-size: 18px;
+    color: var(--theme-text);
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__footer {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background: var(--theme-background);
+  }
+}
+
+.ug-kv {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  
+  span {
+    color: var(--theme-text-secondary);
+  }
+
+  strong {
+    color: var(--theme-text);
+    font-weight: 500;
+    text-align: right;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Theme the card footer buttons
+.ug-card-item__footer .ug-btn {
+  border-radius: 10px;
+  flex: 1;
+  justify-content: center;
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-outline {
+  border: 1px solid var(--theme-secondary);
+  color: var(--theme-secondary);
+  background: transparent;
+  
+  &:hover {
+    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+    border-color: var(--theme-secondary);
+    color: var(--theme-secondary);
+  }
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-error {
+  background: var(--theme-error, #ef4444);
+  color: #fff;
+  border-color: var(--theme-error, #ef4444);
+  
+  &:hover {
+    background: var(--theme-error-dark, #dc2626);
+    border-color: var(--theme-error-dark, #dc2626);
+    transform: translateY(-2px);
+  }
+}
+
+// Table view action buttons
+.ug-action-item {
+  @extend .ug-btn;
+  @extend .ug-btn-ghost;
+  @extend .ug-btn-sm;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 4px;
+  text-align: left;
+  
+  clr-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  
+  &.ug-btn-error {
+    color: var(--theme-error, #ef4444);
+    
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+}
+
+// Ensure action overflow is visible
+::ng-deep .datagrid-action-overflow {
+  button.action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    padding: 8px 12px;
+    
+    clr-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Status Badges
+.ug-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ug-status-enabled {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
+  color: #10b981;
+}
+
+.ug-status-disabled {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
+  color: #ef4444;
+}
+
+// Form Styles
+.ug-form-group {
+  margin-bottom: 20px;
+}
+
+.ug-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+
+.ug-form-input, .ug-form-select {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+  margin-bottom: 0;
+  font-family: var(--theme-font-primary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+  }
+
+  &:disabled {
+    background: var(--theme-background);
+    color: var(--theme-text-secondary);
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+
+  &::placeholder {
+    color: var(--theme-text-secondary);
+  }
+}
+
+.ug-form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px 12px;
+  padding-right: 40px;
+  appearance: none;
+}
+
+.ug-form-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.required-field {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.ug-file-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: var(--theme-surface);
+  color: var(--theme-text);
+  
+  &::file-selector-button {
+    @extend .ug-btn;
+    @extend .ug-btn-secondary;
+    margin-right: 12px;
+    padding: 8px 16px;
+    border: none;
+  }
+}
+
+// Delete Modal Styles
+.ug-delete-header {
+  text-align: center;
+  padding: 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.ug-delete-icon {
+  color: #ef4444;
+  margin-bottom: 16px;
+}
+
+.ug-delete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--theme-text);
+  margin: 0 0 8px 0;
+}
+
+.ug-delete-subtitle {
+  font-size: 16px;
+  color: var(--theme-text-secondary);
+  margin: 0;
+}
+
+.ug-delete-details {
+  padding: 24px;
+}
+
+.ug-delete-detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ug-delete-detail-label {
+  font-weight: 500;
+  color: var(--theme-text-secondary);
+}
+
+.ug-delete-detail-value {
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.delete {
+  color: #ef4444;
+  text-align: center;
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.heading {
+  text-align: center;
+  margin-bottom: 24px;
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+// Modal Header
+::ng-deep .modal-header {
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px 16px 0 0 !important;
+  padding: 20px 24px !important;
+  
+  .modal-title {
+    color: white;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0;
+    font-family: var(--theme-font-secondary);
+  }
+  
+  .close {
+    color: white;
+    opacity: 0.8;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Modal Body
+::ng-deep .modal-body {
+  padding: 24px !important;
+}
+
+// Modal Footer
+::ng-deep .modal-footer {
+  padding: 20px 24px !important;
+  background: var(--theme-background);
+  border-radius: 0 0 16px 16px !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// Recaptcha Container Styles
+.recaptcha-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recaptcha-code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--theme-background);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  
+  b {
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// Toggle Styles
+.clr-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  label {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--theme-text);
+  }
+}
+
+// URL Field Styles
+.ug-form-input[type="url"] {
+  font-family: monospace;
+}
+// Responsive adjustments
+@media (max-width: 768px) {
+  .ug-hero {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    
+    &__content {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    &__actions {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .ug-toolbar {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .ug-search {
+    max-width: 100%;
+  }
+  
+  .ug-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .ug-card-item {
+    &__header {
+      flex-direction: column;
+      text-align: center;
+      
+      &__icon {
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+    
+    &__footer {
+      justify-content: center;
+    }
+  }
+.recaptcha-code {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .ug-btn {
+      align-self: flex-end;
+    }
+  }}
\ No newline at end of file
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.ts
new file mode 100644
index 0000000..a923ace
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.component.ts
@@ -0,0 +1,427 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Billservice} from './Bill.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 { Billcardvariable } from './Bill_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';
+import { ActivatedRoute, Router } from '@angular/router';
+declare var JsBarcode: any; 
+@Component({
+  selector: 'app-Bill',
+  templateUrl: './Bill.component.html',
+  styleUrls: ['./Bill.component.scss']
+})
+export class BillComponent implements OnInit {
+  cardButton = Billcardvariable.cardButton;
+  cardmodeldata = Billcardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Billcardvariable.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 = 'Bill_formCode'
+tableName = 'Bill';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Billservice,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+private csvService: CsvService,
+    private translate: TranslateService,
+    private themeService: ThemeService, 
+private excel: ExcelService,    private _fb: FormBuilder,
+ private router: Router,  
+    private route: ActivatedRoute  ) { }
+
+  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],
+
+phoneno: ['+91'],
+
+date : [null],
+
+
+ 
+
+
+
+
+
+
+
+
+
+  }); // component_button200
+ // form code start
+    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
+      console.log(data);
+      const jsonArray = data.map((str) => JSON.parse(str));
+      this.additionalFieldsFromBackend = jsonArray;
+      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Bill_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) ||
+
+((g?.phoneno || '').toString()).toLowerCase().includes(text) ||
+
+((g?.date || '').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;   }
+
+
+
+isValidPhoneno(phone: string): boolean {
+  const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
+  return phonePattern.test(phone);
+}
+
+
+
+  goToDataM(){
+    this.router.navigate(['/cns-portal/datamanagement'],{ relativeTo: this.route });
+  }
+
+  
+downloadCSV(tableName): void {
+  this.mainService.downloadCSV(tableName).subscribe(response => {
+    const blob = new Blob([response], { type: 'application/octet-stream' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${tableName}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  });
+}
+  // csv
+
+  modalCsv = false;
+  selectedFiles: File;
+  fileList;
+  ttype = 'usergroupmaintenance';
+
+
+  // Import CSV
+  public selectFile(event) {
+    this.selectedFiles = event.target.files[0];
+    // this.saveCsv();
+  }
+
+  csvImport() {
+    console.log("import CSV");
+    this.modalCsv = true;
+  }
+  saveCsv() {
+    this.csvService.importCsv(this.selectedFiles, this.ttype).subscribe(data => {
+      console.log(data);
+      this.fileList = data;
+      this.modalCsv = false;
+    },
+      (error) => {
+        console.log(error);
+        if (error.status == 202) {
+          this.toastr.success(error.error.text)
+        }
+      });
+  }
+
+  downloadFiles() {
+    this.csvService.downloadCsvs(this.ttype);
+
+  }
+// updateaction
+}
+
+
+
+
+
+
+
+
+
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.service.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.service.ts
new file mode 100644
index 0000000..b2c47a7
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill.service.ts
@@ -0,0 +1,48 @@
+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';
+import baseUrl from 'src/app/services/api/helper';
+@Injectable({
+  providedIn: 'root'
+})
+export class Billservice{
+  private baseURL = "Bill/Bill" ;  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);
+  }
+
+
+
+
+
+
+
+
+
+
+downloadCSV(tableName: string): Observable<Blob> {
+  const url = `${baseUrl}/api/template/download-csv?tableName=${tableName}`;
+  return this.http.get(url, { responseType: 'blob' })
+
+}// updateaction
+}
\ No newline at end of file
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill_cardvariable.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill_cardvariable.ts
new file mode 100644
index 0000000..81b197b
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/basic/Bill/Bill_cardvariable.ts
@@ -0,0 +1,4 @@
+export const Billcardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}
\ No newline at end of file
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.html b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.html
new file mode 100644
index 0000000..7f7d19b
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.html
@@ -0,0 +1,363 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Login</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">Login</h2>
+    </div>
+  </div>
+  <div class="ug-hero__actions"><!-- upload and download template -->
+ 
+  <button class="ug-btn ug-btn-secondary" (click)="downloadFiles()">
+      <clr-icon shape="download"></clr-icon>
+      <span class="ug-btn-text">DOWNLOAD TEMPLATE</span>
+    </button>
+    <button class="ug-btn ug-btn-secondary" (click)="csvImport()">
+      <clr-icon shape="import"></clr-icon>
+      <span class="ug-btn-text">IMPORT</span>
+    </button>
+    <button class="ug-btn ug-btn-secondary" (click)="onExport()">
+      <clr-icon shape="export"></clr-icon>
+      <span class="ug-btn-text">EXPORT XLSX</span>
+    </button> 
+    <!-- upload and download template end here--> 
+    <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]="'username'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      UserName
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'active'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Active
+    </ng-container>
+  </clr-dg-column>
+
+
+ <clr-dg-column [clrDgField]="'password'"> <ng-container *clrDgHideableColumn="{hidden: false}">Password
+						 </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.username }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.active }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.password }}</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>UserName</span><strong>{{user.username}}</strong></div>
+
+
+      <div class="ug-kv"><span>Active</span><strong>{{user.active}}</strong></div>
+
+
+      <div class="ug-kv"><span>Password</span><strong>{{user.password}}</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)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Login</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="username" class="ug-form-label">UserName<span class="required-field">*</span></label>
+        <input type="text" id="username" class="ug-form-input" formControlName="username">
+        <div *ngIf="submitted && entryForm.controls.username.errors" class="ug-form-error">
+          <div *ngIf="submitted && entryForm.controls.username.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">Active</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="active" formControlName="active" clrToggle>
+                <label for="active">Active</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+        <!-- Password Fields -->
+        <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="password" class="ug-form-label">Password</label>
+              <div class="password-input-container">
+                <input 
+                  [type]="newaddpHidepassword ? 'password' : 'text'" 
+                  id="password" 
+                  class="ug-form-input password-input" 
+                  formControlName="password" 
+                  placeholder="Enter Password"
+                  autocomplete="new-password">
+                <button 
+                  type="button" 
+                  class="password-toggle" 
+                  (click)="newaddChangerpassword()" 
+                  [attr.aria-label]="newaddpHidepassword? 'Show password' : 'Hide password'">
+                  <clr-icon [attr.shape]="newaddIconpassword"></clr-icon>
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="confirmpassword" class="ug-form-label">Confirm Password</label>
+              <input 
+                type="password" 
+                id="confirmpassword" 
+                class="ug-form-input" 
+                formControlName="confirmpassword" 
+                placeholder="Confirm password"
+                autocomplete="new-password">
+              <div *ngIf="entryForm.controls.confirmpassword.errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls.confirmpassword.errors.confirmedpasswordValidator">* Password and Confirm Password must match.</div>
+              </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 Login</h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    
+
+
+
+<div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="username" class="ug-form-label">UserName<span class="required-field">*</span></label>
+                <input type="text" id="username" class="ug-form-input" [(ngModel)]="rowSelected.username" name="username"
+                  placeholder="Enter UserName">
+              </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" name="active" clrToggle [(ngModel)]="rowSelected.active">
+                <label for="active">Active</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+          <!-- Password Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="password" class="ug-form-label">Password</label>
+                <div class="password-input-container">
+                  <input [type]="newpHidepassword ? 'password' : 'text'" id="password"
+                    class="ug-form-input password-input" [(ngModel)]="rowSelected.password" name="password"
+                    placeholder="Enter Password">
+                  <button type="button" class="password-toggle" (click)="newShapeChangerpassword()"
+                    [attr.aria-label]="newpHidepassword ? 'Show password' : 'Hide password'">
+                    <clr-icon [attr.shape]="newIconpassword"></clr-icon>
+                  </button>
+                </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">UserName:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.username}}</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 class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Password:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.password}}</span>
+      </div>
+
+ 
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <h3 class="modal-title">Import File</h3>
+  <div class="modal-body">
+    <div class="ug-form-group">
+      <label class="ug-form-label">Select CSV File</label>
+      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
+    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+  </div>
+</clr-modal>
+
+
+
+
+
+  <!-- htmlpopup -->
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.scss b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.scss
new file mode 100644
index 0000000..a35f132
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.scss
@@ -0,0 +1,870 @@
+
+@import '../../../../../../styles.scss';
+
+// Import design tokens
+@import '../../../../../../styles/design-tokens';
+// Newbasicp1 Styles
+.ug-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: var(--theme-font-primary);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__icon {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    clr-icon {
+      width: 36px;
+      height: 36px;
+      color: white;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+    font-family: var(--theme-font-secondary);
+  }
+
+  &__subtitle {
+    font-size: 16px;
+    margin: 0;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.ug-btn-text {
+  margin-left: 8px;
+}
+
+// Modern Button Styles using ThemeService
+.ug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+
+  &:focus {
+    outline: 2px solid var(--theme-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Sizes
+  &.ug-btn-sm {
+    padding: 8px 16px;
+    font-size: 13px;
+    height: 32px;
+  }
+
+  &.ug-btn-md {
+    padding: 12px 20px;
+    font-size: 14px;
+    height: 40px;
+  }
+
+  &.ug-btn-lg {
+    padding: 16px 24px;
+    font-size: 16px;
+    height: 48px;
+  }
+
+  // Variants
+  &.ug-btn-primary {
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-color: var(--theme-primary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &.ug-btn-secondary {
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-background);
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-outline {
+    background: transparent;
+    color: var(--theme-secondary);
+    border-color: var(--theme-secondary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+      border-color: var(--theme-secondary);
+      color: var(--theme-secondary);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-error {
+    background: var(--theme-error, #ef4444);
+    color: white;
+    border-color: var(--theme-error, #ef4444);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-error-dark, #dc2626);
+      border-color: var(--theme-error-dark, #dc2626);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  &.ug-btn-ghost {
+    background: transparent;
+    color: var(--theme-text-secondary);
+    border-color: transparent;
+
+    &:hover {
+      background: var(--theme-background);
+      color: var(--theme-text);
+    }
+  }
+}
+
+.ug-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  &__left {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+// Form Container Styles
+.form-container {
+  padding: 20px 0;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px 16px -12px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin: 0 0 16px 0;
+  }
+}
+
+.form-col {
+  flex: 1;
+  padding: 0 12px;
+  min-width: 250px;
+  
+  @media (max-width: 768px) {
+    padding: 0;
+    min-width: 100%;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Password Input Container
+.password-input-container {
+  position: relative;
+  
+  .password-input {
+    padding-right: 40px;
+  }
+  
+  .password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-text-secondary);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 200ms ease-out;
+    
+    &:hover {
+      color: var(--theme-text);
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    clr-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// Textarea Styles
+textarea.ug-form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.ug-search {
+  position: relative;
+  max-width: 400px;
+
+  clr-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    z-index: 1;
+  }
+
+  &__input {
+    width: 100%;
+    padding: 12px 12px 12px 40px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    font-size: 14px;
+    transition: all 200ms ease-out;
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:focus {
+      outline: none;
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+    }
+  }
+}
+
+.ug-view-toggle {
+  display: flex;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .ug-btn {
+    border-radius: 0;
+    border: none;
+    background: var(--theme-surface);
+    color: var(--theme-text-secondary);
+
+    &:first-child {
+      border-right: 1px solid #d1d5db;
+    }
+
+    &.ug-btn-primary {
+      background: var(--theme-primary);
+      color: white;
+    }
+  }
+}
+
+// Modern Table Styles
+.ug-grid {
+  background: var(--theme-surface);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+
+  ::ng-deep .datagrid {
+    .datagrid-head {
+      background: var(--theme-background);
+      
+      .datagrid-column {
+        padding: 16px 24px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--theme-text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-bottom: 1px solid #e5e7eb;
+      }
+    }
+
+    .datagrid-row {
+      transition: background-color 150ms ease-out;
+
+      &:hover {
+        background: var(--theme-background);
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e5e7eb;
+      }
+
+      .datagrid-cell {
+        padding: 16px 24px;
+        font-size: 14px;
+        color: var(--theme-text);
+      }
+    }
+
+    .datagrid-footer {
+      background: var(--theme-background);
+      border-top: 1px solid #e5e7eb;
+      padding: 16px 24px;
+    }
+  }
+}
+
+.ug-grid-footer {
+  background: var(--theme-background);
+  border-top: 1px solid #e5e7eb;
+}
+
+// Modern Card Styles - More beautiful design
+.ug-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.ug-card-item {
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: var(--theme-border-radius); // Using theme variable
+  box-shadow: var(--theme-shadow); // Using theme variable
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px;
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
+    min-height: 60px;
+  }
+
+  &__icon {
+    clr-icon {
+      width: 24px;
+      height: 24px;
+      color: var(--theme-primary);
+    }
+  }
+
+  &__title {
+    font-weight: 700;
+    flex: 1 1 auto;
+    font-size: 18px;
+    color: var(--theme-text);
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__footer {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background: var(--theme-background);
+  }
+}
+
+.ug-kv {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  
+  span {
+    color: var(--theme-text-secondary);
+  }
+
+  strong {
+    color: var(--theme-text);
+    font-weight: 500;
+    text-align: right;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Theme the card footer buttons
+.ug-card-item__footer .ug-btn {
+  border-radius: 10px;
+  flex: 1;
+  justify-content: center;
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-outline {
+  border: 1px solid var(--theme-secondary);
+  color: var(--theme-secondary);
+  background: transparent;
+  
+  &:hover {
+    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+    border-color: var(--theme-secondary);
+    color: var(--theme-secondary);
+  }
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-error {
+  background: var(--theme-error, #ef4444);
+  color: #fff;
+  border-color: var(--theme-error, #ef4444);
+  
+  &:hover {
+    background: var(--theme-error-dark, #dc2626);
+    border-color: var(--theme-error-dark, #dc2626);
+    transform: translateY(-2px);
+  }
+}
+
+// Table view action buttons
+.ug-action-item {
+  @extend .ug-btn;
+  @extend .ug-btn-ghost;
+  @extend .ug-btn-sm;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 4px;
+  text-align: left;
+  
+  clr-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  
+  &.ug-btn-error {
+    color: var(--theme-error, #ef4444);
+    
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+}
+
+// Ensure action overflow is visible
+::ng-deep .datagrid-action-overflow {
+  button.action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    padding: 8px 12px;
+    
+    clr-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Status Badges
+.ug-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ug-status-enabled {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
+  color: #10b981;
+}
+
+.ug-status-disabled {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
+  color: #ef4444;
+}
+
+// Form Styles
+.ug-form-group {
+  margin-bottom: 20px;
+}
+
+.ug-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+
+.ug-form-input, .ug-form-select {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+  margin-bottom: 0;
+  font-family: var(--theme-font-primary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+  }
+
+  &:disabled {
+    background: var(--theme-background);
+    color: var(--theme-text-secondary);
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+
+  &::placeholder {
+    color: var(--theme-text-secondary);
+  }
+}
+
+.ug-form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px 12px;
+  padding-right: 40px;
+  appearance: none;
+}
+
+.ug-form-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.required-field {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.ug-file-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: var(--theme-surface);
+  color: var(--theme-text);
+  
+  &::file-selector-button {
+    @extend .ug-btn;
+    @extend .ug-btn-secondary;
+    margin-right: 12px;
+    padding: 8px 16px;
+    border: none;
+  }
+}
+
+// Delete Modal Styles
+.ug-delete-header {
+  text-align: center;
+  padding: 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.ug-delete-icon {
+  color: #ef4444;
+  margin-bottom: 16px;
+}
+
+.ug-delete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--theme-text);
+  margin: 0 0 8px 0;
+}
+
+.ug-delete-subtitle {
+  font-size: 16px;
+  color: var(--theme-text-secondary);
+  margin: 0;
+}
+
+.ug-delete-details {
+  padding: 24px;
+}
+
+.ug-delete-detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ug-delete-detail-label {
+  font-weight: 500;
+  color: var(--theme-text-secondary);
+}
+
+.ug-delete-detail-value {
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.delete {
+  color: #ef4444;
+  text-align: center;
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.heading {
+  text-align: center;
+  margin-bottom: 24px;
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+// Modal Header
+::ng-deep .modal-header {
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px 16px 0 0 !important;
+  padding: 20px 24px !important;
+  
+  .modal-title {
+    color: white;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0;
+    font-family: var(--theme-font-secondary);
+  }
+  
+  .close {
+    color: white;
+    opacity: 0.8;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Modal Body
+::ng-deep .modal-body {
+  padding: 24px !important;
+}
+
+// Modal Footer
+::ng-deep .modal-footer {
+  padding: 20px 24px !important;
+  background: var(--theme-background);
+  border-radius: 0 0 16px 16px !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// Recaptcha Container Styles
+.recaptcha-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recaptcha-code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--theme-background);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  
+  b {
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// Toggle Styles
+.clr-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  label {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--theme-text);
+  }
+}
+
+// URL Field Styles
+.ug-form-input[type="url"] {
+  font-family: monospace;
+}
+// Responsive adjustments
+@media (max-width: 768px) {
+  .ug-hero {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    
+    &__content {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    &__actions {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .ug-toolbar {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .ug-search {
+    max-width: 100%;
+  }
+  
+  .ug-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .ug-card-item {
+    &__header {
+      flex-direction: column;
+      text-align: center;
+      
+      &__icon {
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+    
+    &__footer {
+      justify-content: center;
+    }
+  }
+.recaptcha-code {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .ug-btn {
+      align-self: flex-end;
+    }
+  }}
\ No newline at end of file
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.ts
new file mode 100644
index 0000000..f46c1ac
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.component.ts
@@ -0,0 +1,398 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Loginservice} from './Login.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 { Logincardvariable } from './Login_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';
+import { ActivatedRoute, Router } from '@angular/router';
+declare var JsBarcode: any; 
+@Component({
+  selector: 'app-Login',
+  templateUrl: './Login.component.html',
+  styleUrls: ['./Login.component.scss']
+})
+export class LoginComponent implements OnInit {
+  cardButton = Logincardvariable.cardButton;
+  cardmodeldata = Logincardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Logincardvariable.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 = 'Login_formCode'
+tableName = 'Login';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Loginservice,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+private csvService: CsvService,
+    private translate: TranslateService,
+    private themeService: ThemeService, 
+private excel: ExcelService,    private _fb: FormBuilder,
+ private router: Router,  
+    private route: ActivatedRoute  ) { }
+
+  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({
+username : [null],
+
+active : [true],
+
+password : [null],
+confirmpassword : [null],
+
+
+ 
+
+
+
+    }, {
+        validator: ConfirmedpasswordValidator('password', 'confirmpassword')
+
+  }); // 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 === "Login_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?.username || '').toString()).toLowerCase().includes(text) ||
+
+((g?.active || '').toString()).toLowerCase().includes(text) ||
+
+((g?.password || '').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();
+
+} 
+
+
+
+
+newpHidepassword: boolean = true;
+ newIconpassword: string = "eye"; 
+newShapeChangerpassword() {
+this.newpHidepassword = !this.newpHidepassword;  
+ if(this.newpHidepassword){
+this.newIconpassword = 'eye'   } else {     this.newIconpassword = 'eye-hide'   }
+} 
+
+ newaddpHidepassword: boolean = true;
+ newaddIconpassword: string = "eye";
+newaddChangerpassword() {   this.newaddpHidepassword = !this.newaddpHidepassword;
+ if(this.newaddpHidepassword){     this.newaddIconpassword = 'eye'   } else {
+  this.newaddIconpassword = 'eye-hide'   } }
+
+  goToDataM(){
+    this.router.navigate(['/cns-portal/datamanagement'],{ relativeTo: this.route });
+  }
+
+  
+downloadCSV(tableName): void {
+  this.mainService.downloadCSV(tableName).subscribe(response => {
+    const blob = new Blob([response], { type: 'application/octet-stream' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${tableName}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  });
+}
+  // 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 ConfirmedpasswordValidator(controlName: string, matchingControlName: string){
+  return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (matchingControl.errors && !matchingControl.errors.confirmedpasswordValidator) {
+          return;
+      }
+      if (control.value !== matchingControl.value) {
+          matchingControl.setErrors({ confirmedpasswordValidator: true });
+      } else {
+          matchingControl.setErrors(null);
+      }
+  }
+}
+
+
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.service.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.service.ts
new file mode 100644
index 0000000..e4a8874
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login.service.ts
@@ -0,0 +1,44 @@
+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';
+import baseUrl from 'src/app/services/api/helper';
+@Injectable({
+  providedIn: 'root'
+})
+export class Loginservice{
+  private baseURL = "Login/Login" ;  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);
+  }
+
+
+
+
+
+
+downloadCSV(tableName: string): Observable<Blob> {
+  const url = `${baseUrl}/api/template/download-csv?tableName=${tableName}`;
+  return this.http.get(url, { responseType: 'blob' })
+
+}// updateaction
+}
\ No newline at end of file
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login_cardvariable.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login_cardvariable.ts
new file mode 100644
index 0000000..bd7ee08
--- /dev/null
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/log/Login/Login_cardvariable.ts
@@ -0,0 +1,4 @@
+export const Logincardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}
\ No newline at end of file
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
index fcf1339..c43f083 100644
--- a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
@@ -1,3 +1,5 @@
+import { BillComponent } from './BuilderComponents/basic/Bill/Bill.component';
+import { LoginComponent } from './BuilderComponents/log/Login/Login.component';
 
 
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -302,6 +304,12 @@ const routes: Routes = [
 
 
       // buildercomponents
+{path:'Bill',component:BillComponent},
+
+
+{path:'Login',component:LoginComponent},
+
+
 
 
 
diff --git a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
index 7b91f6a..3ba1fc4 100644
--- a/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
+++ b/shopmanagement-front-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
@@ -1,3 +1,5 @@
+import { BillComponent } from './BuilderComponents/basic/Bill/Bill.component';
+import { LoginComponent } from './BuilderComponents/log/Login/Login.component';
 
 
 import { CommonModule } from '@angular/common';
@@ -224,6 +226,12 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
 
 
     // buildercomponents
+BillComponent,
+
+
+LoginComponent,
+
+
 
 
     ThemeCustomizationComponent,
diff --git a/shopmanagement-hbs-d/authsec_mysql/mysql/wf_table/wf_table.sql b/shopmanagement-hbs-d/authsec_mysql/mysql/wf_table/wf_table.sql
new file mode 100755
index 0000000..ec3e69b
--- /dev/null
+++ b/shopmanagement-hbs-d/authsec_mysql/mysql/wf_table/wf_table.sql
@@ -0,0 +1,4 @@
+CREATE TABLE hbs.Login(id BIGINT NOT NULL AUTO_INCREMENT, active VARCHAR(400), username VARCHAR(400), password VARCHAR(400),  PRIMARY KEY (id));
+
+CREATE TABLE hbs.Bill(id BIGINT NOT NULL AUTO_INCREMENT, active VARCHAR(400), description VARCHAR(400), phoneno VARCHAR(400), date Date, name VARCHAR(400),  PRIMARY KEY (id));
+