From 3ef71275a889a64fae09a22ad4619f8b49915952 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 10 May 2026 19:46:32 +0530
Subject: [PATCH 1/3] added basic filtering

---
 src/Dashboard.tsx                    | 103 ++++++++++++++++++++++++---
 src/features/report/report.models.ts |   9 +++
 src/features/report/useReport.ts     |   8 +++
 3 files changed, 111 insertions(+), 9 deletions(-)

diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index 2fb1971..bd3f4d1 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -3,7 +3,11 @@ import {
   Box,
   Container,
   CircularProgress,
-  Alert
+  Alert,
+  TextField,
+  Paper,
+  Autocomplete,
+  Button
 } from "@mui/material";
 
 import ConfigurableDashboard from "./components/Dashboard";
@@ -14,18 +18,67 @@ import {
 } from "./features/report";
 
 export default function Dashboard() {
+  const [appliedPayees, setAppliedPayees] = React.useState<string[]>([]);
+  const [appliedTags, setAppliedTags] = React.useState<string[]>([]);
+
+  const [payeeInput, setPayeeInput] = React.useState<string[]>([]);
+  const [tagsInput, setTagsInput] = React.useState<string[]>([]);
+
+  const [loadedPayees, setLoadedPayees] = React.useState<string[]>([]);
+  const [loadedTags, setLoadedTags] = React.useState<string[]>([]);
+
   const report = useReport({
     periods: ["weekly", "monthly", "full"],
     rolling: true,
     include_transactions: true,
     group_by: ["tags"],
-  })
+    payee: appliedPayees.length > 0 ? appliedPayees : undefined,
+    tags: appliedTags.length > 0 ? appliedTags : undefined,
+  });
+
+  React.useEffect(() => {
+    if (report.data?.data) {
+      setLoadedPayees(prev => {
+        const pSet = new Set<string>(prev);
+        report.data.data.buckets.forEach((b: any) => {
+          Object.values(b.periods).forEach((periodArray: any) => {
+            periodArray?.forEach((p: any) => {
+              p.expenses?.transactions?.forEach((t: any) => {
+                if (t.payee?.name) pSet.add(t.payee.name);
+              });
+              p.incomes?.transactions?.forEach((t: any) => {
+                if (t.payee?.name) pSet.add(t.payee.name);
+              });
+            });
+          });
+        });
+        return Array.from(pSet).sort();
+      });
+
+      setLoadedTags(prev => {
+        const tSet = new Set<string>(prev);
+        report.data.data.buckets.forEach((b: any) => {
+          Object.values(b.periods).forEach((periodArray: any) => {
+            periodArray?.forEach((p: any) => {
+              p.expenses?.transactions?.forEach((t: any) => {
+                t.tags?.forEach((tag: any) => tSet.add(tag.name || tag));
+              });
+              p.incomes?.transactions?.forEach((t: any) => {
+                t.tags?.forEach((tag: any) => tSet.add(tag.name || tag));
+              });
+            });
+          });
+        });
+        return Array.from(tSet).sort();
+      });
+    }
+  }, [report.data?.data]);
 
   const isLoading = report.isLoading;
   const error = report.error;
 
 
-  if (isLoading) {
+  if (isLoading && !report.data) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
         <CircularProgress />
@@ -41,15 +94,47 @@ export default function Dashboard() {
     );
   }
 
-  if (!report) {
+  if (!report.data) {
     return null;
   }
 
-  const data = prepareReport(report.data?.data);
+  const data = prepareReport(report.data.data);
   return (
-    <ConfigurableDashboard
-      config={configuration}
-      data={data}
-    />
+    <Box>
+      <Paper sx={{ m: 2, p: 2, display: "flex", gap: 2, alignItems: "center" }} elevation={0} variant="outlined">
+        <Autocomplete
+          multiple
+          freeSolo
+          options={loadedPayees}
+          value={payeeInput}
+          onChange={(_, val) => setPayeeInput(val as string[])}
+          renderInput={(params) => <TextField {...params} label="Filter by Payee" size="small" />}
+          sx={{ minWidth: 250, flex: 1 }}
+        />
+        <Autocomplete
+          multiple
+          freeSolo
+          options={loadedTags}
+          value={tagsInput}
+          onChange={(_, val) => setTagsInput(val as string[])}
+          renderInput={(params) => <TextField {...params} label="Filter by Tags" size="small" />}
+          sx={{ minWidth: 250, flex: 1 }}
+        />
+        <Button 
+          variant="contained" 
+          onClick={() => {
+            setAppliedPayees(payeeInput);
+            setAppliedTags(tagsInput);
+          }}
+          disabled={isLoading}
+        >
+          Apply
+        </Button>
+      </Paper>
+      <ConfigurableDashboard
+        config={configuration}
+        data={data}
+      />
+    </Box>
   );
 }
diff --git a/src/features/report/report.models.ts b/src/features/report/report.models.ts
index d905aa5..e393fdb 100644
--- a/src/features/report/report.models.ts
+++ b/src/features/report/report.models.ts
@@ -86,5 +86,14 @@ export interface ReportData {
   ignore_self: boolean;
   include_transactions: boolean;
 
+  start_date?: string | null;
+  end_date?: string | null;
+  flow?: "expense" | "income" | null;
+  payee?: string[] | null;
+  account?: string[] | null;
+  tags?: string[] | null;
+  min_amount?: number | null;
+  max_amount?: number | null;
+
   buckets: ReportBucket[];
 }
diff --git a/src/features/report/useReport.ts b/src/features/report/useReport.ts
index d479d33..3c8ec74 100644
--- a/src/features/report/useReport.ts
+++ b/src/features/report/useReport.ts
@@ -7,6 +7,14 @@ export interface ReportParams {
   group_by?: ("payee" | "tags")[];
   ignore_self?: boolean;
   include_transactions?: boolean;
+  start_date?: string;
+  end_date?: string;
+  flow?: "expense" | "income";
+  payee?: string[];
+  account?: string[];
+  tags?: string[];
+  min_amount?: number;
+  max_amount?: number;
 }
 
 export function useReport(params: ReportParams) {
-- 
2.49.1


From 3c3afffef8ca6ca20beb01f8a27563f5760c395d Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 10 May 2026 19:57:49 +0530
Subject: [PATCH 2/3] uix fixes for filtering

---
 src/Dashboard.tsx | 75 +++++++++++++++++++++++++++++------------------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index bd3f4d1..2354645 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -101,36 +101,53 @@ export default function Dashboard() {
   const data = prepareReport(report.data.data);
   return (
     <Box>
-      <Paper sx={{ m: 2, p: 2, display: "flex", gap: 2, alignItems: "center" }} elevation={0} variant="outlined">
-        <Autocomplete
-          multiple
-          freeSolo
-          options={loadedPayees}
-          value={payeeInput}
-          onChange={(_, val) => setPayeeInput(val as string[])}
-          renderInput={(params) => <TextField {...params} label="Filter by Payee" size="small" />}
-          sx={{ minWidth: 250, flex: 1 }}
-        />
-        <Autocomplete
-          multiple
-          freeSolo
-          options={loadedTags}
-          value={tagsInput}
-          onChange={(_, val) => setTagsInput(val as string[])}
-          renderInput={(params) => <TextField {...params} label="Filter by Tags" size="small" />}
-          sx={{ minWidth: 250, flex: 1 }}
-        />
-        <Button 
-          variant="contained" 
-          onClick={() => {
-            setAppliedPayees(payeeInput);
-            setAppliedTags(tagsInput);
-          }}
-          disabled={isLoading}
+      <Container>
+        <Paper 
+          sx={{ 
+            mt: 4, 
+            p: 2, 
+            display: "flex", 
+            flexDirection: { xs: "column", sm: "row" },
+            gap: 2, 
+            alignItems: { xs: "stretch", sm: "center" }, 
+            borderRadius: 4,
+            mb: -2 // pull up to be closer to the dashboard container below
+          }} 
+          elevation={0} 
+          variant="outlined"
         >
-          Apply
-        </Button>
-      </Paper>
+          <Autocomplete
+            multiple
+            freeSolo
+            options={loadedPayees}
+            value={payeeInput}
+            onChange={(_, val) => setPayeeInput(val as string[])}
+            renderInput={(params) => <TextField {...params} label="Filter by Payee" />}
+            sx={{ minWidth: { sm: 250 }, flex: 1 }}
+          />
+          <Autocomplete
+            multiple
+            freeSolo
+            options={loadedTags}
+            value={tagsInput}
+            onChange={(_, val) => setTagsInput(val as string[])}
+            renderInput={(params) => <TextField {...params} label="Filter by Tags" />}
+            sx={{ minWidth: { sm: 250 }, flex: 1 }}
+          />
+          <Button 
+            variant="contained" 
+            size="large"
+            onClick={() => {
+              setAppliedPayees(payeeInput);
+              setAppliedTags(tagsInput);
+            }}
+            disabled={isLoading}
+            sx={{ height: 56, borderRadius: 2 }}
+          >
+            Apply
+          </Button>
+        </Paper>
+      </Container>
       <ConfigurableDashboard
         config={configuration}
         data={data}
-- 
2.49.1


From 9a57cb44eed69a04f4e719da5759581336f0dc88 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 10 May 2026 20:04:52 +0530
Subject: [PATCH 3/3] ui fixes for filtering

---
 src/Dashboard.tsx | 50 ++++++++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index 2354645..1e5cecf 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -109,31 +109,41 @@ export default function Dashboard() {
             display: "flex", 
             flexDirection: { xs: "column", sm: "row" },
             gap: 2, 
-            alignItems: { xs: "stretch", sm: "center" }, 
+            alignItems: { xs: "stretch", sm: "flex-end" }, 
             borderRadius: 4,
             mb: -2 // pull up to be closer to the dashboard container below
           }} 
           elevation={0} 
           variant="outlined"
         >
-          <Autocomplete
-            multiple
-            freeSolo
-            options={loadedPayees}
-            value={payeeInput}
-            onChange={(_, val) => setPayeeInput(val as string[])}
-            renderInput={(params) => <TextField {...params} label="Filter by Payee" />}
-            sx={{ minWidth: { sm: 250 }, flex: 1 }}
-          />
-          <Autocomplete
-            multiple
-            freeSolo
-            options={loadedTags}
-            value={tagsInput}
-            onChange={(_, val) => setTagsInput(val as string[])}
-            renderInput={(params) => <TextField {...params} label="Filter by Tags" />}
-            sx={{ minWidth: { sm: 250 }, flex: 1 }}
-          />
+          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Filter by Payee
+            </Box>
+            <Autocomplete
+              multiple
+              freeSolo
+              options={loadedPayees}
+              value={payeeInput}
+              onChange={(_, val) => setPayeeInput(val as string[])}
+              renderInput={(params) => <TextField {...params} placeholder="Add payees..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+            />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Filter by Tags
+            </Box>
+            <Autocomplete
+              multiple
+              freeSolo
+              options={loadedTags}
+              value={tagsInput}
+              onChange={(_, val) => setTagsInput(val as string[])}
+              renderInput={(params) => <TextField {...params} placeholder="Add tags..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+            />
+          </Box>
           <Button 
             variant="contained" 
             size="large"
@@ -142,7 +152,7 @@ export default function Dashboard() {
               setAppliedTags(tagsInput);
             }}
             disabled={isLoading}
-            sx={{ height: 56, borderRadius: 2 }}
+            sx={{ height: 40, borderRadius: 2 }} // Changed from 56 to 40 to match minHeight of inputs
           >
             Apply
           </Button>
-- 
2.49.1