Can display information about the movement attached to an inbox entry

moneymgr_web/src/widgets/MovementWidget.tsx

@@ -0,0 +1,63 @@
+import CallMadeIcon from "@mui/icons-material/CallMade";
+import CallReceivedIcon from "@mui/icons-material/CallReceived";
+import React from "react";
+import { Movement, MovementApi } from "../api/MovementsApi";
+import { useAccounts } from "../hooks/AccountsListProvider";
+import { AccountWidget } from "./AccountWidget";
+import { AmountWidget } from "./AmountWidget";
+import { AsyncWidget } from "./AsyncWidget";
+
+export function MovementWidget(p: { id: number }): React.ReactElement {
+  const accounts = useAccounts();
+
+  const [movement, setMovement] = React.useState<Movement | undefined>();
+
+  const load = async () => {
+    setMovement(await MovementApi.GetSingleMovement(p.id));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={p.id}
+      load={load}
+      errMsg="Failed to load movement!"
+      build={() => (
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            height: "100%",
+          }}
+        >
+          {movement!.amount > 0 ? (
+            <CallReceivedIcon color="success" />
+          ) : (
+            <CallMadeIcon color="error" />
+          )}
+          <span
+            style={{
+              display: "inline-flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              height: "100%",
+            }}
+          >
+            <span style={{ height: "1em", lineHeight: 1 }}>
+              {movement?.label}
+            </span>
+            <span
+              style={{ display: "flex", alignItems: "center", lineHeight: 1 }}
+            >
+              <AmountWidget amount={movement!.amount} />
+              <span style={{ width: "0.5em" }} />
+              &bull;
+              <span style={{ width: "0.5em" }} />
+              <AccountWidget account={accounts.get(movement!.account_id)!} />
+              {accounts.get(movement!.account_id)?.name}
+            </span>
+          </span>
+        </span>
+      )}
+    />
+  );
+}