Invoices.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import '../styles/theme.css';
import './Invoices.css';
import { apiFetch } from '../lib/api';
import { isAdmin } from '../utils/auth';
import PayInvoiceModal from '../components/PayInvoiceModal';
 
function Invoices() {
    const [invoices, setInvoices] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [page, setPage] = useState(1);
    const [totalPages, setTotalPages] = useState(1);
    const [search, setSearch] = useState('');
    const [dateFrom, setDateFrom] = useState('');
    const [dateTo, setDateTo] = useState('');
    const [paymentStatus, setPaymentStatus] = useState('all');
    const [showFilters, setShowFilters] = useState(false);
    const [isRootTenant, setIsRootTenant] = useState(false);
    const [tenantMap, setTenantMap] = useState({});
    const [showPayModal, setShowPayModal]  = useState(false);
    const [selectedInvoice, setSelectedInvoice] = useState(null);
    // Remove selectedTenantId and use tenantId from JWT only
    const token = localStorage.getItem('token');
    let tenantId = '';
    if (token) {
        try {
            const payload = token.split('.')[1];
            const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
            tenantId = decoded.tenant_id || decoded.tenantId || '';
        } catch { }
    }
 
    // Reload invoices when tenantId changes
    useEffect(() => {
        refetch();
    }, [tenantId]);
    const navigate = useNavigate();
 
    const refetch = async () => {
        try {
            const token = localStorage.getItem('token');
            let url = '/invoices';
            const params = new URLSearchParams();
            params.set('page', page);
            params.set('limit', 10);
            if (search) params.set('search', search);
            if (dateFrom) params.set('date_from', dateFrom);
            if (dateTo) params.set('date_to', dateTo);
            if (paymentStatus && paymentStatus !== 'all') params.set('payment_status', paymentStatus);
            const queryString = params.toString();
            if (queryString) url += `?${queryString}`;
            const response = await apiFetch(url, { headers: { Authorization: `Bearer ${token}` } });
            if (!response.ok) throw new Error('Failed to load invoices');
            const data = await response.json();
            setInvoices(data.invoices);
            setTotalPages(Math.ceil(data.total / 10));
            setError(null);
        } catch (err) {
            setError(err.message);
        }
    };
 
    const voidInvoice = async (invoice) => {
        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 url = `/invoices/${invoice.invoice_id}/void`;
            const res = await apiFetch(url, {
                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');
            }
            await refetch();
            alert('Invoice voided');
        } catch (err) {
            alert(err.message || 'Failed to void invoice');
        }
    };
 
    const deleteInvoice = async (invoice) => {
        console.log('[Delete] Attempting to delete invoice:', invoice);
        
        // Check if delete is allowed
        const isDraftOrVoid = invoice.status === 'draft' || invoice.status === 'void';
        const isPaid = invoice.payment_status === 'paid';
        
        if (!isDraftOrVoid) {
            alert(`Cannot delete invoice with status: ${invoice.status}. Only draft or void invoices can be deleted.`);
            return;
        }
        
        if (isPaid) {
            alert('Cannot delete a paid invoice.');
            return;
        }
        
        if (!confirm(`Delete invoice #${invoice.invoice_id}? This will permanently remove it and restock any products.`)) {
            console.log('[Delete] User cancelled deletion');
            return;
        }
        
        console.log('[Delete] Confirmed - making DELETE request');
        try {
            const token = localStorage.getItem('token');
            const url = `/invoices/${invoice.invoice_id}`;
            console.log('[Delete] DELETE request to:', url);
            
            const res = await apiFetch(url, {
                method: 'DELETE',
                headers: { Authorization: `Bearer ${token}` }
            });
            
            console.log('[Delete] Response status:', res.status, res.ok);
            
            if (!res.ok) {
                const txt = await res.text();
                console.error('[Delete] Error response:', txt);
                throw new Error(txt || 'Failed to delete invoice');
            }
            
            // Remove locally to avoid extra fetch latency
            setInvoices(list => list.filter(i => i.invoice_id !== invoice.invoice_id));
            alert(`Invoice #${invoice.invoice_id} deleted successfully`);
            console.log('[Delete] Success - invoice removed from list');
        } catch (err) {
            console.error('[Delete] Exception:', err);
            alert(err.message || 'Failed to delete invoice');
        }
    };
 
    const markAsUnpaid = async (invoice) => {
        if (!confirm(`Mark invoice #${invoice.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/${invoice.invoice_id}`, {
                method: 'PUT',
                headers: { 
                    Authorization: `Bearer ${token}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    ...invoice,
                    payment_status: 'pending'
                })
            });
            
            if (!res.ok) {
                const txt = await res.text();
                throw new Error(txt || 'Failed to update invoice');
            }
            
            // Update locally
            setInvoices(list => list.map(i => 
                i.invoice_id === invoice.invoice_id 
                    ? { ...i, payment_status: 'pending' }
                    : i
            ));
            
            alert(`Invoice #${invoice.invoice_id} marked as unpaid. You can now void or delete it.`);
        } catch (err) {
            console.error('[Mark Unpaid] Error:', err);
            alert(err.message || 'Failed to mark invoice as unpaid');
        }
    };
 
    // Detect if user is root tenant (MSP)
    useEffect(() => {
        const detectRootTenant = async () => {
            try {
                const token = localStorage.getItem('token');
                const res = await apiFetch('/tenants', {
                    headers: { Authorization: `Bearer ${token}` }
                });
                if (res.ok) {
                    setIsRootTenant(true);
                    const data = await res.json();
                    const map = {};
                    data.tenants?.forEach(t => {
                        map[t.tenant_id] = t.name;
                    });
                    setTenantMap(map);
                }
            } catch (err) {
                // Silently fail - 403 is expected for non-MSP users
            }
        };
        detectRootTenant();
    }, []);
 
    useEffect(() => {
        const fetchInvoices = async () => {
            try {
                const token = localStorage.getItem('token');
                let url = '/invoices';
                const params = new URLSearchParams();
                params.set('page', page);
                params.set('limit', 10);
                if (search) params.set('search', search);
                if (dateFrom) params.set('date_from', dateFrom);
                if (dateTo) params.set('date_to', dateTo);
                if (paymentStatus && paymentStatus !== 'all') params.set('payment_status', paymentStatus);
                const queryString = params.toString();
                if (queryString) url += `?${queryString}`;
                const response = await apiFetch(url, {
                    headers: { Authorization: `Bearer ${token}` }
                });
                if (!response.ok) throw new Error('Failed to load invoices');
                const data = await response.json();
                setInvoices(data.invoices);
                setTotalPages(Math.ceil(data.total / 10));
                setError(null);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };
 
        fetchInvoices();
    }, [page, search, dateFrom, dateTo, paymentStatus]);
 
    return (
        <MainLayout>
            <div className="page-container">
                <div className="page-header">
                    <div className="header-content">
                        <h1>Invoices</h1>
                        <div className="header-actions">
                            <div className="search-box">
                                <span className="material-symbols-outlined">search</span>
                                <input
                                    type="text"
                                    placeholder="Search invoice#, customer..."
                                    value={search}
                                    onChange={(e) => { setSearch(e.target.value); setPage(1); }}
                                />
                            </div>
                            <button className="btn btn-secondary" onClick={() => setShowFilters(!showFilters)}>
                                <span className="material-symbols-outlined">filter_list</span>
                                Filters
                            </button>
                            <button className="btn" onClick={() => navigate('/invoices/new')}>
                                <span className="material-symbols-outlined">add</span>
                                New Invoice
                            </button>
                        </div>
                    </div>
                </div>
 
                {showFilters && (
                    <div className="filters-panel">
                        <div className="filter-group">
                            <label>From Date:</label>
                            <input
                                type="date"
                                value={dateFrom}
                                onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
                            />
                        </div>
                        <div className="filter-group">
                            <label>To Date:</label>
                            <input
                                type="date"
                                value={dateTo}
                                onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
                            />
                        </div>
                        <div className="filter-group">
                            <label>Payment Status:</label>
                            <select
                                value={paymentStatus}
                                onChange={(e) => { setPaymentStatus(e.target.value); setPage(1); }}
                            >
                                <option value="all">All Statuses</option>
                                <option value="unpaid">Unpaid</option>
                                <option value="partial">Partially Paid</option>
                                <option value="paid">Paid</option>
                                <option value="overdue">Overdue</option>
                            </select>
                        </div>
                        <button className="btn btn-sm" onClick={() => {
                            setSearch('');
                            setDateFrom('');
                            setDateTo('');
                            setPaymentStatus('all');
                            setPage(1);
                        }}>
                            <span className="material-symbols-outlined">clear</span>
                            Clear Filters
                        </button>
                    </div>
                )}
 
                {loading && <div>Loading...</div>}
                {error && <div className="error">Error: {error}</div>}
 
                {!loading && !error && (
                    <div className="table-container">
                        {invoices.length === 0 ? (
                            <div className="empty-state">
                                <span className="material-symbols-outlined">receipt_long</span>
                                <h3>No invoices found</h3>
                                <p>Try adjusting your search or filters, or create a new invoice.</p>
                            </div>
                        ) : (
                            <>
                                <table className="data-table">
                                    <thead>
                                        <tr>
                                            <th>Invoice #</th>
                                            {isRootTenant && <th>Tenant</th>}
                                            <th>Customer</th>
                                            <th>Issued</th>
                                            <th>Due</th>
                                            <th>Amount</th>
                                            <th>Payment</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {invoices.map(invoice => (
                                            <tr key={invoice.invoice_id}>
                                                <td className="invoice-number">{invoice.invoice_number || `#${invoice.invoice_id}`}</td>
                                                {isRootTenant && <td>{invoice.tenant_id === 1 ? 'Root Tenant' : (invoice.tenant_name || tenantMap[invoice.tenant_id] || '-')}</td>}
                                                <td>{invoice.customer_name || 'N/A'}</td>
                                                <td>{invoice.issued_date ? new Date(invoice.issued_date).toLocaleDateString() : '-'}</td>
                                                <td>{invoice.due_date ? new Date(invoice.due_date).toLocaleDateString() : '-'}</td>
                                                <td className="amount">${parseFloat(invoice.total || invoice.amount || 0).toFixed(2)}</td>
                                                <td><span className={`status-badge ${invoice.payment_status || 'pending'}`}>{invoice.payment_status || 'pending'}</span></td>
                                                <td><span className={`status-badge ${invoice.status}`}>{invoice.status}</span></td>
                                                <td className="actions">                                            {/* Pay Now button - only show for unpaid invoices */}
                                            {invoice.payment_status !== 'paid' && invoice.status !== 'void' && (
                                                <button 
                                                    className="btn-icon" 
                                                    onClick={() => {
                                                        setSelectedInvoice(invoice);
                                                        setShowPayModal(true);
                                                    }} 
                                                    title="Pay Now"
                                                    style={{ color: '#10b981' }}
                                                >
                                                    <span className="material-symbols-outlined">payments</span>
                                                </button>
                                            )}                                                  <button className="btn-icon" onClick={() => navigate(`/invoices/${invoice.invoice_id}`)} title="View">
                                                        <span className="material-symbols-outlined">visibility</span>
                                                    </button>
                                                    <button className="btn-icon" onClick={() => navigate(`/invoices/${invoice.invoice_id}/edit`)} title="Edit">
                                                        <span className="material-symbols-outlined">edit</span>
                                                    </button>
                                                    
                                                    {/* Mark as Unpaid - Admin only, for test invoices */}
                                                    {isAdmin() && invoice.payment_status === 'paid' && (
                                                        <button
                                                            className="btn-icon"
                                                            title="Mark as Unpaid (for test cleanup)"
                                                            onClick={() => markAsUnpaid(invoice)}
                                                            style={{ color: '#f59e0b' }}
                                                        >
                                                            <span className="material-symbols-outlined">money_off</span>
                                                        </button>
                                                    )}
                                                    
                                                    {/* Void invoice (not if already void or paid) */}
                                                    <button
                                                        className="btn-icon"
                                                        title={
                                                            invoice.payment_status === 'paid'
                                                                ? 'Cannot void paid invoices (use Mark as Unpaid first)'
                                                                : invoice.status === 'void'
                                                                    ? 'Already voided'
                                                                    : 'Void invoice'
                                                        }
                                                        onClick={() => voidInvoice(invoice)}
                                                        disabled={invoice.status === 'void' || invoice.payment_status === 'paid'}
                                                        style={{
                                                            opacity: (invoice.status === 'void' || invoice.payment_status === 'paid') ? 0.3 : 1,
                                                            cursor: (invoice.status === 'void' || invoice.payment_status === 'paid') ? 'not-allowed' : 'pointer'
                                                        }}
                                                    >
                                                        <span className="material-symbols-outlined">block</span>
                                                    </button>
                                                    {/* Delete invoice (only draft or void and not paid) - Admin only */}
                                                    {isAdmin() && (
                                                        <button
                                                            className="btn-icon"
                                                            title={
                                                                invoice.payment_status === 'paid' 
                                                                    ? 'Cannot delete paid invoices'
                                                                    : (invoice.status !== 'draft' && invoice.status !== 'void')
                                                                        ? `Cannot delete ${invoice.status} invoices (only draft or void)`
                                                                        : 'Delete invoice (will restock products)'
                                                            }
                                                            onClick={() => deleteInvoice(invoice)}
                                                            disabled={!(invoice.status === 'draft' || invoice.status === 'void') || invoice.payment_status === 'paid'}
                                                            style={{
                                                                opacity: (!(invoice.status === 'draft' || invoice.status === 'void') || invoice.payment_status === 'paid') ? 0.3 : 1,
                                                                cursor: (!(invoice.status === 'draft' || invoice.status === 'void') || invoice.payment_status === 'paid') ? 'not-allowed' : 'pointer'
                                                            }}
                                                        >
                                                            <span className="material-symbols-outlined">delete</span>
                                                        </button>
                                                    )}
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
 
                                <div className="pagination">
                                    <button
                                        className="btn"
                                        onClick={() => setPage(p => Math.max(1, p - 1))}
                                        disabled={page === 1}
                                    >
                                        <span className="material-symbols-outlined">navigate_before</span>
                                        Previous
                                    </button>
                                    <span className="page-info">Page {page} of {totalPages}</span>
                                    <button
                                        className="btn"
                                        onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                                        disabled={page === totalPages}
                                    >
                                        Next
                                        <span className="material-symbols-outlined">navigate_next</span>
                                    </button>
                                </div>
                            </>
                        )}
                    </div>
                )}
            </div>
 
            {/* Payment Modal */}
            {showPayModal && selectedInvoice && (
                <PayInvoiceModal
                    invoice={selectedInvoice}
                    onClose={() => {
                        setShowPayModal(false);
                        setSelectedInvoice(null);
                    }}
                    onSuccess={() => {
                        refetch(); // Reload invoices to show updated payment status
                    }}
                />
            )}
        </MainLayout>
    );
}
 
export default Invoices;