src/Dashboard.tsx

@@ -9,11 +9,8 @@ import {
   ToggleButtonGroup
 } from "@mui/material";
 
-import LatestItemsList, { LatestItem } from "./components/LatestItemsList";
-import HistoryChart from "./components/HistoryChart";
-import {
-  AggregatedDashboardData
-} from "./components/HistoryChart";
+import LatestItemsList, { LatestItem } from "./components/LatestItems";
+import HistoryChart, { AggregatedDashboardData } from "./components/HistoryChart";
 
 import {
   fetchLatestTransactions,

src/components/LatestItems/LatestItems.models.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface LatestItem {
+  id: string | number;
+  icon: React.ReactNode;
+  iconBgColor?: string;
+  title: string;
+  subtitle: string;
+  amount: string;
+  timeAgo: string;
+}
+
+export interface LatestItemsListProps {
+  title?: string;
+  items: LatestItem[];
+  onViewAll?: () => void;
+  accentColor: string;
+}

src/components/LatestItems/LatestItems.tsx

@@ -27,7 +27,7 @@ export interface LatestItemsListProps {
   accentColor: any;
 }
 
-export default function LatestItemsList({
+export default function LatestItems({
   title = "Recent Transactions",
   items,
   onViewAll,

src/components/LatestItems/LatestItems.view.tsx

@@ -0,0 +1,6 @@
+import LatestItemsListView from "./LatestItems.view";
+import { LatestItemsListProps } from "./LatestItems.models";
+
+export default function LatestItemsList(props: LatestItemsListProps) {
+  return <LatestItemsListView {...props} />;
+}

src/components/LatestItems/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./LatestItems";
+export * from "./LatestItems.models";