added separate instance for non bpo integrated webapp

WebGde/WebContent/NoBpo/WebGde-Widgets/BPO/bpoService.js

+import { BPO_URL, CURRENT_NODE , NEXT_NODE , EXCEPTION_NODE} from "../config.js";
+
+let urlReturnElement = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/{{ELEMENT_ID}}/return`;
+let urlGetWorkload= BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/workload?sort=priority`;
+let urlGetReturnedElement = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/returned-elements/{{ELEMENT_ID}}`;
+let urlGetWaitingElement = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/elements`;
+let urlCompleteToNextNode = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_NODE}/{{ELEMENT_ID}}/?nextNodeId=${NEXT_NODE}`
+let urlGetWorkersCurrentNode = BPO_URL + `req/nodes/${CURRENT_NODE}/workers`
+let urlRejectElement = BPO_URL +  `req/nodes/${CURRENT_NODE}/elements/{{elementId}}?newNodeId={{newNodeId}}`;
+let urlUpdateExtra = BPO_URL + `req/nodes/${CURRENT_NODE}/elements/{{elementId}}`;
+
+
+export function getUrlReturnElement(element_id) {
+    let url = urlReturnElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    url = url.replace("{{ELEMENT_ID}}", element_id);
+    return url;
+}
+
+export function getUrlGetWorkload() {
+    let url = urlGetWorkload.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    return url;
+}
+
+export function getUrlGetReturnedElement(element_id) {
+    let url = urlGetReturnedElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    url = url.replace("{{ELEMENT_ID}}", element_id);
+    return url;
+}
+
+export function getUrlGetWaitingElement() {
+    let url = urlGetWaitingElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    return url;
+}
+
+export function getUrlCompleteToNextNode(element_id) {
+    let url = urlCompleteToNextNode.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    url = url.replace("{{ELEMENT_ID}}", element_id);
+    return url;
+}
+
+export function getUrlGetWorkersCurrentNode() {
+    let url = urlGetWorkersCurrentNode.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
+    return url;
+}
+
+export function getRejectElement(){
+    let url = urlRejectElement.replace("{{elementId}}", sessionStorage.getItem("element_id"));
+    url = url.replace("{{newNodeId}}", EXCEPTION_NODE);
+    return url;
+}
+
+export function getUpdateExtra(){
+    let url = urlUpdateExtra.replace("{{elementId}}", sessionStorage.getItem("element_id"));
+    return url
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/BPO/gfsService.js

+import { GDE_URL } from "../config.js";
+
+export let urlGetIfExisting = GDE_URL + "/" + "get-if-existing";
+export let urlGetXml = GDE_URL + "/" + "get-xml";
+export let urlWriteXml = GDE_URL + "/" + "write-xml";
+export let urlUpdateEob = GDE_URL + "/" + "update-eob";
+export let urlUpdateException = GDE_URL + "/" + "update-exception";
+export let urlWriteMetrics = GDE_URL + "/" + "write-metrics";
+export let urlGetFields = GDE_URL + "/" + "get-fields";
+export let urlGetMobileFields = GDE_URL + "/" + "get-mobile-fields";
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/BPO/returnElement.js

+import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
+import { validateInput } from "../DataInputWidget/validateInput.js";
+import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js";
+import { createLoadingModal, removeLoadingModal } from "../LoadingModal/LoadingModal.js";
+import { PROJECT_CODE } from "../Submit/config.js";
+import { interval } from "../captureMetrics/captureMetrics.js";
+import { createConfirmationModal, createInfoModal, createModal } from "../genericPopup/genericPopup.js";
+import { BPO_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from "../globalVariable.js";
+import { getUrlReturnElement } from "./bpoService.js";
+import { returnForm } from "../Submit/submit.js";
+
+export async function returnElementBPO(elementId) {
+	try {
+		// Get current timestamp
+		const currentTimeStamp = Date.now();
+		const currentDate = new Date(currentTimeStamp);
+		const humanReadableTime = currentDate.toLocaleString();
+
+		// Save to session storage
+		sessionStorage.setItem("timeEnd", humanReadableTime);
+		
+		let response = await fetch(getUrlReturnElement(elementId), { method: "POST" });
+
+		if (response.ok) {
+			// If the response status is 200
+			console.log("RETURNED")
+
+			return { success: true, data: await response.json() };
+		} else {
+			// If the response status is not 200
+			return { success: false, error: `Error: ${response.status}` };
+		}
+	} catch (error) {
+		// Handle connection errors or other issues
+		console.error('Error:', error);
+		return { success: false, error: 'Connection error' };
+	}
+}
+
+
+async function returnElementLogout(elementId) {
+	let response = await fetch(getUrlReturnElement(elementId), { method: "POST" });
+
+	if (response.status == 200) {
+		console.log('Element Returned');
+	}
+	// else{
+	//     //PROMPT.createInfoPrompt(`Error ${response.status}: Returning element`);
+	//     logoutKeycloak();
+	// }
+
+	return response.status;
+}
+
+
+
+function returnSaveXML() {
+	var elementId = sessionStorage.getItem("element_id");
+
+	let doctype;
+	let section;
+
+	// Validate all elements again
+	for (let element of document.getElementById("fields").elements) {
+		if (element.style.display === 'none') continue
+		const { id, value, type } = element
+		const { valid } = validateInput(id, value)
+
+		// Skip submit button
+		if (type === 'submit') continue
+		if (id === 'DocType') {
+			doctype = element.options[element.selectedIndex].text;
+			continue;
+		}
+		if (id === 'Section') {
+			section = element.options[element.selectedIndex].text;
+			continue;
+		}
+	}
+
+	let filePaths = JSON.parse(sessionStorage.getItem("dir_files"));
+
+	let xmlData = {
+		"projCode": PROJECT_CODE,
+		"userId": sessionStorage.getItem("user_id"),
+		"elementId": elementId,
+		"schema": SCHEMA_FILE_PATH,
+		"totalRec": "1",
+		"maxRec": "1",
+		"totalKeystroke": "",
+		"procTime": "",
+		"procDuration": "",
+		"eob": "",
+		"exceptionRemark": "",
+		"recordNo": "1",
+		"totalSubRec": "1",
+		"maxSubRec": "1",
+		"imageName": "",
+		"subRecordNo": "1",
+		"eor": "N",
+		"fields": fields,
+		"outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB"),
+		"doctype": doctype,
+		"section": section
+	}
+
+	updateXMLException(xmlData);
+	return false;
+}
+
+/*export function createReturnWindow() {
+	async function returnButtonFunction() {
+		createLoadingModal("Returning Element", "Returning Element", null, null, null);
+		let response = await returnElementBPO(sessionStorage.getItem("element_id"));
+		if (response.success) {
+			let submitStatus;
+			submitStatus = await submitForm(e)
+			if (submitStatus) {
+				console.log("SUBMITTED")
+				sessionStorage.removeItem("section");
+				sessionStorage.removeItem("doctype");
+				removeLoadingModal();
+				goBackToElementListViewer();
+			} else {
+				console.log("LOL")
+			}
+
+		} else {
+			function errorReturn() {
+				removeLoadingModal();
+			}
+			createInfoModal(errorReturn, 'Error', `${response.error} while returning the element.`);
+		}
+	}
+
+	createConfirmationModal(returnButtonFunction, "Return to Item List Menu?", "Any unsubmitted inputs and items will be lost.");
+}*/
+
+export function createReturnWindow() {
+	async function returnButtonFunction(e) {
+		createLoadingModal("Returning Element", "Returning Element", null, null, null);
+		let submitStatus;
+		submitStatus = await returnForm(e);
+		if (submitStatus) {
+			let response = await returnElementBPO(sessionStorage.getItem("element_id"));
+			if (response){
+				sessionStorage.removeItem("section");
+				sessionStorage.removeItem("doctype");
+				removeLoadingModal();
+				goBackToElementListViewer();
+			} else {
+				createInfoModal(errorReturn, 'Error', `${response.error} while returning the element.`);
+			}
+		} else {
+			removeLoadingModal();
+			async function returnButtonFunction(){
+				createLoadingModal("Returning Element", "Returning Element", null, null, null);
+				await returnElementBPO(sessionStorage.getItem("element_id"));
+				removeLoadingModal();
+				goBackToElementListViewer();
+			}
+			createConfirmationModal(returnButtonFunction, "Error on highlighted fields. Return anyway?", null);
+		}
+		// createLoadingModal("Returning Element", "Returning Element", null, null, null);
+		// let response = await returnElementBPO(sessionStorage.getItem("element_id"));
+		// if (response.success) {
+		// 	let submitStatus;
+		// 	submitStatus = await returnForm(e);
+		// 	if (submitStatus) {
+		// 		sessionStorage.removeItem("section");
+		// 		sessionStorage.removeItem("doctype");
+		// 		removeLoadingModal();
+		// 		goBackToElementListViewer();
+		// 	} else {
+		// 		sessionStorage.removeItem("section");
+		// 		sessionStorage.removeItem("doctype");
+		// 		removeLoadingModal();
+		// 		goBackToElementListViewer();
+		// 	}
+		// } else {
+		// 	function errorReturn() {
+		// 		removeLoadingModal();
+		// 	}
+		// 	createInfoModal(errorReturn, 'Error', `${response.error} while returning the element.`);
+		// }
+	}
+
+	createConfirmationModal(returnButtonFunction, "Return to Item List Menu?", null);
+}
+
+
+function createButtonElem(className, buttonName, icon) {
+	/* let buttonElem = document.createElement("button"); */
+	let buttonElem;
+	buttonElem = document.createElement("button");
+	buttonElem.classList.add(className);
+	buttonElem.textContent = buttonName;
+	return buttonElem;
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/BPO/updateEOB.php

+<?php
+$projCode = json_decode($_POST['data'], true)["projCode"];
+$userId = json_decode($_POST['data'], true)["userId"];
+$elementId = json_decode($_POST['data'], true)["elementId"];
+$schema = json_decode($_POST['data'], true)["schema"];
+$totalRec = json_decode($_POST['data'], true)["totalRec"];
+$maxRec = json_decode($_POST['data'], true)["maxRec"];
+$totalKeystroke = json_decode($_POST['data'], true)["totalKeystroke"];
+$procTime = json_decode($_POST['data'], true)["procTime"];
+$procDuration = json_decode($_POST['data'], true)["procDuration"];
+$eob = json_decode($_POST['data'], true)["eob"];
+$exceptionRemark = json_decode($_POST['data'], true)["exceptionRemark"];
+$recordNo = json_decode($_POST['data'], true)["recordNo"];
+$totalSubRec = json_decode($_POST['data'], true)["totalSubRec"];
+$maxSubRec = json_decode($_POST['data'], true)["maxSubRec"];
+$imageName = json_decode($_POST['data'], true)["imageName"];
+$subRecordNo = json_decode($_POST['data'], true)["subRecordNo"];
+$eor = json_decode($_POST['data'], true)["eor"];
+$fields = json_decode($_POST['data'], true)["fields"];
+$outputDir = json_decode($_POST['data'], true)["outputDir"];
+$doctype = json_decode($_POST['data'], true)["doctype"];
+$section = json_decode($_POST['data'], true)["section"];
+
+$dom = new DOMDocument('1.0', 'ISO-8859-1');
+
+$dom->preserveWhiteSpace = false;
+$dom->load($outputDir);
+
+$root = $dom->getElementsByTagName($projCode)->item(0);
+$dom->getElementsByTagName('eob')->item(0)->nodeValue = "Y";
+$dom->formatOutput = true;
+
+file_put_contents($outputDir, preg_replace_callback('/^( +)</m', 
+    function($a) { 
+        return str_repeat(' ',intval(strlen($a[1]) / 2) * 4).'<';
+    }, $dom->saveXML()));
+
+echo $dom->saveXML();
+?>

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/AndroidInterface/androidInterface.js

+export function imageCapture(key) {
+    // Call Android function via javaScript interface
+    window.ImageCaptureInterface.captureImage(key);
+}
+
+export function videoCapture(key){
+    window.VideoCaptureInterface.captureVideo(key);
+}
+
+export function selfieCapture(key) {
+    // Call Android function via javaScript interface
+    window.ImageCaptureInterface.captureSelfie(key);
+}
+
+export function fingerprintCapture(key){
+    window.ScannerInterface.scannerTest(key);
+}
+
+export async function getLocation(){
+    await window.LocationHandlerInterface.setupLocation();
+}
+
+export async function getDeviceId(){
+    return await window.MobileGdeJavascriptInterface.getDeviceId();
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/Assets/Camera-UI.svg

+<svg id="Camera_UI" data-name="Camera UI" xmlns="http://www.w3.org/2000/svg" width="232" height="40" viewBox="0 0 232 40">
+  <g id="Camera_Button" data-name="Camera Button">
+    <rect id="Rectangle_18" data-name="Rectangle 18" width="232" height="40" rx="8" fill="#006ba6"/>
+    <text id="Camera" transform="translate(139.089 24.522)" fill="#fff" font-size="16" font-family="Open Sans-Bold, Open Sans" font-weight="700"><tspan x="-30" y="0">Camera</tspan></text>
+    <path id="Icon_awesome-camera" data-name="Icon awesome-camera" d="M20.035,6.633V17.9a1.879,1.879,0,0,1-1.878,1.878H1.878A1.879,1.879,0,0,1,0,17.9V6.633A1.879,1.879,0,0,1,1.878,4.754H5.322L5.8,3.467A1.876,1.876,0,0,1,7.56,2.25h4.911a1.876,1.876,0,0,1,1.757,1.217l.485,1.287h3.443A1.879,1.879,0,0,1,20.035,6.633Zm-5.322,5.635a4.7,4.7,0,1,0-4.7,4.7A4.7,4.7,0,0,0,14.713,12.267Zm-1.252,0a3.443,3.443,0,1,1-3.443-3.443A3.449,3.449,0,0,1,13.461,12.267Z" transform="translate(65.089 8.985)" fill="#fff"/>
+  </g>
+</svg>

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/Assets/Icon-awesome-camera.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="20.035" height="17.53" viewBox="0 0 20.035 17.53">
+  <path id="Icon_awesome-camera" data-name="Icon awesome-camera" d="M20.035,6.633V17.9a1.879,1.879,0,0,1-1.878,1.878H1.878A1.879,1.879,0,0,1,0,17.9V6.633A1.879,1.879,0,0,1,1.878,4.754H5.322L5.8,3.467A1.876,1.876,0,0,1,7.56,2.25h4.911a1.876,1.876,0,0,1,1.757,1.217l.485,1.287h3.443A1.879,1.879,0,0,1,20.035,6.633Zm-5.322,5.635a4.7,4.7,0,1,0-4.7,4.7A4.7,4.7,0,0,0,14.713,12.267Zm-1.252,0a3.443,3.443,0,1,1-3.443-3.443A3.449,3.449,0,0,1,13.461,12.267Z" transform="translate(0 -2.25)" fill="#fff"/>
+</svg>

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/Assets/Icon-ionic-ios-calendar.svg

+<svg id="Icon_ionic-ios-calendar" data-name="Icon ionic-ios-calendar" xmlns="http://www.w3.org/2000/svg" width="18.784" height="17.339" viewBox="0 0 18.784 17.339">
+  <path id="Path_9" data-name="Path 9" d="M19.79,5.625H17.984V6.709a.362.362,0,0,1-.361.361H16.9a.362.362,0,0,1-.361-.361V5.625H7.87V6.709a.362.362,0,0,1-.361.361H6.786a.362.362,0,0,1-.361-.361V5.625H4.619A1.811,1.811,0,0,0,2.813,7.431V19.713a1.811,1.811,0,0,0,1.806,1.806H19.79A1.811,1.811,0,0,0,21.6,19.713V7.431A1.811,1.811,0,0,0,19.79,5.625Zm.361,13.546a.906.906,0,0,1-.9.9H5.16a.906.906,0,0,1-.9-.9V11.043a.362.362,0,0,1,.361-.361H19.79a.362.362,0,0,1,.361.361Z" transform="translate(-2.813 -4.18)" fill="rgba(15,40,83,0.43)"/>
+  <path id="Path_10" data-name="Path 10" d="M8.945,4.111a.362.362,0,0,0-.361-.361H7.861a.362.362,0,0,0-.361.361V5.195H8.945Z" transform="translate(-3.888 -3.75)" fill="rgba(15,40,83,0.43)"/>
+  <path id="Path_11" data-name="Path 11" d="M22.07,4.111a.362.362,0,0,0-.361-.361h-.722a.362.362,0,0,0-.361.361V5.195H22.07Z" transform="translate(-6.898 -3.75)" fill="rgba(15,40,83,0.43)"/>
+</svg>

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/Assets/Icon-ionic-md-time.svg

+<svg id="Icon_ionic-md-time" data-name="Icon ionic-md-time" xmlns="http://www.w3.org/2000/svg" width="18.737" height="18.737" viewBox="0 0 18.737 18.737">
+  <path id="Path_12" data-name="Path 12" d="M12.172,2.813a9.369,9.369,0,1,0,9.378,9.369A9.365,9.365,0,0,0,12.172,2.813Zm.009,16.863a7.495,7.495,0,1,1,7.495-7.495A7.495,7.495,0,0,1,12.181,19.676Z" transform="translate(-2.813 -2.813)" fill="rgba(15,40,83,0.43)"/>
+  <path id="Path_13" data-name="Path 13" d="M15.187,8.906H13.781v5.621l4.919,2.95.7-1.153-4.216-2.5Z" transform="translate(-5.35 -4.222)" fill="rgba(15,40,83,0.43)"/>
+</svg>

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/Assets/delete-button-svgrepo-com.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#006BA6" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 482.428 482.429"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098
+			c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117
+			h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828
+			C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879
+			C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096
+			c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266
+			c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979
+			V115.744z"/>
+		<path d="M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07
+			c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z"/>
+		<path d="M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07
+			c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z"/>
+		<path d="M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07
+			c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/Assets/fingerprint-simple-fill-svgrepo-com.svg

+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#FFFFFF" width="800px" height="800px" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg">
+  <path d="M183.98242,128.0094a246.6394,246.6394,0,0,1-18.53418,94.23926,8.00032,8.00032,0,0,1-14.79883-6.084,230.70455,230.70455,0,0,0,17.333-88.15527,8,8,0,1,1,16,0Zm-56-40a40.06442,40.06442,0,0,1,29.81445,13.333,8.00032,8.00032,0,1,0,11.92188-10.67188A56.00093,56.00093,0,0,0,71.98242,128.0094,136.088,136.088,0,0,1,55.00586,193.861a7.99993,7.99993,0,1,0,13.99219,7.75977A152.12935,152.12935,0,0,0,87.98242,128.0094,40.04583,40.04583,0,0,1,127.98242,88.0094Zm-58.665-25.59473A7.99966,7.99966,0,1,0,58.64746,50.4928a104.15766,104.15766,0,0,0-34.665,77.5166,87.28655,87.28655,0,0,1-7.97558,36.66308,7.9997,7.9997,0,1,0,14.541,6.67383,103.15936,103.15936,0,0,0,9.43457-43.33691A88.1429,88.1429,0,0,1,69.31738,62.41467Zm58.665-38.40527a103.7636,103.7636,0,0,0-34.667,5.91992,8.00025,8.00025,0,0,0,5.332,15.08594,88.06652,88.06652,0,0,1,117.335,82.99414,281.58357,281.58357,0,0,1-6.93847,62.22851,8.00013,8.00013,0,1,0,15.60351,3.541,297.64323,297.64323,0,0,0,7.335-65.76953A104.11791,104.11791,0,0,0,127.98242,24.0094Zm-14.084,176.72949a8.00188,8.00188,0,0,0-10.60742,3.93359c-1.92676,4.19727-4.044,8.38086-6.291,12.43555a7.99945,7.99945,0,1,0,13.99219,7.75781c2.44336-4.40625,4.74511-8.95507,6.83984-13.51953A7.999,7.999,0,0,0,113.89844,200.73889Zm14.07226-80.73047a8.00039,8.00039,0,0,0-8,8,184.6862,184.6862,0,0,1-5.79687,46.00586,8.00008,8.00008,0,1,0,15.49512,3.98828,200.70138,200.70138,0,0,0,6.30175-49.99414A8.00039,8.00039,0,0,0,127.9707,120.00842Z"/>
+</svg>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/DBLookup/DBLookup.js

+import { DB_URL } from "../config.js";
+
+
+
+export const fetchOptionsDB = async (requestBody) => {
+    try {
+      const authToken = sessionStorage.getItem('token');
+      const response = await fetch(DB_URL, {
+        method: 'POST',
+        body: JSON.stringify(requestBody),
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${authToken}`
+        }
+      });
+      const data = await response.json();
+      return data.tableData || [];
+    } catch (error) {
+      throw error;
+    }
+  };
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/DataInputWidget.css

+@font-face {
+    font-family: 'Open Sans';
+    src: url('https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2') format('woff2');
+    /* Add additional sources or font formats for better compatibility */
+    font-weight: normal;
+    font-style: normal;
+}
+
+html, body {
+	min-height: 100vh;
+	height: 100%;
+	margin: 0;
+	background-color: #C7DFEB;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;
+	overflow-y: hidden;
+}
+
+* {
+	-webkit-font-smoothing: auto;
+	font-size: 14px;
+	/* letter-spacing: 0.1em; */
+	text-rendering: optimizeLegibility;
+	font-weight: normal;
+	font-family: Open Sans, sans-serif;
+	font-style: normal;
+}
+
+h1 {
+	display: none;
+}
+
+h2 {
+	display: none;
+}
+
+h3 {
+	display: none;
+}
+
+.web-gde-container {
+	width: 100vw;
+	height: 100vh;
+}
+
+#imageViewerContainer {
+	display: none;
+}
+
+.sidebar {
+	position: absolute;
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	background-color: #C7DFEB;
+}
+
+.remove-button {
+	display: inline-block;
+	padding: 2px 6px;
+	background-color: red;
+	color: white;
+	font-size: 16px;
+	cursor: pointer;
+	border-radius: 50%;
+	margin-left: 5px;
+}
+
+#input-field-container {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	background-color: #C7DFEB;
+	justify-content: space-between;
+}
+
+.dash {
+	display: unset;
+	align-self: center;
+	padding: 6px;
+}
+
+.fieldContainer {
+	/* layout config */
+	display: flex;
+	flex-direction: column;
+	border: none;
+	outline: none;
+	padding: 0px 4px 0px 4px;
+	flex-wrap: nowrap;
+}
+
+#fields *:not([type=submit]):focus {
+	background-color: yellow;
+}
+
+.image-capture, .fingerprint-capture, .file-upload {
+	width: 100%;
+	border-style: none;
+	cursor: pointer;
+	align-items: center;
+	height: auto;
+}
+
+#fields {
+	/* margin-left: 17px;
+		margin-right: 17px; */
+	padding: 18px;
+	/* border-radius: 15px; */
+	background-color: #C7DFEB;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	flex: unset;
+	max-height: 100vh;
+	border-style: none;
+
+}
+
+#fields>div {
+	background-color: #C7DFEB;
+	border: none;
+}
+
+.submitButtons {
+	font-weight: 600;
+	display: block;
+	margin: auto;
+	font-size: 13px;
+	width: 93px;
+	margin-top: 10px;
+	margin-bottom: 15px;
+	cursor: pointer;
+	background-color: white;
+	padding: 10px;
+	width: 100%;
+	border-radius: 5px;
+	outline: none;
+	border: none;
+	font-size: 16px;
+	box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+	-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+	-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+}
+
+@media only screen and (max-width: 530px) {
+	.date-range {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		/* padding: 20px 0px 20px 0px; */
+		/* border-style: solid;
+        border-width: thin;
+        border-color: gray;
+        background-color:#e7e7e7;
+        */
+	}
+}
+
+.dash {
+	display: unset;
+	align-self: center;
+	padding: 6px;
+}
+
+.date-range {
+	display: flex;
+	justify-content: space-between;
+}
+
+.dateContainer {
+	width: 100%;
+}
+
+input:read-only {
+    background-color: #eeeeee; /* Change background color */
+    border-color: #ddd; /* Change border color */
+    cursor: not-allowed; /* Change cursor */
+}
+
+textarea:disabled {
+    background-color: #eeeeee; /* Change background color */
+    border-color: #ddd; /* Change border color */
+    cursor: not-allowed; /* Change cursor */
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+}
+
+input[type="date"] {
+    background-image: url('Assets/Icon-ionic-ios-calendar.svg');
+    background-position: left center;
+    background-repeat: no-repeat;
+	background-size: 18px;
+	background-position: 13px;
+	padding-left: 44px !important;
+}
+
+input[type="time"]::-webkit-inner-spin-button,
+input[type="time"]::-webkit-calendar-picker-indicator {
+    display: none;
+}
+
+input[type="time"]{
+	background-image: url('Assets/Icon-ionic-md-time.svg');
+	background-position: left center;
+    background-repeat: no-repeat;
+	background-size: 18px;
+	background-position: 13px;
+	padding-left: 44px !important;
+}
+
+label {
+	font-size: 16px;
+	font-weight: 700;
+}
+
+.asterisk {
+	color: #ff3333;
+}
+
+.captureButtons {
+	display: inline-block;
+	width: 100%;
+	overflow-x: clip;
+	flex-wrap: nowrap;
+	flex-grow: 1;
+	border-radius: 8px;
+	background-color: white;
+	border-style: solid;
+	border-width: 0.1cm;
+	border-color: #d4d2d2;
+}
+
+.labelContainer {
+	width: 100%;
+	padding: 2px;
+	margin-top: 5px;
+	margin-left: 10px;
+}
+
+.titleContainer{
+	margin-left: 0px !important;
+}
+
+.title{
+	font-size: 20px !important;
+}
+
+.inputContainer {
+	display: inline-block;
+	width: 100%;
+	overflow-x: clip;
+	flex-wrap: nowrap;
+	flex-grow: 1;
+	border-radius: 8px;
+	padding: 1px;
+}
+
+input:focus, textarea:focus {
+	background-color: yellow;
+	border: 0px;
+	border-radius: 8px;
+}
+
+input[type=text], input[type=date], input[type=time], textarea {
+	width: 100%;
+	/* height: 25px; */
+	padding: 11px 16px;
+	border-style: none;
+    border-radius: 8px;
+}
+
+input[type=checkbox], input[type=radio] {
+	width: 23px;
+	height: 23px;
+	border: none !important;
+	margin-right: 15px;
+	margin-top: 1px;
+}
+
+.radio-like-checkbox {
+	display: flex;
+	padding: 3px;
+}
+
+.radio-like-checkbox input[type="radio"]{
+	min-width: 23px;
+}
+
+.checkbox {
+	display: flex;
+	padding: 3px;
+}
+
+.checkbox input[type="checkbox"] {
+    min-width: 23px;
+}
+
+input[type=file]::file-selector-button {
+	padding: 5px 10px 5px 10px;
+	border-radius: 2px;
+	border: none;
+	outline: none;
+	background-color: #00a8c0;
+	color: white;
+}
+
+input[type=file] {
+	width: 100%;
+	padding: 5px;
+}
+
+input[type=file]:hover {
+	background-color: #cecccc;
+	z-index: 1;
+}
+
+.buttonsContainer {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-capture .icon{
+    width: 18px; /* Adjust the width of the icon */
+    height: 18px; /* Adjust the height of the icon */
+    display: inline-block;
+	margin-right: 30px;
+	background-repeat: no-repeat;
+    background-size: contain;
+	background-position: center center;
+    background-image: url('Assets/Icon-awesome-camera.svg'); /* Replace with the actual path to your icon */
+}
+
+.image-capture button {
+	width: 100%;
+	border-radius: 8px;
+	display: flex;
+    justify-content: center;
+	background-color: #006BA6;
+	border-style: none;
+	color: white;
+	padding: 10px 50px;
+    font-size: 14px;
+	font-weight: bold;
+	overflow: hidden;
+}
+
+.image-container {
+	background-color: #a0c4dc;
+	padding: 8px;
+	border-radius: 8px;
+	border-style: solid;
+	border-color: #5da1c6;
+	display: flex;
+	justify-content: space-between;
+}
+
+.thumbnail {
+	height: 40px;
+	width: 40px;
+	border-radius: 4px;
+}
+
+.file-details {
+	width: 60%;
+}
+
+.file-name {
+	color: #0f2853;
+	overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.file-size {
+	color: #678aa7;
+}
+
+.close-icon-container {
+    width: 40px;
+    height: 40px;
+    background-color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-icon {
+	background-image: url('Assets/delete-button-svgrepo-com.svg');
+	background-repeat: no-repeat;
+    background-size: contain;
+	background-position: center center;
+	width: 18px;
+	height: 18px;
+}
+
+.fingerprint-capture button {
+	width: 100%;
+	border-radius: 8px;
+	display: flex;
+    justify-content: center;
+	background-color: #006BA6;
+	border-style: none;
+	color: white;
+	padding: 10px 50px;
+    font-size: 14px;
+	font-weight: bold;
+	overflow: hidden;
+}
+
+
+.fingerprint-capture .icon{
+	width: 18px; /* Adjust the width of the icon */
+    height: 18px; /* Adjust the height of the icon */
+    display: inline-block;
+	margin-right: 30px;
+	background-repeat: no-repeat;
+    background-size: contain;
+	background-position: center center;
+    background-image: url('Assets/fingerprint-simple-fill-svgrepo-com.svg')
+}
+
+.dropdown-content {
+	/* padding: 10px; */
+	border-style: none;
+}
+
+select {
+	width: 100%;
+	border-style: none;
+    border-radius: 8px;
+    background-color: white;
+	padding: 11px 16px;
+	color: #444;
+}
+
+select::-ms-expand {
+    display: none;
+}
+
+
+.select2-selection--single {
+    border-style: none !important;
+    border-radius: 8px !important;
+    height: auto !important;
+    padding: 11px 16px !important;
+}
+
+.select2-container{
+	width: 100% !important;
+}
+
+.select2-selection__rendered{
+    line-height: normal !important;
+    padding: 0px !important;
+}
+.select2-selection__arrow{
+    top: 50% !important;
+    right: 10px !important;
+    transform: translateY(-50%) !important;
+}
+
+.select2-selection__arrow b {
+    border-left: 5.175px solid transparent !important;
+    border-right: 5.175px solid transparent !important;
+    border-top: 6px solid #000 !important;
+}
+textarea {
+	resize: none;
+	padding: 20px;
+}
+
+#text-area {
+	width: 91%;
+	font-size: 11px;
+	padding: 9px 9px;
+	margin-left: 15px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+	height: 103px;
+}
+
+.input-invalid {
+	border-color: #ff3333 !important;
+	border-style: solid !important;
+	border-width: thin;
+	border-radius: 8px;
+}
+
+.field-error{
+	color: #ff3333;
+	padding-left: 20px;
+	font-size: 14px;
+	font-style: italic;
+}
+
+.input-valid {
+	/* border-color: #000000 !important; */
+	border-style: none;
+	border-radius: 8px;
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/FingerprintCapture/captureFingerprint.js

+export function processFingerprint(key, filename) {
+	const form = document.getElementById('fields');
+	const img = document.getElementById(`${key}_zz`);
+	const thumb = document.getElementById(`${key}_thumbnail`);
+	const filenameElement = document.getElementById(`${key}_fname`);
+	const x = document.getElementById(`${key}_x`);
+    const filenameString = filename;
+
+	// Create hidden inputs for fname and file content
+	const hiddenFnameInput = document.createElement('input');
+	hiddenFnameInput.setAttribute('id', `${key}`);
+	hiddenFnameInput.setAttribute('type', 'hidden');
+	hiddenFnameInput.setAttribute('name', 'hidden_fname');
+	form.appendChild(hiddenFnameInput);
+
+	const hiddenFileContentInput = document.createElement('input');
+	hiddenFileContentInput.setAttribute('id', `${key}`);
+	hiddenFileContentInput.setAttribute('type', 'hidden');
+	hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
+	form.appendChild(hiddenFileContentInput);
+
+	img.style.display = 'inline';
+	img.style.width = '100%'; // Set maximum width to 100% of the container
+	img.style.height = '100%'; // Set maximum height to a specific value (adjust as needed)
+	thumb.style.display = 'none';
+
+	filenameElement.textContent = filenameString;
+	filenameElement.style.display = 'inline';
+
+	// Set the hidden inputs when a file is selected
+	hiddenFnameInput.value = filenameString;
+	hiddenFnameInput.display = '';
+	hiddenFileContentInput.value = img.src; // This will store the base64-encoded content of the file
+	hiddenFileContentInput.display = '';
+
+	document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
+	x.style.display = 'block';
+	x.style.position = 'absolute';
+	document.getElementById(`${key}_x`).addEventListener('click', () => {
+		img.style.display = 'none';
+		img.src = '';
+		thumb.style.display = 'none';
+		x.style.display = 'none';
+		filenameElement.style.display = 'none';
+		filenameElement.textContent = '';
+		document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+
+		// Clear the hidden fields
+		hiddenFnameInput.display = 'none';
+		hiddenFnameInput.value = '';
+		hiddenFileContentInput.display = 'none';
+		hiddenFileContentInput.value = '';
+	});
+}
+
+function base64ToBlob(base64Data) {
+    const byteCharacters = atob(base64Data);
+    const byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+        const slice = byteCharacters.slice(offset, offset + 512);
+        const byteNumbers = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+    }
+    return new Blob(byteArrays, { type: 'image/png' }); // Specify 'image/png' for PNG images
+}

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/ImageCapture/ImageCapture.css

+.image-viewer-overlay {
+    position: fixed;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background-color: rgba(0,0,0, .5);
+}
+
+.image-viewer-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100vw;
+    height: 100vw; /* Height set to match the width */
+    max-width: 100vh; /* Max height to prevent overflow */
+    max-height: 100vh;
+    background: rgba(0, 0, 0, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.image-viewer-inner {
+    position: relative;
+    height: auto;
+}
+
+#zoomed-image {
+    max-width: 100%;
+    max-height: 100%;
+    transition: transform 0.3s ease;
+    overflow: auto;
+}
+
+#close-btn {
+    z-index: 20;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 40px;
+}

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/ImageCapture/captureImage.js

+import { createConfirmationModal } from "../../genericPopup/genericPopup.js";
+
+export function processCapture(key, imgFilename, imgFileSize) {
+	const form = document.getElementById('fields');
+	const img = document.getElementById(`${key}_zz`);
+	const filenameString = imgFilename;
+
+	// get image container
+	const container = document.getElementById(`${key}_outputContainer`);
+	container.style.display = 'flex';
+    container.classList.add('image-container');
+
+	// Create thumbnail preview on the left
+    const thumbnail = document.createElement('img');
+    thumbnail.classList.add('thumbnail');
+    thumbnail.id = `${key}_thumbnail`;
+    thumbnail.src = document.getElementById(`${key}_zz`).src;
+    container.appendChild(thumbnail);
+
+	// Add event listener to the thumbnail
+    thumbnail.addEventListener('click', function () {
+        openImageViewer(img.src);
+    });
+
+	// Create file details in the center
+    const detailsContainer = document.createElement('div');
+    detailsContainer.classList.add('file-details');
+
+    // File name
+    const fileName = document.createElement('div');
+	fileName.classList.add('file-name');
+	fileName.id = `${key}_fname`;
+    fileName.textContent = imgFilename;
+    detailsContainer.appendChild(fileName);
+
+    // File size
+    const fileSize = document.createElement('div');
+	fileSize.classList.add('file-size');
+    fileSize.textContent = `${imgFileSize}`;
+    detailsContainer.appendChild(fileSize);
+
+	// Append details container to the main container
+    container.appendChild(detailsContainer);
+
+	// Create delete icon container
+	const closeIconContainer = document.createElement('div');
+	closeIconContainer.classList.add('close-icon-container');
+	container.appendChild(closeIconContainer);
+
+	// Create delete icon
+	const closeIcon = document.createElement('span');
+	closeIcon.classList.add('x-icon', 'close-icon', 'x');
+	closeIcon.id = `${key}_x`;
+
+	// Append the close icon to the icon container
+	closeIconContainer.appendChild(closeIcon);
+
+	// Create hidden inputs for fname and file content
+	const hiddenFnameInput = document.createElement('input');
+	hiddenFnameInput.setAttribute('id', `${key}`);
+	hiddenFnameInput.setAttribute('type', 'hidden');
+	hiddenFnameInput.setAttribute('name', 'hidden_fname');
+	form.appendChild(hiddenFnameInput);
+
+	const hiddenFileContentInput = document.createElement('input');
+	hiddenFileContentInput.setAttribute('id', `${key}`);
+	hiddenFileContentInput.setAttribute('type', 'hidden');
+	hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
+	form.appendChild(hiddenFileContentInput);
+
+	// Set the hidden inputs when a file is selected
+	hiddenFnameInput.value = filenameString;
+	hiddenFnameInput.display = '';
+	hiddenFileContentInput.value = img.src; // This will store the base64-encoded content of the file
+	hiddenFileContentInput.display = '';
+
+	document.getElementById(`${key}_container`).style.display = 'none';
+
+	function deleteImage(){
+		img.src = '';
+		container.innerHTML = '';
+		container.style.display = 'none';
+		document.getElementById(`${key}_container`).style.display = 'block';
+
+		// Clear the hidden fields
+		hiddenFnameInput.remove();
+		hiddenFileContentInput.remove();
+	}
+
+	document.getElementById(`${key}_x`).addEventListener('click', ()=> {
+		createConfirmationModal(deleteImage, "Delete Image?")
+	});
+}
+
+function generateMediaFileName(userId) {
+	// Get the current timestamp
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = String(now.getMonth() + 1).padStart(2, '0');
+	const day = String(now.getDate()).padStart(2, '0');
+	const hours = String(now.getHours()).padStart(2, '0');
+	const minutes = String(now.getMinutes()).padStart(2, '0');
+	const seconds = String(now.getSeconds()).padStart(2, '0');
+
+	// Combine the parts to create the filename
+	const timestamp = `${year}${month}${day}${hours}${minutes}${seconds}`;
+	const fileName = `${userId}_${timestamp}.jpeg`;
+
+	return fileName;
+}
+
+export function insertBlobIntoInput(blob, filename, key) {
+    const input = document.getElementById(`${key}_attachedMedia`);
+
+    const file = new File([blob], filename);
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+
+    input.files = dataTransfer.files;
+}
+
+function openImageViewer(imageSrc) {
+	const overlay = document.createElement('div');
+	overlay.classList.add('image-viewer-overlay');
+
+    const container = document.createElement('div');
+    container.classList.add('image-viewer-container');
+
+    const closeBtn = document.createElement('div');
+    closeBtn.id = 'close-btn';
+    closeBtn.innerHTML = '×';
+    closeBtn.addEventListener('click', () => {
+      document.body.removeChild(overlay);
+    });
+
+    const image = document.createElement('img');
+    image.id = 'zoomed-image';
+    image.src = imageSrc;
+
+    container.appendChild(closeBtn);
+    container.appendChild(image);
+    overlay.appendChild(container);
+	document.body.appendChild(overlay);
+
+    let scale = 1;
+    let lastScale = 1;
+
+    const hammer = new Hammer(container);
+    hammer.get('pinch').set({ enable: true });
+
+    hammer.on('pinchstart pinchmove pinchend', function (e) {
+      if (e.type === 'pinchstart') {
+        lastScale = scale;
+      }
+
+      scale = Math.max(0.1, Math.min(lastScale * e.scale, 3));
+      updateTransform();
+    });
+
+    function updateTransform() {
+      const transformValue = `scale(${scale})`;
+      image.style.transform = transformValue;
+    }
+	
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/ImageCapture/validateImage.js

+import { schema } from "../generateFields.js";
+
+export const validateImage = (fieldID) => {
+
+    
+
+}
+
+export const getValidation = (fieldID) => {
+    // const { SECTION } = schema
+
+    let section = schema[sessionStorage.getItem("currentDoctype").replaceAll("_"," ")][sessionStorage.getItem("currentSection").replaceAll("_"," ")];
+    
+    try{
+        if (Object.keys(section).includes(fieldID)) return section[fieldID].validation;
+
+        return null;
+    } catch(err) {
+        return null
+    }
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/VideoCapture/captureVideo.js

+export function processVideoCapture(key, videoFilename){
+    const form = document.getElementById('fields');
+	const thumb = document.getElementById(`${key}_thumbnail`);
+	const filename = document.getElementById(`${key}_fname`);
+	const x = document.getElementById(`${key}_x`);
+    // const filenameString = generateMediaFileName(sessionStorage.getItem('user_id'));
+	const filenameString = videoFilename;
+
+	// Create hidden inputs for fname and file content
+	const hiddenFnameInput = document.createElement('input');
+	hiddenFnameInput.setAttribute('id', `${key}`);
+	hiddenFnameInput.setAttribute('type', 'hidden');
+	hiddenFnameInput.setAttribute('name', 'hidden_fname');
+	form.appendChild(hiddenFnameInput);
+
+	const hiddenFileContentInput = document.createElement('input');
+	hiddenFileContentInput.setAttribute('id', `${key}`);
+	hiddenFileContentInput.setAttribute('type', 'hidden');
+	hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
+	form.appendChild(hiddenFileContentInput);
+
+	thumb.style.display = 'inline';
+	thumb.style.width = '100%';
+	thumb.style.height = '100%';
+
+	filename.textContent = filenameString;
+	filename.style.display = 'inline';
+
+	// Set the hidden inputs when a file is selected
+	hiddenFnameInput.value = filenameString;
+	hiddenFnameInput.display = '';
+	hiddenFileContentInput.value = thumb.src; // This will store the base64-encoded content of the file
+	hiddenFileContentInput.display = '';
+
+	document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
+	x.style.display = 'block';
+	x.style.position = 'absolute';
+    document.getElementById(`${key}_x`).addEventListener('click', () => {
+		thumb.style.display = 'none';
+		x.style.display = 'none';
+		filename.style.display = 'none';
+		filename.textContent = '';
+		document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+
+		// Clear the hidden fields
+		hiddenFnameInput.display = 'none';
+		hiddenFnameInput.value = '';
+		hiddenFileContentInput.display = 'none';
+		hiddenFileContentInput.value = '';
+	});
+
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/XMLWriter/Global.js

+function JSettings()
+{
+	this.IE=document.all?true:false;
+	this.MouseX=_JSettings_MouseX;
+	this.MouseY=_JSettings_MouseY;
+	this.SrcElement=_JSettings_SrcElement;
+	this.Parent=_JSettings_Parent;
+	this.RunOnLoad=_JSettings_RunOnLoad;
+	this.FindParent=_JSettings_FindParent;
+	this.FindChild=_JSettings_FindChild;
+	this.FindSibling=_JSettings_FindSibling;
+	this.FindParentTag=_JSettings_FindParentTag;
+}
+function _JSettings_MouseX(e)
+{return this.IE?event.clientX:e.clientX;}
+function _JSettings_MouseY(e)
+{return this.IE?event.clientY:e.clientY;}
+function _JSettings_SrcElement(e)
+{return this.IE?event.srcElement:e.target;}
+function _JSettings_Parent(Node)
+{return this.IE?Node.parentNode:Node.parentElement;}
+function _JSettings_RunOnLoad(Meth){var Prev=(window.onload)?window.onload:function(){};window.onload=function(){Prev();Meth();};}
+function _JSettings_FindParent(Node, Attrib, Value)
+{var Root = document.getElementsByTagName("BODY")[0];
+Node = Node.parentNode;	while (Node != Root && Node.getAttribute(Attrib) != Value){Node=Node.parentNode;}
+if (Node.getAttribute(Attrib) == Value)	{return Node;} else	{return null;}}
+function _JSettings_FindParentTag(Node, TagName)
+{var Root = document.getElementsByTagName("BODY")[0];
+TagName=TagName.toLowerCase();
+Node = Node.parentNode;	while (Node != Root && Node.tagName.toLowerCase() != TagName){Node=Node.parentNode;}
+if (Node.tagName.toLowerCase() == TagName) {return Node;} else {return null;}}
+function _JSettings_FindChild(Node, Attrib, Value)
+{
+	if (Node.getAttribute)
+		if (Node.getAttribute(Attrib) == Value) return Node;
+
+	var I=0;
+	var Ret = null;
+	for (I=0;I<Node.childNodes.length;I++)
+	{
+		Ret = FindChildByAttrib(Node.childNodes[I]);
+		if (Ret) return Ret;
+	}
+	return null;
+}
+function _JSettings_FindSibling(Node, Attrib, Value)
+{
+	var Nodes=Node.parentNode.childNodes;
+	var I=0;
+	for (I=0;I<Nodes.length;I++)
+	{
+		if (Nodes[I].getAttribute)
+		{
+			if (Nodes[I].getAttribute(Attrib) == Value)
+			{return Nodes[I];}
+		}
+	}
+	return null;
+}
+
+var Settings = new JSettings();
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/XMLWriter/XMLWriter.js

+function XMLWriter()
+{
+    this.XML=[];
+    this.Nodes=[];
+    this.State="";
+    this.FormatXML = function(Str)
+    {
+        if (Str)
+            return Str.replace(/&/g, "&amp;").replace(/\"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        return ""
+    }
+    this.BeginNode = function(Name)
+    {
+        if (!Name) return;
+        if (this.State=="beg") this.XML.push(">");
+        this.State="beg";
+        this.Nodes.push(Name);
+        this.XML.push("<"+Name);
+    }
+    this.EndNode = function()
+    {
+        if (this.State=="beg")
+        {
+            this.XML.push("/>");
+            this.Nodes.pop();
+        }
+        else if (this.Nodes.length>0)
+            this.XML.push("</"+this.Nodes.pop()+">");
+        this.State="";
+    }
+    this.Attrib = function(Name, Value)
+    {
+        if (this.State!="beg" || !Name) return;
+        this.XML.push(" "+Name+"=\""+this.FormatXML(Value)+"\"");
+    }
+    this.WriteString = function(Value)
+    {
+        if (this.State=="beg") this.XML.push(">");
+        this.XML.push(this.FormatXML(Value));
+        this.State="";
+    }
+    this.Node = function(Name, Value)
+    {
+        if (!Name) return;
+        if (this.State=="beg") this.XML.push(">");
+        this.XML.push((Value=="" || !Value)?"<"+Name+"/>":"<"+Name+">"+this.FormatXML(Value)+"</"+Name+">");
+        this.State="";
+    }
+    this.Close = function()
+    {
+        while (this.Nodes.length>0)
+            this.EndNode();
+        this.State="closed";
+    }
+    this.ToString = function(){return this.XML.join("");}
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/XMLWriter/XML_Saver.js

+async function WriteForm(e,metrics,doctype,section) {
+    try {
+        var Frm=Settings.SrcElement(e);
+        var Nodes=Frm.elements;
+        const myArray = Object.values(metrics);
+        const lookup = schema[doctype][section]
+        localStorage.setItem("submit", "1");
+
+        if (IS_RETRIEVE_FROM_BPO == "Y") {
+            let fields = {};
+            for (var i=0;i<Nodes.length;i++) {     
+                if (Nodes[i].style.display === 'none') continue 
+                let fid = Nodes[i].id;
+                if (fid == 'DocType' || fid == 'Section' || fid == '' || fid == "submitButton") continue
+                fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value;
+            }
+
+            createOutputXml(fields, myArray, doctype, section);
+        } else {
+            const lookup = schema[doctype][section]
+            const myArray = Object.values(metrics);
+            localStorage.setItem("submit", "1");
+            var Frm=Settings.SrcElement(e);
+            var XML=new XMLWriter();
+
+            XML.WriteString('<?xml version="1.0" encoding="UTF-8" standalone="no"?>');
+            XML.BeginNode(Frm.name);
+            var Nodes=Frm.elements;
+            XML.Node("Image_Source_Path",File_Path);
+            XML.Node("No_of_Keystrokes",JSON.stringify(myArray[0]));
+            XML.Node("Processing_Time_Seconds",JSON.stringify(myArray[1]));
+            XML.Node("DocType", doctype);
+            XML.Node("Section", section);
+            
+            for (var i=0;i<Nodes.length;i++){     
+                if (Nodes[i].style.display === 'none') continue 
+                let fid = Nodes[i].id;
+                if (fid == 'DocType' || fid == 'Section' || fid == '') continue
+                XML.Node(Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka : fid, 
+                    Nodes[i].value);
+                // console.log(Nodes[i]);
+            }
+
+            XML.EndNode();
+            XML.Close();
+            var final_xml=XML.ToString().replace(/</g,"\n<").replace(/&lt;/g,"\<").replace(/&quot;/g,'"').replace(/&gt;/g,">").replace(/\n<\//g,"</").replace(/<\/xml>/g,"\n</xml>");
+
+            var myFile = new File([final_xml], sessionStorage.getItem('user_id') + "_" + File_Name + ".xml", {type: "text/plain;charset=utf-8"});
+            // saveAs(myFile);
+            let formData = new FormData(); 
+            formData.append("file", myFile);  
+            
+            let data = {};
+            sessionStorage.getItem('outputXmlDir') == null ? data.outputDir = null : data.outputDir = sessionStorage.getItem('outputXmlDir'); 
+
+            formData.append("data", JSON.stringify(data));
+            const outputXmlDir = await fetch('./src/XMLWriter/upload.php', {
+                method: "POST", 
+                body: formData
+            }); 
+            sessionStorage.setItem('outputXmlDir', await outputXmlDir.text());
+        }
+    }
+    catch(Err) {
+        alert("Error: " + Err.description);
+    }
+    return false;
+}

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/XMLWriter/upload.php

+<?php
+date_default_timezone_set('Asia/Manila');
+$t = time();
+
+$outputDir = json_decode($_POST['data'], true)["outputDir"];
+
+/* Get the name of the uploaded file */
+$filename = $_FILES['file']['name'];
+
+/* Choose where to save the uploaded file */
+if ($outputDir == null) {
+  $outputDir = "../../output/".substr($filename, 0, strpos($filename, "_"))."_".date("m-d-Y_H.i.s",$t);
+  mkdir($outputDir);
+}
+
+$location = $outputDir."/".$filename;
+
+/* Save the uploaded file to the local filesystem */
+if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
+  echo $outputDir; 
+} else { 
+  // echo 'Failure'; 
+}
+
+?>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/config.js

+//Data Input Field Config
+export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/OTS-nosection.json";
+//DBLookup Webservice URL
+export var DB_URL = "http://localhost:8080/WebGde/svc/gfs-rest/db-lookup"
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/displayFieldClass.js

+import { clearForm, generateFields } from "./generateFields.js";
+
+export class displayField {
+  constructor(schema, containerId) {
+    this.containerId = containerId;
+    this.schema = schema;
+  }
+
+  generateFields() {
+    generateFields(this.schema, this.containerId);
+  }
+
+  clearForm(){
+    clearForm();
+  }
+
+  updateHeaderText(headerIndex, newText) {
+    let headers = document.getElementsByClassName("field-header");
+    if (headerIndex >= 0 && headerIndex < headers.length) {
+      headers[headerIndex].textContent = newText;
+    }
+  }
+} 
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/fetchSchema.js

+import { createErrorModal } from "../genericPopup/genericPopup.js";
+import {SCHEMA_FILE_PATH} from "./config.js";
+import {showError} from "./showError.js";
+
+export const fetchSchema = async() => {
+    try {
+        // Fetch the JSON data
+        const response = await fetch(SCHEMA_FILE_PATH);
+        
+        if (response.status !== 200) {
+            createErrorModal(null, "Close", "Error while loading Schema File");
+            return null;
+        }
+        
+        // Parse the JSON response
+        const responseBody = await response.json();
+        
+        if (!responseBody) {
+            createErrorModal(null, "Close", "Error while loading Schema File");
+            return null;
+        }
+        
+        return responseBody;
+    } catch (err) {
+        // Handle errors
+        showError(err.message);
+        return null;
+    }   
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Data Input Field</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./script.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" type="text/javascript"></script>
+</head>
+<body>
+    <h1>Data Input Field</h1>
+    <div id="input-field-container"></div>
+    <div id="image-viewer"></div>
+</body>
+</html>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/script.js

+import { fetchSchema } from "./fetchSchema.js";
+import { displayField } from "./displayFieldClass.js";
+import { generateFields } from "./generateFields.js";
+
+
+const schema = await fetchSchema();
+const containerId = 'input-field-container';
+
+// Instantiate widget and assign it to a container
+const displayFieldClass = new displayField(schema, containerId);
+
+// Call Function to generate fields with given schema to provided container
+displayFieldClass.generateFields();
+

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/showError.js

+export function showError(message) {
+    // Create the message box element with inline styles
+    const messageBox = document.createElement('div');
+    messageBox.style.position = 'fixed';
+    messageBox.style.top = '50%';
+    messageBox.style.left = '50%';
+    messageBox.style.transform = 'translate(-50%, -50%)';
+    messageBox.style.width = '300px';
+    messageBox.style.padding = '10px';
+    messageBox.style.backgroundColor = '#f8f8f8';
+    messageBox.style.border = '1px solid #ccc';
+    messageBox.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
+    messageBox.style.zIndex = '9999';
+    
+    // Create the message element
+    const messageElement = document.createElement('p');
+    messageElement.textContent = message;
+    
+    // Create the close button
+    const closeButton = document.createElement('button');
+    closeButton.textContent = 'Close';
+    closeButton.addEventListener('click', function() {
+      document.body.removeChild(messageBox);
+    });
+    
+    // Append the message element and close button to the message box
+    messageBox.appendChild(messageElement);
+    messageBox.appendChild(closeButton);
+    
+    // Append the message box to the document body
+    document.body.appendChild(messageBox);
+}
+  
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/style.css

+* {
+    -webkit-font-smoothing: auto;
+    font-size: 16px;
+    /* letter-spacing: 0.1em; */
+    text-rendering: optimizeLegibility;
+    font-weight: normal;
+    font-family: Inter;
+    font-style: normal;
+    box-sizing: border-box;
+}
+
+
+.text-style {
+    color: white;
+    text-align: center;
+}
+
+#input-field-container {
+    padding: 10px;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    background-image: linear-gradient(to bottom, #23569f, #00a8c0);
+    /* resize: both; */
+}
+
+#input-field-container::-webkit-scrollbar {
+    width: 20px;
+}
+
+#input-field-container::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+}
+
+#input-field-container::-webkit-scrollbar-thumb {
+    background-color: #888;
+}
+
+#input-field-container::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+}
+
+#inputs {
+    display: flex;
+    flex-direction: column;
+    min-width: 500px;
+
+}
+
+/* .field-header{
+    flex-grow: 0.1;
+} */
+
+
+/* .SECTION1.inputField {
+    width: 100%;
+   
+} */
+/* 
+.SECTION2.inputField {
+    border: none;
+    outline: none;
+    width: 100%;
+    height: 100%;
+}  */
+.field-header {
+    color: white;
+    align-self: center;
+}
+
+.Section {
+    width: 100%;
+    height: 25px !important;
+}
+
+.inputField {
+    width: 100%;
+    height: 100%;
+}
+
+.select2 {
+    width: 100% !important;
+}
+
+option {
+    border: none;
+    outline: none;
+}
+
+.fieldContainer {
+    /* layout config */
+    display: flex;
+    flex-direction: column;
+
+    padding: 0px 5px 10px 4px;
+    flex-wrap: nowrap;
+}
+
+#fields *:not([type=submit]):focus {
+    background-color: yellow;
+}
+
+.image-capture, .fingerprint-capture {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-bottom: 10px;
+    padding-top: 10px;
+
+}
+
+#fields {
+    padding: 18px;
+    border-radius: 25px;
+    width: auto;
+    height: auto;
+    background-color: white;
+
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    border-style: solid;
+    border-width: thin;
+    border-color: #446397;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+    -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+    -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+}
+
+#fields>div {
+    background-color: white;
+}
+
+.submitButtons {
+    font-weight: 600;
+    display: block;
+    margin: auto;
+    font-size: 13px;
+    width: 93px;
+    margin-top: 10px;
+    margin-bottom: 15px;
+    cursor: pointer;
+    background-color: white;
+    padding: 10px;
+    width: 100%;
+    border-radius: 5px;
+    outline: none;
+    border: none;
+    font-size: 16px;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+    -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+    -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
+
+}
+
+@media only screen and (max-width: 412px) {
+    .date-range {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+}
+
+.dash {
+    align-self: center;
+    padding: 6px;
+}
+
+
+.date-range {
+    display: flex;
+    justify-content: space-between;
+}
+
+.dateContainer {
+    width: 100%;
+}
+
+label {
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.captureButtons {
+    display: inline-block;
+    width: 100%;
+    overflow-x: clip;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    border-radius: 2px;
+    background-color: white;
+    border-style: solid;
+    border-width: 0.1cm;
+    border-color: #d4d2d2;
+}
+
+.labelContainer {
+    width: 100%;
+    padding: 2px;
+    margin-top: 5px;
+}
+
+.inputContainer {
+    display: inline-block;
+    width: 100%;
+    overflow-x: clip;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    border-radius: 2px
+}
+
+.input-invalid {
+    border-color: #ff3333 !important;
+    border-style: solid;
+    border-radius: inherit;
+}
+
+.input-valid {
+    /* border-color: #000000 !important; */
+    border-style: solid;
+    border-radius: inherit;
+}
+
+input:focus,
+textarea:focus {
+    background-color: yellow;
+    border: 0px;
+    border-radius: inherit;
+}
+
+input[type=text],
+input[type=date],
+input[type=time] {
+    width: 100%;
+    height: 25px;
+    padding: 20px;
+}
+
+input[type=checkbox],
+input[type=radio] {
+    width: 16px;
+    height: 16px;
+    size: 16px;
+}
+
+.radio-like-checkbox {
+    display: flex;
+    padding: 5px;
+}
+
+.checkbox {
+    display: flex;
+    padding: 5px;
+}
+
+input[type=file],
+input[type=button] {
+    width: 100%;
+    padding: 5px;
+    border-style: solid;
+    border-width: thin;
+    border-color: gray;
+}
+
+.dropdown-content {
+    padding: 10px;
+    border-style: solid;
+    border-width: thin;
+    border-color: gray;
+}
+
+select {
+    width: 100%;
+    border-style: solid;
+    border-width: thin;
+    border-color: gray;
+    padding: 2px;
+    color: #444;
+}
+
+textarea {
+    resize: none;
+    padding: 20px;
+}
+
+
+#text-area {
+    width: 91%;
+    font-size: 11px;
+    padding: 9px 9px;
+    margin-left: 15px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    height: 103px;
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/submit.js

+import { createInfoModal } from "../genericPopup/genericPopup";
+
+// export const submitForm = (e) => {
+    try {
+        console.log("submit");
+        global_end_time = new Date().toLocaleString();
+        let eoe_ts = new Date().toLocaleString();
+        const Form = Settings.SrcElement(e);
+        const { elements } = Form
+        let error = false
+        let doctype;
+        let section;
+        
+
+        // Validate all elements again
+        for(let element of elements) {
+            if (element.style.display === 'none') continue
+            const { id, value,type  } = element
+            const { valid } = validateInput(id, value)
+
+            // Skip submit button
+            if(type==='submit') continue
+            if(id==='DocType') {
+                doctype = element.options[element.selectedIndex].text;
+                continue;
+            }
+            if(id==='Section') {
+                section = element.options[element.selectedIndex].text;
+                continue;
+            }
+            
+            // Update display of input field if input is not valid
+            if(!valid) {
+                error = true
+                if(type==='select-one') {
+                    continue
+                }
+                const field = document.getElementById(id)
+                const newEvent = new Event('focusout')
+                field.dispatchEvent(newEvent)
+            } 
+        }
+
+        // Update display of dropdown field if input is not valid
+        const dropdowns = $('.dropdown-input').select2();
+        for(let dropdown of dropdowns) {
+            const newEvent = new Event('select2:close')
+            dropdown.dispatchEvent(newEvent)
+        }
+
+        if(error) {
+            createInfoModal(null, 'OK', 'Invalid or Missing data on highlighted fields!');
+            return false
+        } 
+        else {
+            if(IS_RETRIEVE_FROM_GFS == "Y"){
+                const container = document.querySelector('#containerModal' + sessionStorage.getItem('gfsCounter'));
+                const label = container.querySelector("div.tiffViewerHeader .tiffViewerPageInfo label");
+                File_Name = label.innerText;
+                File_Path = label.innerText;
+            }
+
+            const metrics = stopMetricCapture();
+            WriteForm(e, metrics, doctype, section);
+            saveMetrics(metrics, eoe_ts);
+			saveForm(localStorage.getItem("sfIndex"));
+            [...document.getElementsByClassName("TiffModalContent")].forEach(el => {
+                while (el.children[1].hasChildNodes()) {
+                    el.children[1].removeChild(el.children[1].firstChild);
+                }
+
+                while (el.children[2].hasChildNodes()) {
+                    el.children[2].removeChild(el.children[2].firstChild);
+                }
+
+                while (el.children[3].hasChildNodes()) {
+                    el.children[3].removeChild(el.children[3].firstChild);
+                }
+            });
+            [...document.getElementsByClassName("bar")].forEach(el => {
+                el.style.removeProperty('display');
+            });
+            document.getElementById("counter").innerHTML = "";
+            clearTimeout(interval);
+            isCanvasNotCreated = true;            
+
+            if(IS_RETRIEVE_FROM_GFS != "Y"){
+                init();
+            }else{
+                
+                var current = document.getElementById('containerModal' + sessionStorage.getItem('gfsCounter'));
+                current.style.display = 'none';                                
+
+                var next = document.getElementById('containerModal' + (parseInt(sessionStorage.getItem('gfsCounter')) + 1));
+                if(next){
+                    next.style.display = 'block';                                           
+                }else{                                       
+                    promptNoFilesLeft();
+                    //disableForm();
+                }                
+                var counter = parseInt(sessionStorage.getItem('gfsCounter'));
+                sessionStorage.setItem('gfsCounter', counter + 1);                
+                refresh();
+                if(currentWindow){currentWindow.close();}            
+            }
+
+            return true
+        }
+    } catch(err) {
+        console.log(err)
+        return false
+    }
+// }
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/DataInputWidget/validateSchema.js

+import { schema } from "./generateFields.js";
+
+export const validateSchema = () => {
+    const validate = schema[sessionStorage.getItem("currentDoctype").replaceAll("_"," ")]
+
+    if(!validate) return { valid: false, error: 'SECTION is missing!' }
+    return { valid: true }
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/ElementListWidget/Assets/down-arrow-svgrepo-com.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#98A3B5" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 330 330" xml:space="preserve">
+<path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393
+	c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393
+	s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/>
+</svg>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/ElementListWidget/Assets/profile-user-svgrepo-com.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#98A3B5" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 45.532 45.532"
+	 xml:space="preserve">
+<g>
+	<path d="M22.766,0.001C10.194,0.001,0,10.193,0,22.766s10.193,22.765,22.766,22.765c12.574,0,22.766-10.192,22.766-22.765
+		S35.34,0.001,22.766,0.001z M22.766,6.808c4.16,0,7.531,3.372,7.531,7.53c0,4.159-3.371,7.53-7.531,7.53
+		c-4.158,0-7.529-3.371-7.529-7.53C15.237,10.18,18.608,6.808,22.766,6.808z M22.761,39.579c-4.149,0-7.949-1.511-10.88-4.012
+		c-0.714-0.609-1.126-1.502-1.126-2.439c0-4.217,3.413-7.592,7.631-7.592h8.762c4.219,0,7.619,3.375,7.619,7.592
+		c0,0.938-0.41,1.829-1.125,2.438C30.712,38.068,26.911,39.579,22.761,39.579z"/>
+</g>
+</svg>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/ElementListWidget/ElementListWidget.css

+/* Reset and General Styles */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	/* font-family: 'Arial', sans-serif; */
+}
+
+html,
+body {
+	min-height: 100vh;
+	height: 100%;
+	margin: 0;
+	background-color: #C7DFEB;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;
+	overflow-y: hidden;
+}
+
+/* Main Container */
+#containerId {
+	width: 100%;
+	height: 100%;
+	background-color: #fff;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+} 
+
+/* Element List Wrapper */
+.element-list {
+	height: 100%;
+	overflow-y: auto;
+	padding-bottom: 1rem;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+/* Element Containers */
+.element-container {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid #00000029;
+	transition: all 0.3s ease;
+	cursor: pointer;
+}
+
+.element-container.selected {
+	color: white;
+	background-color: #006BA6;
+	border: 1px solid #00000029;
+}
+
+/* Element Item */
+.element-item {
+	margin-top: 15px;
+	margin-bottom: 15px;
+	margin-left: 32px;
+	font-size: 20px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.element-item span{
+	font-size: 18px;
+	font-weight: bold;
+}
+
+.element-arrow-icon {
+	width:24px;
+	height: 24px;
+	margin-right: 20px;
+	transform: rotate(180deg);
+	background-repeat: no-repeat;
+  	background-size: contain;
+	background-position: center center;
+	background-image: url('Assets/down-arrow-svgrepo-com.svg');
+}
+
+/* Element Details */
+.extra-details {
+	margin-top: 1rem;
+	font-size: 0.9rem;
+	color: #7d7d7d;
+}
+
+.details-container {
+	padding: 22px 42px ;
+	background-color: #E7EAF1;
+}
+
+.bold {
+	font-weight: bold;
+}
+
+/* Detail Item */
+.detail-item {
+	padding: 0.5rem 0;
+	border-top: 1px solid #e0e0e0;
+	color: #98A3B5;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+.detail-item-encode {
+	margin-top: 12px;
+	margin-bottom: 12px;
+	margin-left: 50px;
+	margin-right: 40px;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+.detail-key {
+	font-size: 18px;
+}
+
+.detail-value {
+	font-size: 18px;
+	text-indent: 30px;
+}
+
+/* Specific styles for the encode button */
+#encode-btn {
+	width: 100%;
+	padding: 1rem 2rem;
+	border: none;
+	border-radius: 8px;
+	font-size: 16px;
+	font-weight: bold;
+	color: #fff;
+	background-color: #006BA6;
+	cursor: pointer;
+	transition: background-color 0.3s ease, transform 0.1s ease;
+}
+
+#encode-btn:active {
+	transform: scale(0.95);
+}
+
+#encode-btn:hover {
+	background-color: #0056b3;
+}
+
+#encode-btn:active {
+	background-color: #0056b3;
+}
+
+/* Style for disabled encode button */
+#encode-btn.disabled {
+	background-color: #94c1da;
+	/* Grayed out color */
+	cursor: not-allowed;
+}
+
+/* Specific styles for the new button */
+#new-btn {
+	padding: 1rem 2rem;
+	border: none;
+	border-radius: 50px;
+	font-size: 1rem;
+	color: #fff;
+	background-color: #007bff;
+	/* Green color */
+	cursor: pointer;
+	transition: background-color 0.3s ease, transform 0.1s ease;
+}
+
+#new-btn:active {
+	transform: scale(0.95);
+}
+
+#new-btn:hover {
+	background-color: #0056b3;
+}
+
+#new-btn:active {
+	background-color: #0056b3;
+}
+
+.button-container {
+	padding-top: 17px;
+	padding-bottom: 17px;
+	padding-left: 32px;
+	padding-right: 32px;
+	margin-top: auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 2rem;
+}
+
+.element-list-top-div {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom-color: #006BA6;
+	border-bottom-style: solid;
+	border-bottom-width: thin;
+}
+
+#search-input {
+	padding: 8px;
+	margin-top: 12px;
+	margin-bottom: 12px;
+	margin-left: 20px;
+	margin-right: 10px;
+	width: 100%;
+	box-sizing: border-box;
+	/* Ensures padding doesn't increase its size */
+	border: 1px solid #ccc;
+	border-radius: 8px;
+}
+
+.user-profile-icon {
+	height: 35px;
+	width: 35px;
+	margin-right: 10px;
+	background-repeat: no-repeat;
+  	background-size: contain;
+	background-position: center center;
+	background-image: url('Assets/profile-user-svgrepo-com.svg');
+}
+
+.encode-details-container {
+	background-color: white;
+	cursor: pointer;
+	height: auto;
+	width: 100%;
+	max-width: 100%;
+	border-bottom-left-radius: 19px;
+	border-bottom-right-radius: 19px;
+	z-index: 49;
+	transition: height 0.5s ease;
+}
+
+.element-id-container {
+	display: flex;
+	margin-bottom: 9px;
+}
+
+.back-icon {
+	height: 24px;
+	width: 20px;
+	transform: rotate(90deg);
+	margin-left: 18px;
+	margin-top: 12px;
+	background-repeat: no-repeat;
+  	background-size: contain;
+	background-position: center center;
+	background-image: url('Assets/down-arrow-svgrepo-com.svg');
+}
+
+.element-id {
+	margin-top: 9px;
+	margin-left: 12px;
+	font-size: 20px;
+	font-weight: bold;
+	color: #006BA6;
+}
+
+.pull-tab {
+	border-top: solid;
+	border-color: #E5E8EC;
+	border-width: thin;
+	height: 19px;
+	display: flex;
+	justify-content: center;
+  	align-items: center;
+}
+
+.line {
+	width: 25%;
+  	height: 7px; /* Adjust the thickness of the line as needed */
+  	background-color: #E5E8EC;
+	border-radius: 6px;
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+.details-container-encode {
+	display: none;
+	max-height: 70vh;
+	overflow-y: auto;
+}
+
+.extra-detail {
+	font-size: 16px;
+	margin-top: 12px;
+	margin-bottom: 12px;
+	margin-left: 50px;
+	margin-right: 40px;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+.logout-box{
+	font-size: 16px;
+	font-weight: bold;
+	background-color: white;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	padding-left: 50px;
+	padding-right: 50px;
+	border-style: solid;
+	border-width: thin;
+	border-color: #E5E8EC;
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/FileUpload/config.js

+import { GDE_URL } from "../config.js";
+
+export const urlFileUpload = GDE_URL + "/upload-file";
+export const uploadDirectory = "/home/mobilegde-elements"

WebGde/WebContent/NoBpo/WebGde-Widgets/FileUpload/fileUpload.js

+import { uploadDirectory, urlFileUpload } from "./config.js";
+
+export const uploadFile = async (file, fileName, directory) => {
+
+	if (fileName === '' || directory === '') {
+		console.log("Please enter a valid file name and directory.");
+		return;
+	}
+	let base64Data = file.split(',')[1];
+	const requestData = {
+		base64Data: base64Data,
+		fileName: fileName,
+		directory: directory
+	};
+
+	const authToken = sessionStorage.getItem('token');
+	fetch(urlFileUpload, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			'Authorization': `Bearer ${authToken}`
+		},
+		body: JSON.stringify(requestData)
+	})
+		.then(response => response.json())
+		.then(data => {
+			console.log('File uploaded successfully:', data);
+			return true;
+		})
+		.catch(error => {
+			console.error('Error uploading file:', error);
+		});
+}
+
+function generateFormattedString(projectCode) {
+	// Get the current date and time
+	const currentDate = new Date();
+
+	// Format the date and time components
+	const year = currentDate.getFullYear();
+	const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Month is zero-based, so add 1 and pad with '0' if needed
+	const date = String(currentDate.getDate()).padStart(2, '0'); // Pad with '0' if needed
+	const hours = String(currentDate.getHours()).padStart(2, '0');
+	const minutes = String(currentDate.getMinutes()).padStart(2, '0');
+	const seconds = String(currentDate.getSeconds()).padStart(2, '0');
+	const milliseconds = String(currentDate.getMilliseconds()).padStart(3, '0'); // Milliseconds are padded with '0' up to 3 digits
+
+	// Combine the formatted components into the final string
+	const formattedString = `${projectCode}_${year}${month}${date}_${hours}${minutes}${seconds}${milliseconds}`;
+
+	return formattedString;
+}

WebGde/WebContent/NoBpo/WebGde-Widgets/LoadingModal/LoadingModal.js

+export const createLoadingModal = (titleTxt, message, type, btnTxt, callBackFunc) => {
+  let modal = document.getElementById("modal-container");
+  if(modal){
+      removeLoadingModal;
+  }
+
+  createPrompt();
+  modal = document.getElementById("modal-container");
+
+  let modalHeader = document.getElementById("modal-header");
+  modalHeader.classList.add("clear-background");
+  modalHeader.classList.add("no-border");
+  modalHeader.style.display= "none";
+
+  let title = document.getElementById("modal-title");
+  title.textContent = "";
+
+  let modalBody = document.getElementById("modal-body");
+  modalBody.innerHTML = "";
+
+  let div = document.createElement("div");
+  div.setAttribute("class", "row prompt-message center-objects");
+
+  let iconBox = document.getElementById("iconBox");
+  if (iconBox) {
+      iconBox.remove();
+  }
+  iconBox = document.createElement("div");
+  iconBox.setAttribute("id", "iconBox");
+  iconBox.setAttribute("class", "icon-box")
+  iconBox.innerHTML = "";
+
+  if (!type) {
+      // let loading = document.createElement("div");
+      // loading.setAttribute("class", "dot-bricks");
+      // iconBox.classList.add("primary");
+      let loaderContainer = document.createElement("div");
+      loaderContainer.setAttribute("id", "loaderContainer");
+
+      let loader1 = document.createElement("div");
+      loader1.setAttribute("class", "loader");
+      loader1.setAttribute("id", "loader");
+
+      loaderContainer.appendChild(loader1);
+
+      div.appendChild(loaderContainer);
+      //iconBox.appendChild(loader1);
+  } else {
+      let icon = document.createElement("p");
+      icon.setAttribute("class", "prompt-icon");
+
+      switch (type) {
+          case "info":
+              iconBox.classList.add("primary");
+              icon.innerHTML = "ℹ";
+              break;
+          case "warning":
+              iconBox.classList.add("warning");
+              icon.innerHTML = "⚠";
+              break;
+          case "error":
+              iconBox.classList.add("error");
+              icon.innerHTML = "✖";
+              break;
+          case "success":
+              iconBox.classList.add("success");
+              icon.innerHTML = '&#x2713';
+              break;
+      }
+      iconBox.appendChild(icon);
+      div.appendChild(iconBox);
+  }
+
+  ///modalHeader.appendChild(iconBox);
+
+  let h3 = document.createElement("h3");
+  h3.textContent = titleTxt;
+  let p = document.createElement("p");
+  p.textContent = message;
+
+  
+ 
+  div.appendChild(h3);
+  div.appendChild(p);
+
+  modalBody.appendChild(div);
+
+  let footerModal = document.getElementById("modal-footer");
+  footerModal.innerHTML = '';
+  footerModal.classList.add("center-objects");
+
+  if (btnTxt && callBackFunc) {
+      let closeModalBtn = document.createElement("button");
+      closeModalBtn.setAttribute("class", "button btn-" + type + " btn-md");
+      closeModalBtn.setAttribute("id", "close-btn-modal");
+      closeModalBtn.textContent = btnTxt;
+      closeModalBtn.addEventListener("click", function () {
+          modal.style.display = 'none';
+          callBackFunc();
+      });
+      footerModal.appendChild(closeModalBtn);
+  }
+
+  modal.style.display = 'block';
+}
+
+export const removeLoadingModal = () => {
+  let modal = document.getElementById("modal-container");
+  if (modal){
+    modal.remove();
+  }
+}
+
+function createPrompt(){
+  let modalContainer = document.createElement("div");
+  modalContainer.setAttribute("class", "modal-container");
+  modalContainer.setAttribute("id", "modal-container");
+  
+  let modal = document.createElement("div");
+  modal.setAttribute("class", "modal");
+  modal.setAttribute("id", "modal");
+
+  let modalHeader = document.createElement("div");
+  modalHeader.setAttribute("class", "modal-header");
+  modalHeader.setAttribute("id", "modal-header");
+
+  let modalTitle = document.createElement("h3");
+  modalTitle.setAttribute("class", "modal-title");
+  modalTitle.setAttribute("id", "modal-title");
+
+  modalHeader.appendChild(modalTitle);
+
+  let modalBody = document.createElement("div");
+  modalBody.setAttribute("class", "modal-body");
+  modalBody.setAttribute("id", "modal-body");
+
+  let modalFooter = document.createElement("div");
+  modalFooter.setAttribute("class", "modal-footer");
+  modalFooter.setAttribute("id", "modal-footer");
+
+  let closeButton = document.createElement("button");
+  closeButton.setAttribute("class","close-btn-modal");
+  closeButton.setAttribute("id","close-btn-modal");
+  closeButton.textContent = "Close";
+
+  modalFooter.appendChild(closeButton);
+
+  modal.appendChild(modalHeader);
+  modal.appendChild(modalBody);
+  modal.appendChild(modalFooter);
+
+  modalContainer.appendChild(modal);
+
+  document.body.appendChild(modalContainer);
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/LoadingModal/LoadingModalStyle.css

+.modal-container{
+  display: none;
+  position: fixed;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+  background-color: rgba(0,0,0, .5);
+}
+
+.modal{
+  background-color: #fff;
+  position: absolute;
+  top:15%;
+  left:30%;
+  width: 40%;
+  height: fit-content;
+  max-height: 70%;
+  border-radius: 5px;
+  /* border: 2px solid #000; */
+
+  animation-name: modalTransition;
+  animation-duration: .4s;
+  box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
+  -webkit-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
+  -moz-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
+
+}
+
+@keyframes modalTransition {
+  from{
+      top:-300px;
+      opacity: 0;
+  }
+
+  to{
+      top:20%;
+      opacity: 1;
+  }
+}
+
+.modal-header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #3C4048;
+  padding: 10px 20px;
+  background-color: #607EAA;
+}
+
+.icon-box {
+color: #fff;		
+position: absolute;
+margin: 0 auto;
+left: 0;
+right: 0;
+top: -50px;
+width: 95px;
+height: 95px;
+border-radius: 50%;
+z-index: 51;
+background: #fff;
+padding: 3px;
+text-align: center;
+box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+.icon-box.success{
+  background-color: #5BC8B2;
+}
+
+.icon-box.primary{
+  background-color: #1e80c1;
+}
+
+.icon-box.error{
+  background-color: #FF6961;
+}
+
+.icon-box.warning{
+  background-color: yellow;
+}
+
+.prompt-icon{
+  font-size: 50px !important;
+}
+
+.prompt-message{
+  color: #636363;
+}
+
+.prompt-message h3{
+  font-size: 20px;
+  text-align: center;
+  margin: 2px;
+}
+
+.prompt-message p{
+  font-size: 14px;
+  text-align: center;
+  margin: 2px;
+}
+
+.modal-header .icon-box p {
+font-size: 56px;
+position: relative;
+top: 4px;
+}
+
+.modal-body{
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: space-between;
+  padding: 10px 10px;
+  overflow-y: auto;
+  height: fit-content;
+  max-height: 50vh;
+}
+
+.modal-footer{
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+
+#close-modal{
+  font-size: 1.5rem;
+  font-weight: bolder;
+  padding: 3px;
+}
+
+#close-modal:hover{
+  color: #fff;
+  cursor: pointer;
+}
+
+.close-btn-modal:hover{
+  background-color:#fff ;
+}
+
+.close-btn-modal{
+  background-color:darkgray ;
+}
+  
+.modal-footer .button{
+  border: 1px solid #000;
+  color: #fff;
+  width: 15%;
+  min-width: fit-content;
+  border-radius: 5px;
+}
+
+.modal-footer .button.close-btn-modal:hover{
+  border: 1px solid gray !important;
+  background-color: transparent !important;
+  color: gray !important;
+}
+
+.center-objects{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width:100%;
+}
+
+.btn-sm{
+  width: 15% !important;
+  border: 0% !important;
+}
+
+.btn-md{
+  width: 30% !important;
+  border: 0px !important;
+}
+
+.clear-background{
+  background-color: transparent;
+}
+
+.no-border{
+  border: 0px;
+}
+
+#loaderContainer {
+  height: 15vh;
+  width: 15vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  background: url('Assets/Loading.gif') no-repeat center center;
+  background-size: cover; /* Adjust this property as needed */
+}
+
+
+@keyframes mulShdSpin {
+  0%,
+  100% {
+    box-shadow: 0em -2.6em 0em 0em #FFFFFF, 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.5), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7);
+  }
+  12.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.7), 1.8em -1.8em 0 0em #FFFFFF, 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5);
+  }
+  25% {
+    box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.5), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7), 2.5em 0em 0 0em #FFFFFF, 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
+  }
+  37.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5), 2.5em 0em 0 0em rgba(20, 52, 164, 0.7), 1.75em 1.75em 0 0em #FFFFFF, 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
+  }
+  50% {
+    box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.5), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.7), 0em 2.5em 0 0em #FFFFFF, -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
+  }
+  62.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.5), 0em 2.5em 0 0em rgba(20, 52, 164, 0.7), -1.8em 1.8em 0 0em #FFFFFF, -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
+  }
+  75% {
+    box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.5), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.7), -2.6em 0em 0 0em #FFFFFF, -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
+  }
+  87.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.5), -2.6em 0em 0 0em rgba(20, 52, 164, 0.7), -1.8em -1.8em 0 0em #FFFFFF;
+  }
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/LogInWidget/LogInClass.js

+import { removePrompt, showPrompt } from "./LogInPrompt.js";
+import { KEYCLOACK_CLIENT_ID, KEYCLOACK_GRANT_TYPE, KEYCLOACK_LOG_IN_URL, KEYCLOACK_SCOPE, KEYCLOAK_FORGOT_PASSWORD_LINK } from "./loginConfig.js";
+
+export class LogInClass {
+    logInForm = {
+        username: null,
+        password: null,
+        forgotPassword: null,
+        logInButton: null
+    };
+
+    logInFormMainContainer;
+    callBackFunction = null;
+
+
+    constructor(functionToCallIfLogInSuccess) {
+        if (typeof functionToCallIfLogInSuccess === 'function') {
+            this.callBackFunction = functionToCallIfLogInSuccess;
+        }
+
+        let mainLogInScreenContainer = document.createElement("div");
+        mainLogInScreenContainer.setAttribute("class", "container-fluid");
+        mainLogInScreenContainer.setAttribute("id", "logInMainContainer");
+
+        mainLogInScreenContainer.appendChild(this.createTitle());
+        mainLogInScreenContainer.appendChild(this.createLoginForm());
+        
+        document.body.appendChild(mainLogInScreenContainer);
+    }
+
+    createLoginForm() {
+        let userNameDiv = document.createElement("div");
+        userNameDiv.setAttribute("class", "input-icons");
+
+        this.logInForm.username = document.createElement("input");
+        this.logInForm.username.type = "text";
+        this.logInForm.username.id = "username";
+        this.logInForm.username.classList.add("input-field");
+        this.logInForm.username.placeholder = "Username";
+
+        let usernameIcon = document.createElement("i");
+        usernameIcon.setAttribute("class", "fa-regular fa-user icon");
+
+        userNameDiv.appendChild(usernameIcon);
+        userNameDiv.appendChild(this.logInForm.username);
+
+        let passwordDiv = document.createElement("div");
+        passwordDiv.setAttribute("class", "input-icons");
+
+        this.logInForm.password = document.createElement("input");
+        this.logInForm.password.type = "password";
+        this.logInForm.password.id = "password";
+        this.logInForm.password.classList.add("input-field");
+        this.logInForm.password.placeholder = "Password";
+
+        let passwordIcon = document.createElement("i");
+        passwordIcon.setAttribute("class", "fa-solid fa-lock icon");
+
+        passwordDiv.appendChild(passwordIcon);
+        passwordDiv.appendChild(this.logInForm.password);
+
+        let forgotPassDiv = document.createElement("div");
+        forgotPassDiv.setAttribute("class", "input-icons submit");
+
+        this.logInForm.forgotPassword = document.createElement("a");
+        this.logInForm.forgotPassword.id = "forgotPasswordLink";
+        this.logInForm.forgotPassword.textContent = "Forgot password?"
+        this.logInForm.forgotPassword.setAttribute("href", KEYCLOAK_FORGOT_PASSWORD_LINK);
+
+        forgotPassDiv.appendChild(this.logInForm.forgotPassword);
+
+        let submitDiv = document.createElement("div");
+        submitDiv.setAttribute("class", "input-icons submit");
+
+        this.logInForm.logInButton = document.createElement("input");
+        this.logInForm.logInButton.type = "submit";
+        this.logInForm.logInButton.id = "loginButton";
+        this.logInForm.logInButton.classList.add("input-field");
+        this.logInForm.logInButton.value = "Log In";
+
+        submitDiv.appendChild(this.logInForm.logInButton);
+
+        let logInFormContainer = document.createElement("div");
+        logInFormContainer.setAttribute("id", "loginContainer")
+        logInFormContainer.setAttribute("class", "container login-container flex-wrap-container");
+
+        logInFormContainer.appendChild(userNameDiv);
+        logInFormContainer.appendChild(passwordDiv);
+        logInFormContainer.appendChild(forgotPassDiv);
+        logInFormContainer.appendChild(submitDiv);
+
+        return logInFormContainer;
+    }
+
+    createTitle(){
+        let div = document.createElement("div");
+        div.setAttribute("class", "wrapper invert");
+
+        let title1 = document.createElement("span");
+        title1.setAttribute("data-text", "Web");
+
+        let title2 = document.createElement("span");
+        title2.setAttribute("data-text", "GDE");
+
+        div.appendChild(title1);
+        div.appendChild(title2);
+
+        return div;
+    }
+
+    establishEventListeners() {
+        this.logInForm.logInButton.addEventListener("click", async () => {
+            await this.loginFunction();
+        });
+
+        this.logInForm.username.addEventListener("keypress", (event) => {
+            if (event.key === "Enter") {
+                this.loginFunction();
+            }
+        });
+        // tbPassword.addEventListener("keypress", this.handleKeypress);
+        this.logInForm.password.addEventListener("keypress", (event) => {
+            if (event.key === "Enter") {
+                this.loginFunction();
+            }
+        });
+
+    }
+
+    async loginFunction() {
+        showPrompt("Logging in", "Please wait...", null, null, null);
+        const requestBody = new URLSearchParams();
+        requestBody.append("client_id", KEYCLOACK_CLIENT_ID);
+        requestBody.append("grant_type", KEYCLOACK_GRANT_TYPE);
+        requestBody.append("scope", KEYCLOACK_SCOPE);
+        requestBody.append("username", this.logInForm.username.value);
+        requestBody.append("password", this.logInForm.password.value);
+
+        const requestOptions = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: requestBody.toString(),
+        };
+
+        try {
+            const response = await fetch(KEYCLOACK_LOG_IN_URL, requestOptions);
+            const data = await response.text();
+            const json = JSON.parse(data);
+            if ("error" in json) {
+                var errorMessage = await json.error_description.toString();
+                removePrompt();
+                this.createLoginPrompt(errorMessage, "error-message");
+            } else if ("access_token" in json) {
+                document.getElementById("loginContainer").innerHTML = "Logged in";
+                sessionStorage.setItem("token", await json.access_token);
+                sessionStorage.setItem("token_type", await json.token_type);
+                sessionStorage.setItem("user_id", this.logInForm.username.value);
+                this.createLoginPrompt("Log-in successful", "success-message");
+                showPrompt("Logged In", "Successfully logged in", "success", "OK", removePrompt);
+                document.getElementById("loginContainer").remove();
+                if (this.callBackFunction) {
+                    this.callBackFunction();
+                }
+            }
+        } catch (error) {
+            let catchError = await error;
+            console.error("Error:", catchError);
+            this.createLoginPrompt(catchError, "error-message");
+        }
+    }
+
+
+    createLoginPrompt(message, status) {
+        let prompt = document.getElementById("loginPrompt");
+        if (prompt) {
+            prompt.remove();
+        }
+
+        prompt = document.createElement("div");
+        prompt.setAttribute("id", "loginPrompt");
+
+        let labelMessage = document.createElement("label");
+        labelMessage.textContent = message;
+        labelMessage.setAttribute("class", status);
+
+        prompt.appendChild(labelMessage);
+
+        document.getElementById("loginContainer").append(prompt);
+
+        setTimeout(() => {
+            document.getElementById("loginPrompt").remove();
+        }, 3000);
+    }
+
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/LogInWidget/LogInPrompt.js

+export const showPrompt = (titleTxt, message, type, btnTxt, callBackFunc) => {
+    let modal = document.getElementById("modal-container");
+    if(modal){
+        removePrompt;
+    }
+
+    createPrompt();
+    modal = document.getElementById("modal-container");
+
+    let modalHeader = document.getElementById("modal-header");
+    modalHeader.classList.add("clear-background");
+    modalHeader.classList.add("no-border");
+    modalHeader.style.display= "none";
+
+    let title = document.getElementById("modal-title");
+    title.textContent = "";
+
+    let modalBody = document.getElementById("modal-body");
+    modalBody.innerHTML = "";
+
+    let div = document.createElement("div");
+    div.setAttribute("class", "row prompt-message center-objects");
+
+    let iconBox = document.getElementById("iconBox");
+    if (iconBox) {
+        iconBox.remove();
+    }
+    iconBox = document.createElement("div");
+    iconBox.setAttribute("id", "iconBox");
+    iconBox.setAttribute("class", "icon-box")
+    iconBox.innerHTML = "";
+
+    if (!type) {
+        // let loading = document.createElement("div");
+        // loading.setAttribute("class", "dot-bricks");
+        // iconBox.classList.add("primary");
+        let loaderContainer = document.createElement("div");
+        loaderContainer.setAttribute("id", "loaderContainer");
+
+        let loader1 = document.createElement("div");
+        loader1.setAttribute("class", "loader");
+        loader1.setAttribute("id", "loader");
+
+        loaderContainer.appendChild(loader1);
+
+        div.appendChild(loaderContainer);
+        //iconBox.appendChild(loader1);
+    } else {
+        let icon = document.createElement("p");
+        icon.setAttribute("class", "prompt-icon");
+
+        switch (type) {
+            case "info":
+                iconBox.classList.add("primary");
+                icon.innerHTML = "ℹ";
+                break;
+            case "warning":
+                iconBox.classList.add("warning");
+                icon.innerHTML = "⚠";
+                break;
+            case "error":
+                iconBox.classList.add("error");
+                icon.innerHTML = "✖";
+                break;
+            case "success":
+                iconBox.classList.add("success");
+                icon.innerHTML = '&#x2713';
+                break;
+        }
+        iconBox.appendChild(icon);
+        div.appendChild(iconBox);
+    }
+
+    ///modalHeader.appendChild(iconBox);
+
+    let h3 = document.createElement("h3");
+    h3.textContent = titleTxt;
+    let p = document.createElement("p");
+    p.textContent = message;
+
+    
+   
+    div.appendChild(h3);
+    div.appendChild(p);
+
+    modalBody.appendChild(div);
+
+    let footerModal = document.getElementById("modal-footer");
+    footerModal.innerHTML = '';
+    footerModal.classList.add("center-objects");
+
+    if (btnTxt && callBackFunc) {
+        let closeModalBtn = document.createElement("button");
+        closeModalBtn.setAttribute("class", "button btn-" + type + " btn-md");
+        closeModalBtn.setAttribute("id", "close-btn-modal");
+        closeModalBtn.textContent = btnTxt;
+        closeModalBtn.addEventListener("click", function () {
+            modal.style.display = 'none';
+            // callBackFunc();
+            logoutKeycloak();
+        });
+        footerModal.appendChild(closeModalBtn);
+    }
+
+    modal.style.display = 'block';
+}
+
+
+export const removePrompt = () => {
+    let modal = document.getElementById("modal-container");
+    modal.remove();
+}
+
+function createPrompt(){
+    let modalContainer = document.createElement("div");
+    modalContainer.setAttribute("class", "modal-container");
+    modalContainer.setAttribute("id", "modal-container");
+    
+    let modal = document.createElement("div");
+    modal.setAttribute("class", "modal");
+    modal.setAttribute("id", "modal");
+
+    let modalHeader = document.createElement("div");
+    modalHeader.setAttribute("class", "modal-header");
+    modalHeader.setAttribute("id", "modal-header");
+
+    let modalTitle = document.createElement("h3");
+    modalTitle.setAttribute("class", "modal-title");
+    modalTitle.setAttribute("id", "modal-title");
+
+    modalHeader.appendChild(modalTitle);
+
+    let modalBody = document.createElement("div");
+    modalBody.setAttribute("class", "modal-body");
+    modalBody.setAttribute("id", "modal-body");
+
+    let modalFooter = document.createElement("div");
+    modalFooter.setAttribute("class", "modal-footer");
+    modalFooter.setAttribute("id", "modal-footer");
+
+    let closeButton = document.createElement("button");
+    closeButton.setAttribute("class","close-btn-modal");
+    closeButton.setAttribute("id","close-btn-modal");
+    closeButton.textContent = "Close";
+
+    modalFooter.appendChild(closeButton);
+
+    modal.appendChild(modalHeader);
+    modal.appendChild(modalBody);
+    modal.appendChild(modalFooter);
+
+    modalContainer.appendChild(modal);
+
+    document.body.appendChild(modalContainer);
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/LogInWidget/LoginJavaInterface.js

+import { initializeWebpage } from "../../startup.js";
+import { initializeConfig } from "../config.js";
+import { createInfoModal } from "../genericPopup/genericPopup.js";
+
+export function loginGde(token) {
+	sessionStorage.setItem("token", token);
+	var decodedToken = parseJwt(token);
+
+	// Check if the decodedToken contains the desired properties
+	if (decodedToken) {
+		const { preferred_username, gde_domain, gde_bpo_domain, gde_bpo_node } = decodedToken;
+
+		// Now you can use these variables as needed
+		console.log("Preferred Username:", preferred_username);
+		sessionStorage.setItem("user_id", preferred_username);
+		console.log("Domain:", gde_domain);
+		sessionStorage.setItem("gde_domain", gde_domain);
+		console.log("Bpo Domain:", gde_bpo_domain);
+		console.log("Node:", gde_bpo_node);
+		initializeConfig(gde_domain, gde_bpo_domain, gde_bpo_node);
+		// createInfoModal(null, "OK", "Success! Logged in as " & preferred_username);
+		initializeWebpage();
+
+		// You can return these values or perform any other actions with them here
+	} else {
+		// Handle the case where the token couldn't be decoded or doesn't contain the expected properties
+		console.error("Invalid token or missing properties.");
+	}
+}
+
+export function fallbackLogin(user_id, gde_domain, bpo_domain, node) {
+	sessionStorage.setItem("user_id", user_id);
+	initializeConfig(gde_domain, bpo_domain, node);
+	initializeWebpage();
+}
+
+function parseJwt(token) {
+	var base64Url = token.split('.')[1];
+	var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+	var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
+		return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+	}).join(''));
+
+	return JSON.parse(jsonPayload);
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/LogInWidget/loginConfig.js

+export const KEYCLOACK_BASE_URL = "https://auth.svi.cloud";
+export const KEYCLOACK_CLIENT_ID = "Web_GDE_Mobile";
+export const KEYCLOACK_GRANT_TYPE = "password";
+export const KEYCLOACK_SCOPE = "openid";
+export const KEYCLOACK_CLIENT_SECRET = "7ec48b6b-527f-43b2-9adc-a1c7b696fb74";
+export const KEYCLOACK_REALM = "GFS"
+export const KEYCLOACK_LOG_IN_URL = `${KEYCLOACK_BASE_URL}/auth/realms/${KEYCLOACK_REALM}/protocol/openid-connect/token`
+
+export const KEYCLOAK_FORGOT_PASSWORD_LINK = `${KEYCLOACK_BASE_URL}/auth/realms/${KEYCLOACK_REALM}/login-actions/reset-credentials?client_id=${KEYCLOACK_CLIENT_ID}&tab_id=`;
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/Logout/Logout.js

+import { createConfirmationModal } from "../genericPopup/genericPopup.js";
+
+export function logoutKeycloak(){
+    createConfirmationModal(logoutAndroid, "Are you sure you want to Logout?", "Any unsaved progress will be lost.");
+}
+
+function logoutAndroid(){
+    window.MobileGdeLoginInterface.logoutKeycloak();
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/PrintWidget/print.js

+import { schema } from "../DataInputWidget/generateFields.js";
+import { checkValidValues, validateInput, validateReturnInput } from "../DataInputWidget/validateInput.js";
+import { createLoadingModal, removeLoadingModal } from "../LoadingModal/LoadingModal.js";
+import { createConfirmationModal, createErrorModal } from "../genericPopup/genericPopup.js";
+import { printReceipt } from "./printAndroidInterface.js";
+
+let printButton;
+
+export function printInit() {
+	let buttonContainer = document.getElementById("DocumentcontrolButtonsContainer");
+
+	printButton = document.createElement("button");
+	printButton.id = "printButton";
+	printButton.title = "Print";
+	printButton.classList.add("document-control-button");
+	printButton.textContent = "Print";
+
+	buttonContainer.appendChild(printButton);
+
+	printButton.onclick = async (e) => {
+		createPrintWindow(e);
+	}
+}
+
+export async function createPrintWindow(e) {
+	async function okButtonFunction() {
+		createLoadingModal("Printing Receipt", "Please wait...", null, null, null);
+		let printStatus = await printForm(e);
+		if (printStatus) {
+			removeLoadingModal();
+		} else {
+			removeLoadingModal();
+		}
+	}
+	createConfirmationModal(okButtonFunction, "Print receipt?");
+}
+
+async function printForm(e) {
+	const Form = document.getElementById("fields");
+	const { elements } = Form;
+	let error = false;
+	let errorMsg = null;
+	let doctype;
+	let section;
+	let keys = [];
+
+	// Validate all elements again
+	for (let element of elements) {
+		if (element.style.display === 'none' || element.classList.contains('hidden')) {
+			continue;
+		}
+		const { id, value, type, name } = element
+		const errorContainer = document.getElementById(`${id}_error`);
+		// Skip submit, buttons, and files
+		if (element.classList.contains('radioOther') || element.classList.contains('checkboxOther')) continue;
+		if (element.classList.contains('geotag') || element.classList.contains('geotagstart') || element.classList.contains('altitude') || element.classList.contains('direction') || element.classList.contains('deviceid')) {
+			continue;
+		}
+		if (type === 'submit') continue
+		if (type === 'file') continue
+		if (type === 'hidden') continue
+		if (element.classList.contains('radioOption') && id.length === 0) continue
+		if (element.classList.contains('checkboxOption') && id.length === 0) continue
+		if (id === 'DocType') {
+			doctype = element.options[element.selectedIndex].text;
+			continue;
+		}
+		if (id === 'Section') {
+			section = element.options[element.selectedIndex].text;
+			continue;
+		}
+
+		const { valid, errors } = validateInput(id, value)
+
+		var { isValidValue, errMsg } = checkValidValues(id, value);
+		console.log(valid + " " + errors + " " + isValidValue + " " + errMsg)
+
+		if (typeof errMsg !== "undefined") {
+			errorMsg = errMsg;
+		}
+
+		// Update display of input field if input is not valid
+		if (!valid) {
+			console.log(element);
+			error = true
+			if (type === 'select-one') {
+				continue
+			}
+			if (type === 'button') {
+				errorContainer.innerHTML = errors;
+				continue
+			}
+			if (type === 'radio') {
+				errorContainer.innerHTML = errors;
+				continue
+			}
+			if (type === 'checkbox') {
+				errorContainer.innerHTML = errors;
+				continue
+			}
+			const field = document.getElementById(id)
+			const newEvent = new Event('focusout')
+			field.dispatchEvent(newEvent)
+		}
+
+
+		if (!isValidValue) {
+			error = true
+			const field = document.getElementById(id);
+			field.classList.remove('input-valid');
+			field.classList.add('input-invalid');
+			errorContainer.innerHTML = errors;
+			field.select();
+		}
+	}
+
+	// TO-DO Separate validation for attached media (Image, Video, File)
+	for (let key of keys) {
+		const inputElement = document.getElementById(`${key}_attachedMedia`);
+		if (inputElement.files.length === 0) {
+			console.log(key + " empty");
+			let emptyMedia = document.getElementsByClassName(key);
+			console.log(emptyMedia[0]);
+		}
+	}
+
+	// Update display of dropdown field if input is not valid
+	const dropdowns = $('.dropdown-input').select2();
+	for (let dropdown of dropdowns) {
+		const newEvent = new Event('select2:close')
+		dropdown.dispatchEvent(newEvent)
+	}
+
+	if (error) {
+		if (errorMsg !== null) {
+			createErrorModal(null, 'Return', errorMsg);
+		} else {
+			createErrorModal(null, 'Return', 'Invalid or Missing data on highlighted fields!');
+		}
+		return
+	} else {
+		let response = await submitForPrint(e, doctype, section);
+		return response;
+	}
+}
+
+export async function submitForPrint(e, doctype, section) {
+	var Frm = document.getElementById("fields");
+	var Nodes = Frm.elements;
+	const lookup = schema[doctype][section]
+	// localStorage.setItem("submit", "1");
+
+	let fields = {};
+	fields['worker_id'] = sessionStorage.getItem('user_id');
+	for (var i = 0; i < Nodes.length; i++) {
+		if (Nodes[i].style.display === 'none' && !Nodes[i].classList.contains('hidden')) continue
+		let fid = Nodes[i].id;
+		// Add doctype as field1
+		if (fid === 'DocType') {
+			fields['inspection_type'] = Nodes[i].value;
+			continue;
+		}
+		if (fid == 'Section' || fid == '' || fid == "submitButton") continue
+		// Skip the textbox in checklist and radiolist
+		if (Nodes[i].classList.contains('radioOther') || Nodes[i].classList.contains('checkboxOther')) continue;
+		// Skip elements of type "button", "submit", and files
+		if (Nodes[i].type === 'button' || Nodes[i].type === 'submit' || fid == '' || Nodes[i].name === 'hidden_file_content') continue;
+
+		// If the input element is the start date of date range element
+		if (Nodes[i].name == 'startDate') {
+			//Store its value and + the value of the next element
+			fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value + '*' + Nodes[i + 1].value;
+			i += 1; //increment +1 to skip the endDate
+			continue;
+		}
+		// If the first radio button was found
+		if (Nodes[i].classList.contains('radioFirst')) {
+			var key = fid;
+			const radioButtons = document.getElementsByName(`radioChoices_${key}`);
+			let selectedValue;
+			//check if the value is checked to find the selected value
+			radioButtons.forEach(radio => {
+				if (radio.checked && radio.value) {
+					selectedValue = radio.value;
+					console.log(selectedValue)
+				}
+			});
+
+			fields[fid] = selectedValue;
+			i += radioButtons.length - 1; //increment the number of radio buttons to skip the other radio button inputs.
+			continue;
+		}
+
+		// If the first checkbox was found
+		if (Nodes[i].classList.contains('checkboxFirst')) {
+			var key = fid;
+			const checkboxButtons = document.getElementsByName(`checkboxChoices_${key}`);
+			let selectedValue = '';
+			let isFirstChecked = true; // Variable to track the first checked checkbox
+			//check each checkbox if it is checked to find the values.
+			checkboxButtons.forEach(check => {
+				if (check.checked && check.value) {
+					if (!isFirstChecked) {
+						selectedValue += ",";
+					} else {
+						isFirstChecked = false;
+					}
+					selectedValue += check.value;
+				}
+			});
+
+			fields[fid] = selectedValue;
+			i += checkboxButtons.length - 1; //increment the number of checkboxes to skip the checkboxes input
+			continue;
+		}
+		fields[fid] = Nodes[i].value;
+	}
+
+    console.log(fields);
+	const fieldsJSON = JSON.stringify(fields);
+	return await printReceipt(fieldsJSON);
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/PrintWidget/printAndroidInterface.js

+export async function printReceipt(fields){
+    return await window.PrinterJavascriptInterface.printReceipt(fields);
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/Submit/XMLWriter/Global.js

+function JSettings()
+{
+	this.IE=document.all?true:false;
+	this.MouseX=_JSettings_MouseX;
+	this.MouseY=_JSettings_MouseY;
+	this.SrcElement=_JSettings_SrcElement;
+	this.Parent=_JSettings_Parent;
+	this.RunOnLoad=_JSettings_RunOnLoad;
+	this.FindParent=_JSettings_FindParent;
+	this.FindChild=_JSettings_FindChild;
+	this.FindSibling=_JSettings_FindSibling;
+	this.FindParentTag=_JSettings_FindParentTag;
+}
+function _JSettings_MouseX(e)
+{return this.IE?event.clientX:e.clientX;}
+function _JSettings_MouseY(e)
+{return this.IE?event.clientY:e.clientY;}
+function _JSettings_SrcElement(e)
+{return this.IE?event.srcElement:e.target;}
+function _JSettings_Parent(Node)
+{return this.IE?Node.parentNode:Node.parentElement;}
+function _JSettings_RunOnLoad(Meth){var Prev=(window.onload)?window.onload:function(){};window.onload=function(){Prev();Meth();};}
+function _JSettings_FindParent(Node, Attrib, Value)
+{var Root = document.getElementsByTagName("BODY")[0];
+Node = Node.parentNode;	while (Node != Root && Node.getAttribute(Attrib) != Value){Node=Node.parentNode;}
+if (Node.getAttribute(Attrib) == Value)	{return Node;} else	{return null;}}
+function _JSettings_FindParentTag(Node, TagName)
+{var Root = document.getElementsByTagName("BODY")[0];
+TagName=TagName.toLowerCase();
+Node = Node.parentNode;	while (Node != Root && Node.tagName.toLowerCase() != TagName){Node=Node.parentNode;}
+if (Node.tagName.toLowerCase() == TagName) {return Node;} else {return null;}}
+function _JSettings_FindChild(Node, Attrib, Value)
+{
+	if (Node.getAttribute)
+		if (Node.getAttribute(Attrib) == Value) return Node;
+
+	var I=0;
+	var Ret = null;
+	for (I=0;I<Node.childNodes.length;I++)
+	{
+		Ret = FindChildByAttrib(Node.childNodes[I]);
+		if (Ret) return Ret;
+	}
+	return null;
+}
+function _JSettings_FindSibling(Node, Attrib, Value)
+{
+	var Nodes=Node.parentNode.childNodes;
+	var I=0;
+	for (I=0;I<Nodes.length;I++)
+	{
+		if (Nodes[I].getAttribute)
+		{
+			if (Nodes[I].getAttribute(Attrib) == Value)
+			{return Nodes[I];}
+		}
+	}
+	return null;
+}
+
+export var Settings = new JSettings();
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/Submit/XMLWriter/WebServices.js

+import { GDE_URL } from "../../config.js";
+
+export let urlGetIfExisting = GDE_URL + "/" + "get-if-existing";
+export let urlGetXml = GDE_URL + "/" + "get-xml";
+export let urlWriteXml = GDE_URL + "/" + "write-xml";
+export let urlUpdateEob = GDE_URL + "/" + "update-eob";
+export let urlUpdateException = GDE_URL + "/" + "update-exception";
+export let urlWriteMetrics = GDE_URL + "/" + "write-metrics";
+export let urlGetFields = GDE_URL + "/" + "get-fields";
+export let urlGetFile = GDE_URL + "/" + "get-file";
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/Submit/XMLWriter/XMLWriter.js

+function XMLWriter()
+{
+    this.XML=[];
+    this.Nodes=[];
+    this.State="";
+    this.FormatXML = function(Str)
+    {
+        if (Str)
+            return Str.replace(/&/g, "&amp;").replace(/\"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        return ""
+    }
+    this.BeginNode = function(Name)
+    {
+        if (!Name) return;
+        if (this.State=="beg") this.XML.push(">");
+        this.State="beg";
+        this.Nodes.push(Name);
+        this.XML.push("<"+Name);
+    }
+    this.EndNode = function()
+    {
+        if (this.State=="beg")
+        {
+            this.XML.push("/>");
+            this.Nodes.pop();
+        }
+        else if (this.Nodes.length>0)
+            this.XML.push("</"+this.Nodes.pop()+">");
+        this.State="";
+    }
+    this.Attrib = function(Name, Value)
+    {
+        if (this.State!="beg" || !Name) return;
+        this.XML.push(" "+Name+"=\""+this.FormatXML(Value)+"\"");
+    }
+    this.WriteString = function(Value)
+    {
+        if (this.State=="beg") this.XML.push(">");
+        this.XML.push(this.FormatXML(Value));
+        this.State="";
+    }
+    this.Node = function(Name, Value)
+    {
+        if (!Name) return;
+        if (this.State=="beg") this.XML.push(">");
+        this.XML.push((Value=="" || !Value)?"<"+Name+"/>":"<"+Name+">"+this.FormatXML(Value)+"</"+Name+">");
+        this.State="";
+    }
+    this.Close = function()
+    {
+        while (this.Nodes.length>0)
+            this.EndNode();
+        this.State="closed";
+    }
+    this.ToString = function(){return this.XML.join("");}
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/Submit/XMLWriter/XML_Saver.js

+import { urlUpdateEob, urlWriteXml } from "../../BPO/gfsService.js";
+import { SCHEMA_FILE_PATH } from "../../DataInputWidget/config.js";
+import { schema } from "../../DataInputWidget/generateFields.js";
+import { IS_RETRIEVE_FROM_BPO, OUTPUT_FILE_EXTENSION } from "../../config.js";
+import { createInfoModal } from "../../genericPopup/genericPopup.js";
+import { PROJECT_CODE, ENCODING_PASS, TEMPORARY_FOLDER } from "../config.js";
+import { completeToNextNode } from "../submit.js";
+
+export async function WriteForm(e,metrics,doctype,section) {
+    try {
+        var Frm= document.getElementById("fields");
+        var Nodes=Frm.elements;
+        const myArray = Object.values(metrics);
+        const lookup = schema[doctype][section]
+        // localStorage.setItem("submit", "1");
+
+        let fields = {};
+            for (var i=0;i<Nodes.length;i++) {   
+                if (Nodes[i].style.display === 'none' && !Nodes[i].classList.contains('hidden')) continue 
+                let fid = Nodes[i].id;
+                // Add doctype as field1
+                if (fid === 'DocType') {
+                    fields['1'] = Nodes[i].value;
+                    continue;
+                }
+                if (fid == 'Section' || fid == '' || fid == "submitButton") continue
+                // Skip the textbox in checklist and radiolist
+                if (Nodes[i].classList.contains('radioOther') || Nodes[i].classList.contains('checkboxOther')) continue;
+                // Skip elements of type "button", "submit", and files
+                if (Nodes[i].type === 'button' || Nodes[i].type === 'submit' || fid == '' || Nodes[i].name === 'hidden_file_content') continue; 
+                
+                // If the input element is the start date of date range element
+                if (Nodes[i].name == 'startDate') {
+                    //Store its value and + the value of the next element
+                    fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value + '*' + Nodes[i + 1].value;
+                    i += 1; //increment +1 to skip the endDate
+                    continue;
+                }
+                // If the first radio button was found
+                if (Nodes[i].classList.contains('radioFirst')) {
+                    var key = fid;
+                    const radioButtons = document.getElementsByName(`radioChoices_${key}`);
+                    let selectedValue;
+                    //check if the value is checked to find the selected value
+                    radioButtons.forEach(radio => {
+                        if (radio.checked && radio.value) {
+                            selectedValue = radio.value;
+                            console.log(selectedValue) 
+                        }
+                    });
+
+                    fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = selectedValue;
+                    i += radioButtons.length - 1; //increment the number of radio buttons to skip the other radio button inputs.
+                    continue;
+                }
+
+                // If the first checkbox was found
+                if (Nodes[i].classList.contains('checkboxFirst')) {
+                    var key = fid;
+                    const checkboxButtons = document.getElementsByName(`checkboxChoices_${key}`);
+                    let selectedValue = '';
+                    let isFirstChecked = true; // Variable to track the first checked checkbox
+                    //check each checkbox if it is checked to find the values.
+                    checkboxButtons.forEach(check => {
+                        if (check.checked && check.value) {
+                            if (!isFirstChecked) {
+                                selectedValue += ",";
+                            } else {
+                                isFirstChecked = false;
+                            }
+                            selectedValue += check.value;
+                        }
+                    });
+
+                    fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = selectedValue;
+                    i += checkboxButtons.length - 1; //increment the number of checkboxes to skip the checkboxes input
+                    continue;
+                }
+                fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value;
+            }
+        
+        let fieldOrder = extractAkaValues(schema, doctype, section);
+        console.log(fieldOrder);
+
+        fields = removeBlankValues(fields);
+
+        let response = await createOutputXml(fields, myArray, doctype, section, fieldOrder);
+        return response;
+    }
+    catch(Err) {
+        createInfoModal(null, 'OK', "Error: " + Err.description +" while writing form.");
+    }
+    return false;
+}
+
+function extractAkaValues(json, doctype, section) {
+    const akaValues = [];
+
+    function recursiveExtract(obj) {
+        for (const key in obj) {
+            if (typeof obj[key] === 'object') {
+                recursiveExtract(obj[key]);
+            } else if (key === 'aka') {
+                akaValues.push(obj[key].replace('field', ''));
+            }
+        }
+    }
+
+    recursiveExtract(json[doctype][section]);
+    return akaValues.join('|');
+
+}
+
+async function createOutputXml(fields, metrics, doctype, section, fieldOrder) {
+    let response = null;
+    if (IS_RETRIEVE_FROM_BPO == "Y") {
+        response = await createBPOXML(fields, metrics, doctype, section, fieldOrder);
+    } else{
+        response = await createNonBPOXML(fields, metrics, doctype, section, fieldOrder);
+    }
+    return response;
+}
+
+async function createNonBPOXML(fields, metrics, doctype, section, fieldOrder){
+    console.log(fields);
+    let fileExt = "";
+    switch(ENCODING_PASS){
+        case "PASS1":
+            fileExt = ".DTA"
+            break;
+        
+        case "PASS2":
+            fileExt = ".DTB"
+            break;
+        
+        default:
+            fileExt = ".xml"
+            break;
+    }
+
+    let userID = sessionStorage.getItem("user_id");
+    let fileName = userID + "_" + Date.now() + "_" + PROJECT_CODE + fileExt;
+    let fileNameOnly = userID + "_" + Date.now() + "_" + PROJECT_CODE;
+
+    sessionStorage.setItem("recentlySavedFileNameOnly", fileNameOnly);
+    sessionStorage.setItem("recentlySavedFileName", fileName);
+
+    let xmlData = {
+        "projCode": PROJECT_CODE,
+        "userId": userID,
+        "elementId": "",
+        "schema": SCHEMA_FILE_PATH,
+        "totalRec":"0",
+        "maxRec": "1",
+        "totalKeystroke": metrics[0],
+        "procTime": sessionStorage.getItem("timeStart") + "-" + sessionStorage.getItem("timeEnd"),
+        "procDuration": metrics[1],
+        "eob": "",
+        "exceptionRemark": "",
+        "recordNo": "0",
+        "totalSubRec": "1",
+        "maxSubRec": "1",
+        "imageName": "",
+        "subRecordNo": "1",
+        "eor": "N",
+        "fields": fields,
+        "outputDir": TEMPORARY_FOLDER + "/" + fileNameOnly + "/" + fileName,
+        "doctype": doctype,
+        "section": section,
+        "fieldOrder" : fieldOrder
+    }
+
+    try {
+        const authToken = sessionStorage.getItem('token');
+        let response = await fetch(urlWriteXml, {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${authToken}`
+            },
+            body: JSON.stringify(xmlData)
+        });
+    
+        if (response.ok) {
+            return true;
+        } else {
+            return false;
+        }
+    } catch (error) {
+        // Handle connection errors or other issues
+        console.error('Error:', error);
+        return false;
+    }
+}
+
+async function createBPOXML(fields, metrics, doctype, section, fieldOrder){
+    let elementId = sessionStorage.getItem("element_id");
+    let filePaths = JSON.parse(sessionStorage.getItem("dir_files"));
+    
+    let xmlData = {
+        "projCode": PROJECT_CODE,
+        "userId": sessionStorage.getItem("user_id"),
+        "elementId": elementId,
+        "schema": SCHEMA_FILE_PATH,
+        "totalRec":"1",
+        "maxRec": "1",
+        "totalKeystroke": metrics[0],
+        "procTime": sessionStorage.getItem("timeStart") + "-" + sessionStorage.getItem("timeEnd"),
+        "procDuration": metrics[1],
+        "eob": "",
+        "exceptionRemark": "",
+        "recordNo": "1",
+        "totalSubRec": "1",
+        "maxSubRec": "1",
+        "imageName": "",
+        "subRecordNo": "1",
+        "eor": "N",
+        "fields": fields,
+        "outputDir": sessionStorage.getItem("element_file_loc") + "/" + elementId + OUTPUT_FILE_EXTENSION,
+        "doctype": doctype,
+        "section": section,
+        "fieldOrder" : fieldOrder
+    }
+
+    const authToken = sessionStorage.getItem('token');
+    try {
+        let response = await fetch(urlWriteXml, {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${authToken}`
+            },
+            body: JSON.stringify(xmlData)
+        });
+    
+        if (response.ok) {
+            return true;
+        } else {
+            return false;
+        }
+    } catch (error) {
+        // Handle connection errors or other issues
+        console.error('Error:', error);
+        return false;
+    }
+    
+}
+
+function removeBlankValues(fields) {
+    for (const key in fields) {
+        if (fields.hasOwnProperty(key)) {
+            const value = fields[key];
+            if (value === '' || value === null || value === undefined) {
+              delete fields[key];
+            }
+        }
+    }
+    return fields;
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/Submit/XMLWriter/upload.php

+<?php
+date_default_timezone_set('Asia/Manila');
+$t = time();
+
+$outputDir = json_decode($_POST['data'], true)["outputDir"];
+
+/* Get the name of the uploaded file */
+$filename = $_FILES['file']['name'];
+
+/* Choose where to save the uploaded file */
+if ($outputDir == null) {
+  $outputDir = "../../output/".substr($filename, 0, strpos($filename, "_"))."_".date("m-d-Y_H.i.s",$t);
+  mkdir($outputDir);
+}
+
+$location = $outputDir."/".$filename;
+
+/* Save the uploaded file to the local filesystem */
+if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
+  echo $outputDir; 
+} else { 
+  // echo 'Failure'; 
+}
+
+?>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/Submit/config.js

+export const PROJECT_CODE = "DSQC";
+export const ENCODING_PASS = "PASS1";
+
+export const GFS_URL = "http://107.20.193.188/gfs-explorer-ws/svc/gfs-rest/";
+export const TEMPORARY_FOLDER = "C:/Users/oang/Desktop/Mobile GDE/Elements";
+export const GFS_ROOT_FOLDER = "/Users";
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/captureMetrics/config.js

+// Capture Metrics Config
+export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLock,Pause,PageUp,PageDown,Insert,Delete,Control"
+export const ALLOWED_KPH = 8000;
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/captureMetrics/saveGlobalTime.php

+<?php
+$dir = json_decode($_POST['data'], true)['metrics_dir'];
+$start_time = json_decode($_POST['data'], true)['start_time'];
+$end_time = json_decode($_POST['data'], true)['end_time'];
+
+$rows = [
+    ["\n"],
+    ["\n"],
+    ["Start Time: ".$start_time],
+    ["\n"],
+    ["End Time: ".$end_time]
+];
+
+$fp = fopen($dir, 'a'); 
+foreach ($rows as $row) {
+    fwrite($fp, implode("|", $row));
+}
+fclose($fp);
+?>

WebGde/WebContent/NoBpo/WebGde-Widgets/captureMetrics/saveMetrics.php

+<?php
+date_default_timezone_set('Asia/Manila');
+$t = time();
+
+$outputDir = json_decode($_POST['data'], true)["outputDir"];
+$dir = json_decode($_POST['data'], true)['metrics_dir'];
+
+/* Get the name of the uploaded file */
+$filename = $_FILES['file']['name'];
+
+/* Choose where to save the uploaded file */
+if ($outputDir == null) {
+  $outputDir = $dir.substr($filename, 0, strpos($filename, "_"))."_".date("m-d-Y_H.i.s",$t);
+  mkdir($outputDir);
+}
+
+$location = $outputDir."/".$filename;
+
+/* Save the uploaded file to the local filesystem */
+if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
+  echo $outputDir; 
+} else { 
+  echo 'Failure'; 
+}
+?>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/config.js

+export const SCHEMA_FILE = "./src/sample_schema/HR Speed Test schema.json"
+
+export const INPUT_FOLDER = "./input/"
+
+export const OUTPUT_FILES = "../../output/"
+
+export const METRIC_FILES = "../../metrics/"
+
+export const HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.xlsx"
+export const ROOT_FOLDER = "/WebGde-Widgets";
+
+//this determines if the images will be retrieved from the gfs
+// export const DOMAIN = "http://3.83.246.74:8080"
+export var DOMAIN = ""
+export const CONTEXTROOT = "gfs-explorer-ws"
+export let GDE_URL = DOMAIN + "/MobileGdeDev/svc/gfs-rest"
+export let FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
+export let DOWNLOAD_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-download-link"
+export const IS_RETRIEVE_FROM_GFS = "N"
+
+export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLock,Pause,PageUp,PageDown,Insert,Delete,Control"
+
+export const OUTPUT_FILE_EXTENSION = ".DTA"
+
+//BPO CONFIG
+export const IS_RETRIEVE_FROM_BPO = "N"
+// export const  BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
+// export const  CURRENT_NODE = "Web GDE"
+export let BPO_URL = DOMAIN + "bpo/";
+// export const CURRENT_NODE = "Web_GDE_DEV"
+export let CURRENT_NODE = ""
+export const ENCODING_PASS = "PASS1"
+export const NEXT_NODE = "Completed"
+export const EXCEPTION_NODE = "Exception"
+export const SHOW_ELEMENT_LIST_VIEWER = "N"
+export const ADD_NEW_OPTION = "N"
+export const DISPLAYED_DETAILS = "extra1|extra2|extra3" //pipe-delimited
+export const USERID_FIELD = "extra3"
+export const ENABLE_PRINT = "Y"
+
+export const PDF_EXTENSION = ".pdf"
+export const JPG_EXTENSION = ".jpg"
+export const PNG_EXTENSION = ".png"
+
+export const REASON_LIST = "Lack of Time,Cannot Find Address,No Authorized/Available Person,Not operating / Closed during time of Inspection,Firm is no longer operational / retired business,Environmental / Unforeseen circumstances"
+
+//KEYCLOAK CONFIG
+window.REDIRECT_URL = 'http://auth-server/auth/realms/GFS/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri';
+
+export function initializeConfig(gde_domain, gde_bpo_domain, gde_bpo_node){
+    GDE_URL = gde_domain + "svc/gfs-rest";
+    CURRENT_NODE = gde_bpo_node;
+    BPO_URL = gde_bpo_domain;
+}

WebGde/WebContent/NoBpo/WebGde-Widgets/documentControlWidget/DocumentControl.css

+.ctrl-buttons-container {
+    display: flex;
+    justify-content: center;
+    height: 70px;
+    background-color: white;
+    margin-top: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.document-control-button {
+    width: 100%;
+    padding: 0px;
+    border-style: none;
+    border-radius: 8px;
+    height: 40px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    color: white;
+}
+
+#submitButton {
+    font-weight: bold;
+    background-color: #096835;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+#rejectButton {
+    font-weight: bold;
+    background-color: #9B0404;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+#printButton {
+    font-weight: bold;
+    background-color: #e37200;
+    margin-left: 5px;
+    margin-right: 5px;
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/documentControlWidget/documentControlWidget.js

+import { createRejectWindow } from '../BPO/rejectElement.js';
+import { createReturnWindow } from '../BPO/returnElement.js';
+import { goBackToElementListViewer } from '../ElementListWidget/ElementListWidget.js';
+import { createPrintWindow } from '../PrintWidget/print.js';
+import { completeToNextNode, createSubmitWindow, submitForm } from '../Submit/submit.js';
+import { ENABLE_PRINT, IS_RETRIEVE_FROM_BPO, ROOT_FOLDER, SHOW_ELEMENT_LIST_VIEWER } from '../config.js';
+import { createInfoModal } from '../genericPopup/genericPopup.js';
+import { BPO_OBJECT, DISPLAY_FIELD_OBJECT, DOCUMENT_CONTROL_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from '../globalVariable.js';
+
+export class DocumentControlWidget {
+
+	global = {
+		container: null,
+		submitBtn: null,
+		returnBtn: null,
+		rejectBtn: null,
+		printBtn: null
+	}
+
+	constructor() {
+		this.init();
+	}
+
+	init() {
+		this.global.container = document.createElement("div");
+		this.global.container.id = "DocumentcontrolButtonsContainer";
+		this.global.container.classList.add("ctrl-buttons-container");
+	
+		this.global.submitBtn = document.createElement("button");
+		this.global.submitBtn.id = "submitButton";
+		this.global.submitBtn.title = "Submit";
+		this.global.submitBtn.classList.add("document-control-button");
+		this.global.submitBtn.textContent = "Submit";
+	
+		this.global.returnBtn = document.createElement("button");
+		this.global.returnBtn.id = "returnButton";
+		this.global.returnBtn.title = "Return";
+		this.global.returnBtn.classList.add("document-control-button");
+		this.global.returnBtn.textContent = "Return";
+	
+		this.global.rejectBtn = document.createElement("button");
+		this.global.rejectBtn.id = "rejectButton";
+		this.global.rejectBtn.title = "Reject";
+		this.global.rejectBtn.classList.add("document-control-button");
+		this.global.rejectBtn.textContent = "Reject";
+
+		this.global.printBtn = document.createElement("button");
+		this.global.printBtn.id = "printButton";
+		this.global.printBtn.title = "Print";
+		this.global.printBtn.classList.add("document-control-button");
+		this.global.printBtn.textContent = "Print";
+	
+		if (IS_RETRIEVE_FROM_BPO === "Y") {
+			this.global.container.appendChild(this.global.rejectBtn);	
+		} 
+		if (ENABLE_PRINT === "Y") {
+			this.global.container.appendChild(this.global.printBtn);
+		}
+
+		this.global.container.appendChild(this.global.submitBtn);
+	
+		this.addEvenListeners();
+	}
+	
+
+	addEvenListeners() {
+
+		// Get the initial window height and store it in session storage
+		const initialWindowHeight = window.innerHeight;
+		sessionStorage.setItem('initialWindowHeight', initialWindowHeight);
+
+		// Add an event listener for the resize event
+		window.addEventListener("resize", (e) => {
+			const container = this.global.container;
+			
+			// Get the stored initial window height from session storage
+			const storedHeight = sessionStorage.getItem('initialWindowHeight');
+			
+			// Check if the current window height matches the stored height
+			if (window.innerHeight !== parseInt(storedHeight)) {
+				container.style.display = "none"; // Hide container when heights don't match
+			} else {
+				container.style.display = "flex"; // Show container when heights match
+			}
+		});
+
+		this.global.submitBtn.onclick = async (e) => {
+			createSubmitWindow(e);
+		}
+
+		this.global.returnBtn.onclick = (e) => {
+			createReturnWindow();
+		}
+
+		this.global.rejectBtn.onclick = (e) => {
+			createRejectWindow();
+		}
+
+		this.global.printBtn.onclick = (e) => {
+			createPrintWindow();
+		}
+
+	}
+
+	getWidget() {
+		return this.global.container;
+	}
+
+	getSubmitBtn() {
+		return this.global.submitBtn;
+	}
+
+	getReturnBtn() {
+		return this.global.returnBtn;
+	}
+
+	getRejectBtn() {
+		return this.global.rejectBtn;
+	}
+
+}

WebGde/WebContent/NoBpo/WebGde-Widgets/documentControlWidget/main.js

+let root = document.getElementById("root");
+
+let controls = new DocumentControlWidget();
+
+root.appendChild(controls.getWidget());

WebGde/WebContent/NoBpo/WebGde-Widgets/documentControlWidget/test.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My Website</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="documentControlWidget.js"></script>
+	  <script src="main.js"></script>
+  </body>
+</html>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/genericPopup/Assets/exclamation-mark-inside-a-circle-svgrepo-com.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#FFFFFF" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 27.963 27.963" xml:space="preserve">
+<g>
+	<g id="c129_exclamation">
+		<path d="M13.983,0C6.261,0,0.001,6.259,0.001,13.979c0,7.724,6.26,13.984,13.982,13.984s13.98-6.261,13.98-13.984
+			C27.963,6.259,21.705,0,13.983,0z M13.983,26.531c-6.933,0-12.55-5.62-12.55-12.553c0-6.93,5.617-12.548,12.55-12.548
+			c6.931,0,12.549,5.618,12.549,12.548C26.531,20.911,20.913,26.531,13.983,26.531z"/>
+		<polygon points="15.579,17.158 16.191,4.579 11.804,4.579 12.414,17.158 		"/>
+		<path d="M13.998,18.546c-1.471,0-2.5,1.029-2.5,2.526c0,1.443,0.999,2.528,2.444,2.528h0.056c1.499,0,2.469-1.085,2.469-2.528
+			C16.441,19.575,15.468,18.546,13.998,18.546z"/>
+	</g>
+	<g id="Capa_1_207_">
+	</g>
+</g>
+</svg>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/genericPopup/genericPopup.css

+.backdrop-container {
+  background-color: #000000a1;
+  display: -webkit-inline-box;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 50;
+  backdrop-filter: blur(4px);
+}
+
+#popupContainer {
+  width: 80%;
+  /* height: 160px; */
+  display: none;
+  justify-content: space-between;
+  flex-direction: column;
+  flex: 1;
+  position: fixed;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-style: none;
+  border-radius: 8px;
+  background: white;
+  padding: 20px;
+  text-align: center;
+  z-index: 999;
+  animation-name: modalTransition;
+  animation-duration: .4s;
+  box-shadow: 0px 3px 6px #00000029;
+}
+
+#popupContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+}
+
+#popupContent form{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 20px;
+  height: 120px;
+}
+
+.popup-text {
+  font-size: 19px;
+  margin-bottom: 25px;
+}
+
+.warning-message {
+  font-style: italic;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
+.modal-button-container {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.modal-button {
+  border-style: none;
+  border-radius: 8px;
+  width: 40%;
+  font-size: 16px;
+  padding: 8px 0px;
+}
+
+#cancelButtonModal {
+  border-style: solid;
+  border-color: #707070;
+  border-width: thin;
+  color: #98A3B5;
+  font-weight: bold;
+}
+
+#yesButtonModal {
+  background-color: #006BA6;
+  color: white;
+  font-weight: bold;
+}
+
+#okButton {
+  border-style: solid;
+  border-color: #707070;
+  border-width: thin;
+  color: #98A3B5;
+  font-weight: bold;
+  width: 40%;
+}
+
+#rejectButton {
+  background-color: #D46565;
+  color: white;
+  font-weight: bold;
+}
+
+.error-top-div {
+  background-color: #D46565;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px 8px 0 0;
+  margin-left: -20px;
+  margin-right: -20px;
+  margin-top: -20px;
+  margin-bottom: 20px;
+  padding-top: 14px;
+  padding-bottom: 14px;
+  font-size: 21px;
+  font-weight: bold;
+  color: white;
+}
+
+.error-top-div .icon{
+  height: 30px;
+  width: 30px;
+  display: inline-block;
+	margin-right: 14px;
+	background-repeat: no-repeat;
+  background-size: contain;
+	background-position: center center;
+  background-image: url('Assets/exclamation-mark-inside-a-circle-svgrepo-com.svg');
+}
+
+#checkBoxCont label{
+  font-weight: 100;
+  color: black;
+  text-align: left;
+}
+
+#MssgBox {
+  border-style: solid;
+  border-color: #707070;
+  border-width: thin;
+  border-radius: 8px;
+}
+
+@keyframes modalTransition {
+  from{
+      top:-300px;
+      opacity: 0;
+  }
+
+  to{
+      top:55%;
+      opacity: 1;
+  }
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/genericPopup/genericPopup.js

+export function createModal(okButtonAction, popupTitleText) {
+	var okButton = document.createElement("button");
+	okButton.id = "okButton";
+	okButton.textContent = "OK";
+
+	var cancelButton = document.createElement("button");
+	cancelButton.id = "cancelButton";
+	cancelButton.textContent = "Cancel";
+
+	// Get all elements with the class "backdrop-container"
+	var existingBackdropContainers = document.querySelectorAll(".backdrop-container");
+
+	// Iterate through the NodeList and remove each element
+	existingBackdropContainers.forEach(function (element) {
+		element.remove();
+	});
+
+	var backdropContainer = document.createElement("div");
+	backdropContainer.classList.add("backdrop-container"); 
+	backdropContainer.id = "backdropContainerModal";
+
+	var popupContainer = document.createElement("div");
+
+	var popupContent = document.createElement("div");
+	popupContent.id = "popupContent";
+	var popupTitle = document.createElement("p");
+	popupTitle.textContent = popupTitleText;
+	popupContent.appendChild(popupTitle);
+	popupContent.appendChild(okButton);
+	popupContent.appendChild(cancelButton);
+	popupContainer.appendChild(popupContent);
+	backdropContainer.appendChild(popupContainer);
+	document.body.appendChild(backdropContainer);
+	document.getElementById("popupContainer").style.display = "block";
+	document.getElementById("okButton").addEventListener("click", function() {
+		document.getElementById("backdropContainerModal").style.display = "none";
+		if (typeof okButtonAction === "function") {
+			okButtonAction();
+		}
+	});
+	document.getElementById("cancelButton").addEventListener("click", function() {
+		document.getElementById("backdropContainerModal").remove();
+	});
+}
+
+function handleOK() {
+	console.log("OK button pressed!");
+}
+/*createModal(handleOK, "Hello World!!!");*/
+
+
+export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
+	var buttonGroup = document.createElement("div");
+	buttonGroup.classList.add("modal-button-container"); 
+
+	var okButton = document.createElement("button");
+	okButton.id = "okButton";
+	okButton.classList.add("modal-button");
+	okButton.textContent = buttonTxt;
+
+	buttonGroup.appendChild(okButton);
+
+	// Get all elements with the class "backdrop-container"
+	var existingBackdropContainers = document.querySelectorAll(".backdrop-container");
+
+	// Iterate through the NodeList and remove each element
+	existingBackdropContainers.forEach(function (element) {
+		element.remove();
+	});
+
+	var backdropContainer = document.createElement("div");
+	backdropContainer.classList.add("backdrop-container"); 
+	backdropContainer.id = "backdropContainerInfo";
+
+	var popupContainer = document.createElement("div");
+	popupContainer.id = "popupContainer";
+
+	var popupContent = document.createElement("div");
+	popupContent.id = "popupContent";
+	var popupTitle = document.createElement("p");
+	popupTitle.textContent = popupTitleText;
+	popupTitle.classList.add("popup-text");
+	popupContent.appendChild(popupTitle);
+	popupContent.appendChild(buttonGroup);
+	popupContainer.appendChild(popupContent);
+	backdropContainer.appendChild(popupContainer);
+	document.body.appendChild(backdropContainer);
+	document.getElementById("popupContainer").style.display = "block";
+	document.getElementById("okButton").addEventListener("click", function() {
+		console.log("OK Button clicked!"); // This will let you know the button was clicked
+		document.getElementById("backdropContainerInfo").style.display = "none";
+		if (typeof okButtonAction === "function") {
+			console.log("YES");
+			okButtonAction();
+		}
+	});
+
+}
+
+export function createErrorModal(okButtonAction, buttonTxt, popupTitleText){
+	var topDiv = document.createElement("div");
+	topDiv.classList.add("error-top-div");
+	topDiv.innerHTML = '<span class="icon"></span> Error';
+
+	var buttonGroup = document.createElement("div");
+	buttonGroup.classList.add("modal-button-container"); 
+
+	var okButton = document.createElement("button");
+	okButton.id = "okButton";
+	okButton.classList.add("modal-button");
+	okButton.textContent = buttonTxt;
+
+	buttonGroup.appendChild(okButton);
+
+	// Get all elements with the class "backdrop-container"
+	var existingBackdropContainers = document.querySelectorAll(".backdrop-container");
+
+	// Iterate through the NodeList and remove each element
+	existingBackdropContainers.forEach(function (element) {
+		element.remove();
+	});
+
+	var backdropContainer = document.createElement("div");
+	backdropContainer.classList.add("backdrop-container"); 
+	backdropContainer.id = "backdropContainerError";
+
+	var popupContainer = document.createElement("div");
+	popupContainer.id = "popupContainer";
+
+	var popupContent = document.createElement("div");
+	popupContent.id = "popupContent";
+	var popupTitle = document.createElement("p");
+	popupTitle.textContent = popupTitleText;
+	popupTitle.classList.add("popup-text");
+	popupContent.appendChild(popupTitle);
+	popupContent.appendChild(buttonGroup);
+	popupContainer.appendChild(topDiv);
+	popupContainer.appendChild(popupContent);
+	backdropContainer.appendChild(popupContainer);
+	document.body.appendChild(backdropContainer);
+	document.getElementById("popupContainer").style.display = "block";
+	document.getElementById("okButton").addEventListener("click", function() {
+		console.log("OK Button clicked!"); // This will let you know the button was clicked
+		document.getElementById("backdropContainerError").style.display = "none";
+		if (typeof okButtonAction === "function") {
+			console.log("YES");
+			okButtonAction();
+		}
+	});
+}
+
+export function createConfirmationModal(okButtonFunction, popupTitleText, warningMessage) {
+	var yesButton = document.createElement("button");
+	yesButton.id = "yesButtonModal";
+	yesButton.textContent = "Yes";
+	yesButton.classList.add("modal-button");
+  
+	var cancelButton = document.createElement("button");
+	cancelButton.id = "cancelButtonModal";
+	cancelButton.textContent = "Cancel";
+	cancelButton.classList.add("modal-button"); 
+
+	var buttonGroup = document.createElement("div");
+	buttonGroup.classList.add("modal-button-container"); 
+	buttonGroup.appendChild(cancelButton);
+	buttonGroup.appendChild(yesButton);
+
+	// Get all elements with the class "backdrop-container"
+	var existingBackdropContainers = document.querySelectorAll(".backdrop-container");
+
+	// Iterate through the NodeList and remove each element
+	existingBackdropContainers.forEach(function (element) {
+		element.remove();
+	});
+  
+	var backdropContainer = document.createElement("div");
+	backdropContainer.id = "backdropContainerConfirmation";
+	backdropContainer.classList.add("backdrop-container"); 
+  
+	var popupContainer = document.createElement("div");
+	popupContainer.id = "popupContainer";
+	popupContainer.classList.add("popup-container");
+  
+	var popupContent = document.createElement("div");
+	popupContent.id = "popupContent";
+  
+	var popupTitle = document.createElement("p");
+	popupTitle.classList.add("popup-text");
+	popupTitle.textContent = popupTitleText;
+
+	popupContent.appendChild(popupTitle);
+
+	if(warningMessage){
+		var warningText = document.createElement("p");
+		warningText.classList.add("warning-message");
+		warningText.textContent = ""+ warningMessage + "";
+		popupContent.appendChild(warningText);
+
+	}
+  
+	popupContent.appendChild(buttonGroup);
+  
+	popupContainer.appendChild(popupContent);
+	backdropContainer.appendChild(popupContainer);
+	document.body.appendChild(backdropContainer);
+  
+	document.getElementById("popupContainer").style.display = "flex";
+  
+	document.getElementById("yesButtonModal").addEventListener("click", function () {
+		document.getElementById("backdropContainerConfirmation").remove();
+		if (typeof okButtonFunction === "function") {
+			okButtonFunction();
+		}
+		return true;
+	});
+  
+	document.getElementById("cancelButtonModal").addEventListener("click", function () {
+	  document.getElementById("backdropContainerConfirmation").remove();
+	  return false;
+	});
+}
+  
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/globalVariable.js

+export let HIGHLIGHT_OBJECT = null;
+export let IMAGE_VIEWER_OBJECT  = null;
+export let INDEXED_DB_STORAGE = null;
+export let BPO_OBJECT = null;
+
+export let IS_GDE_ACTIVATED = sessionStorage.getItem("GDE-Activated") ? sessionStorage.getItem("GDE-Activated") : false;
+
+export let INDEXED_DB_NAME = "ImageDB";
+export let INDEXED_DB_TBL_NAME = "images";
+export let DISPLAY_FIELD_OBJECT = null;
+export let DOCUMENT_CONTROL_OBJECT = null;
+
+
+export function setIndexedDBStorage(DBOject){
+    INDEXED_DB_STORAGE = DBOject;
+}
+
+export function setImageViewerObject(IVObject){
+    IMAGE_VIEWER_OBJECT = IVObject;
+}
+
+export function setHighlightObject(HObject){
+    HIGHLIGHT_OBJECT = HObject;
+}
+
+export function setBPOObject(BPO){
+    BPO_OBJECT = BPO;
+}
+
+export function setDisplayFieldObject(displayField){
+    DISPLAY_FIELD_OBJECT = displayField;
+}
+
+export function setDocumentControlObject(object){
+    DOCUMENT_CONTROL_OBJECT = object;
+}
+
+export function activateGDE(){
+    sessionStorage.setItem("GDE-Activated", true),
+    IS_GDE_ACTIVATED = true;
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Data Input Field</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./script.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="./ImageViewerWidget/modules/imageViewer/imageViewer.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+    <script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
+</head>
+<body>
+    <div id="imageViewerContainer"></div>
+    <aside id="input-field-container" class="sidebar"></aside>  
+</body>
+</html>
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/sample_schema/10_field_schema.json

+{
+    "SECTION":
+    {
+        "Surname":
+        {
+            "fieldLabel": "Surname",
+            "validation":
+            {
+                "fieldLength": 30,
+                "collection": "alphanumeric",
+                "invalidchar": "`~!@#&$%^*._={}[]:;/\"|\\<>",
+                "mandatory": true
+            }
+        },
+        "Religion":
+        {
+            "fieldLabel": "Religion",
+            "validation":
+            {
+                "fieldLength": 30,
+                "collection": "alphabet"
+            }
+        },
+        "Place_of_Birth":
+        {
+            "fieldLabel": "Place of Birth",
+            "validation":
+            {
+                "fieldLength": 50,
+                "collection": "alphanumeric",
+                "mandatory": true,
+                "invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>"
+            }
+        },
+        "Birthdate":
+        {
+            "fieldLabel": "Birthdate",
+            "validation":
+            {
+                "fieldLength": 10,
+                "collection": "datepicker",
+                "regexformat": "(^0[0-9]|^1[012])[-](0[0-9]|[12][0-9]|3[01])[-]((19\\d\\d)|(200[0-9])|(201[0-9])|(202[0])|0000)",
+                "mandatory": true
+            }
+        },
+        "Age":
+        {
+            "fieldLabel": "Age",
+            "validation":
+            {
+                "fieldLength": 2,
+                "collection": "numeric",
+                "mandatory": true
+            }
+        },
+        "Gender":
+        {
+            "fieldLabel": "Gender",
+            "validation":
+            {
+                "fieldLength": 1,
+                "collection": "dropdown",
+                "options": ["M", "F"],
+                "mandatory": true
+            }
+        },
+        "Civil_Status":
+        {
+            "fieldLabel": "Civil Status",
+            "validation":
+            {
+                "fieldLength": 15,
+                "collection": "dropdown",
+                "options": ["Single", "Married", "Widowed"],
+                "mandatory": true
+            }
+        },
+        "Nationality":
+        {
+            "fieldLabel": "Nationality",
+            "validation":
+            {
+                "fieldLength": 15,
+                "collection": "dropdown",
+                "options": ["Filipino", "Foreigner"],
+                "mandatory": true
+            }
+        },
+        "Height_in_Cm":
+        {
+            "fieldLabel": "Height (in cm)",
+            "validation":
+            {
+                "fieldLength": 3,
+                "collection": "numeric"
+            }
+        },
+        "Weight_in_Kg":
+        {
+            "fieldLabel": "Weight (in kg)",
+            "validation":
+            {
+                "fieldLength": 3,
+                "collection": "numeric"
+            }
+        }
+    }
+}
\ No newline at end of file

WebGde/WebContent/NoBpo/WebGde-Widgets/sample_schema/15_field_schema.json

+{
+    "SECTION":
+    {
+        "Surname":
+        {
+            "fieldLabel": "Surname",
+            "validation":
+            {
+                "fieldLength": 30,
+                "collection": "alphanumeric",
+                "invalidchar": "`~!@#&$%^*._={}[]:;/\"|\\<>",
+                "mandatory": true
+            }
+        },
+        "House_Number":
+        {
+            "fieldLabel": "House Number",
+            "validation":
+            {
+                "fieldLength": 15,
+                "collection": "alphanumeric",
+                "invalidchar": "`~!@&$%^*_={}[]:;\"|\\<>"
+            }
+        },
+        "Street":
+        {
+            "fieldLabel": "Street",
+            "validation":
+            {
+                "fieldLength": 30,
+                "collection": "alphanumeric",
+                "invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>"
+            }
+        },
+        "Village_Subdivision":
+        {
+            "fieldLabel": "Village/Subdivision",
+            "validation":
+            {
+                "fieldLength": 30,
+                "collection": "alphanumeric",
+                "invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>"
+            }
+        },
+        "Municipality_City_Province":
+        {
+            "fieldLabel": "Municipality/City/Province",
+            "validation":
+            {
+                "fieldLength": 30,
+                "collection": "alphanumeric",
+                "mandatory": true,
+                "invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>"
+            }
+        },
+        "Years_of_Stay":
+        {
+            "fieldLabel": "Years of Stay",
+            "validation":
+            {
+                "fieldLength": 2,
+                "collection": "numeric"
+            }
+        },
+        "Religion":
+        {
+            "fieldLabel": "Religion",
+            "validation":
+            {
+                "fieldLength": 30,
+                "collection": "alphabet"
+            }
+        },
+        "Place_of_Birth":
+        {
+            "fieldLabel": "Place of Birth",
+            "validation":
+            {
+                "fieldLength": 50,
+                "collection": "alphanumeric",
+                "mandatory": true,
+                "invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>"
+            }
+        },
+        "Birthdate":
+        {
+            "fieldLabel": "Birthdate",
+            "validation":
+            {
+                "fieldLength": 10,
+                "collection": "datepicker",
+                "regexformat": "(^0[0-9]|^1[012])[-](0[0-9]|[12][0-9]|3[01])[-]((19\\d\\d)|(200[0-9])|(201[0-9])|(202[0])|0000)",
+                "mandatory": true
+            }
+        },
+        "Age":
+        {
+            "fieldLabel": "Age",
+            "validation":
+            {
+                "fieldLength": 2,
+                "collection": "numeric",
+                "mandatory": true
+            }
+        },
+        "Gender":
+        {
+            "fieldLabel": "Gender",
+            "validation":
+            {
+                "fieldLength": 1,
+                "collection": "dropdown",
+                "options": ["M", "F"],
+                "mandatory": true
+            }
+        },
+        "Civil_Status":
+        {
+            "fieldLabel": "Civil Status",
+            "validation":
+            {
+                "fieldLength": 15,
+                "collection": "dropdown",
+                "options": ["Single", "Married", "Widowed"],
+                "mandatory": true
+            }
+        },
+        "Nationality":
+        {
+            "fieldLabel": "Nationality",
+            "validation":
+            {
+                "fieldLength": 15,
+                "collection": "dropdown",
+                "options": ["Filipino", "Foreigner"],
+                "mandatory": true
+            }
+        },
+        "Height_in_Cm":
+        {
+            "fieldLabel": "Height (in cm)",
+            "validation":
+            {
+                "fieldLength": 3,
+                "collection": "numeric"
+            }
+        },
+        "Weight_in_Kg":
+        {
+            "fieldLabel": "Weight (in kg)",
+            "validation":
+            {
+                "fieldLength": 3,
+                "collection": "numeric"
+            }
+        }
+    }
+}
\ No newline at end of file