From bc79658b59d6ab643618591e6f5c0fb96e652931 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Wed, 3 Jul 2024 12:38:36 +0400
Subject: [PATCH] refactor dashboard data table headers to be sticky

---
 .../modules/dashboard/analytics-card.tsx      |  9 ++++++--
 .../components/modules/dashboard/index.tsx    | 23 +++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
index 996daf0e27..348a1cf52a 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
@@ -10,7 +10,12 @@ import React from "react";
 export default function AnalyticsCard({
   item,
 }: {
-  item: { title: string; value: string; change: string; icon: any };
+  item: {
+    title: string;
+    value: string | number | JSX.Element;
+    change?: string;
+    icon: any;
+  };
 }) {
   return (
     <Card>
@@ -26,7 +31,7 @@ export default function AnalyticsCard({
             <Skeleton className="w-[100px] h-[20px] rounded-full" />
           )}
         </div>
-        {item.change && (
+        {item?.change && (
           <p className="text-xs text-muted-foreground">{item.change}</p>
         )}
       </CardContent>
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
index 5c3e4b9010..8a63746b3d 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -29,6 +29,21 @@ import { BlocksIcon } from "lucide-react";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import { RecentRollups } from "./recent-rollups";
 
+interface DashboardData {
+  title: string;
+  value: string | number | JSX.Element;
+  icon: JSX.Element;
+  change?: string;
+}
+
+interface RecentData {
+  title: string;
+  data: any;
+  component: JSX.Element;
+  goTo: string;
+  className: string;
+}
+
 export default function Dashboard() {
   const { price, transactions, transactionCount } = useTransactionsService();
   const { contractCount } = useContractsService();
@@ -122,17 +137,17 @@ export default function Dashboard() {
         <h2 className="text-3xl font-bold tracking-tight">Tenscan</h2>
       </div>
       <div className="grid gap-4 grid-cols-1 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4">
-        {DASHBOARD_DATA.map((item: any, index) => (
+        {DASHBOARD_DATA.map((item: DashboardData, index) => (
           <AnalyticsCard key={index} item={item} />
         ))}
       </div>
       <div className="grid gap-4 grid-cols-1 md:grid-cols-6 lg:grid-cols-9">
-        {RECENT_DATA.map((item: any, index) => (
+        {RECENT_DATA.map((item: RecentData, index) => (
           <Card
             key={index}
-            className={cn(item.className, "h-[450px] overflow-y-auto")}
+            className={cn(item.className, "h-[450px] overflow-y-auto relative")}
           >
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sticky top-0 left-0 right-0 bg-background z-10">
               <CardTitle>{item.title}</CardTitle>
               <Link
                 href={{