proper use of react-openapi for resource api calls

src/features/dashboard/dashboard.mapper.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
+import { LatestItem } from "../../components/LatestItems";
+
+const DEFAULT_ICON = React.createElement(MonetizationOnIcon, {
+  sx: { color: "#388e3c" }
+});
+
+export function mapToLatestItems(
+  items: any[],
+  type: "expense" | "income"
+): LatestItem[] {
+  const isValid = (amt: number) =>
+    type === "expense" ? amt < 0 : amt > 0;
+
+  return items
+    .filter((item: any) => isValid(Number(item.amount) || 0))
+    .slice(0, 5)
+    .map((exp: any, index: number) => {
+      const time = new Date(
+        exp.occurred_at || exp.created_at || Date.now()
+      ).getTime();
+
+      const diffDays = Math.floor(
+        Math.abs(Date.now() - time) / (1000 * 60 * 60 * 24)
+      );
+
+      return {
+        id: exp.id || index,
+        icon: DEFAULT_ICON,
+        iconBgColor:
+          type === "expense" ? "#ffebee" : "#e8f5e9",
+        title: exp.payee?.name || exp.payee || "Unknown Payee",
+        subtitle:
+          exp.category?.name || exp.account?.name || "Transaction",
+        amount: `Rs ${Math.abs(exp.amount || 0)}`,
+        timeAgo: diffDays === 0 ? "Today" : `${diffDays} days ago`
+      };
+    });
+}