refactor code to use getItem in table desc

tools/tenscan/frontend/pages/batches/index.tsx

@@ -4,7 +4,8 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBatchesService } from "@/src/services/useBatchesService";
-import { firstItem, lastItem } from "@/src/lib/utils";
+import { getItem } from "@/src/lib/utils";
+import { ItemPosition } from "@/src/types/interfaces";
 
 export const metadata: Metadata = {
   title: "Batches",
@@ -28,8 +29,10 @@ export default function Batches() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const firstBatchHeight = Number(firstItem(BatchesData, "height"));
-  const lastBatchHeight = Number(lastItem(BatchesData, "height"));
+  const firstBatchHeight = Number(getItem(BatchesData, "height"));
+  const lastBatchHeight = Number(
+    getItem(BatchesData, "height", ItemPosition.LAST)
+  );
 
   return (
     <Layout>

tools/tenscan/frontend/pages/blocks/index.tsx

@@ -4,7 +4,8 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBlocksService } from "@/src/services/useBlocksService";
-import { firstItem, lastItem } from "@/src/lib/utils";
+import { getItem } from "@/src/lib/utils";
+import { ItemPosition } from "@/src/types/interfaces";
 
 export const metadata: Metadata = {
   title: "Blocks",
@@ -25,8 +26,10 @@ export default function Blocks() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const firstBlockNumber = Number(firstItem(BlocksData, "blockHeader.number"));
-  const lastBlockNumber = Number(lastItem(BlocksData, "blockHeader.number"));
+  const firstBlockNumber = Number(getItem(BlocksData, "blockHeader.number"));
+  const lastBlockNumber = Number(
+    getItem(BlocksData, "blockHeader.number", ItemPosition.LAST)
+  );
 
   return (
     <Layout>

tools/tenscan/frontend/pages/rollups/index.tsx

@@ -4,7 +4,8 @@ import Layout from "@/src/components/layouts/default-layout";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import { Metadata } from "next";
 import { columns } from "@/src/components/modules/rollups/columns";
-import { firstItem, lastItem } from "@/src/lib/utils";
+import { getItem } from "@/src/lib/utils";
+import { ItemPosition } from "@/src/types/interfaces";
 
 export const metadata: Metadata = {
   title: "Rollups",
@@ -28,8 +29,8 @@ export default function Rollups() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const firstRollupID = Number(firstItem(RollupsData, "ID"));
-  const lastRollupID = Number(lastItem(RollupsData, "ID"));
+  const firstRollupID = Number(getItem(RollupsData, "ID"));
+  const lastRollupID = Number(getItem(RollupsData, "ID", ItemPosition.LAST));
 
   return (
     <Layout>

tools/tenscan/frontend/pages/transactions/index.tsx

@@ -4,7 +4,8 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { useTransactionsService } from "@/src/services/useTransactionsService";
 import { Metadata } from "next";
-import { firstItem, lastItem } from "@/src/lib/utils";
+import { getItem } from "@/src/lib/utils";
+import { ItemPosition } from "@/src/types/interfaces";
 
 export const metadata: Metadata = {
   title: "Transactions",
@@ -32,8 +33,12 @@ export default function Transactions() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const firstBatchHeight = firstItem(TransactionsData, "BatchHeight");
-  const lastBatchHeight = lastItem(TransactionsData, "BatchHeight");
+  const firstBatchHeight = getItem(TransactionsData, "BatchHeight");
+  const lastBatchHeight = getItem(
+    TransactionsData,
+    "BatchHeight",
+    ItemPosition.LAST
+  );
 
   return (
     <Layout>

tools/tenscan/frontend/src/lib/utils.ts

@@ -1,6 +1,7 @@
 import { type ClassValue, clsx } from "clsx";
 import { formatDistanceToNow } from "date-fns";
 import { twMerge } from "tailwind-merge";
+import { ItemPosition } from "../types/interfaces";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -26,16 +27,25 @@ export const formatNumber = (number: string | number) => {
   return num.toLocaleString();
 };
 
-export const firstItem = <T>(arr: T[], key: keyof T) => {
-  if (!arr || !arr.length || !arr[0][key]) {
+export const getItem = <T>(
+  arr: T[],
+  key: string,
+  position: ItemPosition = ItemPosition.FIRST
+) => {
+  if (!arr || !arr.length) {
     return null;
   }
-  return arr[0][key];
-};
 
-export const lastItem = <T>(arr: T[], key: keyof T) => {
-  if (!arr || !arr.length || !arr[0][key]) {
-    return null;
+  const keys = key.split(".");
+  const item = position === ItemPosition.FIRST ? arr[0] : arr[arr.length - 1];
+  let value: any = item;
+
+  for (const k of keys) {
+    if (value[k] === undefined) {
+      return null;
+    }
+    value = value[k];
   }
-  return arr[arr.length - 1][key];
+
+  return value;
 };

tools/tenscan/frontend/src/types/interfaces/index.ts

@@ -94,3 +94,8 @@ export interface DashboardAnalyticsData {
   change?: string;
   icon: any;
 }
+
+export enum ItemPosition {
+  FIRST = "first",
+  LAST = "last",
+}