diff --git a/src/pages/team/TeamInvoices.jsx b/src/pages/team/TeamInvoices.jsx index 9419638..901f96d 100644 --- a/src/pages/team/TeamInvoices.jsx +++ b/src/pages/team/TeamInvoices.jsx @@ -78,8 +78,8 @@ export default function Invoices() { const [activeTab, setActiveTab] = useState(() => location.state?.tab || 'invoices'); const [financeTab, setFinanceTab] = useState('overview'); const [filter, setFilter] = useState('all'); - const { sortKey: invSortKey, sortDir: invSortDir, toggle: invToggle, sort: invSort } = useSortable('invoice_date'); - const { sortKey: expSortKey, sortDir: expSortDir, toggle: expToggle, sort: expSort } = useSortable('date'); + const { sortKey: invSortKey, sortDir: invSortDir, toggle: invToggle, sort: invSort } = useSortable('invoice_date', 'desc'); + const { sortKey: expSortKey, sortDir: expSortDir, toggle: expToggle, sort: expSort } = useSortable('date', 'desc'); const { sortKey: subSortKey, sortDir: subSortDir, toggle: subToggle, sort: subSort } = useSortable('submitted_at'); const { sortKey: ovExpKey, sortDir: ovExpDir, toggle: ovExpToggle } = useSortable('date'); const { sortKey: ovSubKey, sortDir: ovSubDir, toggle: ovSubToggle } = useSortable('date'); @@ -100,6 +100,9 @@ export default function Invoices() { const [editingExpenseId, setEditingExpenseId] = useState(''); const [showExpenseForm, setShowExpenseForm] = useState(false); const [expenseFilter, setExpenseFilter] = useState('all'); + const [expYearFilter, setExpYearFilter] = useState(String(new Date().getFullYear())); + const [expYearMenuOpen, setExpYearMenuOpen] = useState(false); + const expYearMenuRef = useRef(null); const [subcontractorPOs, setSubcontractorPOs] = useState([]); const [subcontractorLoading, setSubcontractorLoading] = useState(true); const [subcontractorError, setSubcontractorError] = useState(''); @@ -154,6 +157,13 @@ export default function Invoices() { loadExpenses(); }, []); + useEffect(() => { + if (!expYearMenuOpen) return; + const handler = e => { if (expYearMenuRef.current && !expYearMenuRef.current.contains(e.target)) setExpYearMenuOpen(false); }; + document.addEventListener('mousedown', handler); + return () => document.removeEventListener('mousedown', handler); + }, [expYearMenuOpen]); + useEffect(() => { async function loadSubInvoices() { const { data, error: err } = await supabase @@ -462,9 +472,12 @@ export default function Invoices() { netReceived: invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total) - Number(i.stripe_fee || 0), 0), }; - const filteredExpenses = expenseFilter === 'all' - ? expenses - : expenses.filter(e => e.category === expenseFilter); + const expenseYears = [...new Set(expenses.map(e => e.date?.slice(0, 4)).filter(Boolean))].sort((a, b) => b - a); + const filteredExpenses = expenses.filter(e => { + if (expYearFilter !== 'all' && e.date?.slice(0, 4) !== expYearFilter) return false; + if (expenseFilter !== 'all' && e.category !== expenseFilter) return false; + return true; + }); const paidSubcontractorPOs = subcontractorPOs.filter(po => po.status === 'paid'); const payableSubcontractorPOs = subcontractorPOs.filter(po => ['approved', 'ready_to_pay'].includes(po.status)); const selectedSubcontractorPO = subcontractorPOs.find(po => po.id === selectedSubcontractorPOId); @@ -1120,6 +1133,27 @@ export default function Invoices() { ))} +