Skip to content

MPDX-9281 - Update StaffExpenseReport GraphQL to pull individual fund startBalance and endBalance #1626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
zweatshirt wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

MPDX-9281 - Update StaffExpenseReport GraphQL to pull individual fund startBalance and endBalance #1626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80dd381
Refactor balance handling in reports to use endBalance instead of bal…
zweatshirt Feb 10, 2026
e995b14
Fix naming
zweatshirt Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions src/components/Reports/PartnerGivingAnalysisReport/BalanceCard/BalanceCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import { BalanceCard } from './BalanceCard';
const mutationSpy = jest.fn();

interface ComponentProps {
balance?: number;
endBalance?: number;
}

const Components = ({ balance = 15000 }: ComponentProps) => (
const Components = ({ endBalance = 15000 }: ComponentProps) => (
<GqlMockedProvider<{
FundBalances: FundBalancesQuery;
}>
Expand All @@ -20,7 +20,7 @@ const Components = ({ balance = 15000 }: ComponentProps) => (
funds: [
{
fundType: 'Primary',
balance,
endBalance,
},
],
},
Expand Down Expand Up @@ -62,7 +62,7 @@ describe('BalanceCard', () => {
describe('Handle formatting', () => {
it('should format positive balance amount correctly', async () => {
const { getByText, queryByTestId } = render(
<Components balance={1234567.89} />,
<Components endBalance={1234567.89} />,
);

await waitFor(() => {
Expand All @@ -73,7 +73,9 @@ describe('BalanceCard', () => {
});

it('should handle zero balance amount', async () => {
const { getByText, queryByTestId } = render(<Components balance={0} />);
const { getByText, queryByTestId } = render(
<Components endBalance={0} />,
);

await waitFor(() => {
expect(queryByTestId('CardSkeleton')).not.toBeInTheDocument();
Expand All @@ -84,7 +86,7 @@ describe('BalanceCard', () => {

it('should format negative balance amount', async () => {
const { getByText, queryByTestId } = render(
<Components balance={-500} />,
<Components endBalance={-500} />,
);

await waitFor(() => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Reports/PartnerGivingAnalysisReport/BalanceCard/BalanceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,10 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({

<Typography
variant="h5"
color={fund.balance < 0 ? 'error.main' : 'text.primary'}
color={fund.endBalance < 0 ? 'error.main' : 'text.primary'}
sx={{ fontSize: 'inherit' }}
>
{formatBalance(fund.balance)}
{formatBalance(fund.endBalance)}
</Typography>
</Box>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Reports/SavingsFundTransfer/ReportsSavingsFund.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,6 @@ query FundBalances($fundTypes: [String!]) {
fragment FundFields on Fund {
id
fundType
balance
endBalance
deficitLimit
}
8 changes: 4 additions & 4 deletions src/components/Reports/SavingsFundTransfer/TransfersPage/TransfersPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,13 +95,13 @@ const mock = {
{
id: '2',
fundType: 'Savings',
balance: 25000,
endBalance: 25000,
deficitLimit: 0,
},
{
id: '1',
fundType: 'Primary',
balance: 15000,
endBalance: 15000,
deficitLimit: 0,
},
],
Expand All @@ -125,13 +125,13 @@ const emptyMock = {
{
id: '1',
fundType: 'Primary',
balance: 15000,
endBalance: 15000,
deficitLimit: 0,
},
{
id: '2',
fundType: 'Savings',
balance: 2500,
endBalance: 2500,
deficitLimit: 0,
},
],
Expand Down
10 changes: 5 additions & 5 deletions src/components/Reports/StaffExpenseReport/BalanceCard/BalanceCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const defaultProps = {
title: 'Primary Fund',
icon: Wallet,
iconBgColor: 'primary.main',
startingBalance: 1000,
endingBalance: 1500,
startBalance: 1000,
endBalance: 1500,
transfersIn: 500,
transfersOut: 100,
isSelected: false,
Expand Down Expand Up @@ -51,14 +51,14 @@ describe('BalanceCard', () => {

it('should format positive balances correctly', () => {
const { getByText } = render(
<BalanceCard {...defaultProps} startingBalance={1234.56} />,
<BalanceCard {...defaultProps} startBalance={1234.56} />,
);
expect(getByText('Starting Balance: $1,234.56')).toBeInTheDocument();
});

it('should format negative balances correctly', () => {
const { getByText } = render(
<BalanceCard {...defaultProps} startingBalance={-500.25} />,
<BalanceCard {...defaultProps} startBalance={-500.25} />,
);
expect(getByText('Starting Balance: -$500.25')).toBeInTheDocument();
});
Expand All @@ -72,7 +72,7 @@ describe('BalanceCard', () => {

it('should handle large numbers correctly', () => {
const { getByText } = render(
<BalanceCard {...defaultProps} endingBalance={1000000.99} />,
<BalanceCard {...defaultProps} endBalance={1000000.99} />,
);
expect(getByText('= Ending Balance: $1,000,000.99')).toBeInTheDocument();
});
Expand Down
12 changes: 6 additions & 6 deletions src/components/Reports/StaffExpenseReport/BalanceCard/BalanceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ interface BalanceCardProps {
title: string;
icon: React.ComponentType;
iconBgColor?: string;
startingBalance: number;
endingBalance: number;
startBalance: number;
endBalance: number;
transfersIn: number;
transfersOut: number;
onClick: (fundType: string) => void;
Expand All @@ -67,8 +67,8 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
title,
icon: Icon,
iconBgColor,
startingBalance,
endingBalance,
startBalance,
endBalance,
transfersIn,
transfersOut,
onClick,
Expand All @@ -88,7 +88,7 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
<Box display="flex" flexDirection="column" mt={3} mb={2}>
<Typography>
{t('Starting Balance: ')}
{currencyFormat(startingBalance, 'USD', locale)}
{currencyFormat(startBalance, 'USD', locale)}
</Typography>
<Typography>
{t('+ Transfers in: ')}
Expand All @@ -100,7 +100,7 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
</Typography>
<Typography>
{t('= Ending Balance: ')}
{currencyFormat(endingBalance, 'USD', locale)}
{currencyFormat(endBalance, 'USD', locale)}
</Typography>
</Box>

Expand Down
4 changes: 2 additions & 2 deletions src/components/Reports/StaffExpenseReport/BalanceCardList/BalanceCardList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ const mockFunds: Fund[] = [
const defaultProps = {
funds: mockFunds,
selectedFundType: null,
startingBalance: 1000,
endingBalance: 1500,
startBalance: 1000,
endBalance: 1500,
transferTotals: {
Primary: { in: 500, out: 100 },
Savings: { in: 300, out: 50 },
Expand Down
8 changes: 2 additions & 6 deletions src/components/Reports/StaffExpenseReport/BalanceCardList/BalanceCardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ const StyledCardsBox = styled(Box)(({ theme }) => ({
export interface BalanceCardListProps {
funds: Fund[];
selectedFundType: string | null;
startingBalance: number;
endingBalance: number;
transferTotals: Record<string, { in: number; out: number }>;
onCardClick: (fundType: string) => void;
loading: boolean;
Expand All @@ -29,8 +27,6 @@ export interface BalanceCardListProps {
export const BalanceCardList: React.FC<BalanceCardListProps> = ({
funds,
selectedFundType,
startingBalance,
endingBalance,
transferTotals,
onCardClick,
loading,
Expand All @@ -57,8 +53,8 @@ export const BalanceCardList: React.FC<BalanceCardListProps> = ({
iconBgColor={getIconColorForFundType(fund.fundType, theme)}
title={fund.fundType}
isSelected={selectedFundType === fund.fundType}
startingBalance={startingBalance}
endingBalance={endingBalance}
startBalance={fund.startBalance ?? 0}
endBalance={fund.endBalance ?? 0}
transfersIn={transferTotals[fund.fundType]?.in}
transfersOut={transferTotals[fund.fundType]?.out}
onClick={onCardClick}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Reports/StaffExpenseReport/GetStaffExpense.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ query ReportsStaffExpenses(
endMonth: $endMonth
fundTypes: $fundTypes
) {
startBalance
endBalance
funds {
id
fundType
total
deficitLimit
balance
startBalance
endBalance
categories {
total
averagePerMonth
Expand Down
3 changes: 2 additions & 1 deletion src/components/Reports/StaffExpenseReport/Helpers/filterTransactions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import {
const mockFund: Fund = {
id: 'fund-1',
fundType: 'Primary',
balance: 1000,
startBalance: 1200,
endBalance: -300,
deficitLimit: 0,
total: -500,
categories: [
Expand Down
6 changes: 4 additions & 2 deletions src/components/Reports/StaffExpenseReport/StaffExpenseReport.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,98 +57,100 @@
}>
mocks={{
ReportsStaffExpenses: {
reportsStaffExpenses: {
startBalance: 1000,
endBalance: 2000,
funds: isEmpty
? []
: [
{
fundType: 'Primary',
total: -500,
startBalance: 1000,
endBalance: 2000,
categories: [
{
category: StaffExpenseCategoryEnum.Assessment,
total: -300,
averagePerMonth: -100,
subcategories: [
{
subCategory:
StaffExpensesSubCategoryEnum.BenefitsOther,
total: -200,
averagePerMonth: -50,
breakdownByMonth: [
{
month: '2020-01-01',
total: -200,
transactions: [
{
id: 'transaction-1',
amount: -100,
transactedAt: '2020-01-15',
description: 'Star Wars Costume',
},
{
id: 'transaction-2',
amount: -100,
transactedAt: '2020-01-24',
},

{
id: 'transaction-3',
amount: 50,
transactedAt: '2020-02-15',
description: 'Credit Card Fee',
},
],
},
{
month: '2020-02-01',
total: -100,
},
],
},
{
subCategory:
StaffExpensesSubCategoryEnum.CreditCardFee,
total: 150,
averagePerMonth: 75,
breakdownByMonth: [
{
month: '2020-01-01',
total: 50,
},
{
month: '2020-02-01',
total: 50,
transactions: [
{
id: 'transaction-3',
amount: 50,
transactedAt: '2020-02-15',
description: 'Credit Card Fee',
},
],
},
],
},
],
breakdownByMonth: [
{
month: '2020-01-01',
total: -150,
},
{
month: '2020-02-01',
total: -150,
},
],
},
],
},
{
fundType: 'Savings',
total: -100,
startBalance: 1000,
endBalance: 2000,

Check warning on line 153 in src/components/Reports/StaffExpenseReport/StaffExpenseReport.test.tsx

View check run for this annotation

CodeScene Delta Analysis / CodeScene Code Health Review (main)

❌ Getting worse: Large Method 

TestComponent:React.FC<TestComponentProps> increases from 176 to 178 lines of code, threshold = 120. Large functions with many lines of code are generally harder to understand and lower the code health. Avoid adding more lines to this function.
categories: [
{
category: StaffExpenseCategoryEnum.Assessment,
Expand Down
6 changes: 2 additions & 4 deletions src/components/Reports/StaffExpenseReport/StaffExpenseReport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,24 +309,22 @@
>
<BalanceCardList
funds={allFunds}
selectedFundType={selectedFundType}
startingBalance={data?.reportsStaffExpenses.startBalance ?? 0}
endingBalance={data?.reportsStaffExpenses.endBalance ?? 0}
transferTotals={transferTotals}
onCardClick={handleCardClick}
loading={loading}
/>
</Box>
</SimpleScreenOnly>
<SimplePrintOnly>
<Box>
{selectedFundType && (
<PrintHeader
icon={getIconForFundType(selectedFundType)}
iconColor={getIconColorForFundType(selectedFundType, theme)}
title={selectedFundType}
startBalance={data?.reportsStaffExpenses.startBalance ?? 0}
endBalance={data?.reportsStaffExpenses.endBalance ?? 0}
startBalance={selectedFund.startBalance ?? 0}
endBalance={selectedFund.endBalance ?? 0}

Check notice on line 327 in src/components/Reports/StaffExpenseReport/StaffExpenseReport.tsx

View check run for this annotation

CodeScene Delta Analysis / CodeScene Code Health Review (main)

✅ Getting better: Complex Method 

StaffExpenseReport:React.FC<StaffExpenseReportProps> decreases in cyclomatic complexity from 61 to 57, threshold = 10. This function has many conditional statements (e.g. if, for, while), leading to lower code health. Avoid adding more conditionals and code to it without refactoring.
transfersIn={transferTotals[selectedFundType]?.in}
transfersOut={transferTotals[selectedFundType]?.out}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Reports/StaffExpenseReport/Tables/PrintTables.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ const TestComponent: React.FC<TestComponentProps> = ({ tableProps }) => (
accountId: 'account-1',
name: 'Test Account',
status: 'active',
startBalance: 1000,
endBalance: 2000,
funds: [
{
fundType: 'Primary',
startBalance: 1000,
endBalance: 2000,
total: -500,
categories: [
{
Expand Down
Loading