Container Purchase Modify Form - Copy this React, Tailwind Component to your project
***Create Container Purchase Form Component name: ContainerPurchaseModifyForm Input: { initData, mode } + initData: { invoice: { id: number/null, invoiceNo: string, seller: string, paymentMethod: 'JPY' | 'USD', exchangeRate: number, paid: boolean, paidOnDate: string (format: 'YYYY MM DD'), createdOn: string (format: 'YYYY MM DD'), }, containers: [ { id: number/null, containerNo: string, releaseNo: string, type: string, size: string, unitPrice: number, bikou: string, owner: string (temporary/SOC/COC...), storage_at_id: number/null, storage_at_name: string/null, storage_at_address: string/null, } ] } + mode: 'create_new' | 'edit' *** ***Display fields/inputs Invoice infomation: + Created Date: not editable + Invoice No: + Container Seller + Created Date Buttons: + Add container (one more container): Add 1 record to containers list + Add containers (multiple containers): Display a modal to input type, size, unit price, owner, bikou, storage at, qty of containers to add. Container list: + ID: not editable + Container No/Release No: Input type=text + Type/Size: Select + Unit Price: Input type=number + Owner: Not editable + Bikou: Input type=text + Storage At (name, address): Select Payment method: Select (USD, JPY), default value = JPY Payment infomation (when payment method = JPY): + Payment total amount in JPY: Input type=number. Not editable, auto calculate = sum of container unit price. + Bank account: Select Payment infomation (when payment method = USD): + Exchange rate: Input type=number. + Payment total amount in USD: Input type=number. Not editable, auto calculate = sum of container unit price. + Bank account: Select Paid: Checkbox Paid on date: Input type=date (format: 'YYYY MM DD'). Disable when Paid = false. Default value = today (if Paid = true) Save button: Save data to database Delete button: Delete data from database ***Styles: Spacing: use p 4, m 4, space x 4, space y 4, gap 4 for spacing between elements.
