feat: migrate account management features from Angular to React

[devin-ai-integration]

feat: migrate account management from Angular to React frontend

Summary

Ports the account management features from the Angular GUI (web-front-end/angular) to the React GUI (web-front-end/react), achieving feature parity for account CRUD and user assignment.

New components:

• AccountManagement — main page with two ag-grid tables (accounts list + users list for selected account), an inline create/update account form, and a user-to-account assignment form with autocomplete people search
• EditAccount — create or update an account via POST /account/
• AssignUser — search people via /People/GetMatchingPeople, select an account, and assign via POST /accountuser/
• Header — navigation bar with Trade / Account tabs

Routing changes (react-router-dom v7 added):

• /trade → existing Datatable (trade blotter)
• /account → new AccountManagement
• / redirects to /trade
• BrowserRouter wraps the app in index.tsx

Local Testing

Ran docker-compose up and started the React dev server on port 18094. Both pages render and the Account list grid successfully loads accounts from the backend.

Trade page (/trade):

Account page (/account):

Review & Testing Checklist for Human

• Verify write operations end-to-end: The screenshots confirm read operations work (account list loads). Manually test POST /account/ (create & update) and POST /accountuser/ (assign user) to confirm they succeed and the grids refresh correctly.
• Verify people search response shape: AssignUser tries data.people || data || [] — the Angular service specifically reads .people. Confirm which shape the backend returns and whether this fallback is correct.
• Verify EditAccount POST response handling: After creating/updating an account, the code parses the response body as JSON and passes it to onUpdate. The Angular version does not rely on the response body — confirm the backend actually returns a full Account object from POST /account/.
• Check @types/react-router-dom@5.3.3 addition: react-router-dom v7 ships its own TypeScript types, so this separate @types package may be redundant or conflict. Consider removing it.

Suggested test plan:

1. Navigate to /account, verify the account list grid loads
2. Type a name and click "Add Account" — verify a new row appears in the grid
3. Click "Update" on a row, change the name, click "Update Account" — verify the name updates
4. Search a user in the autocomplete, select an account, click "Add User" — verify the user appears in the Users List grid
5. Switch between Trade and Account tabs — verify no errors or lost state

Notes

• The existing CreateAccount and CreateAccountUser modal buttons on the Trade page (Datatable) are untouched — account creation is now available from two places.
• accountColumnDefs and userColumnDefs in AccountManagement.tsx are re-created on every render; could be memoized for performance if ag-grid re-render becomes noticeable.
• package.json devDependencies were reordered alphabetically by npm — this is cosmetic.
• Pre-existing eslint warnings in AccountsDropdown.tsx and CreateAccountUser.tsx were not modified.

Requested by: @lburgers
Link to Devin run

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 2 potential issues.

View 4 additional findings in Devin Review.

[devin-ai-integration]

🟡 EditAccount form stuck in 'update mode' after successful save because accountToBeUpdate is never cleared

accountToBeUpdate is set when the user clicks an "Update" button in the grid (AccountManagement.tsx:43), and is passed as the account prop to EditAccount (AccountManagement.tsx:117). After a successful save, EditAccount.handleAdd calls onUpdate(savedAccount) then handleReset() which clears displayName to ''. However, the parent's handleUpdate (AccountManagement.tsx:90-99) never calls setAccountToBeUpdate(undefined), so the form permanently remains in update mode: the button label stays "Update Account" (line 81: {account ? 'Update' : 'Add'} Account) and any subsequent submission spreads the stale old account data into the payload (line 34-35: { ...account, displayName }). The user sees an empty text field but is unknowingly updating the same account instead of creating a new one.

Suggested change

	const handleUpdate = useCallback(
	(account: AccountData) => {
	fetchAccounts();
	fetchAccountUsers();
	if (account?.id) {
	setSelectedAccount(account);
	}
	},
	[fetchAccounts, fetchAccountUsers]
	);
	const handleUpdate = useCallback(
	(account: AccountData) => {
	fetchAccounts();
	fetchAccountUsers();
	setAccountToBeUpdate(undefined);
	if (account?.id) {
	setSelectedAccount(account);
	}
	},
	[fetchAccounts, fetchAccountUsers]
	);

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

🟡 EditAccount useEffect doesn't clear displayName when account prop becomes undefined

The useEffect at EditAccount.tsx:20-24 only sets displayName when account?.displayName is truthy. If the parent clears the account prop to undefined (e.g., after BUG-0001 is fixed by calling setAccountToBeUpdate(undefined)), the displayName state will retain the previous account's name instead of being cleared. This means the form would show the old name but the button would correctly switch to "Add Account", causing the user to accidentally create a new account with the old name.

Suggested change

	useEffect(() => {
	if (account?.displayName) {
	setDisplayName(account.displayName);
	}
	}, [account]);
	useEffect(() => {
	if (account?.displayName) {
	setDisplayName(account.displayName);
	} else {
	setDisplayName('');
	}
	}, [account]);

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

❌ Cannot revive Devin session - the session is too old. Please start a new session instead.

[devin-ai-integration]

❌ Cannot revive Devin session - the session is too old. Please start a new session instead.