B D T Calculator - Copy this React, Tailwind Component to your project
###-Complete-Prompt-for-the-**BDT-Taka-Calculator-Web-Application**-----###-**Overview:**-Develop-a-**BDT-Taka-Calculator**-web-application-with-the-following-features-and-functionalities-for-managing-cash-transactions,-dynamic-calculations,-and-additional-tools-like-an-age-calculator.-----###-**Core-Features:**-####-**1.-Note-Input-and-Calculation:**---**Note-Denominations:**-Include-fields-for-Bangladeshi-note-values-(1000,-500,-200,-100,-50,-20,-and-10-BDT).---**Real-Time-Subtotals:**---Display-the-**subtotal-amount**-dynamically-beside-each-input-field.---Example:-Inputting-`5`-in-the-**1000-BDT-note-field**-should-display-**5000**-next-to-it.-####-**2.-Total-Amount-Calculation:**---Automatically-calculate-and-display:---**Total-Amount:**-Sum-of-all-subtotals-from-note-denominations.---**Necessary/Returnable-Amount:**-Based-on-input-in-the-**Total-Bill-Field**:---If-the-total-amount-exceeds-the-total-bill,-display-the-**returnable-amount**.---If-the-total-amount-is-insufficient,-display-the-**necessary-amount**.-####-**3.-Monthly-Total-Tracking:**---Add-a-**Monthly-Total-Amount**-section-to-track-the-cumulative-total-of-all-transactions-for-the-current-month.---Display-this-prominently-at-the-top-or-bottom-of-the-page.-####-**4.-Default-Blank-Fields:**---All-note-quantity-input-fields-should-be-**blank-by-default**-(no-pre-filled-`0`-value).-####-**5.-Expandable-Transaction-History:**---**Hidden-by-default**-and-expandable-via-a-button.---Save-transactions-(note-quantities,-total-amount,-bill,-returnable/necessary-amount,-timestamp)-to-**localStorage**.---Allow-users-to-toggle-(expand/collapse)-the-transaction-history-section.-----###-**User-Experience-Enhancements:**-####-**Keyboard-Shortcuts:**---`Enter`:-Move-to-the-next-input-field.---`Ctrl+Enter`:-Save-the-transaction.---**Escape-(Esc):**---Reset-the-entire-form-(clear-all-fields-and-reset-totals).---Automatically-focus-on-the-**1000-BDT-note**-input-field.---**F4:**-Jump-to-the-**Total-Bill-Input-Field**.---**Ctrl+\\-(Backslash):**-Open-the-**Age-Calculator**.-----###-**Additional-Features:**-####-**Age-Calculator-Tool:**---Add-an-**Age-Calculator-Button**-on-the-right-side-of-the-page.---Shortcut:-**Ctrl+\\-(Backslash)**.---On-activation:---Display-the-**Age-Calculator-Section**-as-a-modal-or-inline-widget.---Automatically-focus-on-the-**Date-of-Birth-Input-Field**.---Functionality:---Input-a-date-of-birth.---Calculate-and-display-the-**exact-age**-in-**years,-months,-and-days**.-----###-**Design-Requirements:**-####-**Front-End-Design:**---Use-**HTML**-and-**Tailwind-CSS**-for-layout-and-styling.---Divide-the-page-into-distinct-sections:-1.-**Input-Section:**---User-details-(e.g.,-name),-**Total-Bill-Field**,-and-note-denominations-with-subtotals.-2.-**Summary-Section:**---Display-Total-Amount,-Necessary/Returnable-Amount,-and-Monthly-Total-Amount.-3.-**Expandable-Transaction-History-Section:**-Initially-hidden-with-a-smooth-toggle-animation.-4.-**Age-Calculator-Section:**-Hidden-until-activated.-####-**Styling-and-Accessibility:**---Use-color-codes-for-amounts:---**Red**-for-insufficient-funds.---**Green**-for-excess-funds.---Ensure-all-fields-are-intuitive-and-properly-labeled.-----###-**Development-Requirements:**-####-**Logic-Implementation:**---Use-**JavaScript**-to-handle:-1.-**Subtotal-Calculations:**---Dynamically-calculate-and-display-subtotals-next-to-each-note-field.-2.-**Total-and-Necessary/Returnable-Calculations:**---Compute-total-amounts-and-compare-them-to-the-total-bill-for-returnable/necessary-amounts.-3.-**Monthly-Total-Tracking:**---Track-and-display-the-cumulative-transaction-total-for-the-current-month.-4.-**Transaction-Management:**---Save-transactions-to-localStorage.---Retrieve-and-display-transaction-history-on-user-demand.-5.-**Age-Calculation-Logic:**---Parse-the-input-date-of-birth.---Compute-the-exact-age-(years,-months,-days).-####-**Functional-Shortcuts:**---Implement-keyboard-shortcuts-for-seamless-navigation-and-usability.-####-**Reset-and-Focus:**---Resetting-with-`Escape`-should:---Clear-all-fields.---Focus-on-the-**1000-BDT-Note-Field**.-####-**Error-Handling:**---Validate-all-input-fields-for-proper-values-(e.g.,-no-negative-or-invalid-numbers).-----###-**Expected-Outcome:**-A-**BDT-Taka-Calculator**-application-with-user-friendly-features-for-cash-management,-expandable-transaction-history,-monthly-tracking,-and-an-integrated-age-calculator,-enhanced-with-dynamic-calculations-and-keyboard-shortcuts.
