\n {/* Header */}\n

\n 📋 Expense List\n

\n\n {/* Filters */}\n

\n setFilter({...filter, branch: e.target.value})}\n className=\"px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-white/50\"\n >\n \n \n \n \n \n\n setFilter({...filter, fuelType: e.target.value})}\n className=\"px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-white/50\"\n >\n \n \n \n \n\n setFilter({...filter, startDate: e.target.value})}\n placeholder=\"Start Date\"\n className=\"px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50\"\n />\n\n setFilter({...filter, endDate: e.target.value})}\n placeholder=\"End Date\"\n className=\"px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50\"\n />\n

\n\n {/* Summary */}\n

\n \n Showing {filteredExpenses.length} of {expenses.length} expenses\n \n

\n \n Total: {formatCurrency(totalAmount)}\n \n

\n\n {/* Expense Cards */}\n

\n {filteredExpenses.length === 0 ? (\n

\n 📝\n

No expenses found

Try adjusting your filters or add some expenses

\n ) : (\n filteredExpenses.map((expense, index) => (\n

\n \n 📅 {formatDate(expense.date)}\n \n \n {expense.branch}\n \n \n {expense.fuelType === 'Diesel' ? '🔵' : '🟢'} {expense.fuelType}\n \n \n {expense.category}\n \n

\n \n

\n {expense.description}\n

\n \n {expense.createdAt && (\n

\n Added: {new Date(expense.createdAt).toLocaleString()}\n

\n )}\n

\n\n

\n {formatCurrency(expense.amount)}\n

\n \n handleDelete(expense.id!)}\n disabled={deleteLoading === expense.id}\n className=\"px-4 py-2 bg-red-500/20 hover:bg-red-500/40 border border-red-500/50 rounded-xl text-red-200 font-semibold transition-all duration-300 hover-scale disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {deleteLoading === expense.id ? (\n

\n Deleting...\n

\n ) : (\n '🗑️ Delete'\n )}\n \n

\n ))\n )}\n

\n\n {/* Load More Button (if needed) */}\n {expenses.length >= 50 && (\n

\n \n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/izake_aa/Interface/code/frontend/components/ExpenseList.tsx","extension","actionData","errors"]