UPDATE: Adds web app

webapp/src/components/formatPicker.tsx

@@ -0,0 +1,46 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type FormatPickerProps = {
+  className?: string;
+  open: boolean;
+  onClose: () => void;
+  onExited?: () => void;
+  numFmt: string;
+  onChange: (numberFmt: string) => void;
+};
+
+const FormatPicker = (properties: FormatPickerProps) => {
+  const { t } = useTranslation();
+  const [formatCode, setFormatCode] = useState(properties.numFmt);
+
+  const onSubmit = (format_code: string): void => {
+    properties.onChange(format_code);
+    properties.onClose();
+  };
+  return (
+    <Dialog
+      open={properties.open}
+      onClose={properties.onClose}
+    >
+      <DialogTitle>{t('num_fmt.title')}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={properties.numFmt}
+          label={t('num_fmt.label')}
+          name="format_code"
+          onChange={(event) => setFormatCode(event.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+          <Button onClick={() => onSubmit(formatCode)}>
+            {t('num_fmt.save')}
+          </Button>
+        </DialogActions>
+    </Dialog>
+  );
+};
+
+
+export default FormatPicker;