{% load i18n %}
<!-- Expenses Card Partial -->
<div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-red-500 transform hover:scale-105 transition-all">
    <h3 class="text-lg font-semibold text-gray-700 mb-3">{% trans "Dépenses du mois" %}</h3>
    <div class="text-3xl font-bold text-gray-900">${{ current_month_expenses|floatformat:2 }}</div>
    <div class="flex items-center mt-4 text-sm">
        <svg class="w-4 h-4 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
        </svg>
        <span class="text-gray-600">Ce mois-ci</span>
    </div>
</div>