conflict: schema and list page

Signed-off-by: tipusinghaw <tipu.singh@ayanworks.com>

astro.config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from 'astro/config';
 import react from "@astrojs/react";
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
+
 const DEV_PORT = 3000;
 
 // https://astro.build/config
@@ -31,3 +32,9 @@ export default defineConfig({
   sitemap(), tailwind(), react()],
   adapter: Deno()
 });
+
+if (typeof globalThis !== 'undefined' && typeof Deno !== 'undefined') {
+  globalThis.process ||= {
+    env: Deno.env.toObject()
+  }
+}

src/api/Auth.ts

@@ -4,6 +4,7 @@ import { number, string } from 'yup'
 import type { AxiosError } from 'axios'
 import CryptoJS from "crypto-js"
 import { apiRoutes } from '../config/apiRoutes'
+import { envConfig } from '../config/envConfig'
 import { storageKeys } from '../config/CommonConstant'
 
 export interface UserSignUpData {
@@ -125,7 +126,7 @@ export const addPasswordDetails = async(payload: AddPasswordDetails, email:strin
 }
 
 export const passwordEncryption = (password: string): string => {
-    const CRYPTO_PRIVATE_KEY: string = `${import.meta.env.PUBLIC_CRYPTO_PRIVATE_KEY}`
+    const CRYPTO_PRIVATE_KEY: string = `${envConfig.PUBLIC_CRYPTO_PRIVATE_KEY}`    
     const encryptedPassword: string = CryptoJS.AES.encrypt(JSON.stringify(password), CRYPTO_PRIVATE_KEY).toString()
     return encryptedPassword
 }
@@ -134,21 +135,21 @@ export const encryptData = (value: any): string => {
     if(typeof(value) !== 'string'){
         value = JSON.stringify(value)
     }
-    const CRYPTO_PRIVATE_KEY: string = `${import.meta.env.PUBLIC_CRYPTO_PRIVATE_KEY}`
+    const CRYPTO_PRIVATE_KEY: string = `${envConfig.PUBLIC_CRYPTO_PRIVATE_KEY}`
     const convrtedValue: string = CryptoJS.AES.encrypt(value, CRYPTO_PRIVATE_KEY).toString()
     return convrtedValue
 }
 
 export const decryptData = (value: any): string => {
-    const CRYPTO_PRIVATE_KEY: string = `${import.meta.env.PUBLIC_CRYPTO_PRIVATE_KEY}`
+    const CRYPTO_PRIVATE_KEY: string = `${envConfig.PUBLIC_CRYPTO_PRIVATE_KEY}`
     const bytes = CryptoJS.AES.decrypt(value, CRYPTO_PRIVATE_KEY)
     var originalValue: string = bytes.toString(CryptoJS.enc.Utf8);
     return originalValue
 }
 
 export const setToLocalStorage = async (key: string, value: any) =>{
-    const convrtedValue = await encryptData(value)
-    const setValue = await localStorage.setItem(key, convrtedValue as string)
+    const convertedValue = await encryptData(value)
+    const setValue = await localStorage.setItem(key, convertedValue as string)
     return true
 }
 
@@ -157,3 +158,8 @@ export const getFromLocalStorage = async (key: string) =>{
     const convertedValue = value ? await decryptData(value) : ''
     return convertedValue
 }
+
+export const removeFromLocalStorage = async (key: string) => {
+	await localStorage.removeItem(key);
+	return true;
+};

src/api/connection.ts

@@ -0,0 +1,21 @@
+import { apiRoutes } from '../config/apiRoutes';
+import { storageKeys } from '../config/CommonConstant';
+import { getHeaderConfigs } from '../config/GetHeaderConfigs';
+import { axiosGet } from '../services/apiRequests';
+import { getFromLocalStorage } from './Auth';
+
+export const getConnectionsByOrg = async () => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.Issuance.getAllConnections}?orgId=${orgId}`;
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};

src/api/issuance.ts

@@ -0,0 +1,57 @@
+import type { IssueCredential } from '../common/enums';
+import { apiRoutes } from '../config/apiRoutes';
+import { storageKeys } from '../config/CommonConstant';
+import { getHeaderConfigs } from '../config/GetHeaderConfigs';
+import { axiosGet, axiosPost } from '../services/apiRequests';
+import { getFromLocalStorage } from './Auth';
+
+export const getIssuedCredentials = async (state: IssueCredential) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.Issuance.getIssuedCredentials}?orgId=${orgId}&state=${state}`;
+
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const getCredentialDefinitions = async (schemaId: string) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+    const url = `${apiRoutes.Issuance.getCredDefBySchemaId}?schemaId=${schemaId}&orgId=${orgId}`;
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+
+export const issueCredential = async (data: object) => {
+	const url = apiRoutes.Issuance.issueCredential;
+	const payload = data;
+	const axiosPayload = {
+		url,
+		payload,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosPost(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};

src/app/LayoutCommon.astro

@@ -6,7 +6,8 @@ import { SITE_TITLE } from './constants.js';
 
 const { class: clazz } = Astro.props;
 
-// import { ViewTransitions } from 'astro:transitions';
+const baseUrl = process.env.PUBLIC_BASE_URL || import.meta.env.PUBLIC_BASE_URL
+const encryptKey = process.env.PUBLIC_CRYPTO_PRIVATE_KEY || import.meta.env.PUBLIC_CRYPTO_PRIVATE_KEY
 
 ---
 
@@ -65,6 +66,11 @@ const { class: clazz } = Astro.props;
 	import 'flowbite/dist/datepicker.js';
 </script>
 
+<script define:vars={{ baseUrl, encryptKey }}>
+	globalThis.baseUrl = baseUrl;
+	globalThis.encryptKey = encryptKey;
+</script>
+
 <style is:global>
 	@import url('https://fonts.cdnfonts.com/css/inter');
 </style>

src/app/SideBar.astro

@@ -138,9 +138,9 @@ import { pathRoutes } from "../config/pathRoutes";
 							</li>
 							<li>
 								<a
-									href={pathRoutes.organizations.credentials}
+									href={pathRoutes.organizations.issuedCredentials}
 									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
-									>Credentials</a
+									>Issued Credentials</a
 								>
 							</li>
 						</ul>

src/common/enums.ts

@@ -0,0 +1,13 @@
+export enum IssueCredential {
+	proposalSent = 'proposal-sent',
+	proposalReceived = 'proposal-received',
+	offerSent = 'offer-sent',
+	offerReceived = 'offer-received',
+	declined = 'decliend',
+	requestSent = 'request-sent',
+	requestReceived = 'request-received',
+	credentialIssued = 'credential-issued',
+	credentialReceived = 'credential-received',
+	done = 'done',
+	abandoned = 'abandoned',
+}

src/commonComponents/SchemaCard.tsx

@@ -1,10 +1,10 @@
 import { Card } from 'flowbite-react';
-import { pathRoutes } from '../config/pathRoutes';
+import { dateConversion } from '../utils/DateConversion';
 
-const SchemaCard = (props: { schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: string[], created: string },) => {
+const SchemaCard = (props: { schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: string[], created: string, onClickCallback: (schemaId: string) => void; },) => {
   return (
     <Card onClick={() => {
-      window.location.href = `${pathRoutes.organizations.viewSchema}?schemaId=${props.schemaId}`
+      props.onClickCallback(props.schemaId)
     }} className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer' style={{ maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }}>
       <div className="flex justify-between items-start">
         <div>
@@ -17,7 +17,7 @@ const SchemaCard = (props: { schemaName: string, version: string, schemaId: stri
         </div>
         <div className='float-right ml-auto '>
           <p className='dark:text-white'>
-            Created no: {new Date(props.created).toLocaleDateString('en-GB')}
+            {dateConversion(props.created)}
           </p>
         </div>
       </div>
@@ -29,7 +29,7 @@ const SchemaCard = (props: { schemaName: string, version: string, schemaId: stri
           <span className="font-semibold">Issuer DID:</span> {props.issuerDid}
         </p>
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
-          <span className="font-semibold">Ledger:</span> {props.issuerDid.split(':')[2]}
+          <span className="font-semibold">Ledger:</span> {props.issuerDid?.split(':')[2]}
         </p>
       </div>
 
@@ -66,5 +66,3 @@ const SchemaCard = (props: { schemaName: string, version: string, schemaId: stri
 
 
 export default SchemaCard
-
-

src/commonComponents/datatable/index.tsx

@@ -0,0 +1,64 @@
+import type { TableData, TableHeader } from "./interface"
+import { Spinner, Tooltip } from "flowbite-react";
+
+interface DataTableProps {
+	header: TableHeader[];
+	data: TableData[];
+	loading: boolean;
+	callback?: (clickId: string | null | undefined) => void;
+}
+
+const DataTable: React.FC<DataTableProps> = ({ header, data, loading, callback }) => {
+
+	return (
+		<div className="flex flex-col ">
+			{loading
+				? <div className="flex items-center justify-center mb-4">
+					<Spinner
+						color="info"
+					/>
+				</div>
+				: <div className="overflow-x-auto rounded-lg">
+					<div className="inline-block min-w-full align-middle">
+						<div className="overflow-hidden shadow sm:rounded-lg">
+							<table
+								className="min-w-full divide-y divide-gray-200 dark:divide-gray-600"
+							>
+								<thead className="bg-gray-50 dark:bg-gray-700">
+									<tr>
+										{header && header.length > 0 &&
+											header.map(ele => (
+												<th
+													scope="col"
+													className={`p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white ${ele.width && ele.width}`}
+												>
+													<div>{ele.columnName}</div>
+													{ele.subColumnName && <div className="flex text-gray-500">{ele.subColumnName} </div>}
+
+												</th>
+											))}
+									</tr>
+								</thead>
+								<tbody className="bg-white dark:bg-gray-800">
+									{data.length ? data.map((ele, index) => (
+										<tr className={`${index % 2 !== 0 ? 'bg-gray-50 dark:bg-gray-700' : ''} ${callback && ele.clickId ? 'cursor-pointer' : ''}`} onClick={() => callback ? callback(ele?.clickId) : ''}>
+											{ele.data.map(subEle => (
+												<td className={` p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white align-middle	`}>
+													<div>{subEle.data}</div>
+													{subEle.subData && subEle.subData}
+												</td>
+											))}
+										</tr>
+									)) : <tr className="text-center"><td className="p-2 text-center text-gray-500" colSpan={header.length}>No Data Found</td></tr>}
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+			}
+		</div >
+	)
+}
+
+
+export default DataTable

src/commonComponents/datatable/interface.ts

@@ -0,0 +1,15 @@
+export interface TableHeader {
+	columnName: string;
+	subColumnName?: string;
+	width?: string;
+}
+
+export interface TableData {
+	clickId?: string | null;
+	data: Data[];
+}
+
+interface Data {
+	data: string | JSX.Element;
+	subData?: string;
+}