Filter movements by label

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={{