Now I have the full picture. I need to:
selectedYear state (default "all")GlobalTabs filter with two compact dropdowns: one for FY year, one for typeGlobalTabs import since it's no longer needed for the filterLet me also check if there's an existing select/dropdown component in the design system:
I have the existing Select design system component. Now I'll:
GlobalTabs with two Select dropdowns (Year and Type)selectedYear stateNow remove the old FILTER_TABS constant since we won't use tabs anymore:
Now add a selectedYear state and compute the available FY years from the data. I'll update the state declarations and filtering logic:
Reset year filter when company/product changes:
Now compute available FY years and update the filtering logic to apply both type and year:
Reset visible count on year change too:
Now reset year filter when switching products via the product picker:
Now replace the GlobalTabs filter section with the two Select dropdowns:
Update the FilterEmptyState call to be more descriptive with both filters:
Replaced the GlobalTabs filter bar with two compact Select dropdowns from the design system: one for Year (listing all available FYs like "FY2025-26", "FY2024-25", etc.) and one for Type ("All types", "Monthly", "Annual"). Both filters apply together, and both reset when switching products or companies. The filter bar sits above the table with labels for clarity.
Screenshot 1 (Default): A compact, left-aligned card (~60% width) showing only a teal product icon, "Business Account" in teal, "BSB 802-690 Acc 43-853-9571" in grey, and a teal down-chevron. No balances or action bar. Below it, two label-less dropdowns ("All years", "All types") side by side. Then a "Statement period" header row followed by the statement table.
Screenshot 2 (Expanded): Same compact card with the dropdown open. It overlays below showing a list: each product has a unique icon (bank/coins/forklift/chart), product name in teal, and LAI number in grey. The selected item (Business Account) has a checkmark. Products: Business Account, Business Overdraft, Equipment Line, Asset Finance.
Now I have the full context. I also see the account icons (BTAIcon, BusinessOverdraftIcon, EquipmentIcon, AssetFinanceIcon). Let me check the BTAIcon:
Good. Now I have everything I need. The plan:
AccountCardV2 with a compact product card: just icon + title (teal) + subtitle (grey BSB/Acc) + down-chevron. No balances, no actions bar. Compact, left-aligned (~60% width).I'll build this as a new ProductSwitcherCard component directly in the statements-view, replacing the AccountCardV2 usage entirely.
Now replace the entire render section -- remove AccountCardV2 usage, add the compact card with product dropdown, fix the filter bar (no labels), move it above the table, and add "Statement period" column header:
Now I'll replace everything from if (!selectedProduct) to the end with the new compact card and restructured layout:
Now remove the unused formatCurrency import since we no longer show balances:
Good -- the import was already removed by autofix, and only my comment remains. Let me clean that up:
The account card has been replaced with a compact product card matching the screenshots: icon + teal product name + BSB/Acc subtitle + teal down-chevron. Clicking it opens a dropdown listing all products, each with its unique icon (BTA, Overdraft, Equipment, Asset Finance), teal name, and account/LAI number, with a checkmark on the selected item. The filter dropdowns are now label-less and placed above the table as standalone controls, and the table has a "Statement period" column header row.