From 7810abc1ae72ff1631acd18cee554f4aecfee75d Mon Sep 17 00:00:00 2001
From: gregory1996 <grigoriskatrakazas@gmail.com>
Date: Thu, 20 Jun 2024 15:34:58 +0300
Subject: [PATCH] Add dynamic table display for claims

---
 .../acme-verifier/public/styles/styles.css    | 63 ++++++++++++++++++-
 .../acme-verifier/views/verifier/success.pug  | 18 ++++--
 2 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/wallet-enterprise-configurations/acme-verifier/public/styles/styles.css b/wallet-enterprise-configurations/acme-verifier/public/styles/styles.css
index 73cfd1b..34ef9f9 100644
--- a/wallet-enterprise-configurations/acme-verifier/public/styles/styles.css
+++ b/wallet-enterprise-configurations/acme-verifier/public/styles/styles.css
@@ -602,7 +602,7 @@ th {
 }
 
 textarea.wide{
-	width: 40% !important;
+	width: 60% !important;
 }
 
 #json-textarea {
@@ -614,7 +614,6 @@ textarea.wide{
 	color: black;
 	overflow: auto;
 	resize: vertical;
-	width: 500px;
 	min-height: 200px;
 }
 
@@ -718,3 +717,63 @@ textarea.wide{
 .checkbox input[type="checkbox"]:checked + label:after {
 	display: block;
 }
+
+/* CSS for the claims tables */
+
+/* CSS for the claims tables */
+.claims-tables {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.claims-tables h4 {
+	margin: 10px 0;
+	color: #333;
+}
+
+.table-container {
+	width: 60%;
+	margin-bottom: 20px;
+	overflow-x: auto; /* Enable horizontal scrolling */
+}
+
+.table-container table {
+	width: 100%;
+	border-collapse: collapse;
+	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+
+	.table-container{
+		width: -webkit-fill-available!important;
+		margin-left: 1%;
+		margin-right: 1%;
+	}
+}
+
+.table-container table thead tr {
+	background-color: #f2f2f2;
+}
+
+.table-container table th, 
+.table-container table td {
+	padding: 10px;
+	text-align: left;
+	border: 1px solid #ddd;
+	font-size: 14px;
+}
+
+.table-container table th {
+	color: white;
+}
+
+.table-container table tbody tr:nth-child(even) {
+	background-color: #f9f9f9;
+}
+
+.table-container table tbody tr:hover {
+	background-color: #f1f1f1;
+}
diff --git a/wallet-enterprise-configurations/acme-verifier/views/verifier/success.pug b/wallet-enterprise-configurations/acme-verifier/views/verifier/success.pug
index e512a3b..cbf57de 100644
--- a/wallet-enterprise-configurations/acme-verifier/views/verifier/success.pug
+++ b/wallet-enterprise-configurations/acme-verifier/views/verifier/success.pug
@@ -28,10 +28,20 @@ block layout-content
 
 				h3 Requested claims extracted from credentials
 
-				// Text area to display claims
-				textarea#json-textarea.wide
-					//- Display the 'credentialPayloads' JSON object
-					| #{JSON.stringify(presentationClaims, null, 2)}
+				.claims-tables
+					each claimType in Object.keys(presentationClaims)
+						h4= claimType
+						.table-container(style="overflow-x: auto;")
+							table
+								thead
+									tr
+										th Name
+										th Value
+								tbody
+									each claim in presentationClaims[claimType]
+										tr
+											td= claim.name
+											td= claim.value
 
 				h3 Credentials