balance colors and statistics

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - add French translation
 - remember selected language
+- rework balance table into a basic statistics page with lifetime group statistics
 
 ## 1.6.0 (2026-01-10)
 

apps/web/src/components/accounts/index.ts

@@ -1,3 +1,2 @@
 export * from "./DeleteAccountModal";
-export * from "./BalanceTable";
 export * from "./ClearingAccountParticipants";

apps/web/src/components/style/datagrid/renderCurrency.tsx

@@ -4,17 +4,16 @@ import * as React from "react";
 interface CurrencyValueProps {
     currencySymbol: string;
     value?: number;
-    signOverride?: number;
 }
 
-const CurrencyValue = React.memo(({ currencySymbol, value = 0, signOverride }: CurrencyValueProps) => {
+const CurrencyValue = React.memo(({ currencySymbol, value = 0 }: CurrencyValueProps) => {
     const formatCurrency = useFormatCurrency();
     const getAmountColor = useGetAmountColor();
 
     return (
         <div
             style={{
-                color: getAmountColor(signOverride ?? value),
+                color: getAmountColor(value),
                 width: "100%",
                 fontVariantNumeric: "tabular-nums",
                 textAlign: "end",
@@ -26,9 +25,9 @@ const CurrencyValue = React.memo(({ currencySymbol, value = 0, signOverride }: C
 });
 CurrencyValue.displayName = "CurrencyValue";
 
-export function renderCurrency(currencySymbol: string, signOverride?: number) {
+export function renderCurrency(currencySymbol: string) {
     const component = (params: { value?: number }) => {
-        return <CurrencyValue currencySymbol={currencySymbol} value={params.value} signOverride={signOverride} />;
+        return <CurrencyValue currencySymbol={currencySymbol} value={params.value} />;
     };
     component.displayName = "CurrencyValue";
     return component;

apps/web/src/hooks/useGetAmountColor.ts

@@ -11,6 +11,10 @@ export const useGetAmountColor = () => {
             const colorRedInverted =
                 theme.palette.mode === "dark" ? theme.palette.error.light : theme.palette.error.dark;
 
+            if (Math.abs(amount) < Number.EPSILON) {
+                return undefined;
+            }
+
             return amount < 0 ? colorRedInverted : colorGreenInverted;
         },
         [theme]

apps/web/src/pages/accounts/AccountDetail/AccountInfo.tsx

@@ -222,7 +222,10 @@ export const AccountInfo: React.FC<Props> = ({ groupId, account }) => {
                                     margin="dense"
                                     fullWidth
                                     value={formatCurrency(
-                                        balances[account.id].totalConsumed - balances[account.id].totalPaid,
+                                        balances[account.id].totalConsumedPurchases +
+                                            balances[account.id].totalReceivedTransfers -
+                                            balances[account.id].totalPaidPurchases -
+                                            balances[account.id].totalPaidTransfers,
                                         currencyIdentifier
                                     )}
                                     onChange={() => undefined}

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

@@ -2,9 +2,10 @@ import { useFormatCurrency } from "@/hooks";
 import { useAppSelector } from "@/store";
 import { Group } from "@abrechnung/api";
 import { selectAccountBalances, useSortedAccounts } from "@abrechnung/redux";
-import { Box, Theme, Typography } from "@mui/material";
+import { Box, Chip, Theme, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
 
 export type BalanceBarGraphProps = {
@@ -15,9 +16,11 @@ type Data = {
     name: string;
     id: number;
     balance: number;
+    isYou: boolean;
 };
 
 export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
+    const { t } = useTranslation();
     const formatCurrency = useFormatCurrency();
     const theme: Theme = useTheme();
     const navigate = useNavigate();
@@ -35,6 +38,7 @@ export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
         return {
             id: account.id,
             name: account.name,
+            isYou: group.owned_account_id === account.id,
             balance: roundTwoDecimals(balance?.balance ?? 0),
         };
     });
@@ -46,6 +50,10 @@ export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
         navigate(`/groups/${group.id}/accounts/${accountId}`);
     };
 
+    const itsYouChip = (
+        <Chip sx={{ ml: 1 }} size="small" component="span" color="primary" label={t("groups.memberList.itsYou")} />
+    );
+
     return (
         <Box sx={{ display: "grid", gridTemplateColumns: "1fr", gridAutoRows: "32px", rowGap: 1 }}>
             {chartData.map((item, index) => {
@@ -77,6 +85,7 @@ export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
                             {isPositive ? (
                                 <Typography variant="body2" sx={{ mr: 1 }}>
                                     {item.name}
+                                    {item.isYou && itsYouChip}
                                 </Typography>
                             ) : (
                                 <>
@@ -129,6 +138,7 @@ export const BalanceBarGraph: React.FC<BalanceBarGraphProps> = ({ group }) => {
                             ) : (
                                 <Typography variant="body2" sx={{ ml: 1 }}>
                                     {item.name}
+                                    {item.isYou && itsYouChip}
                                 </Typography>
                             )}
                         </Box>

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

@@ -1,5 +1,4 @@
 import { GroupArchivedDisclaimer } from "@/components";
-import { BalanceTable } from "@/components/accounts/BalanceTable";
 import { MobilePaper } from "@/components/style";
 import { useTitle } from "@/core/utils";
 import { useFormatCurrency, useGetAmountColor } from "@/hooks";
@@ -17,6 +16,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, Link as RouterLink } from "react-router";
 import { BalanceBarGraph } from "./BalanceBarGraph";
+import { Statistics } from "./Statistics";
 
 interface Props {
     groupId: number;
@@ -58,8 +58,8 @@ export const Balances: React.FC<Props> = ({ groupId }) => {
             <TabContext value={selectedTab}>
                 <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                     <TabList onChange={(event, idx) => setSelectedTab(idx)} centered>
-                        <Tab label="Chart" value="1" />
-                        <Tab label="Table" value="2" />
+                        <Tab label={t("accounts.balances.chartTabTitle")} value="1" />
+                        <Tab label={t("accounts.balances.statisticsTabTitle")} value="2" />
                     </TabList>
                 </Box>
                 <TabPanel value="1" sx={{ padding: { xs: 1, md: 2 } }}>
@@ -84,21 +84,21 @@ export const Balances: React.FC<Props> = ({ groupId }) => {
                         </Alert>
                     )}
                     <BalanceBarGraph group={group} />
+                    {isGroupWritable && (
+                        <>
+                            <Divider sx={{ mt: 2 }} />
+                            <Box sx={{ display: "flex", justifyContent: "center" }}>
+                                <Button component={RouterLink} to={`/groups/${group.id}/settlement-plan`}>
+                                    {t("accounts.settleUp")}
+                                </Button>
+                            </Box>
+                        </>
+                    )}
                 </TabPanel>
                 <TabPanel value="2" sx={{ padding: { xs: 1, md: 2 } }}>
-                    <BalanceTable group={group} />
+                    <Statistics group={group} />
                 </TabPanel>
             </TabContext>
-            {isGroupWritable && (
-                <>
-                    <Divider />
-                    <Box sx={{ display: "flex", justifyContent: "center" }}>
-                        <Button component={RouterLink} to={`/groups/${group.id}/settlement-plan`}>
-                            {t("accounts.settleUp")}
-                        </Button>
-                    </Box>
-                </>
-            )}
         </MobilePaper>
     );
 };

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

@@ -0,0 +1,76 @@
+import { Group } from "@/core/generated/api";
+import { useFormatCurrency } from "@/hooks";
+import { useAppSelector } from "@/store";
+import { Help } from "@abrechnung/components";
+import { selectAccountBalances } from "@abrechnung/redux";
+import { Alert, AlertTitle, Box, Link, Stack, Typography } from "@mui/material";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { Link as RouterLink } from "react-router";
+
+export type StatisticsProps = {
+    group: Group;
+};
+
+export const Statistics: React.FC<StatisticsProps> = ({ group }) => {
+    const { t } = useTranslation();
+    const formatCurrency = useFormatCurrency();
+
+    const balances = useAppSelector((state) => selectAccountBalances(state, group.id));
+
+    const personalBalance = group.owned_account_id != null ? balances[group.owned_account_id] : undefined;
+
+    const totalSpendings = React.useMemo(() => {
+        return Object.values(balances).reduce(
+            (totalSpendings, balance) => totalSpendings + balance.totalConsumedPurchases,
+            0
+        );
+    }, []);
+
+    return (
+        <Stack direction="column" spacing={1}>
+            <Box>
+                <Typography color="textSecondary" sx={{ display: "flex", alignItems: "flex-end", gap: 1 }}>
+                    {t("accounts.balances.totalGroupExpenses")}
+                    <Help title={t("accounts.balances.totalGroupExpensesHelp")} />
+                </Typography>
+                <Typography fontSize={20}>{formatCurrency(totalSpendings, group.currency_identifier)}</Typography>
+            </Box>
+
+            {personalBalance != null ? (
+                <>
+                    <Box>
+                        <Typography color="textSecondary" sx={{ display: "flex", alignItems: "flex-end", gap: 1 }}>
+                            {t("accounts.balances.yourTotalDisbursements")}
+                            <Help title={t("accounts.balances.yourTotalDisbursementsHelp")} />
+                        </Typography>
+                        <Typography fontSize={20}>
+                            {formatCurrency(personalBalance.totalPaidPurchases, group.currency_identifier)}
+                        </Typography>
+                    </Box>
+
+                    <Box>
+                        <Typography color="textSecondary" sx={{ display: "flex", alignItems: "flex-end", gap: 1 }}>
+                            {t("accounts.balances.yourTotalExpenses")}
+                            <Help title={t("accounts.balances.yourTotalExpenses")} />
+                        </Typography>
+                        <Typography fontSize={20}>
+                            {formatCurrency(personalBalance.totalConsumedPurchases, group.currency_identifier)}
+                        </Typography>
+                    </Box>
+                </>
+            ) : (
+                <Alert severity="info">
+                    <AlertTitle>{t("accounts.balances.noOwnedAccountAlertTitle")}</AlertTitle>
+                    <Trans key="accounts.balances.noOwnedAccountAlertBody">
+                        Head over to the{" "}
+                        <Link component={RouterLink} to={`/groups/${group.id}/detail`}>
+                            group settings
+                        </Link>{" "}
+                        to claim an account and have individualized statistics shown here.
+                    </Trans>
+                </Alert>
+            )}
+        </Stack>
+    );
+};

apps/web/src/pages/groups/Group.tsx

@@ -7,7 +7,7 @@ import {
 import React, { Suspense } from "react";
 import { Navigate, Route, Routes, useParams } from "react-router";
 import { toast } from "react-toastify";
-import { Balances } from "../accounts/Balances";
+import { Balances } from "../accounts/Balances/Balances";
 import { Loading } from "@abrechnung/components";
 import { api } from "@/core/api";
 import { useAppDispatch, useAppSelector } from "@/store";

libs/components/src/lib/Help.tsx

@@ -0,0 +1,15 @@
+import { Tooltip } from "@mui/material";
+import { HelpOutline as HelpIcon } from "@mui/icons-material";
+import * as React from "react";
+
+export type HelpProps = {
+    title: string;
+};
+
+export const Help: React.FC<HelpProps> = ({ title }) => {
+    return (
+        <Tooltip title={title}>
+            <HelpIcon color="primary" />
+        </Tooltip>
+    );
+};

libs/components/src/lib/index.ts

@@ -7,3 +7,4 @@ export * from "./Loading";
 export * from "./FormCheckbox";
 export * from "./CurrencyIdentifierSelect";
 export * from "./Select";
+export * from "./Help";