Can create movements from UI

moneymgr_web/src/widgets/forms/DateInput.tsx

@@ -0,0 +1,28 @@
+import { DatePicker } from "@mui/x-date-pickers";
+import { dateToTime, timeToDate } from "../../utils/DateUtils";
+
+export function DateInput(p: {
+  editable?: boolean;
+  autoFocus?: boolean;
+  label?: string;
+  style?: React.CSSProperties;
+  value: number | undefined;
+  onValueChange: (v: number | undefined) => void;
+}): React.ReactElement {
+  return (
+    <DatePicker
+      autoFocus={p.autoFocus}
+      readOnly={p.editable === false}
+      label={p.label}
+      slotProps={{ textField: { variant: "standard", style: p.style } }}
+      value={timeToDate(p.value)}
+      onChange={(v) => {
+        try {
+          p.onValueChange(dateToTime(v ?? undefined));
+        } catch (e) {
+          console.warn("Failed to parse date!", e);
+        }
+      }}
+    />
+  );
+}

moneymgr_web/src/widgets/forms/TextInput.tsx

@@ -14,6 +14,7 @@ export function TextInput(p: {
   multiline?: boolean;
   minRows?: number;
   maxRows?: number;
+  placeholder?: string;
   type?: React.HTMLInputTypeAttribute;
   style?: React.CSSProperties;
   helperText?: string;
@@ -48,7 +49,7 @@ export function TextInput(p: {
           readOnly: !p.editable,
           type: p.type,
         },
-        htmlInput: { maxLength: p.size?.max },
+        htmlInput: { maxLength: p.size?.max, placeholder: p.placeholder },
       }}
       variant={p.variant ?? "standard"}
       style={p.style ?? { width: "100%", marginBottom: "15px" }}