Improve usability

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) =>
+    return p.movements.filter(
-      m.label.toLowerCase().includes(labelFilter.toLowerCase())
+      (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 }}
         />

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"

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: {
-        textField: { variant: p.variant ?? "standard", style: p.style },
+          ref: p.ref,
+          variant: p.variant ?? "standard",
+          style: p.style,
+        },
       }}
       value={timeToDate(p.value)}
       onChange={(v) => {