Merge pull request #366 from SFTtech/milo/prevent-ui-inconsistencies

prevent UI inconsistencies

Author: mikonse

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- prevent accounts which are not yet saved to the server from being referenced in transactions
+
 [Compare the full difference.](https://github.com/SFTtech/abrechnung/compare/v1.7.0...HEAD)
 
 ## 1.7.0 (2026-02-21)

README.md

@@ -23,6 +23,7 @@ It aims to be a feature-complete, free and open source alternative to Splitwise,
 - Create events to manage complex expenses, e.g. multiple people buying things for a multi-day event with different participants each day
 - Add tags to expenses and events to quickly filter the expense and event lists
 - Unsaved changes are stored locally to not get lost when your internet connection drops
+- Export / import groups via JSON
 - Export expenses to CSV
 - Archive groups to make them readonly
 

apps/web/src/components/AccountSelect.tsx

@@ -30,7 +30,7 @@ export const AccountSelect: React.FC<AccountSelectProps> = ({
     noDisabledStyling = false,
     ...props
 }) => {
-    const accounts = useSortedAccounts(groupId, "name");
+    const accounts = useSortedAccounts(groupId, { sortMode: "name", excludeLocalOnly: true });
 
     const filteredAccounts = React.useMemo<Account[]>(() => {
         return exclude ? accounts.filter((account) => exclude.indexOf(account.id) < 0) : accounts;

apps/web/src/pages/accounts/Balances/BalanceBarGraph.tsx

@@ -25,7 +25,11 @@ export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
     const theme: Theme = useTheme();
     const navigate = useNavigate();
 
-    const personalAccounts = useSortedAccounts(group.id, "name", "personal");
+    const personalAccounts = useSortedAccounts(group.id, {
+        sortMode: "name",
+        type: "personal",
+        excludeLocalOnly: true,
+    });
     const balances = useAppSelector((state) => selectAccountBalances(state, group.id));
 
     const colorGreen = theme.palette.mode === "light" ? theme.palette.success.light : theme.palette.success.dark;
@@ -89,7 +93,7 @@ export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
                                 </Typography>
                             ) : (
                                 <>
-                                    <Typography variant="body2" sx={{ mr: 1 }}>
+                                    <Typography variant="body2" sx={{ mr: 1, textWrap: "nowrap" }}>
                                         {formatCurrency(item.balance, group.currency_identifier)}
                                     </Typography>
                                     <Box
@@ -131,7 +135,7 @@ export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
                                             borderRadius: "0 8px 8px 0",
                                         }}
                                     />
-                                    <Typography variant="body2" sx={{ ml: 1 }}>
+                                    <Typography variant="body2" sx={{ ml: 1, textWrap: "nowrap" }}>
                                         {formatCurrency(item.balance, group.currency_identifier)}
                                     </Typography>
                                 </>

apps/web/src/pages/accounts/Balances/Balances.tsx

@@ -27,7 +27,7 @@ export const Balances: React.FC<Props> = ({ groupId }) => {
     const formatCurrency = useFormatCurrency();
 
     const group = useGroup(groupId);
-    const personalAccounts = useSortedAccounts(groupId, "name", "personal");
+    const personalAccounts = useSortedAccounts(groupId, { sortMode: "name", type: "personal", excludeLocalOnly: true });
     const clearingAccounts = useGroupAccounts(groupId, "clearing");
     const balances = useAppSelector((state) => selectAccountBalances(state, groupId));
     const isGroupWritable = useIsGroupWritable(groupId);

apps/web/src/pages/accounts/ClearingAccountList/ClearingAccountList.tsx

@@ -58,7 +58,13 @@ export const ClearingAccountList: React.FC<Props> = ({ groupId }) => {
         .trim()
         .split(",")
         .filter((tag) => !!tag);
-    const clearingAccounts = useSortedAccounts(groupId, sortMode, "clearing", searchValue, true, tagFilter);
+    const clearingAccounts = useSortedAccounts(groupId, {
+        sortMode,
+        type: "clearing",
+        searchTerm: searchValue,
+        wipAtTop: true,
+        tags: tagFilter,
+    });
 
     const [currentPage, setCurrentPage] = useState(0);
     const shouldShowPagination = clearingAccounts.length > MAX_ITEMS_PER_PAGE;

apps/web/src/pages/accounts/PersonalAccountList/PersonalAccountList.tsx

@@ -52,7 +52,7 @@ export const PersonalAccountList: React.FC<Props> = ({ groupId }) => {
     const searchValue = filterState.searchValue.trim();
     const sortMode = useAppSelector(selectPersonalAccountSortMode);
 
-    const personalAccounts = useSortedAccounts(groupId, sortMode, "personal", searchValue);
+    const personalAccounts = useSortedAccounts(groupId, { sortMode, type: "personal", searchTerm: searchValue });
 
     const isGroupWritable = useIsGroupWritable(groupId);
 

apps/web/src/pages/groups/settings/GroupSettingsPage.tsx

@@ -191,7 +191,11 @@ const OwnedAccountSettings: React.FC<{ group: Group }> = ({ group }) => {
     const { t } = useTranslation();
     const dispatch = useAppDispatch();
     const currentUserId = useAppSelector(selectCurrentUserId);
-    const personalAccounts = useSortedAccounts(group.id, "name", "personal");
+    const personalAccounts = useSortedAccounts(group.id, {
+        sortMode: "name",
+        type: "personal",
+        excludeLocalOnly: true,
+    });
     const [updateOwnedAccount] = useUpdateMemberOwnedAccountMutation();
 
     const onChange = (accountId: number | null) => {

libs/redux/src/lib/accounts/accountSlice.ts

@@ -99,10 +99,23 @@ const selectSortedAccounts = createSelector(
         wipAtTop?: boolean,
         tags?: string[]
     ) => tags ?? emptyList,
-    (accounts, sortMode, type, searchTerm, wipAtTop, tags) => {
+    (
+        state: IRootState,
+        groupId: number,
+        type: AccountType | undefined,
+        sortMode: AccountSortMode,
+        searchTerm?: string,
+        wipAtTop?: boolean,
+        tags?: string[],
+        excludeLocalOnly?: boolean
+    ) => excludeLocalOnly,
+    (accounts, sortMode, type, searchTerm, wipAtTop, tags, excludeLocalOnly) => {
         const compareFunction = getAccountSortFunc(sortMode, wipAtTop);
         // TODO: this has optimization potential
         const filterFn = (a: Account): boolean => {
+            if (excludeLocalOnly && isAccountOnlyLocal(a)) {
+                return false;
+            }
             if (a.type === "clearing" && tags.length > 0 && a.tags) {
                 for (const tag of tags) {
                     if (!a.tags.includes(tag)) {
@@ -136,14 +149,18 @@ const selectSortedAccounts = createSelector(
 
 export const useSortedAccounts = <T extends AccountType>(
     groupId: number,
-    sortMode: AccountSortMode,
-    type?: T,
-    searchTerm?: string,
-    wipAtTop?: boolean,
-    tags: string[] = []
+    config: {
+        type?: T;
+        sortMode: AccountSortMode;
+        searchTerm?: string;
+        wipAtTop?: boolean;
+        excludeLocalOnly?: boolean;
+        tags?: string[];
+    }
 ): T extends "personal" ? PersonalAccount[] : T extends "clearing" ? ClearingAccount[] : Account[] => {
+    const { sortMode, type, searchTerm, wipAtTop, excludeLocalOnly = false, tags = [] } = config;
     return useSelector((state: IRootState) =>
-        selectSortedAccounts(state, groupId, type, sortMode, searchTerm, wipAtTop, tags)
+        selectSortedAccounts(state, groupId, type, sortMode, searchTerm, wipAtTop, tags, excludeLocalOnly)
     ) as any;
 };