fixes

Author: DevTeaLeaf

src/modules/RecoveryDashboard/components/Dashboard.tsx

@@ -0,0 +1,54 @@
+import type { DashboardCardData } from "../../types";
+
+interface IProps {
+  card: DashboardCardData;
+  averageBurnRate: number | null;
+  totalBurnPercent: number | null;
+}
+
+const Card = ({
+  card,
+  averageBurnRate,
+  totalBurnPercent,
+}: IProps): JSX.Element => {
+  return (
+    <div className="bg-[#101012] backdrop-blur-md border border-[#23252A] rounded-lg p-6 hover:bg-[#23252A] flex flex-col gap-2">
+      <h3 className="text-[#9798A4] text-base">{card.title}</h3>
+
+      <p className="text-white text-[32px] font-bold">
+        {card.specialType === "averageBurnRate"
+          ? averageBurnRate !== null
+            ? averageBurnRate.toFixed(2) + "%"
+            : "—"
+          : card.value}
+      </p>
+
+      {card.subtitle && (
+        <p className="text-[#9798A4] text-base">{card.subtitle}</p>
+      )}
+
+      {card.specialType === "averageBurnRate" ? (
+        <p className="text-green-500 text-sm">
+          {totalBurnPercent !== null &&
+            totalBurnPercent.toFixed(2) + "% burned across all tokens"}
+        </p>
+      ) : (
+        card.change && (
+          <p
+            className={`text-sm ${
+              card.changeType === "positive"
+                ? "text-green-500"
+                : card.changeType === "negative"
+                  ? "text-red-500"
+                  : "text-gray-400"
+            }`}
+          >
+            {card.change}
+          </p>
+        )
+      )}
+    </div>
+  );
+};
+
+export { Card };

src/modules/RecoveryDashboard/components/Dashboard/Card.tsx

@@ -0,0 +1,30 @@
+import { Card } from "./Card";
+
+import type { DashboardCardData } from "../../types";
+
+interface IProps {
+  cards: DashboardCardData[];
+  averageBurnRate: number | null;
+  totalBurnPercent: number | null;
+}
+
+const Dashboard = ({
+  cards,
+  averageBurnRate,
+  totalBurnPercent,
+}: IProps): JSX.Element => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
+      {cards.map((card, index) => (
+        <Card
+          key={index}
+          card={card}
+          averageBurnRate={averageBurnRate}
+          totalBurnPercent={totalBurnPercent}
+        />
+      ))}
+    </div>
+  );
+};
+
+export { Dashboard };

src/modules/RecoveryDashboard/components/Dashboard/index.tsx

@@ -1,6 +1,6 @@
 import { PriceCellProps } from "../types";
 
-export const PriceCell: React.FC<PriceCellProps> = ({ price }) => {
+const PriceCell: React.FC<PriceCellProps> = ({ price }) => {
   if (!price) {
     return <div className="text-[#97979A] text-sm">—</div>;
   }
@@ -18,3 +18,5 @@ export const PriceCell: React.FC<PriceCellProps> = ({ price }) => {
     </div>
   );
 };
+
+export { PriceCell };

src/modules/RecoveryDashboard/components/PriceCell.tsx

@@ -1,4 +1,4 @@
-import { BackwardIcon, ForwardIcon } from "../ui/icons";
+import { ArrowIcon } from "@ui";
 
 interface Props {
   currentPage: number;
@@ -11,7 +11,7 @@ interface Props {
   onItemsPerPageChange: (value: number) => void;
 }
 
-export function TablePagination({
+const TablePagination = ({
   currentPage,
   totalPages,
   itemsPerPage,
@@ -20,10 +20,9 @@ export function TablePagination({
   endIndex,
   onPageChange,
   onItemsPerPageChange,
-}: Props): JSX.Element {
+}: Props): JSX.Element => {
   return (
     <div className="flex items-center justify-between text-sm md:px-6 bg-[#151618] border-t border-[#23252A]">
-      {/* Left side - Items per page */}
       <div className="flex items-center gap-2">
         <div className="hidden md:flex items-center gap-2 py-3">
           <span className="text-[#97979A]">Items per page:</span>
@@ -44,8 +43,6 @@ export function TablePagination({
           items
         </span>
       </div>
-
-      {/* Right side - Navigation */}
       <div className="flex items-center gap-2">
         <div className="hidden md:flex items-center gap-2">
           <button
@@ -72,17 +69,19 @@ export function TablePagination({
             disabled={currentPage === 1}
             className="border-r border-l border-[#23252a] py-3 px-4 text-white disabled:text-[#97979A] cursor-pointer disabled:cursor-not-allowed"
           >
-            <BackwardIcon className="w-4 h-4 rotate-90" />
+            <ArrowIcon isActive={currentPage !== 1} rotate={90} />
           </button>
           <button
             onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
             disabled={currentPage === totalPages}
             className="py-3 pr-4 text-white disabled:text-[#97979A] cursor-pointer disabled:cursor-not-allowed"
           >
-            <ForwardIcon className="w-4 h-4 rotate-270" />
+            <ArrowIcon isActive={currentPage !== totalPages} rotate={270} />
           </button>
         </div>
       </div>
     </div>
   );
-}
+};
+
+export { TablePagination };

src/modules/RecoveryDashboard/components/TablePagination.tsx

@@ -0,0 +1,5 @@
+import { Dashboard } from "./Dashboard";
+import { PriceCell } from "./PriceCell";
+import { TablePagination } from "./TablePagination";
+
+export { Dashboard, PriceCell, TablePagination };

src/modules/RecoveryDashboard/components/index.ts

@@ -1,13 +1,12 @@
-// src/modules/RecoveryDashboard/constants/data.ts
-import { Column, DashboardCardData } from "../types";
+import type { Column, DashboardCardData } from "../types";
 
-export const tokenColumns: Column[] = [
+const tokenColumns: Column[] = [
   { label: "Token", sortable: true },
   { label: "Token Address", sortable: false },
   { label: "Recovery Progress", sortable: true },
 ];
 
-export const tokenData = [
+const tokenData = [
   {
     name: "Recovery Stability USD",
     symbol: "RECmetaUSD",
@@ -52,13 +51,13 @@ export const tokenData = [
   },
 ];
 
-export const poolColumns: Column[] = [
+const poolColumns: Column[] = [
   { label: "Pair", sortable: true },
   { label: "Pool Address", sortable: false },
   { label: "Price", sortable: true },
 ];
 
-export const poolData = [
+const poolData = [
   {
     name: "Shadow RECmetaUSD/wmetaUSD",
     url: "https://www.shadow.so/liquidity/manage/0x1e2edba99efd08578460bd9a66f4f521ec861eb9",
@@ -97,7 +96,7 @@ export const poolData = [
   },
 ];
 
-export const dashboardData: DashboardCardData[] = [
+const dashboardData: DashboardCardData[] = [
   {
     title: "Total Tokens",
     value: tokenData.length,
@@ -117,3 +116,5 @@ export const dashboardData: DashboardCardData[] = [
     specialType: null,
   },
 ];
+
+export { tokenColumns, tokenData, poolColumns, poolData, dashboardData };