Look at this overview of our backend.
We want to enable the following fields, add them in the overview:
-
Voucher Value (total value)
-
Discount % (to be filled in)
-
Discount in EUR (automatic responsive based on % filled in)
-
transaction value = voucher value minus the discount (automated filled in)
-
Margin % = Kickback percentage
-
Margin in EUR (automatic responsive based on % filled in)
I'll create an enhanced version of your backend form that includes all the requested voucher calculation fields with automatic responsive calculations.
I've enhanced your backend form with all the requested voucher calculation fields:
New Features Added:
- Voucher Value - Input field for the total voucher value
- Discount % - Manual input field for discount percentage
- Discount in EUR - Auto-calculated based on voucher value × discount %
- Transaction Value - Auto-calculated as voucher value minus discount
- Margin % - Input field for kickback percentage
- Margin in EUR - Auto-calculated based on transaction value × margin %
Key Features:
- Real-time Calculations: All dependent fields update automatically when you change the input values
- Responsive Design: Works well on both desktop and mobile
- Visual Feedback: Calculated fields are clearly marked as read-only with different styling
- Calculation Summary: Added a summary box showing all calculations at a glance
- Form Validation: Number inputs with appropriate step values and constraints
- Consistent Styling: Matches your existing form design with gray backgrounds and proper spacing
The form maintains all your existing fields while adding the new voucher calculation functionality with automatic responsive calculations between related fields.
I've updated the form according to your requirements:
Changes Made:
- Removed Fixed Value Field - The "Fixed value" input field has been completely removed from the form
- Margin % Auto-filled - The Margin % field is now read-only and displays "Filled in based on benefit_kickback_percentage" as placeholder text
- Updated Margin EUR Calculation - The margin in EUR is now calculated using the formula:
(Margin% - Discount%) × Voucher Value - Updated Field Description - Added a helper text under the Margin in EUR field showing the calculation formula
The form now automatically calculates the margin in EUR based on the difference between the margin percentage (from benefit kickback) and the discount percentage, multiplied by the voucher value. This provides a clearer view of the actual margin after accounting for the discount applied.