InvoiceDetail.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 { apiFetch } from '../lib/api';
import { isAdmin } from '../utils/auth';
import { notifySuccess, notifyError } from '../utils/notifications';
import PayInvoiceModal from '../components/PayInvoiceModal';
 
export default function InvoiceDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [invoice, setInvoice] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [customer, setCustomer] = useState(null);
  const [showPayModal, setShowPayModal] = useState(false);
  const [pdfBlob, setPdfBlob] = useState(null);
  const [pdfLoading, setPdfLoading] = useState(true);
  const [companyInfo, setCompanyInfo] = useState({
    name: '',
    abn: '',
    address: '',
    phone: '',
    email: ''
  });
 
  const voidInvoice = async () => {
    if (!invoice) return;
    if (!confirm(`Void invoice #${invoice.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/${invoice.invoice_id}/void`, {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ reason })
      });
      if (!res.ok) {
        const txt = await res.text();
        const errorMsg = txt || 'Failed to void invoice';
        await notifyError('Void Failed', errorMsg);
        throw new Error(errorMsg);
      }
      await fetchInvoice();
      await notifySuccess('Invoice Voided', `Invoice #${invoice.invoice_id} has been voided successfully`);
    } catch (err) {
      // Error already notified above
    }
  };
 
  const deleteInvoice = async () => {
    if (!invoice) return;
    if (!confirm(`Delete invoice #${invoice.invoice_id}? This will permanently remove it.`)) return;
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/invoices/${invoice.invoice_id}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) {
        const txt = await res.text();
        const errorMsg = txt || 'Failed to delete invoice';
        await notifyError('Delete Failed', errorMsg);
        throw new Error(errorMsg);
      }
      await notifySuccess('Invoice Deleted', `Invoice #${invoice.invoice_id} has been deleted successfully`);
      navigate('/invoices');
    } catch (err) {
      // Error already notified above
    }
  };
 
  useEffect(() => {
    fetchInvoice();
    fetchCompanyInfo();
    fetchPdfBlob();
  }, [id]);
 
  // Cleanup blob URL on unmount
  useEffect(() => {
    return () => {
      if (pdfBlob && typeof pdfBlob === 'string' && pdfBlob.startsWith('blob:')) {
        URL.revokeObjectURL(pdfBlob);
      }
    };
  }, [pdfBlob]);
 
  const fetchPdfBlob = async () => {
    setPdfLoading(true);
    try {
      // Revoke old blob URL if it exists
      if (pdfBlob && typeof pdfBlob === 'string' && pdfBlob.startsWith('blob:')) {
        URL.revokeObjectURL(pdfBlob);
      }
      
      const token = localStorage.getItem('token');
      const baseURL = import.meta.env.VITE_API_BASE_URL || 'https://rmm-psa-backend-t9f7k.ondigitalocean.app/api';
      const response = await fetch(`${baseURL}/invoices/${id}/pdf?t=${Date.now()}`, {
        headers: {
          'Authorization': `Bearer ${token}`
        },
        credentials: 'include' // Include cookies
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch PDF');
      }
      
      const blob = await response.blob();
      const blobUrl = URL.createObjectURL(blob);
      setPdfBlob(blobUrl);
    } catch (err) {
      console.error('Error fetching PDF:', err);
      await notifyError('PDF Error', 'Failed to load invoice PDF');
    } finally {
      setPdfLoading(false);
    }
  };
 
  const fetchCompanyInfo = async () => {
    try {
      const token = localStorage.getItem('token');
      const [settingsRes, abnRes, addressRes, phoneRes, emailRes] = await Promise.all([
        apiFetch('/settings', { headers: { Authorization: `Bearer ${token}` } }),
        apiFetch('/settings/company_abn', { headers: { Authorization: `Bearer ${token}` } }),
        apiFetch('/settings/company_address', { headers: { Authorization: `Bearer ${token}` } }),
        apiFetch('/settings/company_phone', { headers: { Authorization: `Bearer ${token}` } }),
        apiFetch('/settings/company_email', { headers: { Authorization: `Bearer ${token}` } })
      ]);
 
      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 () => {
    setLoading(true);
    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();
      setInvoice(data);
 
      // Fetch customer details
      if (data.customer_id) {
        const custRes = await apiFetch(`/customers/${data.customer_id}`, { headers: { Authorization: `Bearer ${token}` } });
        if (custRes.ok) {
          const customerData = await custRes.json();
          // Backend returns { customer: {...} } so extract the customer object
          setCustomer(customerData.customer || customerData);
        }
      }
    } catch (err) { setError(err.message || 'Error'); }
    finally { setLoading(false); }
  };
 
  if (loading) return (<MainLayout><div className="page-content">Loading...</div></MainLayout>);
  if (error) return (<MainLayout><div className="page-content">Error: {error}</div></MainLayout>);
  if (!invoice) return (<MainLayout><div className="page-content">Invoice not found</div></MainLayout>);
 
  return (
    <MainLayout>
      <div className="page-content" style={{ maxWidth: '1200px', margin: '0 auto' }}>
 
        {/* Action Buttons at Top */}
        <div style={{ marginBottom: '20px', display: 'flex', gap: '12px', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h2 style={{ margin: 0 }}>Invoice #{String(invoice.invoice_id).padStart(5, '0')}</h2>
            <span style={{
              display: 'inline-block',
              marginTop: '8px',
              padding: '4px 12px',
              borderRadius: '12px',
              fontSize: '0.9em',
              fontWeight: '600',
              backgroundColor: invoice.payment_status === 'paid' ? '#d4edda' : invoice.status === 'void' ? '#e2e3e5' : '#fff3cd',
              color: invoice.payment_status === 'paid' ? '#155724' : invoice.status === 'void' ? '#383d41' : '#856404'
            }}>
              {invoice.payment_status === 'paid' ? 'PAID' : invoice.status?.toUpperCase() || 'DRAFT'}
            </span>
          </div>
          
          <div style={{ display: 'flex', gap: '12px' }}>
            {/* Pay Now button - only show for unpaid invoices */}
            {invoice.payment_status !== 'paid' && invoice.status !== 'void' && (
              <button 
                className="btn" 
                onClick={() => setShowPayModal(true)}
                style={{ background: '#10b981', color: 'white' }}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px', marginRight: '4px' }}>payments</span>
                Pay Now
              </button>
            )}
            
            <button className="btn primary" onClick={() => navigate(`/invoices/${invoice.invoice_id}/edit`)}>
              <span className="material-symbols-outlined" style={{ fontSize: '18px', marginRight: '4px' }}>edit</span>
              Edit
            </button>
            
            <button
              className="btn"
              onClick={voidInvoice}
              disabled={invoice.status === 'void' || invoice.payment_status === 'paid'}
            >
              <span className="material-symbols-outlined" style={{ fontSize: '18px', marginRight: '4px' }}>block</span>
              Void
            </button>
            
            {isAdmin() && (
              <button
                className="btn"
                onClick={deleteInvoice}
                disabled={!(invoice.status === 'draft' || invoice.status === 'void') || invoice.payment_status === 'paid'}
              >
                <span className="material-symbols-outlined" style={{ fontSize: '18px', marginRight: '4px' }}>delete</span>
                Delete
              </button>
            )}
 
            {/* Download PDF */}
            <a 
              href={pdfBlob || '#'} 
              download={`invoice-${String(invoice.invoice_id).padStart(5, '0')}.pdf`}
              className="btn"
              onClick={(e) => {
                if (!pdfBlob) {
                  e.preventDefault();
                  notifyError('PDF Not Ready', 'PDF is still loading');
                }
              }}
            >
              <span className="material-symbols-outlined" style={{ fontSize: '18px', marginRight: '4px' }}>download</span>
              Download PDF
            </a>
            
            <button className="btn" onClick={() => navigate('/invoices')}>
              <span className="material-symbols-outlined" style={{ fontSize: '18px', marginRight: '4px' }}>arrow_back</span>
              Back
            </button>
          </div>
        </div>
 
        {/* PDF Viewer */}
        <div style={{ 
          background: 'white', 
          borderRadius: '8px', 
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          overflow: 'hidden',
          minHeight: '800px',
          display: 'flex',
          flexDirection: 'column'
        }}>
          {pdfLoading ? (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '400px' }}>
              <p>Loading PDF...</p>
            </div>
          ) : pdfBlob ? (
            <iframe
              src={pdfBlob}
              style={{
                width: '100%',
                height: '800px',
                border: 'none'
              }}
              title="Invoice PDF"
            />
          ) : (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '400px' }}>
              <p>Failed to load PDF</p>
            </div>
          )}
        </div>
      </div>
 
      {/* Payment Modal */}
      {showPayModal && invoice && (
        <PayInvoiceModal
          invoice={invoice}
          onClose={() => setShowPayModal(false)}
          onSuccess={() => {
            fetchInvoice(); // Reload invoice to show updated payment status
          }}
        />
      )}
    </MainLayout>
  );
}