configurable Dashboard.tsx

src/dashboard-config.ts

@@ -0,0 +1,60 @@
+import HistoryChart from "./components/HistoryChart";
+import ProgressCard from "./components/ProgressCard";
+import LatestItems from "./components/LatestItems";
+import { DashboardConfig } from "./components/Dashboard";
+
+export const configuration: DashboardConfig = {
+  sections: [
+    {
+      id: "breakdown",
+      title: "Breakdown",
+      summary: "Interactive chronological tracking",
+      component: HistoryChart,
+      dataKey: "chartData",
+      settings: {
+        tabs: ["Daily", "Weekly", "Monthly"],
+      },
+      style: {
+        size: 12,
+      },
+    },
+    {
+      id: "top-payees",
+      title: 'Top Payees',
+      component: ProgressCard,
+      dataKey: "topPayees",
+      isList: true,
+      settings: {
+        compact: true,
+      },
+      style: {
+        size: 12,
+      },
+    },
+    {
+      id: "latest",
+      title: 'Recent Transactions',
+      component: LatestItems,
+      dataKey: "latest",
+      style: {
+        size: 12,
+      },
+    },
+  ],
+  style: {
+    palette: {
+      expense: {
+        primary: "#d32f2f",
+        light: "#fdecea",
+        dark: "#9a0007",
+        text: "#b71c1c"
+      },
+      income: {
+        primary: "#2e7d32",
+        light: "#e8f5e9",
+        dark: "#1b5e20",
+        text: "#1b5e20"
+      }
+    }
+  }
+};