erik/temfut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove remaining redundant items and sync mobile menu with financial sub-items

Browse Source
This commit is contained in:
Erik Silva
2026-02-04 19:57:20 -03:00
parent aaff3638bc
commit b2566af743
3 changed files with 56 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/(dashboard)/dashboard/financial/page.tsx
View File

@@ -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>

89
src/components/FinancialDashboard.tsx
View File

@@ -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",

39
src/components/MobileNav.tsx
View File

@@ -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,12 +110,14 @@ 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 (
<div key={item.href} className="space-y-1">
<Link
key={item.href}
href={item.href}
onClick={() => setIsOpen(false)}
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
@@ -115,8 +127,25 @@ export function MobileNav({ group }: { group: any }) {
>
<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" />}
{!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>
)}
</div>
)
})}