Merge branch 'main' of https://github.com/credebl/studio into 291-send-invitation-design

Signed-off-by: @nishad.shirsat <[email protected]>

Author: nishad-ayanworks

package-lock.json

@@ -130,7 +130,7 @@ export const getOrgDashboard = async (orgId: string) => {
     }
 
     try {
-        return axiosGet(axiosPayload);
+        return await axiosGet(axiosPayload);
     }
     catch (error) {
         const err = error as Error
@@ -235,7 +235,7 @@ export const getOrganizationUsers = async () => {
     }
 
     try {
-        return axiosGet(axiosPayload);
+        return await axiosGet(axiosPayload);
     }
     catch (error) {
         const err = error as Error
@@ -270,3 +270,36 @@ export const editOrganizationUserRole = async (userId: number, roles: number[])
     }
 }
 
+//Create Connection
+
+
+export const createConnection = async (orgName: string) => {
+
+    const url = apiRoutes.connection.create
+
+    const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+    
+    const data = {
+        label: orgName,
+        multiUseInvitation: true,
+        autoAcceptConnection: true,
+        orgId: Number(orgId)
+    }
+    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/api/organization.ts

@@ -289,14 +289,14 @@ import SignOutButton  from '../components/SignOutButton/index'
 							</div>
 						</a> -->
 						<a
-						href="./invitations"
+						href={pathRoutes.users.invitations}
 						class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
 					>
 								<svg
 								class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
 								 xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-									  <path d="M9.978 13.2329L19.37 6.56494C19.312 6.50191 19.2498 6.44278 19.184 6.38794L11.2 0.650939C10.8566 0.392942 10.4392 0.252371 10.0097 0.25003C9.58011 0.247688 9.16123 0.383702 8.815 0.637939L0.8 6.39994C0.726113 6.46135 0.65692 6.52821 0.593 6.59994L9.978 13.2329Z" fill="#6B7280"/>
-									  <path d="M11.181 14.8639C10.8416 15.1166 10.4292 15.2521 10.006 15.2499C9.57095 15.2509 9.14735 15.1106 8.799 14.8499L0 8.62694V17.9999C0 18.5304 0.210714 19.0391 0.585786 19.4142C0.960859 19.7892 1.46957 19.9999 2 19.9999H18C18.5304 19.9999 19.0391 19.7892 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 17.9999V8.57294L11.181 14.8639Z" fill="#6B7280"/>
+									<path d="M9.978 13.2329L19.37 6.56494C19.312 6.50191 19.2498 6.44278 19.184 6.38794L11.2 0.650939C10.8566 0.392942 10.4392 0.252371 10.0097 0.25003C9.58011 0.247688 9.16123 0.383702 8.815 0.637939L0.8 6.39994C0.726113 6.46135 0.65692 6.52821 0.593 6.59994L9.978 13.2329Z" fill="#6B7280"/>
+									<path d="M11.181 14.8639C10.8416 15.1166 10.4292 15.2521 10.006 15.2499C9.57095 15.2509 9.14735 15.1106 8.799 14.8499L0 8.62694V17.9999C0 18.5304 0.210714 19.0391 0.585786 19.4142C0.960859 19.7892 1.46957 19.9999 2 19.9999H18C18.5304 19.9999 19.0391 19.7892 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 17.9999V8.57294L11.181 14.8639Z" fill="#6B7280"/>
 									</svg>
 
 						<div class="text-sm font-medium text-gray-900 dark:text-white">

src/app/NavBarSidebar.astro

@@ -0,0 +1,29 @@
+import { ReactElement } from "react";
+
+export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick }
+    : {
+        message: string,
+        description: string,
+        buttonContent?: string,
+        svgComponent?: ReactElement,
+
+        onClick?: () => void,
+    }) => {
+    return (
+        <div className='flex mt-20 justify-start items-center flex-col'>
+            <p className='text-2xl font-bold mb-4'>{message}</p>
+            <p className='text-lg mb-4'>{description}</p>
+            {
+                buttonContent
+                && <button
+                    className='group flex h-min p-3 mt-10 items-center justify-center p-0.5 font-medium focus:z-10 border border-transparent enabled:hover:bg-cyan-800 dark:enabled:hover:bg-cyan-700 text-base font- text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800&quot;'
+                    onClick={onClick}>
+                    {svgComponent}
+                    <span className="ml-2">{buttonContent}</span>
+                </button>
+            }
+
+        </div>
+    )
+};
+

src/components/EmptyListComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { ChangeEventHandler, MouseEvent, MouseEventHandler, useRef, useState } from 'react';
 
 interface InputProps {
   field: {
@@ -14,7 +14,8 @@ const InputCopy = ({ field, ...props }: InputProps) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const [isCopied, setIsCopied] = useState(false);
 
-    function copyTextVal() {
+    function copyTextVal(event: React.MouseEvent<HTMLButtonElement>) {
+        event.preventDefault()
         const copyText = inputRef?.current;
 
         const copiedText: string = copyText?.value as string

src/components/InputCopy/index.tsx

@@ -12,6 +12,7 @@ import SearchInput from '../../SearchInput';
 import { getAllSchemas } from '../../../api/Schema';
 import { getFromLocalStorage } from '../../../api/Auth';
 import { pathRoutes } from '../../../config/pathRoutes';
+import { EmptyListMessage } from '../../EmptyListComponent';
 
 const SchemaList = () => {
   const [schemaList, setSchemaList] = useState([])
@@ -57,7 +58,9 @@ const SchemaList = () => {
     }
   };
 
-
+  const createSchema = () => {
+    window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
+  }
 
   useEffect(() => {
     getSchemaList(schemaListAPIParameter)
@@ -102,9 +105,7 @@ const SchemaList = () => {
             </div>
             <Button
               id='createSchemaButton'
-              onClick={() => {
-                window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
-              }}
+              onClick={createSchema}
               className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
             ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
             <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
@@ -127,16 +128,17 @@ const SchemaList = () => {
             </Alert>
           }
           {loading
-            ? <div className="flex items-center justify-center mb-4">
+            ? (<div className="flex items-center justify-center mb-4">
               <Spinner
                 color="info"
               />
-            </div>
+            </div>)
             :
+            schemaList && schemaList.length > 0 ? (
+
             <div className='Flex-wrap' style={{ display: 'flex', flexDirection: 'column' }}>
               <div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
-                {schemaList && schemaList.length > 0 &&
-                  schemaList.map((element, key) => (
+                  { schemaList.map((element, key) => (
                     <div className='p-2' key={key}>
                       <SchemaCard schemaName={element['name']} version={element['version']} schemaId={element['schemaLedgerId']} issuerDid={element['issuerId']} attributes={element['attributes']} created={element['createDateTime']} />
                     </div>
@@ -155,7 +157,15 @@ const SchemaList = () => {
                   totalPages={0}
                 />
               </div>
-            </div>
+            </div> ) : (<EmptyListMessage
+                message={'No Schemas'}
+                description={'Get started by creating a new Schema'}
+                buttonContent={'Create Schema'} 
+                svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+                <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+              </svg>} 
+              onClick={createSchema}
+                 />)
           }
         </div>
       </div>

src/components/Resources/Schema/Schemas.tsx

@@ -1,12 +1,35 @@
 import DedicatedIcon from '../../assets/dedicated.svg';
 
-
-
 const DedicatedIllustrate = () => {
 
     return (
-        <div className='mt-4 ml-4'>
-            <img src={DedicatedIcon} alt="dedicated" width={270} />
+        <div className='mt-4 flex flex-row flex-wrap'>
+            <div>
+                <img src={DedicatedIcon} alt="dedicated" width={270} />
+            </div>
+            <div className='ml-8 max-w-xs'>
+                <h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
+                    Complete Control and Maximum Privacy
+                </h3>
+                <ul className="list-disc">
+                    <li>
+                        <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+                            Our dedicated agent is exclusively managed by your organization, giving you full control. Customize and configure it to meet your specific needs with ease.
+                        </p>
+                    </li>
+                     <li>
+                        <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+                            Rest assured, all data and operations stay within your organization's infrastructure, guaranteeing maximum privacy and autonomy.
+                        </p>
+                    </li>
+                      <li>
+                        <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+                            Experience the power of complete control and privacy with our dedicated agent.
+                        </p>
+                    </li>
+                </ul>
+
+            </div>
         </div>
     )
 

src/components/organization/DedicatedIllustrate.tsx

@@ -83,10 +83,10 @@ const OrgDropDown = () => {
 								) : (
 									<CustomAvatar size="20" name={activeOrg?.name} round />
 								)}
-								<text className="ml-2 dark: text-white">{activeOrg?.name}</text>
+								<text className="ml-2 text-white dark:text-white">{activeOrg?.name}</text>
 							</>
 							:
-							<text className='dark:text-white'>
+							<text className='text-white dark:text-white'>
 								Select organization
 							</text>
 					}