Add a widget to select a movement

moneymgr_web/src/widgets/forms/AccountInput.tsx

@@ -4,21 +4,25 @@ import { useAccounts } from "../../hooks/AccountsListProvider";
 import { AmountWidget } from "../AmountWidget";
 
 export function AccountInput(p: {
-  value: number;
+  value?: number;
   onChange: (value: number) => void;
   label?: string;
+  style?: React.CSSProperties;
 }): React.ReactElement {
   const accounts = useAccounts();
   let current = p.value;
-  if (!current && accounts.list.list.length > 0)
+  if (!current && accounts.list.list.length > 0) {
     current = (accounts.list.default ?? accounts.list.list[0]).id;
+    p.onChange(current);
+  }
 
   return (
     <Select
-      value={p.value}
+      value={current}
       label={p.label ?? ""}
       onChange={(e) => p.onChange(Number(e.target.value))}
       size="small"
+      style={p.style}
     >
       {accounts.list.list.map((a) => (
         <MenuItem value={a.id}>

moneymgr_web/src/widgets/forms/AmountInput.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { TextInput } from "./TextInput";
+import { TextFieldVariants } from "@mui/material";
 
 enum InputState {
   Normal,
@@ -8,12 +9,13 @@ enum InputState {
 }
 
 export function AmountInput(p: {
+  label?: string;
   editable: boolean;
-  type: string;
   placeholder: string;
-  style: React.CSSProperties;
+  style?: React.CSSProperties;
   value: number;
   onValueChange: (val: number) => void;
+  variant?: TextFieldVariants;
 }): React.ReactElement {
   const [state, setState] = React.useState(InputState.Normal);
 

moneymgr_web/src/widgets/forms/DateInput.tsx

@@ -1,5 +1,6 @@
 import { DatePicker } from "@mui/x-date-pickers";
 import { dateToTime, timeToDate } from "../../utils/DateUtils";
+import { TextFieldVariants } from "@mui/material";
 
 export function DateInput(p: {
   ref?: React.Ref<HTMLInputElement>;
@@ -9,6 +10,7 @@ export function DateInput(p: {
   style?: React.CSSProperties;
   value: number | undefined;
   onValueChange: (v: number | undefined) => void;
+  variant?: TextFieldVariants;
 }): React.ReactElement {
   return (
     <DatePicker
@@ -17,7 +19,7 @@ export function DateInput(p: {
       label={p.label}
       slotProps={{
         field: { ref: p.ref },
-        textField: { variant: "standard", style: p.style },
+        textField: { variant: p.variant ?? "standard", style: p.style },
       }}
       value={timeToDate(p.value)}
       onChange={(v) => {