Bug #2880
Fix UI Bugs and Styling Issues, Filters Section Boxes
Added by Shreya Agarwal about 2 months ago. Updated about 1 month ago.
Description
1. Filters Section Boxes
Updated by Shreya Agarwal about 1 month ago
Today completed the UI enhancement changes for both the Charging Error Report page and the Dashboard page, specifically focusing on the session details modal (eye button) that appears when viewing error details.
Charging Error Report Page:
Removed the "Charger" column from the session details modal (eye button popup)
Removed the "Error Code" column from the session details modal
Updated the error message display to show in red color for better visibility and emphasis
Dashboard Page - Station Charging Error Drawer:
Removed the "Charger" column from the session details dialog that opens when clicking the eye button in the "Top Stations by Failed Sessions" widget
Removed the "Error Code" column from the same session details dialog
Updated the error message to display in red color
-also Studied .NET Core Service Layer fundamentals - validation, dependency injection , try to learning more about Service Layer patterns
-also worked on enhancing the expense module with several fixes:
1. Future Date Restriction:
Added date validation to prevent users from selecting future dates in both the New Transaction and New Transfer dialogs. This ensures expense entries are always recorded with current or past dates, maintaining accurate financial records.
2. New Summary Cards:
Added two new cards to the Transactions page - "Total Received" and "Total Transfer" - to provide better visibility into received amounts and transfer transactions. The cards have been properly aligned and styled to maintain consistent UI across all summary cards.
3. Card Layout Optimization:
Adjusted the summary cards layout to display 7 cards in a single row on large screens with consistent sizing and proper alignment. Card titles were shortened for better readability.
Updated by Piyush Vijay about 1 month ago
- Subject changed from Fix UI Bugs and Styling Issues to Fix UI Bugs and Styling Issues, Filters Section Boxes
- Description updated (diff)
Updated by Shreya Agarwal about 1 month ago
standardized the DatePicker components across multiple pages to match the existing filter UI design. Applied consistent styling with borderRadius: 3, height: 56, and proper fieldset overrides to the EmployeeExpenseClaimsPage, EmployeeAdvancesPage, Pending Approvals pages.
EmployeeExpenseClaimsPage – From Date and To Date now have consistent styling with other filters
EmployeeAdvancesPage – Both DatePickers now match the design system
EmployeeExpenseApprovalsPage – Date filters now have uniform appearance
also learning .NET Core Service Layer architecture - understood how business logic is separated from controllers and repositories
Updated by Shreya Agarwal about 1 month ago
Active Sessions Tab - Select Fields: applied borderRadius: 3 styling to all Select components (Station, Location, Chargers) by adding '& .MuiOutlinedInput-root': { borderRadius: 3, '& fieldset': { borderRadius: 3 } } to the FormControl level, ensuring rounded corners without affecting field sizes or positions.
Search TextField & DatePickers: Verified and confirmed that the Search field and both From/To DatePickers already have the correct borderRadius: 3 styling applied through their sx props, matching the reference design exactly.
Charger Tag Filter Select: Applied the same FormControl-level borderRadius styling to the Charger tag dropdown, completing all filter fields on the Active Sessions tab but boxes radius still pending and working in progress
also implemented date-time display formatting across both expense pages. In the Pending Approvals page (EmployeeExpenseApprovalsPage), I updated the Date column to show both date and time using formatDateWithTimezone + formatTimeWithTimezone pattern, replacing the previous inline date-fns format. Similarly, in the Transactions page (EmployeeExpenseClaimsPage), I replaced fmtDate with the same date-time formatting for the "Trans Date" column. Both changes now display dates like 28 Jul 2026 10:10 (24-hour format) matching the existing project pattern used in ActiveSessions component, without affecting any other functionality like filters, sorting, or pagination. All API data remains unchanged and the UI now shows complete timestamp information as available in the API response.
Updated by Yashaditya Singh about 1 month ago
Today, I enhanced the Archived Log Files module by replacing the existing date inputs with MUI DatePicker components to match the UI and behavior of the other logging reports. I updated the state management and API date formatting to support the new date filters and implemented the report-style Apply/Reset functionality, ensuring data loads only after applying filters. I also resolved TypeScript issues introduced during the changes, validated the updated functionality, and improved UI consistency by aligning the action icon styling with the other logging report pages.
Updated by Shreya Agarwal about 1 month ago
-worked on standardizing the filter box styling across the Session Management page to match the Session Details Report design.
applied borderRadius: 3 (rounded corners) to all filter fields including Select dropdowns, TextFields, and DatePickers across All tabs. The styling was applied at the FormControl level for Select components and through sx props for TextFields and DatePickers.
-also enhanced both the Employee Advance Detail Panel and the Expense Transaction Detail Panel to display additional accounting information from the API response. For both panels, I added two new sections: a "Transferred by" and "Voucher No" section showing who created the transaction and the associated voucher number, and a "Ledger Entries" table displaying the complete accounting entries with Debit and Credit columns including totals. To enable this, I updated the respective mapper functions (normalizeEmployeeAdvance and normalizeEmployeeExpenseClaim) to include the new fields (createdByName, accountingVoucherNo, accountingVoucherId, and postedVoucher) so that data flows correctly from the API to the UI
-also implementation of searchable filter dropdowns across all session management tabs . I replaced all Select components with Autocomplete for Station, Location, and Chargers filters, adding real-time search capability while maintaining multi-select with checkboxes and preserving all existing functionality, state management, and API integrations. I converted the single-select Station dropdown to a searchable Autocomplete. This enhancement significantly improves admin user experience by eliminating scroll fatigue and enabling quick filter selection through search. No functionality or logic was changed.
Updated by Shreya Agarwal about 1 month ago
learning and understanding react and .net for better understanding
also completed the UI updates for the OCPI Logs Report page.
Removed the Role and HTTP Status columns from the main log table, as requested.
Updated the Endpoint column to display the full URL without truncation, while keeping the hover tooltip that shows the complete URL for convenience.
Adjusted the table’s column count and placeholder colSpan values accordingly to maintain correct layout.
All changes are now in place, and the page remains fully functional with filtering, pagination, and the rerun dialog intact.