Auto-deploy: 2026-01-13 13:03:22 | 2 arquivo(s) alterado(s)
This commit is contained in:
parent
e3f371ad11
commit
9656a9995a
|
|
@ -3,35 +3,18 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|||
import { FineCard } from '../components/FineCard';
|
||||
import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';
|
||||
import { TrendingDown, Calendar, ArrowRightLeft } from 'lucide-react';
|
||||
import { MOCK_EXPENSES_COMPARISON, MOCK_EXPENSES_CATEGORIES } from '../mockData';
|
||||
|
||||
export const ExpensesView = () => {
|
||||
// Dados Mock para os gráficos
|
||||
const comparisonData = [
|
||||
{ name: 'Jan', planejado: 4500, executado: 4800 },
|
||||
{ name: 'Fev', planejado: 5200, executado: 5100 },
|
||||
{ name: 'Mar', planejado: 4800, executado: 5500 },
|
||||
{ name: 'Abr', planejado: 6100, executado: 5900 },
|
||||
{ name: 'Mai', planejado: 5500, executado: 6200 },
|
||||
{ name: 'Jun', planejado: 5800, executado: 5800 },
|
||||
];
|
||||
|
||||
const expensesByCat = [
|
||||
{ name: 'Infraestrutura', value: 12500 },
|
||||
{ name: 'Marketing', value: 8700 },
|
||||
{ name: 'RH / Salários', value: 45000 },
|
||||
{ name: 'Softwares', value: 3200 },
|
||||
{ name: 'Outros', value: 1500 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="workspace-theme space-y-6 p-6">
|
||||
<header className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Saídas</h1>
|
||||
<h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Financeiro / Saídas</h1>
|
||||
<p className="text-slate-500 text-sm">Planejamento e controle de fluxo de caixa negativo</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex items-center gap-2 bg-white dark:bg-[#1b1b1b] px-4 py-2 rounded-lg border border-slate-200 dark:border-[#333] text-sm font-bold text-slate-600 dark:text-stone-300">
|
||||
<div className="flex items-center gap-2 bg-white dark:bg-[#1b1b1b] px-4 py-2 rounded-lg border border-slate-200 dark:border-[#333] text-sm font-bold text-slate-600 dark:text-stone-300 shadow-sm">
|
||||
<Calendar size={18} className="text-[var(--workspace-sec-1-light)]" />
|
||||
JUNHO / 2026
|
||||
</div>
|
||||
|
|
@ -43,19 +26,20 @@ export const ExpensesView = () => {
|
|||
<DashboardKPICard
|
||||
label="Total Planejado"
|
||||
value="R$ 58.450,00"
|
||||
color="var(--workspace-sec-5-light)"
|
||||
color="orange"
|
||||
/>
|
||||
<DashboardKPICard
|
||||
label="Total Executado"
|
||||
value="R$ 60.120,45"
|
||||
trend="+2.8%"
|
||||
color="#ef4444"
|
||||
trendDirection="down"
|
||||
color="red"
|
||||
/>
|
||||
<DashboardKPICard
|
||||
label="Diferença (Variação)"
|
||||
label="Diferença"
|
||||
value="R$ -1.670,45"
|
||||
color="var(--workspace-sec-3-light)"
|
||||
icon={<TrendingDown size={20} />}
|
||||
color="blue"
|
||||
icon={TrendingDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,7 +49,7 @@ export const ExpensesView = () => {
|
|||
<CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-slate-50 dark:border-[#2a2a2a]">
|
||||
<div>
|
||||
<CardTitle className="text-sm font-bold text-slate-600 dark:text-stone-300 uppercase tracking-widest">Planejado vs Executado</CardTitle>
|
||||
<p className="text-[10px] text-slate-400">Histórico de variação mensal</p>
|
||||
<p className="text-[10px] text-slate-400">Histórico de variação mensal (Financeiro)</p>
|
||||
</div>
|
||||
<ArrowRightLeft size={18} className="text-slate-300" />
|
||||
</CardHeader>
|
||||
|
|
@ -74,26 +58,32 @@ export const ExpensesView = () => {
|
|||
title=""
|
||||
height={300}
|
||||
type="bar"
|
||||
data={comparisonData.map(d => ({ name: d.name, planejado: d.planejado, executado: d.executado }))}
|
||||
data={MOCK_EXPENSES_COMPARISON}
|
||||
dataKey="executado"
|
||||
colors={['#22bb6c', '#003153']}
|
||||
colors={['#003153', '#22bb6c']}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Gráfico de Categorias */}
|
||||
<FineCard
|
||||
title="Saídas por Categoria"
|
||||
data={expensesByCat}
|
||||
title="Saídas por Categoria (Jun/26)"
|
||||
data={MOCK_EXPENSES_CATEGORIES}
|
||||
height={380}
|
||||
colors={['#003153', '#22bb6c', '#22c0a3', '#26b1c7', '#285d2a']}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tabela de Lançamentos (Futuro) */}
|
||||
{/* Tabela de Lançamentos (Mock) */}
|
||||
<Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
|
||||
<div className="p-6 text-center text-slate-400 text-sm italic">
|
||||
O detalhamento completo dos lançamentos financeiros via ExcelTable será integrado nesta seção.
|
||||
<div className="p-12 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-slate-50 dark:bg-white/5 rounded-full mb-4">
|
||||
<ArrowRightLeft size={32} className="text-slate-300" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-700 dark:text-stone-200">Lançamentos Financeiros</h3>
|
||||
<p className="text-slate-400 text-sm max-w-md mx-auto mt-2">
|
||||
A integração completa com o ExcelTable permitirá visualizar cada nota fiscal, boleto e pix de saída individualmente.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Users, FileText, Briefcase, Plus, Search } from 'lucide-react';
|
||||
import { Users, FileText, Briefcase, Plus, Search, TrendingUp } from 'lucide-react';
|
||||
import ExcelTable from '@/features/prafrot/components/ExcelTable';
|
||||
import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';
|
||||
import { MOCK_CLIENTS, MOCK_BOLETOS, MOCK_SERVICES } from '../mockData';
|
||||
|
||||
export const IncomesView = () => {
|
||||
const [activeTab, setActiveTab] = useState('boletos');
|
||||
|
||||
// Dados Mock para demonstração
|
||||
const kpis = [
|
||||
{ label: 'A Receber', value: 'R$ 13.028,88', trend: '+12%', color: 'var(--workspace-sec-3-light)' },
|
||||
{ label: 'Em Atraso', value: 'R$ 5.075,20', trend: '-5%', color: '#ef4444' },
|
||||
{ label: 'Recebido', value: 'R$ 21.925,33', trend: '+8%', color: 'var(--workspace-sec-1-light)' },
|
||||
{ label: 'Total Faturado', value: 'R$ 40.029,41', trend: '+15%', color: 'var(--workspace-sec-5-light)' },
|
||||
{ label: 'A Receber', value: 'R$ 38.028,88', trend: '+12%', color: 'blue', icon: FileText },
|
||||
{ label: 'Em Atraso', value: 'R$ 8.900,20', trend: '-5%', color: 'red', icon: TrendingUp },
|
||||
{ label: 'Recebido', value: 'R$ 12.300,00', trend: '+8%', color: 'green', icon: Users },
|
||||
{ label: 'Total Faturado', value: 'R$ 59.229,08', trend: '+15%', color: 'orange', icon: Briefcase },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="workspace-theme space-y-6 p-6">
|
||||
<header className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Entradas</h1>
|
||||
<p className="text-slate-500 text-sm">Gerenciamento de faturamento e recebíveis</p>
|
||||
<h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Financeiro / Entradas</h1>
|
||||
<p className="text-slate-500 text-sm">Gerenciamento de faturamento e recebíveis (Dados de Teste)</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button className="flex items-center gap-2 bg-[var(--workspace-sec-5-light)] text-white px-4 py-2 rounded-lg font-bold text-sm shadow-lg hover:brightness-110 transition-all">
|
||||
<button className="flex items-center gap-2 bg-[var(--workspace-sec-5-light)] text-white px-4 py-2 rounded-xl font-bold text-sm shadow-lg hover:brightness-110 transition-all hover:scale-105 active:scale-95">
|
||||
<Plus size={18} />
|
||||
NOVA ENTRADA
|
||||
NOVA RECEITA
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -40,64 +40,96 @@ export const IncomesView = () => {
|
|||
value={kpi.value}
|
||||
trend={kpi.trend}
|
||||
color={kpi.color}
|
||||
icon={kpi.icon}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
|
||||
<Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-2xl overflow-hidden border border-slate-100 dark:border-white/5">
|
||||
<Tabs defaultValue="boletos" className="w-full" onValueChange={setActiveTab}>
|
||||
<div className="px-6 pt-4 border-b border-slate-100 dark:border-[#2a2a2a] flex justify-between items-center bg-slate-50/50 dark:bg-[#1e1e1e]">
|
||||
<TabsList className="bg-transparent gap-6 h-12">
|
||||
<div className="px-6 pt-4 border-b border-slate-100 dark:border-[#2a2a2a] flex justify-between items-center bg-slate-50/50 dark:bg-[#1e1e1e]/50">
|
||||
<TabsList className="bg-transparent gap-8 h-12">
|
||||
<TabsTrigger
|
||||
value="boletos"
|
||||
className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
|
||||
className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
|
||||
>
|
||||
<FileText size={16} className="mr-2" />
|
||||
Boletos
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText size={16} />
|
||||
Boletos
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="clientes"
|
||||
className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
|
||||
className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
|
||||
>
|
||||
<Users size={16} className="mr-2" />
|
||||
Clientes
|
||||
<div className="flex items-center gap-2">
|
||||
<Users size={16} />
|
||||
Clientes
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="servicos"
|
||||
className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
|
||||
className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
|
||||
>
|
||||
<Briefcase size={16} className="mr-2" />
|
||||
Serviços
|
||||
<div className="flex items-center gap-2">
|
||||
<Briefcase size={16} />
|
||||
Serviços
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div className="flex items-center gap-2 bg-white dark:bg-[#252525] px-3 py-1.5 rounded-lg border border-slate-200 dark:border-[#333]">
|
||||
<div className="flex items-center gap-2 bg-white dark:bg-[#252525] px-3 py-1.5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm focus-within:ring-2 focus-within:ring-[var(--workspace-sec-3-light)] transition-all">
|
||||
<Search size={14} className="text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar..."
|
||||
className="bg-transparent border-none text-xs focus:ring-0 w-48 text-slate-600 dark:text-stone-300"
|
||||
placeholder="Pesquisar registro..."
|
||||
className="bg-transparent border-none text-xs focus:ring-0 w-48 text-slate-600 dark:text-stone-300 placeholder:text-slate-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-0">
|
||||
<TabsContent value="boletos" className="m-0 h-[500px]">
|
||||
{/* Aqui entra o ExcelTable configurado para Boletos */}
|
||||
<div className="p-4 text-center text-slate-400 text-sm italic">
|
||||
Lista de Boletos (ExcelTable em breve...)
|
||||
<TabsContent value="boletos" className="m-0 min-h-[400px]">
|
||||
<div className="p-4">
|
||||
<ExcelTable
|
||||
columns={[
|
||||
{ key: 'id', label: 'ID', width: '80px' },
|
||||
{ key: 'cliente', label: 'Cliente', width: '250px' },
|
||||
{ key: 'vencimento', label: 'Vencimento', width: '120px' },
|
||||
{ key: 'valor', label: 'Valor', width: '120px', type: 'currency' },
|
||||
{ key: 'status', label: 'Status', width: '120px' },
|
||||
]}
|
||||
data={MOCK_BOLETOS}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="clientes" className="m-0 h-[500px]">
|
||||
<div className="p-4 text-center text-slate-400 text-sm italic">
|
||||
Lista de Clientes (ExcelTable em breve...)
|
||||
<TabsContent value="clientes" className="m-0 min-h-[400px]">
|
||||
<div className="p-4">
|
||||
<ExcelTable
|
||||
columns={[
|
||||
{ key: 'id', label: 'ID', width: '80px' },
|
||||
{ key: 'nome', label: 'Nome Fantasia', width: '300px' },
|
||||
{ key: 'cnpj', label: 'CNPJ', width: '180px' },
|
||||
{ key: 'status', label: 'Status Contrato', width: '150px' },
|
||||
{ key: 'total_faturado', label: 'Faturamento Total', width: '180px', type: 'currency' },
|
||||
]}
|
||||
data={MOCK_CLIENTS}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="servicos" className="m-0 h-[500px]">
|
||||
<div className="p-4 text-center text-slate-400 text-sm italic">
|
||||
Lista de Serviços (ExcelTable em breve...)
|
||||
<TabsContent value="servicos" className="m-0 min-h-[400px]">
|
||||
<div className="p-4">
|
||||
<ExcelTable
|
||||
columns={[
|
||||
{ key: 'id', label: 'ID', width: '80px' },
|
||||
{ key: 'descricao', label: 'Descrição do Serviço', width: '400px' },
|
||||
{ key: 'categoria', label: 'Categoria', width: '200px' },
|
||||
{ key: 'preco_base', label: 'Preço Base', width: '150px', type: 'currency' },
|
||||
]}
|
||||
data={MOCK_SERVICES}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</CardContent>
|
||||
|
|
|
|||
Loading…
Reference in New Issue