Feat/split non 50 50

client/src/components/MoneyTextField.tsx

@@ -0,0 +1,42 @@
+import { TextField, TextFieldProps } from '@mui/material';
+import { forwardRef, ForwardedRef } from 'react';
+
+const MoneyTextField = forwardRef(
+  (props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) => {
+    const modifiedProps: TextFieldProps = {
+      ...props,
+      defaultValue: '0.00',
+      inputProps: {
+        ...props.inputProps,
+        inputMode: 'numeric',
+        step: '0.01',
+      },
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+        e.target.value = e.target.value.replace(',', '.');
+        let amount: string = e.target.value.replace(/[^0-9]/g, '');
+
+        while (amount.length < 3) {
+          amount = '0' + amount;
+        }
+
+        amount =
+          amount.substring(0, amount.length - 2) +
+          '.' +
+          amount.substring(amount.length - 2);
+
+        while (amount[0] === '0' && amount.length > 4) {
+          amount = amount.substring(1);
+        }
+
+        e.target.value = amount;
+
+        props.onChange && props.onChange(e);
+      },
+    };
+
+    return <TextField {...modifiedProps} ref={ref} />;
+  },
+);
+MoneyTextField.displayName = 'MoneyTextField';
+
+export default MoneyTextField;

client/src/components/MultiSelect.tsx

@@ -0,0 +1,74 @@
+import {
+  Box,
+  Checkbox,
+  Chip,
+  FormControl,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material';
+import { useState } from 'react';
+
+export default function MultiSelect(props: {
+  options: Record<string, string>;
+  onChange: (ids: string[]) => void;
+  label: string;
+  disabled?: boolean;
+  error?: boolean;
+}) {
+  const { disabled, label, error, options, onChange } = props;
+
+  const [selectedConsumers, setSelectedConsumers] = useState<string[]>([]);
+  const onConsumersChange = (e: SelectChangeEvent<string[]>) => {
+    const value =
+      typeof e.target.value === 'string'
+        ? e.target.value.split(',')
+        : e.target.value;
+    setSelectedConsumers(value);
+    onChange(value);
+  };
+
+  return (
+    <FormControl fullWidth>
+      <InputLabel id='consumers-checkbox-label'>{label}</InputLabel>
+      <Select
+        multiple
+        labelId='consumers-checkbox-label'
+        value={selectedConsumers}
+        onChange={e => onConsumersChange(e)}
+        input={<OutlinedInput id='select-multiple-chip' label='Chip' />}
+        disabled={disabled}
+        error={error}
+        required
+        renderValue={selected => (
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+            {selected.map(value => (
+              <Chip
+                key={`dialog-consumer-chip-${value}`}
+                label={options?.[value]}
+              />
+            ))}
+          </Box>
+        )}
+        MenuProps={{
+          PaperProps: {
+            style: {
+              maxHeight: 48 * 4.5 + 8,
+              width: 250,
+            },
+          },
+        }}
+      >
+        {Object.keys(options).map(key => (
+          <MenuItem key={`dialog-consumer-menu-item-${key}`} value={key}>
+            <Checkbox checked={selectedConsumers.indexOf(key) > -1} />
+            <ListItemText primary={options[key]} />
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}

client/src/data/MoneyBalancerApi.tsx

@@ -3,6 +3,7 @@ import {
   AvailableAuthenticationProviders,
   Debt,
   Group,
+  GroupMember,
   Transaction,
   User,
 } from './Types';
@@ -200,6 +201,19 @@ export class MoneyBalancerApi {
     return json;
   }
 
+  async getGroupMembers(id: string): Promise<GroupMember[] | undefined> {
+    const r = await this._authorizedFetch(`/group/${id}/member`, {
+      method: 'GET',
+    });
+
+    if (!r || (await this._error(r, 200))) {
+      return undefined;
+    }
+
+    const members: GroupMember[] = await r.json();
+    return members;
+  }
+
   async joinGroup(id: string): Promise<boolean> {
     const r = await this._authorizedFetch(`/group/${id}/member`, {
       method: 'POST',
@@ -212,7 +226,7 @@ export class MoneyBalancerApi {
     return true;
   }
 
-  async createTransaction(
+  async createTransactionFromAmount(
     groupId: string,
     amount: number,
     description: string,
@@ -235,6 +249,27 @@ export class MoneyBalancerApi {
     return json;
   }
 
+  async createTransactionFromDebts(
+    groupId: string,
+    description: string,
+    debts: Debt[],
+  ): Promise<Group | undefined> {
+    const r = await this._authorizedFetch(`/group/${groupId}/transaction`, {
+      method: 'POST',
+      body: JSON.stringify({
+        description: description,
+        debts: debts,
+      }),
+    });
+
+    if (!r || (await this._error(r, 200))) {
+      return undefined;
+    }
+
+    const json = await r.json();
+    return json;
+  }
+
   async deleteTransactionOfGroup(
     groupId: string,
     transactionId: string,