Added Side panel for schema list to show technical details of schema

nextjs/src/config/SidePanelCommon.tsx

@@ -41,7 +41,7 @@ export default function SidePanelComponent({
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side="right"
-        className="w-full max-w-xl min-w-[500px] space-y-6 p-4"
+        className="w-full max-w-xl min-w-[500px] space-y-2 p-4"
       >
         <SheetHeader>
           <SheetTitle className="text-xl font-semibold">{title}</SheetTitle>
@@ -61,7 +61,7 @@ export default function SidePanelComponent({
                   {field.badge ? (
                     <Badge variant="default">{field.value}</Badge>
                   ) : (
-                    <div className="font-medium break-words">{field.value}</div>
+                    <div className="font-medium break-all">{field.value}</div>
                   )}
                   {field.copyable && typeof field.value === 'string' && (
                     <Button

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

@@ -17,7 +17,6 @@ import {
 import { usePathname, useRouter } from 'next/navigation'
 
 import { Button } from '@/components/ui/button'
-import CopyDid from '@/config/CopyDid'
 import CustomCheckbox from '@/components/CustomCheckbox'
 import DateTooltip from '@/components/DateTooltip'
 import Loader from '@/components/Loader'
@@ -164,24 +163,19 @@ const SchemaCard = (props: ISchemaCardProps): React.JSX.Element => {
         </div>
 
         <div className="min-w-0 space-y-1 text-sm">
-          <div className="flex items-start sm:items-center">
+          <button
+            className="url-link flex items-start sm:items-center"
+            onClick={props.onTitleClick}
+          >
             <strong className="mr-2 shrink-0">Schema ID:</strong>
-            <div className="min-w-0 truncate">
-              <CopyDid
-                value={props.schemaId || ''}
-                className="text-foreground truncate font-mono text-sm"
-              />
+            <div className="!url-link min-w-0 font-mono text-sm">
+              {props.schemaId || ''}
             </div>
-          </div>
+          </button>
 
           <div className="flex items-start sm:items-center">
-            <strong className="mr-2 shrink-0">Issuer DID:</strong>
-            <div className="min-w-0 truncate">
-              <CopyDid
-                value={props.issuerDid || ''}
-                className="text-foreground truncate font-mono text-sm"
-              />
-            </div>
+            <strong className="mr-2 shrink-0">Issuer:</strong>
+            <div className="min-w-0 truncate">{props.issuerName || ''}</div>
           </div>
 
           {!props.noLedger && (

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

@@ -4,18 +4,11 @@ import { DidMethod, SchemaTypes } from '@/common/enums'
 import {
   GetUserProfileResponse,
   ISchemaDataSchemaList as ISchemaData,
+  ISidebarSliderData,
   IW3cSchemaDetails,
   SchemaListItem,
   UserOrgRole,
 } from '../type/schemas-interface'
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '@/components/ui/pagination'
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import {
   Select,
@@ -38,6 +31,8 @@ import Loader from '@/components/Loader'
 import PageContainer from '@/components/layout/page-container'
 import { Plus } from 'lucide-react'
 import SchemaCard from './SchemaCard'
+import SchemaListPagination from './SchemaListPagination'
+import SidePanelComponent from '@/config/SidePanelCommon'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getOrganizationById } from '@/app/api/organization'
 import { getUserProfile } from '@/app/api/Auth'
@@ -81,6 +76,8 @@ const SchemaList = (props: {
   const [w3cSchema, setW3CSchema] = useState<boolean>(false)
   const [isNoLedger, setIsNoLedger] = useState<boolean>(false)
   const [orgRole, setOrgRole] = useState<string | null>(null)
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const [sideBarFields, setSideBarFields] = useState<ISidebarSliderData[]>([])
 
   const route = useRouter()
   const dispatch = useAppDispatch()
@@ -446,7 +443,8 @@ const SchemaList = (props: {
                       schemaName={element?.name}
                       version={element['version']}
                       schemaId={element['schemaLedgerId']}
-                      issuerDid={element['issuerId']}
+                      issuerName={element['organizationName'] || 'N/A'}
+                      issuerDid={element['issuerId'] || 'N/A'}
                       attributes={element['attributes']}
                       created={element['createDateTime']}
                       showCheckbox={false}
@@ -456,73 +454,42 @@ const SchemaList = (props: {
                       w3cSchema={w3cSchema}
                       noLedger={isNoLedger}
                       isVerification={verificationFlag}
+                      onTitleClick={(e: React.MouseEvent): void => {
+                        e.stopPropagation()
+                        setIsDrawerOpen(true)
+                        setSideBarFields([
+                          {
+                            label: 'Schema ID',
+                            value: element.schemaLedgerId,
+                            copyable: true,
+                          },
+                          {
+                            label: 'Publisher DID',
+                            value: element.publisherDid,
+                            copyable: true,
+                          },
+                          {
+                            label: 'Issuer ID',
+                            value: element.issuerId,
+                            copyable: true,
+                          },
+                        ])
+                      }}
                     />
                   </div>
                 ))}
               </div>
               {totalItem > itemPerPage &&
                 (schemaList.length === itemPerPage ||
                   schemaListAPIParameter.page === lastPage) && (
-                  <div className="mt-6 flex justify-end">
-                    <Pagination className="m-0 w-fit">
-                      <PaginationContent>
-                        {schemaListAPIParameter.page > 1 && (
-                          <PaginationItem>
-                            <PaginationPrevious
-                              href="#"
-                              onClick={() =>
-                                setSchemaListAPIParameter((prev) => ({
-                                  ...prev,
-                                  page: prev.page - 1,
-                                }))
-                              }
-                            />
-                          </PaginationItem>
-                        )}
-
-                        {paginationNumbers.map((page, idx) => (
-                          <PaginationItem key={idx}>
-                            {page === '...' ? (
-                              <span className="text-muted-foreground px-3 py-2">
-                                …
-                              </span>
-                            ) : (
-                              <PaginationLink
-                                className={`${
-                                  page === schemaListAPIParameter.page
-                                    ? 'bg-primary'
-                                    : 'bg-background text-muted-foreground'
-                                } rounded-lg px-4 py-2`}
-                                href="#"
-                                onClick={() =>
-                                  setSchemaListAPIParameter((prev) => ({
-                                    ...prev,
-                                    page: page as number,
-                                  }))
-                                }
-                              >
-                                {page}
-                              </PaginationLink>
-                            )}
-                          </PaginationItem>
-                        ))}
-
-                        {schemaListAPIParameter.page < lastPage && (
-                          <PaginationItem>
-                            <PaginationNext
-                              href="#"
-                              onClick={() =>
-                                setSchemaListAPIParameter((prev) => ({
-                                  ...prev,
-                                  page: prev.page + 1,
-                                }))
-                              }
-                            />
-                          </PaginationItem>
-                        )}
-                      </PaginationContent>
-                    </Pagination>
-                  </div>
+                  <SchemaListPagination
+                    {...{
+                      schemaListAPIParameter,
+                      paginationNumbers,
+                      setSchemaListAPIParameter,
+                      lastPage,
+                    }}
+                  />
                 )}
             </>
           ) : (
@@ -543,6 +510,13 @@ const SchemaList = (props: {
             />
           ))}
       </div>
+      <SidePanelComponent
+        open={isDrawerOpen}
+        onOpenChange={setIsDrawerOpen}
+        title={'Schema Details'}
+        description={'Detailed view of selected Schema'}
+        fields={sideBarFields}
+      />
     </PageContainer>
   )
 }

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

@@ -0,0 +1,96 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
+import React, { JSX } from 'react'
+
+interface IApiListParameter {
+  itemPerPage: number
+  page: number
+  search: string
+  sortBy: string
+  sortingOrder: string
+  allSearch: string
+}
+interface ISchemaListPaginationProps {
+  schemaListAPIParameter: IApiListParameter
+  paginationNumbers: (string | number)[]
+  setSchemaListAPIParameter: React.Dispatch<
+    React.SetStateAction<IApiListParameter>
+  >
+  lastPage: number
+}
+
+function SchemaListPagination({
+  schemaListAPIParameter,
+  paginationNumbers,
+  setSchemaListAPIParameter,
+  lastPage,
+}: ISchemaListPaginationProps): JSX.Element {
+  return (
+    <div className="mt-6 flex justify-end">
+      <Pagination className="m-0 w-fit">
+        <PaginationContent>
+          {schemaListAPIParameter.page > 1 && (
+            <PaginationItem>
+              <PaginationPrevious
+                href="#"
+                onClick={() =>
+                  setSchemaListAPIParameter((prev) => ({
+                    ...prev,
+                    page: prev.page - 1,
+                  }))
+                }
+              />
+            </PaginationItem>
+          )}
+
+          {paginationNumbers.map((page, idx) => (
+            <PaginationItem key={idx}>
+              {page === '...' ? (
+                <span className="text-muted-foreground px-3 py-2">…</span>
+              ) : (
+                <PaginationLink
+                  className={`${
+                    page === schemaListAPIParameter.page
+                      ? 'bg-primary text-white'
+                      : 'bg-background text-muted-foreground'
+                  } rounded-lg px-4 py-2`}
+                  href="#"
+                  onClick={() =>
+                    setSchemaListAPIParameter((prev) => ({
+                      ...prev,
+                      page: page as number,
+                    }))
+                  }
+                >
+                  {page}
+                </PaginationLink>
+              )}
+            </PaginationItem>
+          ))}
+
+          {schemaListAPIParameter.page < lastPage && (
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={() =>
+                  setSchemaListAPIParameter((prev) => ({
+                    ...prev,
+                    page: prev.page + 1,
+                  }))
+                }
+              />
+            </PaginationItem>
+          )}
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
+
+export default SchemaListPagination

nextjs/src/features/schemas/type/schemas-interface.ts

@@ -2,6 +2,7 @@ import { SchemaType, SchemaTypeValue } from '@/common/enums'
 
 import { FormikProps } from 'formik'
 import { IPopup } from '../components/Create'
+import React from 'react'
 
 export interface ISchemaData {
   schemaId: string
@@ -51,6 +52,7 @@ export interface ISchemaCardProps {
   version: string
   schemaId: string
   issuerDid: string
+  issuerName?: string
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   attributes: any
   created: string
@@ -88,6 +90,7 @@ export interface ISchemaCardProps {
   noLedger?: boolean
   isVerification?: boolean
   isVerificationUsingEmail?: boolean
+  onTitleClick?: (e: React.MouseEvent) => void
 }
 
 export interface IW3cSchemaDetails {
@@ -213,6 +216,11 @@ export interface IRequiredAndDeleteProps {
   areFirstInputsSelected: boolean
 }
 
+export interface ISidebarSliderData {
+  label: string
+  value: string
+  copyable?: boolean
+}
 export interface UserOrgRole {
   orgId: string
   orgRole: {