Add Rent Calculation Summary Card with Reset Functionality #693
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes: #692
Description
This PR introduces a summary card that displays the breakdown of rent calculations, including base rent, power bill, water bill, and other fees. Additionally, a Reset button has been implemented, which:
Appears after the total rent is calculated.
Clears all input fields and hides the summary card when clicked.
Key Features:
✅ Displays a detailed rent summary after calculation.
rent_calculate.1.mp4
✅ Formats amounts in currency (USD) using Intl.NumberFormat for better readability.
✅ Adds a Reset button to clear inputs and hide the summary.
✅ Ensures a smooth user experience by resetting the state properly.
Testing & Verification
Enter values in the form fields and click Calculate Total Rent → The summary card appears with formatted values.
Click Reset → Inputs clear and the summary card disappears.