ealmeida/DashDescomplicar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add financial panel, compact services list, add Syncthing

Browse Source 
- New /financial page with sales/expenses cards, monthly bar chart and
  expense distribution pie chart (Recharts)
- New API endpoint GET /api/financial with queries on tblinvoices and
  tblexpenses
- Compact services grid (2-col dots layout) in Monitor page
- Add Syncthing to critical services monitoring
- Add Financeiro nav link to Dashboard, Monitor and Financial headers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Emanuel Almeida
2026-02-07 22:50:12 +00:00
parent 86ad4a64be
commit 12e1552d02
7 changed files with 478 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/pages/Financial.tsx Normal file
View File

@@ -0,0 +1,309 @@
import { useState, useEffect, useCallback } from 'react'
import { motion } from 'framer-motion'
import { Link } from 'react-router-dom'
import {
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
PieChart, Pie, Cell,
} from 'recharts'
import {
Zap,
RefreshCw,
ArrowLeft,
TrendingUp,
TrendingDown,
DollarSign,
Receipt,
PiggyBank,
Activity,
LayoutDashboard,
} from 'lucide-react'
interface FinancialData {
vendas_mes: number
vendas_ano: number
despesas_mes: number
despesas_ano: number
lucro_mes: number
lucro_ano: number
categorias: { name: string; value: number }[]
evolucao: { mes: string; receita: number; despesa: number }[]
}
const containerVariants = {
hidden: { opacity: 0 },
show: { opacity: 1, transition: { staggerChildren: 0.05 } }
}
const itemVariants = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}
const PIE_COLORS = [
'#10b981', '#8b5cf6', '#f59e0b', '#3b82f6', '#ef4444',
'#06b6d4', '#ec4899', '#84cc16', '#f97316', '#6366f1',
'#14b8a6', '#e879f9', '#a3e635', '#fb923c', '#818cf8',
]
const formatEUR = (v: number) => `${v.toLocaleString('pt-PT', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}€`
const formatMesLabel = (mes: string) => {
const [, m] = mes.split('-')
const nomes = ['', 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
return nomes[parseInt(m)] || mes
}
const StatCard = ({ label, value, icon: Icon, color, sub }: {
label: string; value: string; icon: React.ElementType; color: string; sub?: string
}) => (
<motion.div variants={itemVariants} className="glass-card p-6">
<div className="flex items-center justify-between mb-3">
<span className="text-sm text-zinc-400">{label}</span>
<div className={`w-10 h-10 rounded-xl ${color} flex items-center justify-center`}>
<Icon className="w-5 h-5 text-white" />
</div>
</div>
<div className="text-3xl font-bold text-white">{value}</div>
{sub && <div className="text-xs text-zinc-500 mt-1">{sub}</div>}
</motion.div>
)
const CustomTooltip = ({ active, payload, label }: any) => {
if (!active || !payload?.length) return null
return (
<div className="bg-zinc-900 border border-white/10 rounded-xl px-4 py-3 shadow-xl">
<p className="text-sm font-medium text-white mb-1">{label}</p>
{payload.map((p: any, i: number) => (
<p key={i} className="text-xs" style={{ color: p.color }}>
{p.name}: {formatEUR(p.value)}
</p>
))}
</div>
)
}
export default function Financial() {
const [data, setData] = useState<FinancialData | null>(null)
const [loading, setLoading] = useState(true)
const [refreshing, setRefreshing] = useState(false)
const fetchData = useCallback(async () => {
setRefreshing(true)
try {
const response = await fetch('/api/financial')
if (!response.ok) throw new Error('Failed')
const json = await response.json()
setData(json)
} catch {
console.error('Failed to fetch financial data')
} finally {
setLoading(false)
setRefreshing(false)
}
}, [])
useEffect(() => { fetchData() }, [fetchData])
if (loading) {
return (
<div className="min-h-screen bg-mesh flex items-center justify-center">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
<DollarSign className="w-12 h-12 text-brand-400 mx-auto mb-4 animate-pulse" />
<p className="text-zinc-400">A carregar dados financeiros...</p>
</motion.div>
</div>
)
}
if (!data) return null
const lucroColor = data.lucro_ano >= 0 ? 'text-emerald-400 bg-emerald-500/20' : 'text-red-400 bg-red-500/20'
const lucroLabel = data.lucro_ano >= 0 ? 'Lucro' : 'Prejuizo'
// Format evolution data for chart
const chartData = data.evolucao.map(e => ({
mes: formatMesLabel(e.mes),
Receita: e.receita,
Despesa: e.despesa,
}))
return (
<div className="min-h-screen bg-mesh">
<div className="bg-grid min-h-screen">
{/* Header */}
<header className="sticky top-0 z-50 border-b border-white/5 bg-[#0a0a0f]/90 backdrop-blur-2xl">
<div className="max-w-[1600px] mx-auto px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<motion.div
whileHover={{ scale: 1.05 }}
className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30"
>
<Zap className="w-6 h-6 text-white" />
</motion.div>
<div>
<h1 className="text-xl font-bold text-white tracking-tight">Financeiro</h1>
<p className="text-xs text-zinc-500">Vendas e Despesas {new Date().getFullYear()}</p>
</div>
</div>
<div className="flex items-center gap-4">
<span className={`px-4 py-2 rounded-full text-sm font-semibold ${lucroColor}`}>
{lucroLabel}: {formatEUR(Math.abs(data.lucro_ano))}
</span>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={fetchData}
disabled={refreshing}
className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
>
<RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
</motion.button>
<Link
to="/monitor"
className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
>
<Activity className="w-4 h-4" />
Monitor
</Link>
<Link
to="/"
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
>
<ArrowLeft className="w-4 h-4" />
<span className="hidden md:inline">Dashboard</span>
</Link>
</div>
</div>
</div>
</header>
{/* Main Content */}
<main className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
<motion.div variants={containerVariants} initial="hidden" animate="show">
{/* Summary Cards */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
<StatCard
label="Vendas Mes"
value={formatEUR(data.vendas_mes)}
icon={TrendingUp}
color="bg-emerald-500/20"
sub={`Acumulado: ${formatEUR(data.vendas_ano)}`}
/>
<StatCard
label="Vendas Ano"
value={formatEUR(data.vendas_ano)}
icon={DollarSign}
color="bg-emerald-600/20"
/>
<StatCard
label="Despesas Mes"
value={formatEUR(data.despesas_mes)}
icon={Receipt}
color="bg-red-500/20"
sub={`Acumulado: ${formatEUR(data.despesas_ano)}`}
/>
<StatCard
label="Despesas Ano"
value={formatEUR(data.despesas_ano)}
icon={TrendingDown}
color="bg-red-600/20"
/>
</div>
{/* Lucro cards */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
<motion.div variants={itemVariants} className="glass-card p-6">
<div className="flex items-center gap-3 mb-2">
<PiggyBank className={`w-6 h-6 ${data.lucro_mes >= 0 ? 'text-emerald-400' : 'text-red-400'}`} />
<span className="text-sm text-zinc-400">Resultado Mensal</span>
</div>
<div className={`text-4xl font-bold ${data.lucro_mes >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{data.lucro_mes >= 0 ? '+' : ''}{formatEUR(data.lucro_mes)}
</div>
</motion.div>
<motion.div variants={itemVariants} className="glass-card p-6">
<div className="flex items-center gap-3 mb-2">
<PiggyBank className={`w-6 h-6 ${data.lucro_ano >= 0 ? 'text-emerald-400' : 'text-red-400'}`} />
<span className="text-sm text-zinc-400">Resultado Anual</span>
</div>
<div className={`text-4xl font-bold ${data.lucro_ano >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{data.lucro_ano >= 0 ? '+' : ''}{formatEUR(data.lucro_ano)}
</div>
</motion.div>
</div>
{/* Charts */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
{/* Bar Chart - Monthly Evolution */}
<motion.div variants={itemVariants} className="glass-card p-6 lg:col-span-2">
<h3 className="text-sm font-semibold text-white mb-6 uppercase tracking-wide flex items-center gap-2">
<LayoutDashboard className="w-4 h-4 text-brand-400" />
Evolucao Mensal
</h3>
<div className="h-[340px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={chartData} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
<XAxis dataKey="mes" tick={{ fill: '#71717a', fontSize: 12 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} />
<YAxis tick={{ fill: '#71717a', fontSize: 12 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} tickFormatter={(v) => `${v}€`} />
<Tooltip content={<CustomTooltip />} />
<Legend wrapperStyle={{ fontSize: 12, color: '#a1a1aa' }} />
<Bar dataKey="Receita" fill="#10b981" radius={[4, 4, 0, 0]} />
<Bar dataKey="Despesa" fill="#ef4444" radius={[4, 4, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>
</motion.div>
{/* Pie Chart - Expense Distribution */}
<motion.div variants={itemVariants} className="glass-card p-6">
<h3 className="text-sm font-semibold text-white mb-6 uppercase tracking-wide flex items-center gap-2">
<Receipt className="w-4 h-4 text-brand-400" />
Despesas por Categoria
</h3>
<div className="h-[240px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={data.categorias.slice(0, 10)}
cx="50%"
cy="50%"
innerRadius={50}
outerRadius={90}
dataKey="value"
stroke="none"
>
{data.categorias.slice(0, 10).map((_, i) => (
<Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />
))}
</Pie>
<Tooltip
formatter={(value: number | undefined) => formatEUR(value || 0)}
contentStyle={{ background: '#18181b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, fontSize: 12 }}
itemStyle={{ color: '#e4e4e7' }}
/>
</PieChart>
</ResponsiveContainer>
</div>
{/* Legend */}
<div className="space-y-1.5 mt-2 max-h-[160px] overflow-y-auto scrollbar-thin">
{data.categorias.slice(0, 10).map((cat, i) => (
<div key={i} className="flex items-center justify-between text-xs">
<div className="flex items-center gap-2 min-w-0">
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ background: PIE_COLORS[i % PIE_COLORS.length] }} />
<span className="text-zinc-400 truncate">{cat.name}</span>
</div>
<span className="text-white font-medium ml-2">{formatEUR(cat.value)}</span>
</div>
))}
</div>
</motion.div>
</div>
</motion.div>
</main>
</div>
</div>
)
}