fix: schema list pagination issue

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

Author: pranalidhanavade

nextjs/public/images/CREDEBL_ICON.ico

@@ -56,7 +56,7 @@ export default function AppSidebar(): React.JSX.Element {
 
   const collapsedLogoImageSrc =
     activeTheme === 'credebl'
-      ? '/images/favicon-credebl.ico'
+      ? '/images/CREDEBL_ICON.ico'
       : '/images/favicon-sovio.ico'
 
   const dispatch = useAppDispatch()

nextjs/src/components/layout/app-sidebar.tsx

@@ -130,7 +130,7 @@ const DisplayUserProfile = ({
             onClick={toggleEditProfile}
           >
             <span>
-              <Edit className="mr-12" />
+              <Edit className="text-foreground mr-12" />
             </span>
           </Button>
         </div>

nextjs/src/features/profile/components/DisplayUserProfile.tsx

@@ -253,6 +253,12 @@ const SchemaList = (props: {
     }
   }, [organizationId])
 
+  useEffect(() => {
+    if (organizationId) {
+      getSchemaList(schemaListAPIParameter, allSchemaFlag)
+    }
+  }, [schemaListAPIParameter.page])
+
   const onSearch = (event: ChangeEvent<HTMLInputElement>): void => {
     const inputValue = event.target.value
     setSearchValue(inputValue)
@@ -348,6 +354,30 @@ const SchemaList = (props: {
     }
     props.W3CSchemaSelectionCallback?.(schemaId, w3cSchemaDetails)
   }
+  const paginationRange = 2
+  const currentPage = schemaListAPIParameter.page
+  const startPage = Math.max(1, currentPage - paginationRange)
+  const endPage = Math.min(lastPage, currentPage + paginationRange)
+
+  const paginationNumbers = []
+
+  if (startPage > 1) {
+    paginationNumbers.push(1)
+    if (startPage > 2) {
+      paginationNumbers.push('...')
+    }
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    paginationNumbers.push(i)
+  }
+
+  if (endPage < lastPage) {
+    if (endPage < lastPage - 1) {
+      paginationNumbers.push('...')
+    }
+    paginationNumbers.push(lastPage)
+  }
 
   return (
     <PageContainer>
@@ -451,30 +481,32 @@ const SchemaList = (props: {
                       </PaginationItem>
                     )}
 
-                    {Array.from({ length: lastPage }).map((_, index) => {
-                      const page = index + 1
-                      const isActive = page === schemaListAPIParameter.page
-                      return (
-                        <PaginationItem key={page}>
+                    {paginationNumbers.map((page, idx) => (
+                      <PaginationItem key={idx}>
+                        {page === '...' ? (
+                          <span className="text-muted-foreground px-3 py-2">
+                            …
+                          </span>
+                        ) : (
                           <PaginationLink
                             className={`${
-                              isActive
-                                ? 'bg-primary text-[var(--color-white)]'
+                              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: page as number,
                               }))
                             }
                           >
                             {page}
                           </PaginationLink>
-                        </PaginationItem>
-                      )
-                    })}
+                        )}
+                      </PaginationItem>
+                    ))}
 
                     {schemaListAPIParameter.page < lastPage && (
                       <PaginationItem>

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

@@ -1,15 +1,16 @@
-import { useEffect, useRef, useState} from "react";
-import type { IUserProfile } from "./interfaces";
-import { getFromLocalStorage, setToLocalStorage, updateUserProfile } from "../../api/Auth";
+import * as yup from "yup"
+
+import { Alert, Button } from "flowbite-react";
+import { Form, Formik } from "formik";
 import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, imageSizeAccepted, storageKeys } from "../../config/CommonConstant";
+import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
+import { getFromLocalStorage, setToLocalStorage, updateUserProfile } from "../../api/Auth";
+import { useEffect, useRef, useState } from "react";
+
 import type { AxiosResponse } from "axios";
 import CustomAvatar from '../Avatar'
-import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
-import { Alert, Button } from "flowbite-react";
-import { Form, Formik } from "formik";
 import type { FormikHelpers as FormikActions } from 'formik';
-
-import * as yup from "yup"
+import type { IUserProfile } from "./interfaces";
 
 interface Values {
   profileImg: string;