- {mainTab !== 'REPORTS' && (
+ {mainTab !== 'REPORTS' && mainTab !== 'DASHBOARD' && (
-
- setViewMode('grid')}
- className={clsx("p-2 rounded-md transition-all", viewMode === 'grid' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
- >
-
-
- setViewMode('list')}
- className={clsx("p-2 rounded-md transition-all", viewMode === 'list' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
- >
-
-
-
+ {mainTab === 'DASHBOARD' && (
+
+ {
+ setStartDate(start)
+ setEndDate(end)
+ }}
+ className="w-64"
+ />
+
+ )}
+ {mainTab !== 'DASHBOARD' && (
+
+ setViewMode('grid')}
+ className={clsx("p-2 rounded-md transition-all", viewMode === 'grid' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
+ >
+
+
+ setViewMode('list')}
+ className={clsx("p-2 rounded-md transition-all", viewMode === 'list' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
+ >
+
+
+
+ )}
{mainTab !== 'REPORTS' && (mainTab === 'EVENTS' ? filteredEvents.length > 0 : filteredTransactions.length > 0) && (
@@ -436,7 +446,123 @@ export function FinancialDashboard({ events, transactions, players, group, initi
)}
- {mainTab === 'EVENTS' ? (
+ {mainTab === 'DASHBOARD' ? (
+
+ {/* Stats Overview */}
+
+
+
+
+
+
+
+
+
Saldo Atual
+
R$ {totalStats.balance.toFixed(2)}
+
+
+
Disponível em caixa
+
+
+
+
+
+
+
+
+
+
Total Entradas
+
R$ {(totalStats.paid + totalStats.transIncome).toFixed(2)}
+
Mesas + Fluxo Manual
+
+
+
+
+
+
+
+
+
Total Saídas
+
R$ {totalStats.transExpense.toFixed(2)}
+
Despesas pagas
+
+
+
+
+
+
+ {/* Distribution or Top Payers */}
+
+
+
+ Melhores Pagadores
+
+ Ranking Total
+
+
+ {totalStats.allPlayerStats.slice(0, 5).map((player, idx) => (
+
+
+
+ {idx + 1}
+
+
+
{player.name}
+
Contribuinte Ativo
+
+
+
R$ {player.totalPaid.toFixed(2)}
+
+ ))}
+
+
+
+ {/* Expense categories */}
+
+
+
+ Gastos por Categoria
+
+
+
+ {totalStats.categoryExpenses.length > 0 ? (
+ totalStats.categoryExpenses.map((cat) => (
+
+
+ {cat.name}
+ R$ {cat.value.toFixed(2)}
+
+
+
+
+
+ ))
+ ) : (
+
+
+
+
+
Nenhuma despesa registrada
+
+ )}
+
+
+
+
+ ) : mainTab === 'EVENTS' ? (
filteredEvents.map((event) => {
const percent = event.stats.totalExpected > 0 ? (event.stats.totalPaid / event.stats.totalExpected) * 100 : 0
const isExpanded = expandedEventId === event.id
@@ -661,11 +787,11 @@ export function FinancialDashboard({ events, transactions, players, group, initi
{/* Date Header */}
- {new Date(date + 'T12:00:00').getDate()}
+ {mounted ? new Date(date + 'T12:00:00').getDate() : '--'}
- {new Date(date + 'T12:00:00').toLocaleDateString('pt-BR', { weekday: 'short', month: 'long', year: 'numeric' })}
+ {mounted ? new Date(date + 'T12:00:00').toLocaleDateString('pt-BR', { weekday: 'short', month: 'long', year: 'numeric' }) : '...'}
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index f75fba4..1d3e840 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -3,7 +3,7 @@
import { useState, useEffect } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
-import { Menu, X, Trophy, Home, Calendar, Users, Settings, LogOut, ChevronRight, Banknote, History, Receipt, Sparkles } from 'lucide-react'
+import { Menu, X, Trophy, Home, Calendar, Users, Settings, LogOut, ChevronRight, Banknote, History, Receipt, Sparkles, PieChart } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { clsx } from 'clsx'
@@ -32,6 +32,7 @@ export function MobileNav({ group }: { group: any }) {
href: '/dashboard/financial',
icon: Banknote,
subItems: [
+ { name: 'Resumo', href: '/dashboard/financial?tab=DASHBOARD', icon: PieChart },
{ name: 'Eventos', href: '/dashboard/financial?tab=EVENTS', icon: History },
{ name: 'Caixa', href: '/dashboard/financial?tab=TRANSACTIONS', icon: Receipt },
{ name: 'Relatórios', href: '/dashboard/financial?tab=REPORTS', icon: Sparkles },
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4a42df9..91bfe79 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -14,7 +14,8 @@ import {
Eye,
History,
Receipt,
- Sparkles
+ Sparkles,
+ PieChart
} from 'lucide-react'
import { clsx } from 'clsx'
@@ -31,6 +32,7 @@ export function Sidebar({ group }: { group: any }) {
href: '/dashboard/financial',
icon: Banknote,
subItems: [
+ { name: 'Resumo', href: '/dashboard/financial?tab=DASHBOARD', icon: PieChart },
{ name: 'Eventos', href: '/dashboard/financial?tab=EVENTS', icon: History },
{ name: 'Caixa', href: '/dashboard/financial?tab=TRANSACTIONS', icon: Receipt },
{ name: 'Relatórios', href: '/dashboard/financial?tab=REPORTS', icon: Sparkles },