From 53a41878c605d86986e64ab32c144da7645e29bc Mon Sep 17 00:00:00 2001
From: Yong Sheng Tan <tanysh@pm.me>
Date: Tue, 10 Oct 2023 11:43:10 +0800
Subject: [PATCH] Add insights to transactions filter link

---
 src/core/account-selector.jsx |  5 ++++-
 src/dashboard/insights.jsx    | 22 +++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/core/account-selector.jsx b/src/core/account-selector.jsx
index 24f2758..961677a 100644
--- a/src/core/account-selector.jsx
+++ b/src/core/account-selector.jsx
@@ -31,7 +31,10 @@ const AccountSelector = ({ handleChange, disabled, sx, accountFilter, showCashCr
     const getIssuer = (id) => issuers.find(i => i.id === id);
 
     useEffect(() => {
-        if (!selectedAccount || (selectedAccount.id > 0 && !getAccounts().find(({ id }) => id === selectedAccount.id))) {
+        if (
+            !selectedAccount ||
+            !getAccounts().find(({ id }) => id === selectedAccount.id)
+        ) {
             setSelectedAccount(getAccounts()[0]);
         } else {
             setLoading(false);
diff --git a/src/dashboard/insights.jsx b/src/dashboard/insights.jsx
index 21e4374..e4b767d 100644
--- a/src/dashboard/insights.jsx
+++ b/src/dashboard/insights.jsx
@@ -2,12 +2,13 @@ import { BarChart } from '@mui/x-charts';
 import { DataGrid } from '@mui/x-data-grid';
 import { formatDecimal, formatNumber } from '../util/formatters';
 import { HorizontalLoader } from '../core/loader';
-import { Routes, Route, Navigate, Link, useLocation } from 'react-router-dom';
+import { Routes, Route, Navigate, Link, useLocation, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { useTheme } from '@mui/material/styles';
 import api from '../core/api';
 import dayjs from 'dayjs';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import state from '../core/state';
 import styled from 'styled-components';
 import Switch from '@mui/material/Switch';
 import Tab from '@mui/material/Tab';
@@ -64,6 +65,8 @@ const Insights = () => {
 
     const AverageGrid = () => {
         const theme = useTheme();
+        const navigate = useNavigate();
+        const setFilterModel = state.useState(state.filterModel)[1];
         const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
         const maxGridSize = {
             maxWidth: `calc(100vw - ${isMobile ? 1 : 3}rem)`,
@@ -75,6 +78,22 @@ const Insights = () => {
             { flex: 1, field: 'average', type: 'number', valueFormatter: formatDecimal, headerName: 'Average' },
             { flex: 1, field: 'transactions', type: 'number', valueFormatter: formatNumber, headerName: 'Transactions' },
         ];
+        const handleDoubleClick = ({ row }) => {
+            const filter = {
+                items: [
+                    {
+                        field: breakdown ? 'subCategory' : 'category',
+                        id: 1,
+                        operator: "equals",
+                        value: breakdown ? row.subCategory : row.category,
+                    },
+                ],
+                logicOperator: "and"
+            };
+            setFilterModel(filter);
+            navigate('/tx/0');
+        };
+
         return (
             <GridBox isMobile={isMobile}>
                 <DataGrid
@@ -90,6 +109,7 @@ const Insights = () => {
                             sortModel: [{ field: 'average', sort: 'asc' }],
                         },
                     }}
+                    onRowDoubleClick={handleDoubleClick}
                 />
             </GridBox>
         );