feat(ui): unify global visual identity, theme tokens and report filters

frontend/src/pages/app/ExpenseReportsPage.tsx

@@ -1,7 +1,10 @@
 import { useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { FilterX } from 'lucide-react'
 import { apiFetch } from '@/lib/api'
 import { useTheme } from '@/hooks/useTheme'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import type { Expense } from '@/lib/types'
 
 type PeriodKey = 'month' | '30d' | '90d' | 'year' | 'all'
@@ -65,6 +68,7 @@ export default function ExpenseReportsPage() {
       return true
     })
   }, [expenses, period, typeFilter])
+  const hasFilters = period !== '90d' || !!typeFilter
 
   const kpis = useMemo(() => {
     const total = filtered.reduce((sum, e) => sum + e.amount, 0)
@@ -145,7 +149,7 @@ export default function ExpenseReportsPage() {
       </header>
 
       <div className={`rounded-2xl border p-4 ${isLight ? 'border-slate-300 bg-white' : 'border-slate-700 bg-slate-900/70'}`}>
-        <div className="grid gap-3 md:grid-cols-2">
+        <div className="grid gap-3 md:grid-cols-3">
           <label className="text-sm">
             <span className={`mb-1 block ${isLight ? 'text-slate-700' : 'text-slate-300'}`}>Período</span>
             <select
@@ -172,9 +176,30 @@ export default function ExpenseReportsPage() {
               <option value="other">Outros</option>
             </select>
           </label>
+          <div className="space-y-1">
+            <span className={`mb-1 block text-sm ${isLight ? 'text-slate-700' : 'text-slate-300'}`}>Ações rápidas</span>
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full"
+              onClick={() => {
+                setPeriod('90d')
+                setTypeFilter('')
+              }}
+              disabled={!hasFilters}
+            >
+              <FilterX className="h-4 w-4" />
+              Limpar todos os filtros
+            </Button>
+          </div>
         </div>
       </div>
 
+      <div className="flex items-center gap-3 text-sm">
+        <Badge variant="secondary">{expenses.length} total</Badge>
+        <Badge>{filtered.length} no filtro atual</Badge>
+      </div>
+
       <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
         {[
           ['Total de despesas', currency(kpis.total)],