Merge pull request #367 from credebl/refactor-dasboard-memberlist

refactor: dashboard and member list

src/components/Ecosystem/MemberList.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
 import { getEcosystemMemberList } from '../../api/ecosystem';
-import { apiStatusCodes } from '../../config/CommonConstant';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
 import type { AxiosResponse } from 'axios';
 import DataTable from '../../commonComponents/datatable';
 import type { TableData } from '../../commonComponents/datatable/interface';
 import DateTooltip from '../Tooltip';
 import { dateConversion } from '../../utils/DateConversion';
 import { AlertComponent } from '../AlertComponent';
 import { Pagination } from 'flowbite-react';
+import { getFromLocalStorage } from '../../api/Auth';
 
 const initialPageState = {
 	pageNumber: 1,
@@ -20,14 +21,17 @@ const MemberList = () => {
 	const [memberList, setMemberList] = useState<TableData[]>([]);
 	const [error, setError] = useState<string | null>(null);
 	const [currentPage, setCurrentPage] = useState(initialPageState);
+
 	const getEcosystemMembers = async () => {
+		const userOrgId= await getFromLocalStorage(storageKeys.ORG_ID)
 		setLoading(true);
 		const response = await getEcosystemMemberList(
 			currentPage.pageNumber,
 			currentPage.pageSize,
 			'',
 		);
 		const { data } = response as AxiosResponse;
+
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
 			const totalPages = data?.data?.totalPages;
 
@@ -47,9 +51,10 @@ const MemberList = () => {
 						return 0;
 				}
 			};
-			const sortedMemberList = data?.data?.members?.sort(compareMembers);			
+			const sortedMemberList = data?.data?.members?.sort(compareMembers);				
 			const membersData = sortedMemberList?.map(
 				(member: {
+					orgId: string;
 					ecosystem: {createDateTime: string};
 					ecosystemRole: { name: string };
 					orgName: string;
@@ -79,7 +84,7 @@ const MemberList = () => {
 												: 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-100 dark:border-green-500'
 										} text-sm font-medium mr-2 px-2.5 py-1 rounded-md`}
 									>
-										  {member?.createDateTime === member?.ecosystem?.createDateTime ? member?.ecosystemRole?.name + (' (You)')  : member?.ecosystemRole?.name}
+										  {member?.orgId === userOrgId ? member?.ecosystemRole?.name + (' (You)')  : member?.ecosystemRole?.name}
 									</span>
 								) : (
 									'Not available'

src/components/Verification/Verification.tsx

@@ -57,7 +57,9 @@ const VerificationCred = () => {
 				const schemaAttributes = await getFromLocalStorage(storageKeys.SCHEMA_ATTR)
 				const parsedSchemaDetails = JSON.parse(schemaAttributes) || [];
 				const attributes = parsedSchemaDetails.attribute.map((ele: any) => {
-					const attributes = ele.attributeName ? ele.attributeName : 'Not available';
+					const attributesName = ele.attributeName ? ele.attributeName : 'Not available';
+					const displayName = ele.displayName ? ele.displayName : 'Not available';
+
 					return {
 						data: [
 							{
@@ -68,15 +70,15 @@ const VerificationCred = () => {
 											type="checkbox"
 											onClick={(event: React.MouseEvent<HTMLInputElement>) => {
 												const inputElement = event?.target as HTMLInputElement;
-												selectConnection(attributes, inputElement?.checked);
+												selectConnection(attributesName, inputElement?.checked);
 											}}
 											value=""
 											className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
 										/>
 									</div>
 								)
 							},
-							{ data: attributes },
+							{ data: displayName },
 						]
 					};
 				});

src/components/publicProfile/OrganisationPublicProfile.tsx

@@ -9,6 +9,7 @@ import { Card, Pagination } from 'flowbite-react';
 import CustomSpinner from '../CustomSpinner';
 import CustomAvatar from '../Avatar';
 import { EmptyListMessage } from '../EmptyListComponent';
+import { AlertComponent } from '../AlertComponent';
 
 const OrganisationPublicProfile = () => {
 	const initialPageState = {
@@ -78,6 +79,13 @@ const OrganisationPublicProfile = () => {
 
 	return (
 		<div>
+			<AlertComponent
+				message={error}
+				type={'failure'}
+				onAlertClose={() => {
+					setError(null);
+				}}
+			/>
 			<div className="flex items-center justify-between mb-4 p-2 pl-0">
 				<SearchInput onInputChange={searchInputChange} />
 			</div>

src/components/publicProfile/ProfileDesign.astro

@@ -4,9 +4,9 @@ import CustomAvatar from "../../components/Avatar"
 ---
 
 
-<div class="min-[320]:h-auto md:h-screen col-span-1 border-white box-border">
-	<div class="w-full h-full bg-white rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 ">
-		<div class="flex  flex-col items-center pb-10">
+<div class="min-[320]:h-auto md:h-screen col-span-1 border-white box-border items-center">
+	<div class="w-full h-full bg-white rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 items-center">
+		<div class="flex flex-col items-center pb-10 mx-auto">
 
 				{orgData?.logoUrl ? (
 					<CustomAvatar className="my-4 rounded-full shadow-lg" size="100" src={orgData?.logoUrl} client:load />

src/components/publicProfile/WalletDetailQRLayout.astro

@@ -1,5 +1,6 @@
 ---
 import CustomQRCode from "../../commonComponents/QRcode";
+import { EmptyListMessage } from "../EmptyListComponent";
 const {orgData} = Astro.props
 interface UserObject {
 	orgDid:string
@@ -13,7 +14,7 @@ interface UserObject {
 }
 ---
 
-<div class="min-[320]:inline-block  w-full md:flex rounded gap-2 bg-white">
+<div class="min-[320]:inline-block w-full md:flex rounded gap-2 bg-white">
 	<div class="w-2/3 mb-4 sm:mb-0 sm:pr-4 p-2">
 		<h1 class="font-semibold text-2xl p-3">Wallet Details</h1>
 
@@ -62,17 +63,19 @@ interface UserObject {
 		}
 	</ul>
 	</div>:
-	<p class="pl-4">
-
-			Wallet details are not avilable. Need to create wallet.
-			</p>
+	<div class="flex justify-center items-center">
+	    <EmptyListMessage
+				 message={'No Wallet Details Found'}
+				 description={'The owner is required to create a wallet'}
+				  buttonContent={''}
+			/>
+	</div>
 	}
 	</div>
-{orgData?.org_agents.length > 0 &&
+{orgData?.org_agents.length > 0 ?
 	<div class="w-1/3 flex flex-col justify-center text-wrap p-2">
 		<div class="h-auto flex-col items-center p-4">
 		{	orgData?.org_agents &&
-
 			<div
 					class="bg-white p-4 border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 overflow-hidden">
 					<CustomQRCode
@@ -83,7 +86,10 @@ interface UserObject {
 			</div>
 		}
 	</div>
-	</div>}
+	</div>
+	:
+   ''
+	 }
 </div>
 
 

src/pages/org/[org].astro

@@ -24,7 +24,7 @@ const orgUsersData = orgUsersFilterByRole?.map(
 );
 ---
 
-<div class="">
+<div class="max-h-fit">
 	<div class="w-full mx-0">
 		<div class="flex px-3 py-2 justify-start">
 			<div class="flex items-center justify-start">