From 485fe6ae536bbb29823300860644fc0de397ebf4 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 5 May 2025 20:53:25 +0200
Subject: [PATCH] Filter movements by label

---
 moneymgr_web/src/routes/AccountRoute.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/moneymgr_web/src/routes/AccountRoute.tsx b/moneymgr_web/src/routes/AccountRoute.tsx
index 4e6339f..1f55a0b 100644
--- a/moneymgr_web/src/routes/AccountRoute.tsx
+++ b/moneymgr_web/src/routes/AccountRoute.tsx
@@ -6,6 +6,7 @@ import {
   IconButton,
   ListItemIcon,
   ListItemText,
+  TextField,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -110,6 +111,14 @@ function MovementsTable(p: {
 
   const chooseAccount = useSelectAccount();
 
+  const [labelFilter, setLabelFilter] = React.useState("");
+
+  const filteredList = React.useMemo(() => {
+    return p.movements.filter((m) =>
+      m.label.toLowerCase().includes(labelFilter.toLowerCase())
+    );
+  }, [p.movements, labelFilter]);
+
   const [rowSelectionModel, setRowSelectionModel] =
     React.useState<GridRowSelectionModel>([]);
 
@@ -362,7 +371,16 @@ function MovementsTable(p: {
 
   return (
     <>
-      <div style={{ display: "flex", justifyContent: "end" }}>
+      <div style={{ display: "flex" }}>
+        <TextField
+          placeholder="Filter by label"
+          variant="standard"
+          size="small"
+          value={labelFilter}
+          onChange={(e) => setLabelFilter(e.target.value)}
+          style={{ padding: "0px", flex: 1 }}
+        />
+        <span style={{ flex: 1 }}></span>
         <Tooltip title="Move all the selected entries to another account">
           <IconButton
             disabled={
@@ -389,7 +407,7 @@ function MovementsTable(p: {
       <div style={{ flex: 1 }}>
         <DataGrid<Movement>
           columns={columns}
-          rows={p.movements}
+          rows={filteredList}
           autoPageSize
           checkboxSelection
           initialState={{