src/components/InvoiceForm.jsx

// 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;