Fix few bugs of TopBar item indexes

frontend/src/components/DetailView/TopBar.tsx

@@ -14,6 +14,7 @@ export const TopBar = <T,>() => {
   const currentIndex = idList.indexOf((data as { [key: string]: string })[idFieldName as string])
   const nextIndex = currentIndex + 1
   const previousIndex = currentIndex - 1
+
   return (
     <Box
       sx={{
@@ -29,13 +30,13 @@ export const TopBar = <T,>() => {
       <div> Viewing details of a {viewName}</div>
       {idListExists && (
         <div>
-          {previousIndex > 0 && (
+          {previousIndex >= 0 && (
             <Button onClick={() => navigate(`/${viewName}/${idList[previousIndex]}`)}>
               <ArrowBackIcon />
             </Button>
           )}
-          {`${currentIndex} of ${idList.length}`}
-          {nextIndex <= idList.length && (
+          {`${currentIndex + 1} of ${idList.length}`}
+          {nextIndex < idList.length && (
             <Button onClick={() => navigate(`/${viewName}/${idList[nextIndex]}`)}>
               <ArrowForwardIcon />
             </Button>