Billing Page - Copy this React, Tailwind Component to your project

Create-The-Billing-and-Payments-page-for-POS-system,-especially-in-a-bar/lounge-setting,-as-it-handles-customer-transactions.-This-page-should-allow-you-to-process-payments,-apply-discounts,-manage-different-payment-methods,-and-provide-a-summary-of-the-transaction.-Here's-a-breakdown-of-what-to-show-and-what-functionalities-to-include:-What-to-Show-on-the-Billing-and-Payments-Page-1.-Order-Summary-•-Items-List:-A-table-or-list-showing-all-the-items-ordered,-including:-o-Item-Name-o-Quantity-o-Unit-Price-o-Total-Price-for-each-item-•-Subtotal:-The-total-amount-before-taxes,-discounts,-and-tips.-•-Taxes:-Display-applicable-taxes-(e.g.,-sales-tax).-•-Discounts:-Show-any-discounts-applied-(e.g.,-percentage-or-fixed-amount).-•-Tips:-Option-for-the-customer-to-add-a-tip-(can-be-a-fixed-amount-or-percentage-of-the-subtotal).-•-Total-Amount:-The-final-amount-after-all-calculations-(subtotal-+-tax-+-discount-+-tip).-2.-Payment-Methods-•-Multiple-Payment-Options:-o-Cash:-Option-to-enter-the-amount-tendered-and-calculate-change.-o-Credit/Debit-Card:-Option-to-process-card-payments-(integration-with-a-payment-gateway).-o-Mobile-Payments:-Support-for-services-like-Apple-Pay,-Google-Pay,-etc.-o-Voucher/Gift-Card:-Option-to-apply-a-gift-card-or-discount-voucher.-•-Partial-Payments:-Allow-for-partial-payments-(e.g.,-splitting-the-bill-between-multiple-customers).-3.-Payment-Status-•-Paid/Unpaid-Status:-Clearly-indicate-whether-the-bill-has-been-paid-or-is-still-pending.-•-Payment-History:-Show-previous-payments-made,-including-amounts-and-methods-used-(for-customers-paying-in-installments-or-partial-payments).-•-Balance-Due:-If-there’s-a-balance-remaining-after-partial-payments,-show-the-remaining-amount-due.-4.-Receipt/Invoice-Generation-•-Print-Receipt:-Button-to-print-a-receipt-for-the-customer.-•-Email-Receipt:-Option-to-send-an-electronic-receipt-to-the-customer’s-email.-•-Receipt-Summary:-Display-a-compact-version-of-the-transaction,-including:-o-Items-ordered-o-Taxes,-discounts,-and-tips-o-Payment-method-o-Total-amount-5.-Tip-Suggestions-(Optional)-•-Suggested-Tip-Amounts:-Provide-options-like-10%,-15%,-and-20%-tips-based-on-the-subtotal-or-total-bill-for-customer-convenience.-What-You-Can-Do-on-the-Billing-and-Payments-Page-1.-Add/Remove-Items-•-Add-Items-to-the-Bill:-Allow-the-user-to-add-more-items-to-the-bill-if-requested-by-the-customer.-•-Remove-Items:-Allow-the-user-to-remove-any-mistakenly-added-items-or-items-that-the-customer-no-longer-wants.-2.-Apply-Discounts-•-Discount-Types:-o-Percentage-Discount:-Apply-a-percentage-discount-(e.g.,-10%-off).-o-Fixed-Amount-Discount:-Apply-a-fixed-dollar-discount-(e.g.,-$5-off).-o-Coupon/Voucher:-Redeem-a-coupon-code-or-apply-a-voucher.-•-Special-Discounts:-Apply-special-discounts-based-on-rules-(e.g.,-happy-hour,-loyalty-programs).-3.-Calculate-and-Add-Tips-•-Add-Tip:-Allow-customers-to-add-a-tip-(fixed-amount-or-percentage).-•-Auto-Suggest-Tips:-Offer-suggested-tip-amounts-(e.g.,-10%,-15%,-20%)-based-on-the-subtotal.-4.-Process-Payments-•-Cash-Payment:-Allow-users-to-enter-the-amount-of-cash-given-by-the-customer-and-calculate-the-change.-•-Card-Payment:-Integrate-a-payment-gateway-(e.g.,-Stripe,-Square)-to-process-card-payments.-•-Mobile-Payment:-If-integrated,-allow-customers-to-pay-using-mobile-wallets-like-Apple-Pay-or-Google-Pay.-•-Gift-Card/Voucher:-Allow-customers-to-redeem-gift-cards-or-discount-vouchers.-5.-Issue-Receipts-•-Print-Receipt:-Allow-the-cashier-to-print-a-detailed-receipt-for-the-customer.-•-Email-Receipt:-Provide-an-option-to-email-the-receipt-to-the-customer.-•-Save-Transaction:-Option-to-save-the-transaction-for-future-reference-or-reporting-purposes.-6.-Manage-Split-Bills-•-Split-Payments:-Allow-multiple-customers-to-pay-for-different-portions-of-the-bill-(e.g.,-split-equally,-by-items,-or-custom-amounts).-•-Multiple-Payment-Methods:-Allow-using-multiple-payment-methods-(e.g.,-one-customer-pays-via-card,-another-pays-via-cash).-7.-Refunds/Voids-(Admin-Access)-•-Void-Transaction:-Allow-canceling-a-transaction-if-it-was-a-mistake-or-the-customer-changes-their-mind.-•-Refund:-Issue-a-refund-for-a-completed-transaction-(e.g.,-if-a-customer-returns-an-item).-•-Refund-History:-Keep-track-of-all-refunds-made,-including-the-amount,-date,-and-reason.-Design-Considerations-•-Intuitive-Layout:-Ensure-that-the-payment-options,-order-summary,-and-total-amount-are-clear-and-easily-accessible.-•-Large-Buttons:-Make-payment-buttons-large-and-easy-to-tap,-especially-for-touch-based-systems.-•-Clear-Indications:-Use-visual-indicators-to-clearly-show-whether-a-bill-is-paid-or-unpaid-and-which-payment-methods-have-been-used.-•-Responsive:-Ensure-the-layout-adapts-well-for-both-desktop-and-mobile-interfaces.-Example-Layout-•-Top-Section:-Order-summary,-subtotal,-taxes,-discounts,-and-total.-•-Middle-Section:-Payment-methods-with-options-to-select-cash,-card,-mobile,-or-voucher.-•-Bottom-Section:-Tip-options,-partial-payment-buttons,-and-receipt-options.