Bug #3321
Enhance Charger and Session Tabs UI in CMS
Description
Enhance the UI of the Charger and Session tabs in CMS to improve the layout, visual consistency, and overall user experience.
Added by Mritunjay Kumar about 14 hours ago. Updated about 9 hours ago.
Description
Enhance the UI of the Charger and Session tabs in CMS to improve the layout, visual consistency, and overall user experience.
Today,I integrated and refined the modern UI theme experience for the Partnership Management module (/partnership-management) ensuring full parity with the design system demonstrated in the reference charging station management module while strictly preserving all existing business logic, dynamic APIs, and form validation.
First, enabled modern view support for partnerships through the central UI feature flag system, seamlessly bridging the existing table with PartnershipListModernView and connecting the global new experience switch. For the Create and Edit Partnership drawer, integrated ModernPanelShell and ModernPanelHeader to render a modern side panel when the new theme is active, while maintaining the original dialog for the classic theme. Within this form, I standardized field heights across basic information and partner cards to a uniform 56px, eliminated outline notch border clipping by applying background surface masks to input labels, refined the multiline presentation of the Revenue Type dropdown to prevent bottom font clipping, and restored the default Company Partner field to its appropriate disabled/placeholder appearance (muted grey text, neutral icon, and a subtle background tint) so it clearly indicates a read-only default value rather than an interactive selector.
Second, extended the modern theme overhaul to the Add New Partner modal. It was upgraded to utilize ModernPanelShell and ModernPanelHeader, allowing it to slide in as an integrated modern panel with branded icon headers when the new theme is toggled on, while safely preserving the original centered dialog in the old theme. All six internal section cards—Basic Information, Contact Information, Business Details, Account Credentials, Address Information, and Banking Information—were redesigned with theme-branded icon tiles, consistent border radiuses, and surface styling, removing outdated hardcoded multicolored avatars.
Contact Details: Combined Contact Person Name and Website side-by-side into a single row.
Address Information: Reorganized the five address inputs into a clean two-column grid consisting of Row 1 with two boxes (Business Address and City), Row 2 with two boxes (Country and State), and Row 3 with one box (Postal Code) styled at matching half-width rather than spanning the full width.
Banking Information: Balanced the fields so that all three rows consistently display two boxes each (Row 1: Preferred Payment Method and Bank Name; Row 2: Bank Account Number and Bank Routing Number / IFSC; Row 3: Account Holder Name and Bank Branch).