InvoiceFormNew.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 '../styles/forms.css';
import { apiFetch } from '../lib/api';
import { notifySuccess, notifyError, notifyWarning } from '../utils/notifications';
import { isAdmin } from '../utils/auth';
 
const GST_RATE = 0.10; // 10% GST
 
export default function InvoiceForm() {
  const navigate = useNavigate();
  const { id } = useParams();
 
  // Invoice details
  const [customerId, setCustomerId] = useState('');
  const [customerSearch, setCustomerSearch] = useState('');
  const [customers, setCustomers] = useState([]);
  const [currency, setCurrency] = useState('AUD');
  const [issuedDate, setIssuedDate] = useState(new Date().toISOString().split('T')[0]);
  const [dueDate, setDueDate] = useState('');
  const [description, setDescription] = useState('');
  const [status, setStatus] = useState('draft');
  const [paymentStatus, setPaymentStatus] = useState('unpaid');
  const [purchaseOrderNumber, setPurchaseOrderNumber] = useState('');
  const [internalNotes, setInternalNotes] = useState('');
 
  // Line items
  const [lineItems, setLineItems] = useState([]);
  const [products, setProducts] = useState([]);
 
  const [loading, setLoading] = useState(false);
  const [loadingProducts, setLoadingProducts] = useState(true);
 
  useEffect(() => { fetchProducts(); }, []);
  useEffect(() => { if (id) fetchInvoice(); }, [id]);
 
  const fetchInvoice = async () => {
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/invoices/${id}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error('Failed to load invoice');
      const data = await res.json();
 
      setCustomerId(data.customer_id || '');
      setCustomerSearch(data.customer_name || '');
      setCurrency(data.currency || 'AUD');
      setIssuedDate(data.issued_date?.split('T')[0] || '');
      setDueDate(data.due_date?.split('T')[0] || '');
      setDescription(data.description || '');
      setStatus(data.status || 'draft');
      setPaymentStatus(data.payment_status || 'unpaid');
      setPurchaseOrderNumber(data.purchase_order_number || '');
      setInternalNotes(data.internal_notes || '');
 
      // Load line items
      setLineItems((data.line_items || []).map(item => ({
        line_item_id: item.line_item_id,
        product_id: item.product_id,
        description: item.description || '',
        quantity: Number(item.quantity) || 1,
        unit_price_ex: Number(item.unit_price_ex) || 0,
        unit_price_inc: Number(item.unit_price_inc) || 0,
        gst_amount: Number(item.gst_amount) || 0,
        productSearch: '',
        showProducts: false,
        searchResults: []
      })));
    } catch (err) {
      console.error(err);
      alert('Failed to load invoice: ' + err.message);
    }
  };
 
  const fetchProducts = async () => {
    setLoadingProducts(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/products?limit=1000', {
        headers: { Authorization: `Bearer ${token}` }
      });
      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 res = await apiFetch(
        `/customers?search=${encodeURIComponent(query)}&limit=10`,
        { headers: { Authorization: `Bearer ${token}` } }
      );
      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 && !customerId) {
      const timer = setTimeout(() => searchCustomers(customerSearch), 300);
      return () => clearTimeout(timer);
    } else if (!customerSearch) {
      setCustomers([]);
    }
  }, [customerSearch]);
 
  const addLineItem = () => {
    setLineItems(items => [...items, {
      product_id: null,
      description: '',
      quantity: 1,
      unit_price_ex: 0,
      unit_price_inc: 0,
      gst_amount: 0,
      productSearch: '',
      showProducts: false,
      searchResults: []
    }]);
  };
 
  const removeLineItem = (idx) => {
    setLineItems(items => items.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();
      setLineItems(items => items.map((it, i) =>
        i === idx ? { ...it, searchResults: data.products || [] } : it
      ));
    } catch (err) {
      console.error('Search failed:', err);
    }
  };
 
  const calculateLinePrices = (quantity, unitPriceEx, gstFree = false) => {
    const qty = Number(quantity) || 0;
    const priceEx = Number(unitPriceEx) || 0;
    const gstAmount = gstFree ? 0 : priceEx * GST_RATE;
    const unitPriceInc = priceEx + gstAmount;
    const lineTotalEx = qty * priceEx;
    const lineGst = gstFree ? 0 : lineTotalEx * GST_RATE;
    const lineTotalInc = lineTotalEx + lineGst;
 
    return {
      unit_price_inc: Number(unitPriceInc.toFixed(2)),
      gst_amount: Number(gstAmount.toFixed(2)),
      line_total_ex: Number(lineTotalEx.toFixed(2)),
      line_gst: Number(lineGst.toFixed(2)),
      line_total_inc: Number(lineTotalInc.toFixed(2))
    };
  };
 
  const updateLineItem = (idx, patch) => {
    setLineItems(items => items.map((it, i) => {
      if (i !== idx) return it;
 
      const updated = { ...it, ...patch };
 
      // Recalculate prices if quantity or unit_price_ex changed
      if (patch.quantity !== undefined || patch.unit_price_ex !== undefined) {
        const prices = calculateLinePrices(
          updated.quantity,
          updated.unit_price_ex,
          updated.gst_free
        );
        Object.assign(updated, prices);
      }
 
      return updated;
    }));
 
    // Trigger product search if needed
    if (patch.productSearch !== undefined && patch.productSearch) {
      setTimeout(() => searchProducts(patch.productSearch, idx), 300);
    }
  };
 
  const calculateTotals = () => {
    let subtotal = 0;
    let gstTotal = 0;
 
    lineItems.forEach(item => {
      const qty = Number(item.quantity) || 0;
      const priceEx = Number(item.unit_price_ex) || 0;
      const lineTotalEx = qty * priceEx;
      const lineGst = item.gst_free ? 0 : lineTotalEx * GST_RATE;
 
      subtotal += lineTotalEx;
      gstTotal += lineGst;
    });
 
    const total = subtotal + gstTotal;
 
    return {
      subtotal: subtotal.toFixed(2),
      gstTotal: gstTotal.toFixed(2),
      total: total.toFixed(2)
    };
  };
 
  // Administrative functions (admin-only)
  const markAsUnpaid = async () => {
    if (!confirm(`Mark invoice #${id} as unpaid? This will allow you to void or delete it. Use only for test invoices.`)) return;
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/invoices/${id}`, {
        method: 'PUT',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({
          customer_id: customerId,
          currency,
          issued_date: issuedDate,
          due_date: dueDate,
          description,
          status,
          payment_status: 'pending', // Force to pending
          purchase_order_number: purchaseOrderNumber,
          internal_notes: internalNotes,
          line_items: lineItems
        })
      });
      if (!res.ok) throw new Error(await res.text() || 'Failed to update invoice');
      setPaymentStatus('pending');
      notifySuccess(`Invoice #${id} marked as unpaid. You can now void or delete it.`);
    } catch (err) {
      console.error('[Mark Unpaid] Error:', err);
      notifyError(err.message || 'Failed to mark invoice as unpaid');
    }
  };
 
  const voidInvoice = async () => {
    if (!confirm(`Void invoice #${id}? This will restock items and mark it as void.`)) return;
    const reason = window.prompt('Enter a reason for voiding this invoice (optional):', '') || '';
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/invoices/${id}/void`, {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ reason })
      });
      if (!res.ok) {
        const txt = await res.text();
        throw new Error(txt || 'Failed to void invoice');
      }
      notifySuccess('Invoice voided successfully');
      navigate('/invoices');
    } catch (err) {
      notifyError(err.message || 'Failed to void invoice');
    }
  };
 
  const deleteInvoice = async () => {
    console.log('[Delete] Attempting to delete invoice');
    const isDraftOrVoid = status === 'draft' || status === 'void';
    const isPaid = paymentStatus === 'paid';
 
    if (!isDraftOrVoid) {
      notifyWarning(`Cannot delete invoice with status: ${status}. Only draft or void invoices can be deleted.`);
      return;
    }
    if (isPaid) {
      notifyError('Cannot delete a paid invoice. Use "Mark as Unpaid" first.');
      return;
    }
    if (!confirm(`Delete invoice #${id}? This will permanently remove it and restock any products.`)) {
      console.log('[Delete] User cancelled deletion');
      return;
    }
 
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/invoices/${id}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) {
        const text = await res.text();
        throw new Error(text || 'Failed to delete invoice');
      }
      console.log('[Delete] Invoice deleted successfully');
      notifySuccess(`Invoice #${id} deleted successfully`);
      navigate('/invoices');
    } catch (err) {
      console.error('[Delete] Error:', err);
      notifyError(err.message || 'Failed to delete invoice');
    }
  };
 
  const handleSave = async () => {
    if (!customerId) {
      await notifyWarning('Customer Required', 'Please select a customer before saving');
      return;
    }
 
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const totals = calculateTotals();
 
      const payload = {
        customer_id: customerId,
        currency,
        issued_date: issuedDate || null,
        due_date: dueDate || null,
        description,
        status,
        payment_status: paymentStatus,
        purchase_order_number: purchaseOrderNumber || null,
        internal_notes: internalNotes || null,
        subtotal: Number(totals.subtotal),
        tax_total: Number(totals.gstTotal),
        total: Number(totals.total),
        line_items: lineItems.map(item => ({
          line_item_id: item.line_item_id,
          product_id: item.product_id,
          description: item.description,
          quantity: Number(item.quantity),
          unit_price_ex: Number(item.unit_price_ex),
          unit_price_inc: Number(item.unit_price_inc),
          gst_amount: Number(item.gst_amount)
        }))
      };
 
      const url = id ? `/invoices/${id}` : '/invoices';
      const method = id ? 'PUT' : 'POST';
 
      const res = await apiFetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        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 result = await res.json();
      const invoice = result.invoice || result;
 
      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);
    }
  };
 
  const totals = calculateTotals();
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>{id ? 'Edit Invoice' : 'Create Invoice'}</h2>
        </div>
 
        <div className="form-container">
          <div className="form-grid">
            {/* Basic Information */}
            <div className="form-section">
              <h3>Invoice Details</h3>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Customer<span className="required">*</span></label>
                  <div style={{ position: 'relative' }}>
                    <input
                      type="text"
                      value={customerSearch}
                      onChange={e => {
                        setCustomerSearch(e.target.value);
                        setCustomerId('');
                      }}
                      placeholder="Search customers..."
                      required
                    />
                    {customers.length > 0 && (
                      <div style={{
                        position: 'absolute',
                        top: '100%',
                        left: 0,
                        right: 0,
                        background: 'var(--surface)',
                        border: '1px solid var(--border)',
                        borderRadius: '4px',
                        zIndex: 1000,
                        maxHeight: '200px',
                        overflowY: 'auto',
                        boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
                      }}>
                        {customers.map(c => (
                          <div
                            key={c.customer_id}
                            style={{
                              padding: '12px',
                              cursor: 'pointer',
                              borderBottom: '1px solid var(--border)'
                            }}
                            onClick={() => {
                              setCustomerId(c.customer_id);
                              setCustomerSearch(c.name);
                              setCustomers([]);
                            }}
                          >
                            <strong>{c.name}</strong>
                            {c.email && <div style={{ fontSize: '0.9em', color: 'var(--text-muted)' }}>{c.email}</div>}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
 
                <div className="form-field">
                  <label>Purchase Order Number</label>
                  <input
                    type="text"
                    value={purchaseOrderNumber}
                    onChange={e => setPurchaseOrderNumber(e.target.value)}
                    placeholder="PO-12345"
                  />
                </div>
              </div>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Issued Date</label>
                  <input
                    type="date"
                    value={issuedDate}
                    onChange={e => setIssuedDate(e.target.value)}
                  />
                </div>
 
                <div className="form-field">
                  <label>Due Date</label>
                  <input
                    type="date"
                    value={dueDate}
                    onChange={e => setDueDate(e.target.value)}
                  />
                </div>
 
                <div className="form-field">
                  <label>Currency</label>
                  <select value={currency} onChange={e => setCurrency(e.target.value)}>
                    <option value="AUD">AUD</option>
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                    <option value="GBP">GBP</option>
                  </select>
                </div>
              </div>
 
              <div className="form-row">
                <div className="form-field">
                  <label>Status</label>
                  <select value={status} onChange={e => setStatus(e.target.value)}>
                    <option value="draft">Draft</option>
                    <option value="sent">Sent</option>
                    <option value="approved">Approved</option>
                    <option value="cancelled">Cancelled</option>
                  </select>
                </div>
 
                <div className="form-field">
                  <label>Payment Status</label>
                  <select value={paymentStatus} onChange={e => setPaymentStatus(e.target.value)}>
                    <option value="unpaid">Unpaid</option>
                    <option value="partial">Partially Paid</option>
                    <option value="paid">Paid</option>
                    <option value="overdue">Overdue</option>
                  </select>
                </div>
              </div>
 
              <div className="form-field">
                <label>Description</label>
                <textarea
                  value={description}
                  onChange={e => setDescription(e.target.value)}
                  rows={2}
                  placeholder="Brief description of the invoice..."
                />
              </div>
 
              <div className="form-field">
                <label>Internal Notes</label>
                <textarea
                  value={internalNotes}
                  onChange={e => setInternalNotes(e.target.value)}
                  rows={3}
                  placeholder="Notes for internal use only (not visible to customer)..."
                />
                <span className="field-hint">These notes are for internal use and won't appear on the invoice</span>
              </div>
            </div>
 
            {/* Line Items */}
            <div className="form-section">
              <h3>Line Items</h3>
 
              {loadingProducts ? (
                <div>Loading products...</div>
              ) : (
                <>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr auto',
                    gap: '12px',
                    marginBottom: '12px',
                    fontWeight: 'bold',
                    fontSize: '0.9em',
                    color: 'var(--text-muted)'
                  }}>
                    <div>Product/Description</div>
                    <div>Qty</div>
                    <div>Unit Price Ex</div>
                    <div>Unit Price Inc</div>
                    <div>GST</div>
                    <div></div>
                  </div>
 
                  {lineItems.map((item, idx) => {
                    const linePrices = calculateLinePrices(item.quantity, item.unit_price_ex, item.gst_free);
 
                    return (
                      <div key={idx} style={{
                        marginBottom: '16px',
                        padding: '12px',
                        background: 'var(--bg-secondary)',
                        borderRadius: '6px',
                        border: '1px solid var(--border)'
                      }}>
                        <div style={{
                          display: 'grid',
                          gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr auto',
                          gap: '12px',
                          alignItems: 'start'
                        }}>
                          <div style={{ position: 'relative' }}>
                            <input
                              type="text"
                              value={item.productSearch || products.find(p => p.product_id === item.product_id)?.name || ''}
                              onChange={e => {
                                const search = e.target.value;
                                updateLineItem(idx, { productSearch: search, product_id: null });
                              }}
                              onFocus={() => updateLineItem(idx, { showProducts: true })}
                              onBlur={() => setTimeout(() => updateLineItem(idx, { showProducts: false }), 200)}
                              placeholder="Search products..."
                              style={{ marginBottom: '8px' }}
                            />
 
                            {item.showProducts && item.searchResults?.length > 0 && (
                              <div style={{
                                position: 'absolute',
                                top: '100%',
                                left: 0,
                                right: 0,
                                background: 'var(--surface)',
                                border: '1px solid var(--border)',
                                borderRadius: '4px',
                                zIndex: 1000,
                                maxHeight: '200px',
                                overflowY: 'auto',
                                boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
                              }}>
                                {item.searchResults.map(p => (
                                  <div
                                    key={p.product_id}
                                    style={{
                                      padding: '8px',
                                      cursor: 'pointer',
                                      borderBottom: '1px solid var(--border)'
                                    }}
                                    onMouseDown={e => {
                                      e.preventDefault();
                                      updateLineItem(idx, {
                                        product_id: p.product_id,
                                        description: p.name,
                                        unit_price_ex: Number(p.price_ex_tax || 0),
                                        gst_free: p.gst_free || false,
                                        productSearch: p.name,
                                        showProducts: false
                                      });
                                    }}
                                  >
                                    <strong>{p.name}</strong>
                                    {p.sku && <div style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>SKU: {p.sku}</div>}
                                    <div style={{ fontSize: '0.85em', color: 'var(--text-muted)' }}>
                                      ${Number(p.price_ex_tax || 0).toFixed(2)} ex GST
                                    </div>
                                  </div>
                                ))}
                              </div>
                            )}
 
                            <textarea
                              value={item.description}
                              onChange={e => updateLineItem(idx, { description: e.target.value })}
                              placeholder="Description..."
                              rows={2}
                            />
                          </div>
 
                          <input
                            type="number"
                            value={item.quantity}
                            onChange={e => updateLineItem(idx, { quantity: Number(e.target.value) })}
                            step="0.01"
                            min="0"
                          />
 
                          <input
                            type="number"
                            value={item.unit_price_ex}
                            onChange={e => updateLineItem(idx, { unit_price_ex: Number(e.target.value) })}
                            step="0.01"
                            min="0"
                          />
 
                          <div style={{ padding: '10px 0', color: 'var(--text-muted)' }}>
                            ${linePrices.unit_price_inc.toFixed(2)}
                          </div>
 
                          <div style={{ padding: '10px 0', color: 'var(--text-muted)' }}>
                            ${linePrices.gst_amount.toFixed(2)}
                          </div>
 
                          <button
                            type="button"
                            className="btn"
                            onClick={() => removeLineItem(idx)}
                            style={{ padding: '8px', minHeight: 'auto' }}
                          >
                            <span className="material-symbols-outlined">delete</span>
                          </button>
                        </div>
 
                        <div style={{
                          marginTop: '8px',
                          paddingTop: '8px',
                          borderTop: '1px solid var(--border)',
                          fontSize: '0.9em',
                          color: 'var(--text-muted)'
                        }}>
                          Line Total: ${linePrices.line_total_ex.toFixed(2)} + ${linePrices.line_gst.toFixed(2)} GST =
                          <strong style={{ marginLeft: '4px', color: 'var(--text)' }}>
                            ${linePrices.line_total_inc.toFixed(2)}
                          </strong>
                        </div>
                      </div>
                    );
                  })}
 
                  <button
                    type="button"
                    className="btn"
                    onClick={addLineItem}
                    style={{ marginTop: '8px' }}
                  >
                    <span className="material-symbols-outlined">add</span>
                    Add Line Item
                  </button>
                </>
              )}
            </div>
 
            {/* Totals Summary */}
            <div className="form-section">
              <h3>Summary</h3>
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '12px',
                fontSize: '1.1em'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span>Subtotal (Ex GST):</span>
                  <strong>${totals.subtotal}</strong>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span>GST Total:</span>
                  <strong>${totals.gstTotal}</strong>
                </div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  paddingTop: '12px',
                  borderTop: '2px solid var(--border)',
                  fontSize: '1.2em',
                  color: 'var(--primary)'
                }}>
                  <span>Total (Inc GST):</span>
                  <strong>{currency} ${totals.total}</strong>
                </div>
              </div>
            </div>
          </div>
 
          <div className="form-actions">
            <button
              type="button"
              className="btn"
              onClick={handleSave}
              disabled={loading}
            >
              {loading ? 'Saving...' : (
                <>
                  <span className="material-symbols-outlined">save</span>
                  {id ? 'Update Invoice' : 'Create Invoice'}
                </>
              )}
            </button>
            <button
              type="button"
              className="btn"
              onClick={() => navigate('/invoices')}
            >
              <span className="material-symbols-outlined">close</span>
              Cancel
            </button>
 
            {/* Admin actions - only show when editing existing invoice */}
            {id && isAdmin() && (
              <div style={{ marginLeft: 'auto', display: 'flex', gap: '10px' }}>
                {/* Mark as Unpaid - only for paid invoices */}
                {paymentStatus === 'paid' && (
                  <button
                    type="button"
                    className="btn-icon"
                    onClick={markAsUnpaid}
                    title="Mark as Unpaid (for test cleanup)"
                    style={{ color: '#f59e0b', fontSize: '24px', padding: '8px' }}
                  >
                    <span className="material-symbols-outlined">money_off</span>
                  </button>
                )}
 
                {/* Void button */}
                <button
                  type="button"
                  className="btn-icon"
                  onClick={voidInvoice}
                  disabled={status === 'void' || paymentStatus === 'paid'}
                  title={
                    status === 'void' 
                      ? 'Already voided' 
                      : paymentStatus === 'paid' 
                      ? 'Cannot void paid invoices (use Mark as Unpaid first)' 
                      : 'Void invoice'
                  }
                  style={{
                    opacity: (status === 'void' || paymentStatus === 'paid') ? 0.3 : 1,
                    cursor: (status === 'void' || paymentStatus === 'paid') ? 'not-allowed' : 'pointer',
                    fontSize: '24px',
                    padding: '8px'
                  }}
                >
                  <span className="material-symbols-outlined">block</span>
                </button>
 
                {/* Delete button */}
                <button
                  type="button"
                  className="btn-icon"
                  onClick={deleteInvoice}
                  disabled={!(status === 'draft' || status === 'void') || paymentStatus === 'paid'}
                  title={
                    paymentStatus === 'paid'
                      ? 'Cannot delete paid invoices'
                      : !(status === 'draft' || status === 'void')
                      ? 'Cannot delete issued invoices (only draft or void)'
                      : 'Delete invoice (will restock products)'
                  }
                  style={{
                    opacity: (!(status === 'draft' || status === 'void') || paymentStatus === 'paid') ? 0.3 : 1,
                    cursor: (!(status === 'draft' || status === 'void') || paymentStatus === 'paid') ? 'not-allowed' : 'pointer',
                    fontSize: '24px',
                    padding: '8px'
                  }}
                >
                  <span className="material-symbols-outlined">delete</span>
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </MainLayout>
  );
}