From a3f2b77548ee8278b400dadbf1ee26e2415c00dd Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Thu, 15 May 2025 22:18:36 +0200
Subject: [PATCH] Improve usability

---
 moneymgr_web/src/routes/AccountRoute.tsx     | 16 +++++++++-------
 moneymgr_web/src/routes/BackupRoute.tsx      |  2 +-
 moneymgr_web/src/widgets/forms/DateInput.tsx | 11 +++++++----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/moneymgr_web/src/routes/AccountRoute.tsx b/moneymgr_web/src/routes/AccountRoute.tsx
index dd80789..18e5ecc 100644
--- a/moneymgr_web/src/routes/AccountRoute.tsx
+++ b/moneymgr_web/src/routes/AccountRoute.tsx
@@ -121,13 +121,15 @@ function MovementsTable(p: {
 
   const chooseAccount = useSelectAccount();
 
-  const [labelFilter, setLabelFilter] = React.useState("");
+  const [filter, setFilter] = React.useState("");
 
   const filteredList = React.useMemo(() => {
-    return p.movements.filter((m) =>
-      m.label.toLowerCase().includes(labelFilter.toLowerCase())
+    return p.movements.filter(
+      (m) =>
+        m.label.toLowerCase().includes(filter.toLowerCase()) ||
+        m.amount.toString().includes(filter)
     );
-  }, [p.movements, labelFilter]);
+  }, [p.movements, filter]);
 
   const [rowSelectionModel, setRowSelectionModel] =
     React.useState<GridRowSelectionModel>({ type: "include", ids: new Set() });
@@ -382,12 +384,12 @@ function MovementsTable(p: {
     <>
       <div style={{ display: "flex" }}>
         <TextField
-          placeholder="Filter by label"
+          placeholder="Filter by label or amount"
           variant="standard"
           size="small"
-          value={labelFilter}
+          value={filter}
           onChange={(e) => {
-            setLabelFilter(e.target.value);
+            setFilter(e.target.value);
           }}
           style={{ padding: "0px", flex: 1 }}
         />
diff --git a/moneymgr_web/src/routes/BackupRoute.tsx b/moneymgr_web/src/routes/BackupRoute.tsx
index 87af5d6..ea2d81d 100644
--- a/moneymgr_web/src/routes/BackupRoute.tsx
+++ b/moneymgr_web/src/routes/BackupRoute.tsx
@@ -158,7 +158,7 @@ function ImportExportModal(p: {
         </CardContent>{" "}
         <CardActions>
           <span style={{ flex: 1 }}>
-            <RouterLink to={p.exportURL}>
+            <RouterLink to={p.exportURL} target="_blank">
               <Button
                 startIcon={<DownloadIcon />}
                 variant="outlined"
diff --git a/moneymgr_web/src/widgets/forms/DateInput.tsx b/moneymgr_web/src/widgets/forms/DateInput.tsx
index be1717c..51433e6 100644
--- a/moneymgr_web/src/widgets/forms/DateInput.tsx
+++ b/moneymgr_web/src/widgets/forms/DateInput.tsx
@@ -1,4 +1,4 @@
-import { DatePicker } from "@mui/x-date-pickers";
+import { DateField } from "@mui/x-date-pickers";
 import { dateToTime, timeToDate } from "../../utils/DateUtils";
 import { TextFieldVariants } from "@mui/material";
 
@@ -13,13 +13,16 @@ export function DateInput(p: {
   variant?: TextFieldVariants;
 }): React.ReactElement {
   return (
-    <DatePicker
+    <DateField
       autoFocus={p.autoFocus}
       readOnly={p.editable === false}
       label={p.label}
       slotProps={{
-        field: { ref: p.ref },
-        textField: { variant: p.variant ?? "standard", style: p.style },
+        textField: {
+          ref: p.ref,
+          variant: p.variant ?? "standard",
+          style: p.style,
+        },
       }}
       value={timeToDate(p.value)}
       onChange={(v) => {