feat: Add Branch Overview feature with account statistics#17
Open
feat: Add Branch Overview feature with account statistics#17
Conversation
Collaborator
RanugaVW
commented
Oct 17, 2025
RanugaVW
commented
- Created new BranchOverviewSection component with branch selector
- Added sidebar tab 'Branch Overview' in MainLayout
- Implemented branch account statistics API integration
- Display Joint Accounts, Fixed Deposits, and Savings Accounts counts and balances
- Added comprehensive error handling and loading states
- Fixed dropdown visibility issues with inline styles
- Updated API interface to match backend response structure
- Added branch summary card with total accounts and holdings
- Created new BranchOverviewSection component with branch selector - Added sidebar tab 'Branch Overview' in MainLayout - Implemented branch account statistics API integration - Display Joint Accounts, Fixed Deposits, and Savings Accounts counts and balances - Added comprehensive error handling and loading states - Fixed dropdown visibility issues with inline styles - Updated API interface to match backend response structure - Added branch summary card with total accounts and holdings
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements a new Branch Overview feature that allows users to view detailed statistics for individual bank branches. The feature adds a new dashboard section with a branch selector and displays comprehensive account metrics including joint accounts, fixed deposits, and savings accounts with their respective counts and balances.
Key Changes:
- Added a new
BranchOverviewSectioncomponent with branch selection and statistics display - Extended the API interface to support fetching branch account statistics
- Added aggressive CSS overrides to fix dropdown visibility issues
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/dashboard/sections/BranchOverviewSection.tsx | New component implementing the branch overview UI with branch selector, loading states, error handling, and statistics display cards |
| src/dashboard/Dashboard.tsx | Added 'branch-overview' to the MainTab type and integrated BranchOverviewSection into the routing logic |
| src/components/layout/MainLayout.tsx | Added 'Branch Overview' tab to the sidebar navigation |
| src/api/branches.ts | Extended BranchDetails interface to support alternative field names and added BranchAccountStatistics interface with getBranchAccountStatistics method |
| src/index.css | Added aggressive CSS overrides with !important declarations to fix branch dropdown visibility issues |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Comment on lines
+5
to
+44
| /* Fix for branch select dropdown visibility - AGGRESSIVE OVERRIDE */ | ||
| select#branch-select, | ||
| select#branch-select * { | ||
| color: #000 !important; | ||
| background-color: #fff !important; | ||
| font-size: 16px !important; | ||
| font-weight: 500 !important; | ||
| } | ||
|
|
||
| select#branch-select option { | ||
| color: #000 !important; | ||
| background-color: #fff !important; | ||
| padding: 10px !important; | ||
| font-size: 16px !important; | ||
| font-weight: 500 !important; | ||
| line-height: 1.5 !important; | ||
| display: block !important; | ||
| } | ||
|
|
||
| select#branch-select option:hover { | ||
| background-color: #e0e7ff !important; | ||
| color: #000 !important; | ||
| } | ||
|
|
||
| select#branch-select option:checked, | ||
| select#branch-select option:focus { | ||
| background-color: #3b82f6 !important; | ||
| color: #fff !important; | ||
| } | ||
|
|
||
| /* Ensure text is visible on all browsers */ | ||
| select#branch-select::-ms-expand { | ||
| color: #000 !important; | ||
| } | ||
|
|
||
| select#branch-select:-webkit-autofill, | ||
| select#branch-select:-webkit-autofill:hover, | ||
| select#branch-select:-webkit-autofill:focus { | ||
| -webkit-text-fill-color: #000 !important; | ||
| -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; |
There was a problem hiding this comment.
Using !important declarations and aggressive CSS overrides is an anti-pattern that makes styles difficult to maintain and debug. These styles should be applied through component-level classes or inline styles where needed, rather than global CSS with ID selectors. Consider moving these styles to the component's className prop or using a CSS module.
Suggested change
| /* Fix for branch select dropdown visibility - AGGRESSIVE OVERRIDE */ | |
| select#branch-select, | |
| select#branch-select * { | |
| color: #000 !important; | |
| background-color: #fff !important; | |
| font-size: 16px !important; | |
| font-weight: 500 !important; | |
| } | |
| select#branch-select option { | |
| color: #000 !important; | |
| background-color: #fff !important; | |
| padding: 10px !important; | |
| font-size: 16px !important; | |
| font-weight: 500 !important; | |
| line-height: 1.5 !important; | |
| display: block !important; | |
| } | |
| select#branch-select option:hover { | |
| background-color: #e0e7ff !important; | |
| color: #000 !important; | |
| } | |
| select#branch-select option:checked, | |
| select#branch-select option:focus { | |
| background-color: #3b82f6 !important; | |
| color: #fff !important; | |
| } | |
| /* Ensure text is visible on all browsers */ | |
| select#branch-select::-ms-expand { | |
| color: #000 !important; | |
| } | |
| select#branch-select:-webkit-autofill, | |
| select#branch-select:-webkit-autofill:hover, | |
| select#branch-select:-webkit-autofill:focus { | |
| -webkit-text-fill-color: #000 !important; | |
| -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; | |
| /* Custom styles for branch select dropdown - use class instead of ID */ | |
| .branch-select { | |
| /* Add any custom styles here if needed, but prefer Tailwind utility classes in your component */ | |
| font-size: 16px; | |
| font-weight: 500; | |
| } | |
| .branch-select option { | |
| padding: 10px; | |
| font-size: 16px; | |
| font-weight: 500; | |
| line-height: 1.5; | |
| display: block; | |
| } | |
| .branch-select option:hover { | |
| background-color: #e0e7ff; | |
| color: #000; | |
| } | |
| .branch-select option:checked, | |
| .branch-select option:focus { | |
| background-color: #3b82f6; | |
| color: #fff; | |
| } | |
| /* Ensure text is visible on all browsers */ | |
| .branch-select::-ms-expand { | |
| color: #000; | |
| } | |
| .branch-select:-webkit-autofill, | |
| .branch-select:-webkit-autofill:hover, | |
| .branch-select:-webkit-autofill:focus { | |
| -webkit-text-fill-color: #000; | |
| -webkit-box-shadow: 0 0 0px 1000px #fff inset; |
Comment on lines
+24
to
+28
| select#branch-select option:hover { | ||
| background-color: #e0e7ff !important; | ||
| color: #000 !important; | ||
| } | ||
|
|
There was a problem hiding this comment.
The :hover pseudo-class on elements is not reliably supported across browsers (particularly in Chrome/Safari). This styling will not work as intended in most modern browsers where option styling is controlled by the operating system.
Suggested change
| select#branch-select option:hover { | |
| background-color: #e0e7ff !important; | |
| color: #000 !important; | |
| } |
| const [loading, setLoading] = useState(false); | ||
| const [loadingBranches, setLoadingBranches] = useState(true); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const [debugInfo, setDebugInfo] = useState<string>(''); |
There was a problem hiding this comment.
The debugInfo state is only used for debugging and should be removed before merging to production. Debug information should be logged to the console rather than stored in component state and displayed in the UI.
| // Fetch branch details and statistics when a branch is selected | ||
| const handleBranchChange = async (branchId: string) => { | ||
| console.log('Branch selection changed:', branchId); | ||
| setDebugInfo(`Branch ID selected: ${branchId}`); |
There was a problem hiding this comment.
Debug state updates like this should be removed before production deployment. These statements add unnecessary state updates and re-renders.
Comment on lines
+121
to
+135
| style={{ | ||
| color: '#000', | ||
| backgroundColor: '#fff', | ||
| fontSize: '16px', | ||
| fontWeight: '500' | ||
| }} | ||
| > | ||
| <option value="" style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500' }}> | ||
| -- Select a branch -- | ||
| </option> | ||
| {branches.map((branch) => ( | ||
| <option | ||
| key={branch.branch_id} | ||
| value={branch.branch_id} | ||
| style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500', padding: '10px' }} |
There was a problem hiding this comment.
Inline styles are being used here to override styling issues, but this duplicates the CSS rules in index.css. Since the global CSS already targets this element with ID selector, either use Tailwind classes or remove the redundant inline styles to maintain a single source of truth.
Suggested change
| style={{ | |
| color: '#000', | |
| backgroundColor: '#fff', | |
| fontSize: '16px', | |
| fontWeight: '500' | |
| }} | |
| > | |
| <option value="" style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500' }}> | |
| -- Select a branch -- | |
| </option> | |
| {branches.map((branch) => ( | |
| <option | |
| key={branch.branch_id} | |
| value={branch.branch_id} | |
| style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500', padding: '10px' }} | |
| // Removed redundant inline styles; use Tailwind classes instead | |
| > | |
| <option | |
| value="" | |
| className="text-black bg-white text-base font-medium" | |
| > | |
| -- Select a branch -- | |
| </option> | |
| {branches.map((branch) => ( | |
| <option | |
| key={branch.branch_id} | |
| value={branch.branch_id} | |
| className="text-black bg-white text-base font-medium" |
Comment on lines
+128
to
+135
| <option value="" style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500' }}> | ||
| -- Select a branch -- | ||
| </option> | ||
| {branches.map((branch) => ( | ||
| <option | ||
| key={branch.branch_id} | ||
| value={branch.branch_id} | ||
| style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500', padding: '10px' }} |
There was a problem hiding this comment.
The inline styles are repeated on every option element. This creates code duplication and maintenance overhead. These styles should be consolidated into a single location (either component-level CSS classes or Tailwind utilities).
Suggested change
| <option value="" style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500' }}> | |
| -- Select a branch -- | |
| </option> | |
| {branches.map((branch) => ( | |
| <option | |
| key={branch.branch_id} | |
| value={branch.branch_id} | |
| style={{ color: '#000', backgroundColor: '#fff', fontSize: '16px', fontWeight: '500', padding: '10px' }} | |
| <option value="" className="text-black bg-white text-base font-medium px-2 py-2"> | |
| -- Select a branch -- | |
| </option> | |
| {branches.map((branch) => ( | |
| <option | |
| key={branch.branch_id} | |
| value={branch.branch_id} | |
| className="text-black bg-white text-base font-medium px-2 py-2" |
| <AlertCircle className="w-6 h-6 text-red-600 flex-shrink-0" /> | ||
| <div className="flex-1"> | ||
| <p className="text-red-700 font-semibold">{error}</p> | ||
| {debugInfo && <p className="text-red-600 text-sm mt-1">Debug: {debugInfo}</p>} |
There was a problem hiding this comment.
Debug information should not be displayed in the production UI. Remove this debug display or gate it behind a development environment check.
Suggested change
| {debugInfo && <p className="text-red-600 text-sm mt-1">Debug: {debugInfo}</p>} | |
| {debugInfo && process.env.NODE_ENV !== 'production' && ( | |
| <p className="text-red-600 text-sm mt-1">Debug: {debugInfo}</p> | |
| )} |
- Updated BranchSummary component to fetch all branches on mount - Replaced text input with branch dropdown selector (similar to Branch Overview) - Added loading state while fetching branches
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.