training

Worked on the Credit/Debit Notes module, including the 80% right-side drawer form, field restructuring, DatePicker, styling, and branding updates.
Integrated dynamic Vendor, Customer, Employee, and Ledger pickers using the respective APIs with searchable autocomplete.
Created and integrated the creditDebitNoteApi.ts service with list, create, details, and cancel voucher endpoints, along with 403 permission handling.
Added the Credit/Debit Notes page, routing, sidebar menu, and local data persistence for smoother UI behavior.
Also added the required translations and worked on improving multilingual support across the module.
Tested the implemented functionality and continued learning React concepts while debugging and understanding the project structure.
Some Credit/Debit Notes functionality and testing are still remaining and will be completed in the next phase.
CREATE FULL PAGE UI with drawer of add debit credit note in ui

focused on the complete end-to-end integration of the Credit & Debit Note module, covering 5 major Swagger APIs including note creation, cancellation, document fetching, S3 pre-signed URL generation, and document deletion. On the UI front, I standardized the outer blue card border, inner input field borders (slate-grey normal, black on hover/focus), applied dynamic tenant primary colors to table headers and note numbers, and eliminated background mismatches in the Add Note drawer. I fixed the form auto-reset issue so that old data clears automatically when the drawer reopens. For document management, I added a fully functional attached documents table inside the detail drawer with clickable S3 download links and an upload button that triggers instant live refresh. User safety was enhanced with a confirmation modal for document deletion and strict error handling for backend file size limit errors (400 Bad Request) with proper red toast notifications. Additionally, I resolved the tenant users picker data mapping issue to correctly display employee lists, removed the redundant refresh icon button from the table header, and adjusted spacing in the detail drawer header to prevent visual overlapping between the status chip and close icon.

focused on decoupling table action handlers and improving user experience in the Credit & Debit Note Module. The eye icon now exclusively opens the detail drawer for viewing complete note details, while the cross icon directly triggers a standalone cancellation confirmation dialog instead of navigating through the detail view. Upon user confirmation, the system executes the cancellation API, displays a success toast notification, and automatically refreshes the main table for immediate feedback. Additionally, resolved header visual overlap issues by removing redundant icons and adding proper flex spacing across the drawer header. Fixed TypeScript compilation errors by restoring missing modal state variables in the main page component. Testing validated that cancellation flow works correctly, table refreshes after API calls, and header spacing renders properly across all screen resolutions.Also did testing of credit/debit note page
I have been actively enhancing my React skills, focusing on custom hooks, component composition, and TypeScript integration to better contribute to the codebase.