InvoiceForm.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import './InvoiceForm.css';
import { apiFetch } from '../lib/api';
import { notifySuccess, notifyError, notifyWarning } from '../utils/notifications';
 
export default function InvoiceForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [selectedTenantId, setSelectedTenantId] = useState('');
  const [items, setItems] = useState([]);
  const [products, setProducts] = useState([]);
  const [customerId, setCustomerId] = useState('');
  const [customerSearch, setCustomerSearch] = useState('');
  const [customers, setCustomers] = useState([]);
  const [currency, setCurrency] = useState('AUD');
  const [issuedDate, setIssuedDate] = useState('');
  const [dueDate, setDueDate] = useState('');
  const [description, setDescription] = useState('');
  const [loading, setLoading] = useState(false);
  const [loadingProducts, setLoadingProducts] = useState(true);
  const [taxRate, setTaxRate] = useState(10); // Default GST rate for Australia
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [companyInfo, setCompanyInfo] = useState({
    name: '',
    abn: '',
    address: '',
    phone: '',
    email: ''
  });
 
  useEffect(() => { fetchProducts(); fetchTaxRate(); fetchCompanyInfo(); }, [selectedTenantId]);
  useEffect(() => { if (id) fetchInvoice(); }, [id, selectedTenantId]);
 
  const getTenantHeaders = async (baseHeaders = {}) => {
    const headers = { ...baseHeaders };
    if (selectedTenantId) {
      const token = localStorage.getItem('token');
      const tenantRes = await apiFetch('/tenants', {
        headers: {
          'Authorization': `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        }
      });
      if (tenantRes.ok) {
        const data = await tenantRes.json();
        const tenants = Array.isArray(data) ? data : (data.tenants || []);
        const tenant = tenants.find(t => t.tenant_id === parseInt(selectedTenantId));
        if (tenant) {
          headers['X-Tenant-Subdomain'] = tenant.subdomain;
        }
      }
    }
    return headers;
  };
 
  const fetchTaxRate = async () => {
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
      const res = await apiFetch('/settings/default_tax_rate', { headers });
      if (res.ok) {
        const data = await res.json();
        setTaxRate(parseFloat(data.setting_value) || 10);
      }
    } catch (err) {
      console.error('Failed to fetch tax rate:', err);
    }
  };
 
  const fetchCompanyInfo = async () => {
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
      const [settingsRes, abnRes, addressRes, phoneRes, emailRes] = await Promise.all([
        apiFetch('/settings', { headers }),
        apiFetch('/settings/company_abn', { headers }),
        apiFetch('/settings/company_address', { headers }),
        apiFetch('/settings/company_phone', { headers }),
        apiFetch('/settings/company_email', { headers })
      ]);
 
      const settings = await settingsRes.json();
      const abn = abnRes.ok ? await abnRes.json() : { setting_value: '' };
      const address = addressRes.ok ? await addressRes.json() : { setting_value: '' };
      const phone = phoneRes.ok ? await phoneRes.json() : { setting_value: '' };
      const email = emailRes.ok ? await emailRes.json() : { setting_value: '' };
 
      setCompanyInfo({
        name: settings?.general?.companyName || 'Your Company',
        abn: abn.setting_value || '',
        address: address.setting_value || '',
        phone: phone.setting_value || '',
        email: email.setting_value || ''
      });
    } catch (err) {
      console.error('Failed to fetch company info:', err);
    }
  };
 
  const fetchInvoice = async () => {
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
      const res = await apiFetch(`/invoices/${id}`, { headers });
      if (!res.ok) throw new Error('Failed to load invoice');
      const data = await res.json();
 
      // Auto-select the tenant if the invoice belongs to a different tenant
      if (data.tenant_id && !selectedTenantId) {
        setSelectedTenantId(String(data.tenant_id));
      }
 
      setCustomerId(data.customer_id || '');
      setCurrency(data.currency || 'USD');
      setIssuedDate(data.issued_date || '');
      setDueDate(data.due_date || '');
      setDescription(data.description || '');
      setItems((data.items || []).map(it => ({ product_id: it.product_id, description: it.description || '', quantity: Number(it.quantity), unit_price: Number(it.unit_price), total: Number(it.total), tax_amount: Number(it.tax_amount || 0), tax_rate: Number(it.tax_rate || taxRate) })));
 
      // Fetch customer details
      if (data.customer_id) {
        const custRes = await apiFetch(`/customers/${data.customer_id}`, { headers });
        if (custRes.ok) {
          const customer = await custRes.json();
          setSelectedCustomer(customer);
          setCustomerSearch(customer.name);
        }
      }
    } catch (err) { console.error(err); }
  };
 
  const fetchProducts = async () => {
    setLoadingProducts(true);
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
      const res = await apiFetch('/products?limit=100', { headers });
      if (!res.ok) throw new Error('Failed to load products');
      const data = await res.json();
      setProducts(data.products || []);
    } catch (err) { console.error(err); }
    finally { setLoadingProducts(false); }
  };
 
  const searchCustomers = async (query) => {
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({ Authorization: `Bearer ${token}` });
      const res = await apiFetch(`/customers?search=${encodeURIComponent(query)}&limit=10`,
        { headers }
      );
      if (!res.ok) throw new Error('Failed to search customers');
      const data = await res.json();
      setCustomers(data.customers || []);
    } catch (err) { console.error(err); }
  };
 
  useEffect(() => {
    if (customerSearch) {
      const timer = setTimeout(() => searchCustomers(customerSearch), 300);
      return () => clearTimeout(timer);
    } else {
      setCustomers([]);
    }
  }, [customerSearch]);
 
  const addItem = () => setItems(s => ([...s, {
    product_id: null,
    description: '',
    quantity: 1,
    unit_price: 0,
    total: 0,
    productSearch: '',
    showProducts: false,
    searchResults: []
  }]));
  const removeItem = (idx) => setItems(s => s.filter((_, i) => i !== idx));
 
  const searchProducts = async (search, idx) => {
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/products?search=${encodeURIComponent(search)}&limit=10`,
        { headers: { Authorization: `Bearer ${token}` } }
      );
      if (!res.ok) throw new Error('Product search failed');
      const data = await res.json();
      setItems(s => s.map((it, i) => i === idx ? { ...it, searchResults: data.products || [] } : it));
    } catch (err) {
      console.error('Search failed:', err);
    }
  };
 
  const updateItem = (idx, patch) => {
    setItems(s => s.map((it, i) => {
      if (i !== idx) return it;
      const updated = { ...it, ...patch };
      const qty = patch.quantity ?? it.quantity;
      const price = patch.unit_price ?? it.unit_price;
      const subtotal = Number((qty * price).toFixed(2));
      const taxAmount = Number((subtotal * (taxRate / 100)).toFixed(2));
      return {
        ...updated,
        total: subtotal,
        tax_amount: taxAmount,
        tax_rate: taxRate
      };
    }));
 
    // If productSearch changed, trigger search after a delay
    if (patch.productSearch !== undefined && patch.productSearch) {
      const timer = setTimeout(() => searchProducts(patch.productSearch, idx), 300);
      return () => clearTimeout(timer);
    }
  };
 
  const computeSubtotal = () => items.reduce((acc, it) => acc + Number(it.total || 0), 0);
  const computeTaxTotal = () => items.reduce((acc, it) => acc + Number(it.tax_amount || 0), 0);
  const computeTotal = () => (computeSubtotal() + computeTaxTotal()).toFixed(2);
 
  const handleSave = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const headers = await getTenantHeaders({
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      });
      const payload = {
        customer_id: customerId || null,
        currency,
        issued_date: issuedDate || null,
        due_date: dueDate || null,
        description,
        subtotal: computeSubtotal(),
        tax_total: computeTaxTotal(),
        total: parseFloat(computeTotal()),
        items: items.map(it => ({
          product_id: it.product_id,
          description: it.description,
          quantity: Number(it.quantity),
          unit_price: Number(it.unit_price),
          tax_rate: taxRate,
          tax_amount: it.tax_amount || 0
        }))
      };
      const url = id ? `/invoices/${id}` : '/invoices';
      const method = id ? 'PUT' : 'POST';
      const res = await apiFetch(url, { method, headers, body: JSON.stringify(payload) });
      if (!res.ok) {
        const txt = await res.text();
        const errorMsg = txt || 'Save failed';
        await notifyError(id ? 'Update Failed' : 'Create Failed', errorMsg);
        throw new Error(errorMsg);
      }
      const created = await res.json();
      // server returns either invoice or { invoice, warnings }
      const invoice = created.invoice || created;
      if (created.warnings && created.warnings.length) {
        await notifyWarning('Invoice Saved with Warnings', created.warnings.join('\n'));
      } else {
        await notifySuccess(id ? 'Invoice Updated' : 'Invoice Created', `Invoice #${invoice.invoice_id} has been ${id ? 'updated' : 'created'} successfully`);
      }
      navigate(`/invoices/${invoice.invoice_id}`);
    } catch (err) {
      // Error already notified above
    } finally { setLoading(false); }
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header"><h2>{id ? 'Edit Invoice' : 'New Invoice'}</h2></div>
 
 
 
        <div className="invoice-form-wrapper">
 
          {/* TAX INVOICE Header */}
          <div className="invoice-header">
            <h1>TAX INVOICE</h1>
            {id && <div className="invoice-number">Invoice #{String(id).padStart(5, '0')}</div>}
          </div>
 
          {/* Business and Customer Details - Side by Side */}
          <div className="invoice-details-grid">
 
            {/* From: Business Details */}
            <div className="invoice-from-section">
              <h3 className="invoice-section-title">From:</h3>
              <div className="invoice-company-name">{companyInfo.name}</div>
              {companyInfo.abn && (
                <div className="invoice-detail-line"><strong>ABN:</strong> {companyInfo.abn}</div>
              )}
              {companyInfo.address && <div className="invoice-detail-line">{companyInfo.address}</div>}
              {companyInfo.phone && <div className="invoice-detail-line">Phone: {companyInfo.phone}</div>}
              {companyInfo.email && <div className="invoice-detail-line">Email: {companyInfo.email}</div>}
              {(!companyInfo.abn || !companyInfo.address) && (
                <div className="invoice-warning">
                  ⚠️ Please configure company details in Settings
                </div>
              )}
            </div>
 
            {/* To: Customer Details */}
            <div className="invoice-to-section">
              <h3 className="invoice-section-title">Bill To:</h3>
 
              <div className="invoice-customer-search">
                <input
                  value={customerSearch}
                  onChange={e => setCustomerSearch(e.target.value)}
                  placeholder="Search customers..."
                />
                {customers.length > 0 && (
                  <div className="customer-dropdown">
                    {customers.map(c => (
                      <div
                        key={c.customer_id}
                        className="customer-dropdown-item"
                        onClick={() => {
                          setCustomerId(c.customer_id);
                          setSelectedCustomer(c);
                          setCustomerSearch(c.name);
                          setCustomers([]);
                        }}
                        onMouseDown={(e) => e.preventDefault()}
                      >
                        <div style={{ fontWeight: 'bold' }}>{c.name}</div>
                        <div style={{ fontSize: '0.9em', color: '#666' }}>{c.email || 'No email'}</div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
 
              {selectedCustomer && (
                <>
                  <div style={{ fontSize: '1.1em', fontWeight: 'bold', marginBottom: '8px' }}>{selectedCustomer.name}</div>
                  {selectedCustomer.abn && <div style={{ marginBottom: '4px' }}><strong>ABN:</strong> {selectedCustomer.abn}</div>}
                  {selectedCustomer.address && <div style={{ marginBottom: '4px' }}>{selectedCustomer.address}</div>}
                  {selectedCustomer.city && selectedCustomer.state && (
                    <div style={{ marginBottom: '4px' }}>{selectedCustomer.city}, {selectedCustomer.state} {selectedCustomer.postal_code}</div>
                  )}
                  {selectedCustomer.email && <div style={{ marginBottom: '4px' }}>Email: {selectedCustomer.email}</div>}
                  {selectedCustomer.phone && <div style={{ marginBottom: '4px' }}>Phone: {selectedCustomer.phone}</div>}
                </>
              )}
            </div>
          </div>
 
          {/* Invoice Details */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', marginBottom: '32px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
            <div className="form-group">
              <label style={{ fontWeight: 'bold', marginBottom: '4px', display: 'block' }}>Invoice Date</label>
              <input type="date" value={issuedDate} onChange={e => setIssuedDate(e.target.value)} style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }} />
            </div>
            <div className="form-group">
              <label style={{ fontWeight: 'bold', marginBottom: '4px', display: 'block' }}>Due Date</label>
              <input type="date" value={dueDate} onChange={e => setDueDate(e.target.value)} style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }} />
            </div>
            <div className="form-group">
              <label style={{ fontWeight: 'bold', marginBottom: '4px', display: 'block' }}>Currency</label>
              <select value={currency} onChange={e => setCurrency(e.target.value)} style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}>
                <option value="AUD">AUD</option>
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
                <option value="GBP">GBP</option>
              </select>
            </div>
            <div className="form-group">
              <label style={{ fontWeight: 'bold', marginBottom: '4px', display: 'block' }}>GST Rate</label>
              <input type="text" value={`${taxRate}%`} disabled style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px', backgroundColor: '#e9ecef' }} />
            </div>
          </div>
 
          <div className="form-group" style={{ marginBottom: '24px' }}>
            <label style={{ fontWeight: 'bold', marginBottom: '4px', display: 'block' }}>Description / Notes</label>
            <input value={description} onChange={e => setDescription(e.target.value)} placeholder="Add invoice description or notes..." style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }} />
          </div>
 
          {/* Line Items */}
          <div style={{ marginBottom: '24px' }}>
            <h3 style={{ marginBottom: '16px', fontSize: '1.2em', fontWeight: 'bold' }}>Line Items</h3>
            {loadingProducts ? <div>Loading products...</div> : (
              <div>
                <table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #ddd' }}>
                  <thead>
                    <tr style={{ backgroundColor: '#333', color: 'white' }}>
                      <th style={{ padding: '12px', textAlign: 'left', borderRight: '1px solid #555' }}>Product</th>
                      <th style={{ padding: '12px', textAlign: 'left', borderRight: '1px solid #555' }}>Description</th>
                      <th style={{ padding: '12px', textAlign: 'center', width: '100px', borderRight: '1px solid #555' }}>Qty</th>
                      <th style={{ padding: '12px', textAlign: 'right', width: '120px', borderRight: '1px solid #555' }}>Unit Price<br />(ex GST)</th>
                      <th style={{ padding: '12px', textAlign: 'right', width: '120px', borderRight: '1px solid #555' }}>Subtotal</th>
                      <th style={{ padding: '12px', textAlign: 'right', width: '100px', borderRight: '1px solid #555' }}>GST<br />({taxRate}%)</th>
                      <th style={{ padding: '12px', textAlign: 'center', width: '80px' }}>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {items.map((it, idx) => (
                      <tr key={idx} style={{ borderBottom: '1px solid #ddd', backgroundColor: idx % 2 === 0 ? '#fff' : '#f9f9f9' }}>
                        <td style={{ padding: '8px', borderRight: '1px solid #ddd' }}>
                          <div style={{ position: 'relative' }}>
                            <input
                              type="text"
                              value={it.productSearch || products.find(p => p.product_id === it.product_id)?.name || ''}
                              onChange={e => {
                                const search = e.target.value;
                                updateItem(idx, { ...it, productSearch: search, product_id: null });
                              }}
                              onFocus={() => updateItem(idx, { ...it, showProducts: true })}
                              onBlur={() => {
                                setTimeout(() => {
                                  updateItem(idx, { ...it, showProducts: false });
                                }, 200);
                              }}
                              placeholder="Search products..."
                              style={{ width: '100%', padding: '6px', border: '1px solid #ccc', borderRadius: '4px' }}
                            />
                            {it.showProducts && it.searchResults && it.searchResults.length > 0 && (
                              <div style={{
                                position: 'absolute',
                                top: '100%',
                                left: 0,
                                right: 0,
                                background: 'white',
                                border: '1px solid #ccc',
                                borderRadius: '4px',
                                zIndex: 1000,
                                maxHeight: '200px',
                                overflowY: 'auto',
                                boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
                              }}>
                                {it.searchResults.map(p => (
                                  <div
                                    key={p.product_id}
                                    style={{ padding: '8px', cursor: 'pointer', borderBottom: '1px solid #eee' }}
                                    onMouseDown={(e) => {
                                      e.preventDefault();
                                      updateItem(idx, {
                                        product_id: p.product_id,
                                        description: p.name,
                                        unit_price: Number(p.price_retail || p.price_ex_tax || 0),
                                        quantity: it.quantity || 1,
                                        productSearch: p.name,
                                        showProducts: false
                                      });
                                    }}
                                  >
                                    <div style={{ fontWeight: 'bold' }}>{p.name}</div>
                                    {p.supplier && <div style={{ fontSize: '0.8em', color: '#666' }}>{p.supplier}</div>}
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </td>
                        <td style={{ padding: '8px', borderRight: '1px solid #ddd' }}>
                          <input
                            value={it.description}
                            onChange={e => updateItem(idx, { description: e.target.value })}
                            style={{ width: '100%', padding: '6px', border: '1px solid #ccc', borderRadius: '4px' }}
                          />
                        </td>
                        <td style={{ padding: '8px', borderRight: '1px solid #ddd' }}>
                          <input
                            type="number"
                            value={it.quantity}
                            onChange={e => updateItem(idx, { quantity: Number(e.target.value) })}
                            style={{ width: '100%', padding: '6px', border: '1px solid #ccc', borderRadius: '4px', textAlign: 'center' }}
                          />
                        </td>
                        <td style={{ padding: '8px', borderRight: '1px solid #ddd' }}>
                          <input
                            type="number"
                            step="0.01"
                            value={it.unit_price}
                            onChange={e => updateItem(idx, { unit_price: Number(e.target.value) })}
                            style={{ width: '100%', padding: '6px', border: '1px solid #ccc', borderRadius: '4px', textAlign: 'right' }}
                          />
                        </td>
                        <td style={{ padding: '8px', textAlign: 'right', fontWeight: '500', borderRight: '1px solid #ddd' }}>
                          ${(it.total || 0).toFixed(2)}
                        </td>
                        <td style={{ padding: '8px', textAlign: 'right', fontWeight: '500', borderRight: '1px solid #ddd' }}>
                          ${(it.tax_amount || 0).toFixed(2)}
                        </td>
                        <td style={{ padding: '8px', textAlign: 'center' }}>
                          <button
                            className="btn"
                            onClick={() => removeItem(idx)}
                            type="button"
                            style={{ padding: '4px 8px', fontSize: '0.9em' }}
                          >
                            ✕
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
 
                <div style={{ marginTop: '12px' }}>
                  <button
                    className="btn primary"
                    onClick={addItem}
                    type="button"
                    style={{ padding: '8px 16px' }}
                  >
                    + Add Line Item
                  </button>
                </div>
              </div>
            )}
          </div>
 
          {/* Totals Summary */}
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '32px' }}>
            <div style={{ width: '400px', border: '2px solid #333', borderRadius: '4px', overflow: 'hidden' }}>
              <div style={{ padding: '12px 16px', borderBottom: '1px solid #ddd', display: 'flex', justifyContent: 'space-between', fontSize: '1.1em' }}>
                <span>Subtotal (ex GST):</span>
                <span style={{ fontWeight: 600 }}>${computeSubtotal().toFixed(2)}</span>
              </div>
              <div style={{ padding: '12px 16px', borderBottom: '2px solid #333', display: 'flex', justifyContent: 'space-between', fontSize: '1.1em' }}>
                <span>GST ({taxRate}%):</span>
                <span style={{ fontWeight: 600 }}>${computeTaxTotal().toFixed(2)}</span>
              </div>
              <div style={{ padding: '16px', backgroundColor: '#f5f5f5', display: 'flex', justifyContent: 'space-between', fontSize: '1.4em' }}>
                <span style={{ fontWeight: 700 }}>TOTAL (inc GST):</span>
                <span style={{ fontWeight: 700, color: '#2c5282' }}>{currency} ${computeTotal()}</span>
              </div>
            </div>
          </div>
 
          {/* Action Buttons */}
          <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', paddingTop: '24px', borderTop: '1px solid #ddd' }}>
            <button
              className="btn primary"
              onClick={handleSave}
              disabled={loading}
              style={{ padding: '12px 32px', fontSize: '1.1em', minWidth: '150px' }}
            >
              {loading ? 'Saving...' : (id ? 'Update Invoice' : 'Create Invoice')}
            </button>
            <button
              className="btn"
              onClick={() => navigate('/invoices')}
              style={{ padding: '12px 32px', fontSize: '1.1em', minWidth: '150px' }}
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    </MainLayout>
  );
}