Replaced breadcrumb id's with their relevant name for better UX

nextjs/src/components/breadcrumbs.tsx

@@ -8,44 +8,105 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
-import React, { Fragment } from 'react'
+import React, { Fragment, useMemo } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
 
 import { IconSlash } from '@tabler/icons-react'
+import { UUID_REGEX } from '@/config/CommonConstant'
 import { useBreadcrumbs } from '@/hooks/use-breadcrumbs'
 
 export function Breadcrumbs(): React.JSX.Element | null {
   const items = useBreadcrumbs()
+  const [copied, setCopied] = React.useState(false)
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const alias = React.useMemo(() => searchParams.get('alias'), [searchParams])
+  const isOrganizationUUIDPath = useMemo(() => {
+    const parts = pathname.split('/').filter(Boolean) // remove empty strings
+    return (
+      parts.length === 2 &&
+      parts[0] === 'organizations' &&
+      UUID_REGEX.test(parts[1])
+    )
+  }, [pathname])
 
   if (items.length === 0) {
     return null
   }
 
+  function copyToClipboard(text: string): void {
+    window.navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => {
+      setCopied(false)
+    }, 2000)
+  }
+
   return (
     <Breadcrumb>
       <BreadcrumbList>
-        {items.map((item, index) => {
-          const decodedTitle = decodeURIComponent(item.title)
+        {isOrganizationUUIDPath ? (
+          <>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbLink onClick={() => copyToClipboard(items[1].title)}>
+                <div className="relative">
+                  Overview
+                  {copied && (
+                    <div className="absolute top-7 z-50 ml-2 rounded-md bg-black px-2 py-1 text-xs font-semibold text-white">
+                      Copied!
+                    </div>
+                  )}
+                </div>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </>
+        ) : (
+          <>
+            {items.map((item, index) => {
+              const decodedTitle = decodeURIComponent(item.title)
 
-          return (
-            <Fragment key={item.link ? item.link : `${item.title}-${index}`}>
-              {index !== items.length - 1 && (
-                <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbLink href={item.link || `/schemas/${item.title}`}>
-                    {decodedTitle}
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-              )}
-              {index < items.length - 1 && (
-                <BreadcrumbSeparator className="hidden md:block">
-                  <IconSlash />
-                </BreadcrumbSeparator>
-              )}
-              {index === items.length - 1 && (
-                <BreadcrumbPage>{decodedTitle}</BreadcrumbPage>
-              )}
-            </Fragment>
-          )
-        })}
+              return (
+                <Fragment
+                  key={item.link ? item.link : `${item.title}-${index}`}
+                >
+                  {index !== items.length - 1 && (
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink
+                        href={item.link || `/schemas/${item.title}`}
+                      >
+                        {decodedTitle}
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                  )}
+                  {index < items.length - 1 && (
+                    <BreadcrumbSeparator className="hidden md:block">
+                      <IconSlash />
+                    </BreadcrumbSeparator>
+                  )}
+                  {index === items.length - 1 && (
+                    <BreadcrumbPage>
+                      {alias ? (
+                        <button
+                          className="relative"
+                          onClick={() => copyToClipboard(decodedTitle)}
+                        >
+                          {alias}
+                          {copied && (
+                            <div className="absolute top-7 z-50 ml-2 rounded-md bg-black px-2 py-1 text-xs font-semibold text-white">
+                              Copied!
+                            </div>
+                          )}
+                        </button>
+                      ) : (
+                        decodedTitle
+                      )}
+                    </BreadcrumbPage>
+                  )}
+                </Fragment>
+              )
+            })}
+          </>
+        )}
       </BreadcrumbList>
     </Breadcrumb>
   )

nextjs/src/config/CommonConstant.ts

@@ -19,6 +19,8 @@ export const totalRecords = 'totalRecords'
 export const successfulRecords = 'successfulRecords'
 export const currentPageNumber = 1
 export const polygonFaucet = 'https://faucet.polygon.technology/'
+export const UUID_REGEX =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
 
 export const apiStatusCodes = {
   API_STATUS_SUCCESS: 200,

nextjs/src/features/organization/components/OrganizationDashboard.tsx

@@ -3,7 +3,7 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Card, CardContent } from '@/components/ui/card'
 import { IOrgDashboard, IOrganisation } from './interfaces/organization'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useTransition } from 'react'
 import {
   Tooltip,
   TooltipContent,
@@ -39,6 +39,7 @@ export const OrganizationDashboard = ({
   const [showSetupButton, setSetupButton] = useState<boolean>(false)
   const [, setError] = useState<string | null>(null)
   const [isWalletSetupLoading, setIsWalletSetupLoading] = useState(false)
+  const [isPending, startTransition] = useTransition()
 
   const selecteDropdownOrgId = useAppSelector(
     (state) => state.organization.orgId,
@@ -59,12 +60,10 @@ export const OrganizationDashboard = ({
       return
     }
 
-    setLoading(true)
     const useOrgId = activeOrgId === orgIdOfDashboard ? orgId : activeOrgId
     const response = await getOrganizationById(useOrgId as string)
     const { data } = response as AxiosResponse
 
-    setLoading(false)
     if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
       if (
         data?.data?.org_agents?.length > 0 &&
@@ -75,26 +74,25 @@ export const OrganizationDashboard = ({
         setSetupButton(true)
       }
       setOrgData(data?.data)
+      startTransition(() => {
+        router.push(`/organizations/${useOrgId}`)
+      })
     } else {
       setError(response as string)
     }
-    setLoading(false)
   }
 
   const fetchOrganizationDashboardDetails = async (): Promise<void> => {
-    setLoading(true)
     if (orgId) {
       const response = await getOrgDashboard(orgIdOfDashboard as string)
       const { data } = response as AxiosResponse
-      setLoading(false)
 
       if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
         setOrgDashboard(data?.data)
       } else {
         setError(response as string)
       }
     }
-    setLoading(false)
   }
 
   const handleEditOrg = (): void => {
@@ -106,10 +104,19 @@ export const OrganizationDashboard = ({
   }
 
   useEffect(() => {
-    fetchOrganizationDetails()
-    fetchOrganizationDashboardDetails()
+    async function loadData(): Promise<void> {
+      setLoading(true)
+      await fetchOrganizationDetails()
+      await fetchOrganizationDashboardDetails()
+      setLoading(false)
+    }
+    loadData()
   }, [activeOrgId])
 
+  if (isPending || loading) {
+    return <Loader />
+  }
+
   return (
     <PageContainer>
       <div className="container mx-auto space-y-6 px-4 py-6">

nextjs/src/features/schemas/components/SchemaCard.tsx

@@ -108,7 +108,9 @@ const SchemaCard = (props: ISchemaCardProps): React.JSX.Element => {
     }
 
     if (!props.w3cSchema && !hasNestedAttributes && props.schemaId) {
-      router.push(`/organizations/schemas/${props.schemaId}`)
+      router.push(
+        `/organizations/schemas/${props.schemaId}?alias=${props.schemaName}`,
+      )
     }
 
     if (props.onClickCallback) {