Merge pull request #36 from dsaltares/feat/33

feat: 33 - allow display currency to be customised

src/components/BudgetOptionsDialog.tsx

@@ -12,11 +12,11 @@ import createUTCDate from '@lib/createUTCDate';
 import useFiltersFromUrl from '@lib/useFiltersFromUrl';
 import { currencyOptionsById } from '@lib/autoCompleteOptions';
 import { TimeGranularities, type TimeGranularity } from '@server/budget/types';
+import client from '@lib/client';
+import DefaultCurrency from '@lib/defaultCurrency';
 import TimeGranularitySelect from './TimeGranularitySelect';
 import CurrencyAutocomplete from './CurrencyAutocomplete';
 
-const DefaultCurrency = 'EUR';
-
 type Props = {
   open: boolean;
   onClose: () => void;
@@ -25,6 +25,8 @@ type Props = {
 const id = 'budget-options-dialog';
 
 export default function BudgetOptionsDialog({ open, onClose }: Props) {
+  const { data: settings } = client.getUserSettings.useQuery();
+  const defaultCurrency = settings?.currency ?? DefaultCurrency;
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
   const { filtersByField, setFilters } = useFiltersFromUrl();
@@ -37,13 +39,13 @@ export default function BudgetOptionsDialog({ open, onClose }: Props) {
     (filtersByField.granularity as TimeGranularity) || '',
   );
   const [currency, setCurrency] = useState(
-    currencyOptionsById[filtersByField.currency ?? DefaultCurrency],
+    currencyOptionsById[filtersByField.currency ?? defaultCurrency],
   );
 
   const handleApplyFilters = () => {
     setFilters({
       date: date?.toISOString(),
-      currency: currency.id !== DefaultCurrency ? currency.id : undefined,
+      currency: currency.id !== defaultCurrency ? currency.id : undefined,
       granularity,
     });
     onClose();

src/components/CurrencyAutocomplete.tsx

@@ -17,13 +17,15 @@ type Props = {
   onChange: (value: Option) => void;
   error?: boolean;
   onBlur?: FocusEventHandler<HTMLDivElement>;
+  label?: string;
 };
 
 export default function CurrencyAutocomplete({
   value,
   onChange,
   error,
   onBlur,
+  label = 'Currency',
 }: Props) {
   return (
     <Autocomplete
@@ -38,7 +40,7 @@ export default function CurrencyAutocomplete({
       renderInput={(params) => (
         <TextField
           {...params}
-          label="Currency"
+          label={label}
           required
           error={error}
           InputProps={{

src/components/SettingsForm.tsx

@@ -1,5 +1,5 @@
 import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { useCallback } from 'react';
 import TextField from '@mui/material/TextField';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -9,10 +9,14 @@ import IconButton from '@mui/material/IconButton';
 import { enqueueSnackbar } from 'notistack';
 import client from '@lib/client';
 import type { UserSettings } from '@server/userSettings/types';
+import { currencyOptionsById } from '@lib/autoCompleteOptions';
 import Fab from './Fab';
+import CurrencyAutocomplete from './CurrencyAutocomplete';
 
+type Option = { label: string; id: string };
 type UserSettingsFormValues = {
   dataPath: string;
+  currency: Option;
 };
 
 type Props = {
@@ -39,15 +43,20 @@ export default function SettingsForm({ settings }: Props) {
     handleSubmit,
     formState: { errors },
     setValue,
+    control,
   } = useForm<UserSettingsFormValues>({
     mode: 'onBlur',
     defaultValues: {
       dataPath: settings.dataPath,
+      currency: currencyOptionsById[settings.currency || 'EUR'],
     },
   });
   const onSubmit: SubmitHandler<UserSettingsFormValues> = useCallback(
     async (values) => {
-      updateUserSettings(values);
+      updateUserSettings({
+        ...values,
+        currency: values.currency.id,
+      });
     },
     [updateUserSettings],
   );
@@ -81,6 +90,20 @@ export default function SettingsForm({ settings }: Props) {
             <FolderIcon fontSize="large" />
           </IconButton>
         </Stack>
+        <Controller
+          control={control}
+          name="currency"
+          rules={{ required: true }}
+          render={({ field: { value, onChange, onBlur } }) => (
+            <CurrencyAutocomplete
+              label="Preferred currency"
+              value={value}
+              onChange={onChange}
+              onBlur={onBlur}
+              error={!!errors.currency}
+            />
+          )}
+        />
       </Stack>
       <Fab type="submit">
         <SaveIcon />

src/lib/defaultCurrency.ts

@@ -0,0 +1,3 @@
+const DefaultCurrency = 'EUR';
+
+export default DefaultCurrency;

src/server/accounts/getAccounts.ts

@@ -1,12 +1,16 @@
 import { convertAmount, getRates } from '@server/reports/utils';
 import { type Procedure, procedure } from '@server/trpc';
 import db from '@server/db';
+import { getUserSettings } from '@server/userSettings/store';
+import DefaultCurrency from '@lib/defaultCurrency';
 import { GetAccountsInput, GetAccountsOutput } from './types';
 
 const getAccounts: Procedure<
   GetAccountsInput,
   GetAccountsOutput
 > = async () => {
+  const settings = getUserSettings();
+  const baseCurrency = settings.currency || DefaultCurrency;
   const accounts = await db
     .selectFrom('bankAccount')
     .selectAll()
@@ -21,10 +25,11 @@ const getAccounts: Procedure<
     total: {
       value: accounts.reduce(
         (acc, account) =>
-          acc + convertAmount(account.balance, account.currency, 'EUR', rates),
+          acc +
+          convertAmount(account.balance, account.currency, baseCurrency, rates),
         0,
       ),
-      currency: 'EUR',
+      currency: baseCurrency,
     },
   };
 };

src/server/userSettings/types.ts

@@ -7,6 +7,7 @@ export const UserSettingsFile = z.object({
 
 const UserSettingsV1 = z.object({
   dataPath: z.string(),
+  currency: z.string().optional(),
 });
 
 export const UserSettings = UserSettingsV1;