From b2566af74334b69eb45ca03c89db9ea137e9bccf Mon Sep 17 00:00:00 2001
From: Erik Silva <erik@stackbyte.cloud>
Date: Wed, 4 Feb 2026 19:57:20 -0300
Subject: [PATCH] fix: remove remaining redundant items and sync mobile menu
 with financial sub-items

---
 .../(dashboard)/dashboard/financial/page.tsx  | 12 ++-
 src/components/FinancialDashboard.tsx         | 89 +------------------
 src/components/MobileNav.tsx                  | 61 +++++++++----
 3 files changed, 56 insertions(+), 106 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/financial/page.tsx b/src/app/(dashboard)/dashboard/financial/page.tsx
index dee029b..c591695 100644
--- a/src/app/(dashboard)/dashboard/financial/page.tsx
+++ b/src/app/(dashboard)/dashboard/financial/page.tsx
@@ -19,8 +19,16 @@ export default async function FinancialPage({ searchParams }: FinancialPageProps
         <div className="max-w-5xl mx-auto space-y-8 pb-12">
             <header className="flex items-center justify-between">
                 <div className="space-y-2">
-                    <h2 className="text-3xl font-bold tracking-tight">Financeiro</h2>
-                    <p className="text-muted text-lg">Gerencie mensalidades, caixinha e arrecadações extras.</p>
+                    <h2 className="text-3xl font-bold tracking-tight">
+                        {tab === 'TRANSACTIONS' ? 'Fluxo de Caixa' : tab === 'REPORTS' ? 'Relatórios Financeiros' : 'Eventos Financeiros'}
+                    </h2>
+                    <p className="text-muted text-lg">
+                        {tab === 'TRANSACTIONS'
+                            ? 'Acompanhe as entradas e saídas do caixa do grupo.'
+                            : tab === 'REPORTS'
+                                ? 'Análise detalhada da saúde financeira do time.'
+                                : 'Gerencie mensalidades e arrecadações extras.'}
+                    </p>
                 </div>
             </header>
 
diff --git a/src/components/FinancialDashboard.tsx b/src/components/FinancialDashboard.tsx
index e53d7ea..48d76e5 100644
--- a/src/components/FinancialDashboard.tsx
+++ b/src/components/FinancialDashboard.tsx
@@ -292,45 +292,7 @@ export function FinancialDashboard({ events, transactions, players, group, initi
 
     return (
         <div className="space-y-8 pb-20">
-            {/* Stats Overview */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div className="ui-card p-6 bg-gradient-to-br from-surface-raised to-background border-primary/20">
-                    <div className="flex items-center gap-4">
-                        <div className="p-3 bg-primary/10 rounded-xl">
-                            <TrendingUp className="w-6 h-6 text-primary" />
-                        </div>
-                        <div>
-                            <p className="text-[10px] text-muted font-bold uppercase tracking-widest">Saldo em Caixa</p>
-                            <h3 className="text-2xl font-black text-foreground">R$ {totalStats.balance.toFixed(2)}</h3>
-                            <p className="text-[9px] text-muted font-bold uppercase mt-1">Total acumulado</p>
-                        </div>
-                    </div>
-                </div>
 
-                <div className="ui-card p-6 border-white/5">
-                    <div className="flex items-center gap-4">
-                        <div className="p-3 bg-secondary/10 rounded-xl">
-                            <Wallet className="w-6 h-6 text-secondary-foreground" />
-                        </div>
-                        <div>
-                            <p className="text-[10px] text-muted font-bold uppercase tracking-widest">Entradas (Mesas/Extras)</p>
-                            <h3 className="text-2xl font-black text-secondary-foreground">R$ {(totalStats.paid + totalStats.transIncome).toFixed(2)}</h3>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="ui-card p-6 border-red-500/20">
-                    <div className="flex items-center gap-4">
-                        <div className="p-3 bg-red-500/10 rounded-xl">
-                            <ArrowDownCircle className="w-6 h-6 text-red-500" />
-                        </div>
-                        <div>
-                            <p className="text-[10px] text-muted font-bold uppercase tracking-widest">Saídas / Despesas</p>
-                            <h3 className="text-2xl font-black text-red-500">R$ {totalStats.transExpense.toFixed(2)}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
 
             <div className="space-y-6">
                 <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
@@ -420,56 +382,7 @@ export function FinancialDashboard({ events, transactions, players, group, initi
                 </div>
             </div>
 
-            <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none border-b border-border/50">
-                {mainTab === 'EVENTS' ? (
-                    [
-                        { id: 'ALL', label: 'Todos' },
-                        { id: 'MONTHLY_FEE', label: 'Mensalidades' },
-                        { id: 'EXTRA_EVENT', label: 'Eventos Extras' }
-                    ].map((tab) => (
-                        <button
-                            key={tab.id}
-                            onClick={() => setActiveTab(tab.id as any)}
-                            className={clsx(
-                                "relative px-6 py-2.5 text-[10px] font-bold uppercase tracking-[0.2em] transition-all",
-                                activeTab === tab.id ? "text-primary" : "text-muted hover:text-foreground"
-                            )}
-                        >
-                            {tab.label}
-                            {activeTab === tab.id && (
-                                <motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
-                            )}
-                        </button>
-                    ))
-                ) : mainTab === 'TRANSACTIONS' ? (
-                    [
-                        { id: 'ALL', label: 'Histórico Completo' },
-                        { id: 'INCOME', label: 'Entradas' },
-                        { id: 'EXPENSE', label: 'Saídas' }
-                    ].map((tab) => (
-                        <button
-                            key={tab.id}
-                            onClick={() => setActiveTab(tab.id as any)}
-                            className={clsx(
-                                "relative px-6 py-2.5 text-[10px] font-bold uppercase tracking-[0.2em] transition-all",
-                                activeTab === tab.id ? "text-primary" : "text-muted hover:text-foreground"
-                            )}
-                        >
-                            {tab.label}
-                            {activeTab === tab.id && (
-                                <motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
-                            )}
-                        </button>
-                    ))
-                ) : (
-                    <div className="flex items-center gap-2 px-6 py-2.5 text-[10px] font-black uppercase tracking-[0.2em] text-primary">
-                        <Sparkles className="w-3 h-3" /> Resumo Inteligente
-                    </div>
-                )}
-                <div className="ml-auto text-[10px] font-bold text-muted bg-surface-raised px-3 py-1 rounded-full border border-border">
-                    {mainTab === 'EVENTS' ? filteredEvents.length : mainTab === 'TRANSACTIONS' ? filteredTransactions.length : '1'} REGISTROS
-                </div>
-            </div>
+
 
             <div className={clsx(
                 "grid gap-4 transition-all duration-500",
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 4c2f85d..f75fba4 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 } from 'lucide-react'
+import { Menu, X, Trophy, Home, Calendar, Users, Settings, LogOut, ChevronRight, Banknote, History, Receipt, Sparkles } from 'lucide-react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { clsx } from 'clsx'
 
@@ -27,6 +27,16 @@ export function MobileNav({ group }: { group: any }) {
         { name: 'Início', href: '/dashboard', icon: Home },
         { name: 'Partidas', href: '/dashboard/matches', icon: Calendar },
         { name: 'Jogadores', href: '/dashboard/players', icon: Users },
+        {
+            name: 'Financeiro',
+            href: '/dashboard/financial',
+            icon: Banknote,
+            subItems: [
+                { 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 },
+            ]
+        },
         { name: 'Configurações', href: '/dashboard/settings', icon: Settings },
     ]
 
@@ -100,23 +110,42 @@ export function MobileNav({ group }: { group: any }) {
                             <nav className="flex-1 p-6 space-y-2 overflow-y-auto">
                                 <p className="text-[10px] font-bold text-muted uppercase tracking-[0.2em] px-4 mb-4">Menu Principal</p>
                                 {navItems.map((item) => {
-                                    const isActive = pathname === item.href
+                                    const isActive = pathname === item.href || (item.subItems && pathname.startsWith(item.href))
+                                    const hasSubItems = item.subItems && item.subItems.length > 0
+
                                     return (
-                                        <Link
-                                            key={item.href}
-                                            href={item.href}
-                                            onClick={() => setIsOpen(false)}
-                                            className={clsx(
-                                                "flex items-center gap-4 px-4 py-4 rounded-xl text-base font-medium transition-all duration-200 group relative overflow-hidden",
-                                                isActive
-                                                    ? "bg-primary text-background shadow-lg shadow-primary/20"
-                                                    : "text-muted hover:text-foreground hover:bg-surface border border-transparent hover:border-white/5"
+                                        <div key={item.href} className="space-y-1">
+                                            <Link
+                                                href={item.href}
+                                                onClick={() => !hasSubItems && setIsOpen(false)}
+                                                className={clsx(
+                                                    "flex items-center gap-4 px-4 py-4 rounded-xl text-base font-medium transition-all duration-200 group relative overflow-hidden",
+                                                    isActive
+                                                        ? "bg-primary text-background shadow-lg shadow-primary/20"
+                                                        : "text-muted hover:text-foreground hover:bg-surface border border-transparent hover:border-white/5"
+                                                )}
+                                            >
+                                                <item.icon className={clsx("w-5 h-5", isActive ? "text-background" : "text-muted group-hover:text-primary transition-colors")} />
+                                                <span className="flex-1">{item.name}</span>
+                                                {!isActive && !hasSubItems && <ChevronRight className="w-4 h-4 text-white/20 group-hover:text-white/50" />}
+                                            </Link>
+
+                                            {hasSubItems && (isActive || pathname.startsWith(item.href)) && (
+                                                <div className="ml-12 space-y-1 border-l border-white/5 pl-4 py-2">
+                                                    {item.subItems!.map((sub) => (
+                                                        <Link
+                                                            key={sub.href}
+                                                            href={sub.href}
+                                                            onClick={() => setIsOpen(false)}
+                                                            className="flex items-center gap-3 py-3 text-sm font-bold uppercase tracking-wider text-muted hover:text-primary transition-colors"
+                                                        >
+                                                            <sub.icon className="w-4 h-4" />
+                                                            <span>{sub.name}</span>
+                                                        </Link>
+                                                    ))}
+                                                </div>
                                             )}
-                                        >
-                                            <item.icon className={clsx("w-5 h-5", isActive ? "text-background" : "text-muted group-hover:text-primary transition-colors")} />
-                                            <span className="flex-1">{item.name}</span>
-                                            {!isActive && <ChevronRight className="w-4 h-4 text-white/20 group-hover:text-white/50" />}
-                                        </Link>
+                                        </div>
                                     )
                                 })}