Feat/frontend UI improvements

[godekina]

Frontend UI Improvements - Multiple Issues

Overview

This PR addresses four frontend UI/UX issues to improve user experience, accessibility, and form validation feedback.

Closes #368
Closes #357
Closes #360
Closes #358

Issues Resolved

#111: Add Success Feedback for CSV Upload

• Implementation: Added toast notification with success summary after CSV upload
• Details: Shows count of valid rows and any rows with errors
• Files: CSVUploader.tsx

#105: Standardize Modal Close Behaviors

• Implementation: Ensured all modals support ESC key and backdrop click to close
• Details:
  • FeeEstimationConfirmModal: Added proper backdrop click handler
  • UpgradeConfirmModal: Added ESC key support
  • EmployeeRemovalConfirmModal: Already had both features
• Files: FeeEstimationConfirmModal.tsx, UpgradeConfirmModal.tsx

#106: Improve Form Validation Feedback

• Implementation: Created reusable FormField component with validation feedback
• Details:
  • Red border on invalid fields
  • Error messages displayed below inputs
  • Accessibility support (aria-invalid, aria-describedby)
  • Applied to EmployeeEntry and PayrollScheduler forms
• Files: FormField.tsx, EmployeeEntry.tsx, PayrollScheduler.tsx

#107: Add Slide-in Animations for Dashboard Cards

• Implementation: Added Framer Motion animations to PayrollAnalytics dashboard
• Details: Staggered slide-in animations on page load with smooth easing
• Files: PayrollAnalytics.tsx

Testing

• All components pass ESLint checks
• No TypeScript errors
• Responsive design maintained
• Accessibility features preserved

Accessibility

• ARIA labels and descriptions for form fields
• Keyboard navigation support (ESC key for modals)
• Color contrast compliance maintained
• Screen reader friendly error messages

[drips-wave]

@godekina Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits