From aaff3638bc1dcce6108c236dd151cb53ce0ba51a Mon Sep 17 00:00:00 2001
From: Erik Silva <erik@stackbyte.cloud>
Date: Wed, 4 Feb 2026 19:43:21 -0300
Subject: [PATCH] refactor: move financial sub-menus to sidebar and simplify
 dashboard header

---
 .../(dashboard)/dashboard/financial/page.tsx  |   8 +-
 src/components/FinancialDashboard.tsx         | 149 ++++++++----------
 src/components/Sidebar.tsx                    |  62 ++++++--
 3 files changed, 116 insertions(+), 103 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/financial/page.tsx b/src/app/(dashboard)/dashboard/financial/page.tsx
index 4d0b263..dee029b 100644
--- a/src/app/(dashboard)/dashboard/financial/page.tsx
+++ b/src/app/(dashboard)/dashboard/financial/page.tsx
@@ -2,7 +2,12 @@ import { getActiveGroup } from '@/lib/auth'
 import { getFinancialEvents, getTransactions } from '@/actions/finance'
 import { FinancialDashboard } from '@/components/FinancialDashboard'
 
-export default async function FinancialPage() {
+interface FinancialPageProps {
+    searchParams: Promise<{ tab?: string }>
+}
+
+export default async function FinancialPage({ searchParams }: FinancialPageProps) {
+    const { tab } = await searchParams
     const group = await getActiveGroup()
     if (!group) return null
 
@@ -24,6 +29,7 @@ export default async function FinancialPage() {
                 transactions={transactions}
                 players={group.players}
                 group={group}
+                initialTab={(tab as any) || 'EVENTS'}
             />
         </div>
     )
diff --git a/src/components/FinancialDashboard.tsx b/src/components/FinancialDashboard.tsx
index 9fd14fd..e53d7ea 100644
--- a/src/components/FinancialDashboard.tsx
+++ b/src/components/FinancialDashboard.tsx
@@ -19,9 +19,10 @@ interface FinancialPageProps {
     transactions: any[]
     players: any[]
     group: any
+    initialTab: 'EVENTS' | 'TRANSACTIONS' | 'REPORTS'
 }
 
-export function FinancialDashboard({ events, transactions, players, group }: FinancialPageProps) {
+export function FinancialDashboard({ events, transactions, players, group, initialTab }: FinancialPageProps) {
     const router = useRouter()
     const [mounted, setMounted] = React.useState(false)
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
@@ -47,7 +48,12 @@ export function FinancialDashboard({ events, transactions, players, group }: Fin
     const [privacyPendingId, setPrivacyPendingId] = useState<string | null>(null)
 
     // Filter & View State
-    const [mainTab, setMainTab] = useState<'EVENTS' | 'TRANSACTIONS' | 'REPORTS'>('EVENTS')
+    const [mainTab, setMainTab] = useState<'EVENTS' | 'TRANSACTIONS' | 'REPORTS'>(initialTab)
+
+    // Sync state when prop changes (from sidebar clicks)
+    React.useEffect(() => {
+        setMainTab(initialTab)
+    }, [initialTab])
     const [searchQuery, setSearchQuery] = useState('')
     const [activeTab, setActiveTab] = useState<'ALL' | 'MONTHLY_FEE' | 'EXTRA_EVENT' | 'INCOME' | 'EXPENSE'>('ALL')
     const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
@@ -328,56 +334,25 @@ export function FinancialDashboard({ events, transactions, players, group }: Fin
 
             <div className="space-y-6">
                 <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
-                    <div className="flex bg-surface-raised border border-border p-1 rounded-2xl w-fit overflow-hidden scrollbar-none max-w-full overflow-x-auto">
-                        <button
-                            onClick={() => { setMainTab('EVENTS'); setActiveTab('ALL'); setSelectedIds(new Set()); }}
-                            className={clsx(
-                                "px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shrink-0",
-                                mainTab === 'EVENTS' ? "bg-primary text-background shadow-lg shadow-primary/20" : "text-muted hover:text-white"
-                            )}
-                        >
-                            <History className="w-4 h-4 inline-block mr-2" /> Eventos
-                        </button>
-                        <button
-                            onClick={() => { setMainTab('TRANSACTIONS'); setActiveTab('ALL'); setSelectedIds(new Set()); }}
-                            className={clsx(
-                                "px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shrink-0",
-                                mainTab === 'TRANSACTIONS' ? "bg-primary text-background shadow-lg shadow-primary/20" : "text-muted hover:text-white"
-                            )}
-                        >
-                            <Receipt className="w-4 h-4 inline-block mr-2" /> Caixa
-                        </button>
-                        <button
-                            onClick={() => { setMainTab('REPORTS'); setActiveTab('ALL'); setSelectedIds(new Set()); }}
-                            className={clsx(
-                                "px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shrink-0",
-                                mainTab === 'REPORTS' ? "bg-primary text-background shadow-lg shadow-primary/20" : "text-muted hover:text-white"
-                            )}
-                        >
-                            <Sparkles className="w-4 h-4 inline-block mr-2" /> Relatórios
-                        </button>
-                    </div>
-
-                    <div className="flex flex-col sm:flex-row items-center gap-4">
-                        {selectedIds.size > 0 && (
+                    <div className="flex-1 w-full lg:w-auto">
+                        {selectedIds.size > 0 ? (
                             <div className="flex items-center gap-3 animate-in fade-in slide-in-from-top-1">
-                                <div className="hidden sm:flex items-center px-3 py-1 bg-primary/10 border border-primary/20 rounded-full">
+                                <div className="flex items-center px-3 py-1 bg-primary/10 border border-primary/20 rounded-full">
                                     <span className="text-[10px] font-black uppercase text-primary">
                                         {selectedIds.size} {selectedIds.size === 1 ? 'SELECIONADO' : 'SELECIONADOS'}
                                     </span>
                                 </div>
                                 <button
                                     onClick={handleDeleteSelected}
-                                    className="ui-button bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white border-red-500/20 h-10 w-full sm:w-auto shadow-lg shadow-red-500/10"
+                                    className="ui-button bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white border-red-500/20 h-10 shadow-lg shadow-red-500/10 px-4"
                                 >
                                     <Trash2 className="w-4 h-4 mr-2" /> Excluir
                                 </button>
                             </div>
-                        )}
-                        {selectedIds.size === 0 && (
-                            <>
+                        ) : (
+                            <div className="flex flex-col sm:flex-row items-center gap-4 w-full">
                                 {mainTab !== 'REPORTS' && (
-                                    <div className="relative group w-full sm:w-64">
+                                    <div className="relative group w-full sm:flex-1 max-w-md">
                                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted group-focus-within:text-primary transition-colors" />
                                         <input
                                             value={searchQuery}
@@ -388,56 +363,58 @@ export function FinancialDashboard({ events, transactions, players, group }: Fin
                                     </div>
                                 )}
 
-                                <div className="flex p-1 bg-surface-raised border border-border rounded-lg w-full sm:w-auto">
-                                    <button
-                                        onClick={() => setViewMode('grid')}
-                                        className={clsx("p-2 rounded-md transition-all", viewMode === 'grid' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
-                                    >
-                                        <LayoutGrid className="w-4 h-4" />
-                                    </button>
-                                    <button
-                                        onClick={() => setViewMode('list')}
-                                        className={clsx("p-2 rounded-md transition-all", viewMode === 'list' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
-                                    >
-                                        <List className="w-4 h-4" />
-                                    </button>
-                                </div>
+                                <div className="flex items-center gap-4 w-full sm:w-auto">
+                                    <div className="flex p-1 bg-surface-raised border border-border rounded-lg">
+                                        <button
+                                            onClick={() => setViewMode('grid')}
+                                            className={clsx("p-2 rounded-md transition-all", viewMode === 'grid' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
+                                        >
+                                            <LayoutGrid className="w-4 h-4" />
+                                        </button>
+                                        <button
+                                            onClick={() => setViewMode('list')}
+                                            className={clsx("p-2 rounded-md transition-all", viewMode === 'list' ? "bg-white/10 text-primary shadow-sm" : "text-muted")}
+                                        >
+                                            <List className="w-4 h-4" />
+                                        </button>
+                                    </div>
 
-                                <div className="flex items-center gap-2 w-full sm:w-auto">
-                                    <button
-                                        onClick={() => setIsFilterModalOpen(true)}
-                                        className={clsx(
-                                            "p-2.5 bg-surface-raised border rounded-xl transition-all shadow-lg",
-                                            (startDate || endDate || activeTab !== 'ALL' || filterCategory !== 'ALL')
-                                                ? "border-primary text-primary bg-primary/10"
-                                                : "border-border text-muted hover:text-primary hover:border-primary/30"
+                                    <div className="flex items-center gap-2">
+                                        <button
+                                            onClick={() => setIsFilterModalOpen(true)}
+                                            className={clsx(
+                                                "p-2.5 bg-surface-raised border rounded-xl transition-all shadow-lg",
+                                                (startDate || endDate || activeTab !== 'ALL' || filterCategory !== 'ALL')
+                                                    ? "border-primary text-primary bg-primary/10"
+                                                    : "border-border text-muted hover:text-primary hover:border-primary/30"
+                                            )}
+                                            title="Filtros"
+                                        >
+                                            <Filter className="w-5 h-5" />
+                                        </button>
+
+                                        {mainTab === 'EVENTS' && (
+                                            <button
+                                                onClick={() => setIsSettingsModalOpen(true)}
+                                                className="p-2.5 bg-surface-raised border border-border rounded-xl text-muted hover:text-primary hover:border-primary/30 transition-all shadow-lg shadow-black/20"
+                                                title="Configurações de Privacidade"
+                                            >
+                                                <Settings className="w-5 h-5" />
+                                            </button>
                                         )}
-                                        title="Filtros"
-                                    >
-                                        <Filter className="w-5 h-5" />
-                                    </button>
 
-                                    {mainTab === 'EVENTS' && (
-                                        <button
-                                            onClick={() => setIsSettingsModalOpen(true)}
-                                            className="p-2.5 bg-surface-raised border border-border rounded-xl text-muted hover:text-primary hover:border-primary/30 transition-all shadow-lg shadow-black/20"
-                                            title="Configurações de Privacidade"
-                                        >
-                                            <Settings className="w-5 h-5" />
-                                        </button>
-                                    )}
-
-                                    {mainTab !== 'REPORTS' && (
-                                        <button
-                                            onClick={() => mainTab === 'EVENTS' ? setIsCreateModalOpen(true) : setIsCreateTransactionModalOpen(true)}
-                                            className="ui-button flex-1 sm:flex-initial shadow-lg shadow-primary/20 h-10 px-6 font-black"
-                                        >
-                                            <Plus className="w-4 h-4 mr-2" />
-                                            {mainTab === 'EVENTS' ? 'Novo Evento' : 'Registrar'}
-                                        </button>
-                                    )}
+                                        {mainTab !== 'REPORTS' && (
+                                            <button
+                                                onClick={() => mainTab === 'EVENTS' ? setIsCreateModalOpen(true) : setIsCreateTransactionModalOpen(true)}
+                                                className="ui-button shadow-lg shadow-primary/20 h-10 px-6 font-black whitespace-nowrap"
+                                            >
+                                                <Plus className="w-4 h-4 mr-2" />
+                                                {mainTab === 'EVENTS' ? 'Novo Evento' : 'Registrar'}
+                                            </button>
+                                        )}
+                                    </div>
                                 </div>
-                            </>
+                            </div>
                         )}
                     </div>
                 </div>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4c5eb69..4a42df9 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -11,7 +11,10 @@ import {
     Search,
     Banknote,
     LogOut,
-    Eye
+    Eye,
+    History,
+    Receipt,
+    Sparkles
 } from 'lucide-react'
 import { clsx } from 'clsx'
 
@@ -23,7 +26,16 @@ export function Sidebar({ 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 },
+        {
+            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: 'Agenda Pública', href: '/agenda', icon: Eye },
         { name: 'Configurações', href: '/dashboard/settings', icon: Settings },
     ]
@@ -58,21 +70,40 @@ export function Sidebar({ group }: { group: any }) {
             <nav className="flex-1 px-3 py-2 space-y-1">
                 <p className="text-[10px] font-bold text-muted uppercase tracking-widest px-3 mb-2 mt-4">Navegação</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}
-                            className={clsx(
-                                "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all",
-                                isActive
-                                    ? "bg-primary/5 text-primary border border-primary/20"
-                                    : "text-muted hover:text-foreground hover:bg-surface-raised"
+                        <div key={item.href} className="space-y-1">
+                            <Link
+                                href={item.href}
+                                className={clsx(
+                                    "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all",
+                                    isActive
+                                        ? "bg-primary/5 text-primary border border-primary/20"
+                                        : "text-muted hover:text-foreground hover:bg-surface-raised"
+                                )}
+                            >
+                                <item.icon className={clsx("w-4 h-4", isActive ? "text-primary" : "text-muted")} />
+                                <span>{item.name}</span>
+                            </Link>
+
+                            {hasSubItems && (isActive || pathname.startsWith(item.href)) && (
+                                <div className="ml-9 space-y-1 border-l border-border pl-2">
+                                    {item.subItems!.map((sub) => {
+                                        return (
+                                            <Link
+                                                key={sub.href}
+                                                href={sub.href}
+                                                className="flex items-center gap-2 px-2 py-1.5 rounded-md text-[11px] font-bold uppercase tracking-wider text-muted hover:text-primary transition-colors"
+                                            >
+                                                <span>{sub.name}</span>
+                                            </Link>
+                                        )
+                                    })}
+                                </div>
                             )}
-                        >
-                            <item.icon className={clsx("w-4 h-4", isActive ? "text-primary" : "text-muted")} />
-                            <span>{item.name}</span>
-                        </Link>
+                        </div>
                     )
                 })}
             </nav>
@@ -106,4 +137,3 @@ export function Sidebar({ group }: { group: any }) {
         </aside>
     )
 }
-