to payee

src/components/LatestItems/LatestItems.adapter.ts

@@ -30,11 +30,23 @@ function extractTransactions(
   }
 
   // 2. Filter by group key
-  if (selectedGroupKey?.tags && selectedGroupKey.tags.length > 0) {
-    return rawTxns.filter(txn => {
-      if (!txn.tags) return false;
-      const txnTags = txn.tags.map(t => typeof t === "string" ? t : t.name);
-      return selectedGroupKey.tags!.every(selectedTag => txnTags.includes(selectedTag));
+  if (selectedGroupKey) {
+    rawTxns = rawTxns.filter(txn => {
+      let match = true;
+      if (selectedGroupKey.tags && selectedGroupKey.tags.length > 0) {
+        if (!txn.tags) match = false;
+        else {
+          const txnTags = txn.tags.map(t => typeof t === "string" ? t : t.name);
+          if (!selectedGroupKey.tags.every(selectedTag => txnTags.includes(selectedTag))) match = false;
+        }
+      }
+      if (match && selectedGroupKey.payee && selectedGroupKey.payee.length > 0) {
+        if (!txn.payee || !txn.payee.name) match = false;
+        else {
+          if (!selectedGroupKey.payee.includes(txn.payee.name)) match = false;
+        }
+      }
+      return match;
     });
   }
 

src/components/ProgressCard/TopTags.tsx

@@ -73,7 +73,15 @@ export default function TopTags({
               isFetching={isFetching}
               onClick={() => {
                 if (setSelectedGroupKey) {
-                  setSelectedGroupKey(isSelected ? null : { tags: [item.tag] });
+                  let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
+                  
+                  if (isSelected) {
+                    delete newKey.tags;
+                  } else {
+                    newKey.tags = [item.tag];
+                  }
+
+                  setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
                 }
               }}
             />

src/dashboard-config.ts

@@ -2,6 +2,7 @@ import HistoryChart from "./components/HistoryChart";
 import LatestItems from "./components/LatestItems";
 import { DashboardConfig } from "./components/Dashboard";
 import TopTags from "./components/ProgressCard/TopTags";
+import TopPayees from "./components/ProgressCard/TopPayees";
 
 export const configuration: DashboardConfig = {
   sections: [
@@ -12,7 +13,6 @@ export const configuration: DashboardConfig = {
       component: HistoryChart,
       settings: {
         tabs: ["Weekly", "Monthly"],
-        // tabs: ["Weekly", "Monthly", "Yearly", "Financial Year", "All Time"],
       },
       style: {
         size: 12,
@@ -29,6 +29,17 @@ export const configuration: DashboardConfig = {
         size: 12,
       },
     },
+    {
+      id: "top-payees",
+      title: 'Top Payees',
+      component: TopPayees,
+      settings: {
+        compact: true,
+      },
+      style: {
+        size: 12,
+      },
+    },
     {
       id: "items",
       title: 'Recent Transactions',