Spaces:
Running
Running
File size: 4,234 Bytes
4fb0c68 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
// src/components/InvoiceForm.jsx
import React, { useState } from 'react';
function InvoiceForm ({ onSubmit }) {
const [invoiceData, setInvoiceData] = useState({
invoiceNumber: '',
invoiceDate: '',
vendorNumber: '',
vendorName: '',
poNumber: '',
poDate: '',
grDate: '',
amount: '',
currency: 'USD',
paymentTerms: '',
taxAmount: '',
taxCode: '',
description: '',
costCenter: '',
glAccount: '',
lineItems: [
{
itemNumber: '',
description: '',
quantity: '',
unitPrice: '',
totalPrice: ''
}
]
});
const handleChange = (e) => {
const { name, value } = e.target;
setInvoiceData({
...invoiceData,
[name]: value
});
};
const handleLineItemChange = (index, e) => {
const { name, value } = e.target;
const newLineItems = [...invoiceData.lineItems];
newLineItems[index][name] = value;
setInvoiceData({
...invoiceData,
lineItems: newLineItems
});
};
const addLineItem = () => {
setInvoiceData({
...invoiceData,
lineItems: [
...invoiceData.lineItems,
{ itemNumber: '', description: '', quantity: '', unitPrice: '', totalPrice: '' }
]
});
};
const handleSubmit = (e) => {
e.preventDefault();
onSubmit(invoiceData);
};
return (
<form onSubmit={handleSubmit}>
<h2 className="text-xl font-semibold text-gray-700 mb-4">Enter Invoice Data</h2>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Invoice Number</label>
<input
type="text"
name="invoiceNumber"
value={invoiceData.invoiceNumber}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
</div>
{/* Add more fields here following the same pattern */}
{/* Vendor Information */}
{/* Purchase Order Information */}
{/* Goods Receipt Date, Amount, etc. */}
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Line Items</label>
{invoiceData.lineItems.map((item, index) => (
<div key={index} className="mb-2">
<label className="block text-gray-700 text-sm font-bold mb-2">Item {index + 1}</label>
<input
type="text"
name="description"
value={item.description}
onChange={(e) => handleLineItemChange(index, e)}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
placeholder="Description"
/>
<input
type="text"
name="quantity"
value={item.quantity}
onChange={(e) => handleLineItemChange(index, e)}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
placeholder="Quantity"
/>
<input
type="text"
name="unitPrice"
value={item.unitPrice}
onChange={(e) => handleLineItemChange(index, e)}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
placeholder="Unit Price"
/>
<input
type="text"
name="totalPrice"
value={item.totalPrice}
onChange={(e) => handleLineItemChange(index, e)}
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
placeholder="Total Price"
/>
</div>
))}
<button type="button" onClick={addLineItem} className="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
Add Line Item
</button>
</div>
<button type="submit" className="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition duration-200">
Submit Invoice
</button>
</form>
);
};
export default InvoiceForm;
|