fix: remoção dos icones
This commit is contained in:
Alessandro Gonçaalves
parent
dd5f92825c
commit
35aca238ea
|
|
@ -1,4 +1,4 @@
|
|||
'use client';
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
|
|
@ -25,7 +25,7 @@ import {
|
|||
SelectItem,
|
||||
} from "@/components/ui/select";
|
||||
import { Download, Filter, X } from "lucide-react";
|
||||
import * as XLSX from 'xlsx';
|
||||
import * as XLSX from "xlsx";
|
||||
|
||||
interface AnaliticoItem {
|
||||
codigo_grupo: string;
|
||||
|
|
@ -66,7 +66,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
const [globalFilter, setGlobalFilter] = React.useState("");
|
||||
const [columnFilters, setColumnFilters] = React.useState<any[]>([]);
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [conditions, setConditions] = React.useState([{ column: "", operator: "contains", value: "" }]);
|
||||
const [conditions, setConditions] = React.useState([
|
||||
{ column: "", operator: "contains", value: "" },
|
||||
]);
|
||||
|
||||
const fetchData = React.useCallback(async () => {
|
||||
// Só faz a requisição se tiver dataInicio e dataFim
|
||||
|
|
@ -93,10 +95,10 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
const result = await response.json();
|
||||
setData(result as AnaliticoItem[]);
|
||||
} else {
|
||||
console.error('Erro ao buscar dados:', await response.text());
|
||||
console.error("Erro ao buscar dados:", await response.text());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao buscar dados:', error);
|
||||
console.error("Erro ao buscar dados:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
|
@ -114,8 +116,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => string }) => {
|
||||
const value = getValue();
|
||||
return new Date(value).toLocaleDateString('pt-BR');
|
||||
}
|
||||
return new Date(value).toLocaleDateString("pt-BR");
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "data_vencimento",
|
||||
|
|
@ -123,8 +125,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => string }) => {
|
||||
const value = getValue();
|
||||
return new Date(value).toLocaleDateString('pt-BR');
|
||||
}
|
||||
return new Date(value).toLocaleDateString("pt-BR");
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "data_caixa",
|
||||
|
|
@ -132,13 +134,29 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => string }) => {
|
||||
const value = getValue();
|
||||
return new Date(value).toLocaleDateString('pt-BR');
|
||||
}
|
||||
return new Date(value).toLocaleDateString("pt-BR");
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "codigo_fornecedor",
|
||||
header: "Cód. Fornec.",
|
||||
filterFn: "advancedText",
|
||||
},
|
||||
{
|
||||
accessorKey: "nome_fornecedor",
|
||||
header: "Fornecedor",
|
||||
filterFn: "advancedText",
|
||||
},
|
||||
{
|
||||
accessorKey: "codigo_centrocusto",
|
||||
header: "Cód. Centro",
|
||||
filterFn: "advancedText",
|
||||
},
|
||||
{
|
||||
accessorKey: "codigo_conta",
|
||||
header: "Cód. Conta",
|
||||
filterFn: "advancedText",
|
||||
},
|
||||
{ accessorKey: "codigo_fornecedor", header: "Cód. Fornec.", filterFn: "advancedText" },
|
||||
{ accessorKey: "nome_fornecedor", header: "Fornecedor", filterFn: "advancedText" },
|
||||
{ accessorKey: "codigo_centrocusto", header: "Cód. Centro", filterFn: "advancedText" },
|
||||
{ accessorKey: "codigo_conta", header: "Cód. Conta", filterFn: "advancedText" },
|
||||
{ accessorKey: "conta", header: "Conta", filterFn: "advancedText" },
|
||||
{
|
||||
accessorKey: "valor",
|
||||
|
|
@ -146,20 +164,28 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
filterFn: "advancedText",
|
||||
cell: ({ getValue }: { getValue: () => number }) => {
|
||||
const value = getValue();
|
||||
const formatted = new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
const formatted = new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
}).format(value);
|
||||
const isNegative = value < 0;
|
||||
return (
|
||||
<span className={isNegative ? 'text-red-600' : 'text-gray-900'}>
|
||||
<span className={isNegative ? "text-red-600" : "text-gray-900"}>
|
||||
{formatted}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "historico",
|
||||
header: "Histórico",
|
||||
filterFn: "advancedText",
|
||||
},
|
||||
{
|
||||
accessorKey: "historico2",
|
||||
header: "Histórico 2",
|
||||
filterFn: "advancedText",
|
||||
},
|
||||
{ accessorKey: "historico", header: "Histórico", filterFn: "advancedText" },
|
||||
{ accessorKey: "historico2", header: "Histórico 2", filterFn: "advancedText" },
|
||||
{ accessorKey: "recnum", header: "Recnum", filterFn: "advancedText" },
|
||||
],
|
||||
[]
|
||||
|
|
@ -204,7 +230,6 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
[]
|
||||
);
|
||||
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
|
|
@ -227,7 +252,6 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
|
||||
const virtualRows = rowVirtualizer.getVirtualItems();
|
||||
|
||||
|
||||
const applyFilters = () => {
|
||||
// Agrupar múltiplas condições por coluna
|
||||
const grouped: Record<string, any[]> = {};
|
||||
|
|
@ -235,7 +259,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
conditions.forEach((c) => {
|
||||
if (
|
||||
c.column &&
|
||||
(c.operator === "empty" || c.operator === "notEmpty" || (c.value ?? "") !== "")
|
||||
(c.operator === "empty" ||
|
||||
c.operator === "notEmpty" ||
|
||||
(c.value ?? "") !== "")
|
||||
) {
|
||||
if (!grouped[c.column]) grouped[c.column] = [];
|
||||
grouped[c.column].push({ operator: c.operator, value: c.value });
|
||||
|
|
@ -260,7 +286,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
|
||||
const totalValor = data.reduce((sum, item) => {
|
||||
const valor =
|
||||
typeof item.valor === 'string' ? parseFloat(item.valor) : item.valor;
|
||||
typeof item.valor === "string" ? parseFloat(item.valor) : item.valor;
|
||||
return sum + (isNaN(valor) ? 0 : valor);
|
||||
}, 0);
|
||||
|
||||
|
|
@ -269,23 +295,23 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
|
||||
// Preparar dados para exportação
|
||||
const exportData = data.map((item) => ({
|
||||
'Data Competência': new Date(item.data_competencia).toLocaleDateString(
|
||||
'pt-BR'
|
||||
"Data Competência": new Date(item.data_competencia).toLocaleDateString(
|
||||
"pt-BR"
|
||||
),
|
||||
'Data Vencimento': new Date(item.data_vencimento).toLocaleDateString(
|
||||
'pt-BR'
|
||||
"Data Vencimento": new Date(item.data_vencimento).toLocaleDateString(
|
||||
"pt-BR"
|
||||
),
|
||||
'Data Caixa': new Date(item.data_caixa).toLocaleDateString('pt-BR'),
|
||||
'Código Fornecedor': item.codigo_fornecedor,
|
||||
"Data Caixa": new Date(item.data_caixa).toLocaleDateString("pt-BR"),
|
||||
"Código Fornecedor": item.codigo_fornecedor,
|
||||
Fornecedor: item.nome_fornecedor,
|
||||
'Código Centro Custo': item.codigo_centrocusto,
|
||||
'Centro Custo': item.codigo_centrocusto, // Assumindo que é o mesmo valor
|
||||
'Código Conta': item.codigo_conta,
|
||||
"Código Centro Custo": item.codigo_centrocusto,
|
||||
"Centro Custo": item.codigo_centrocusto, // Assumindo que é o mesmo valor
|
||||
"Código Conta": item.codigo_conta,
|
||||
Conta: item.conta,
|
||||
Valor:
|
||||
typeof item.valor === 'string' ? parseFloat(item.valor) : item.valor,
|
||||
typeof item.valor === "string" ? parseFloat(item.valor) : item.valor,
|
||||
Histórico: item.historico,
|
||||
'Histórico 2': item.historico2,
|
||||
"Histórico 2": item.historico2,
|
||||
Recnum: item.recnum,
|
||||
}));
|
||||
|
||||
|
|
@ -295,18 +321,18 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
|
||||
// Adicionar resumo na segunda aba
|
||||
const resumoData = [
|
||||
{ Métrica: 'Total de Registros', Valor: data.length },
|
||||
{ Métrica: 'Valor Total', Valor: totalValor },
|
||||
{ Métrica: "Total de Registros", Valor: data.length },
|
||||
{ Métrica: "Valor Total", Valor: totalValor },
|
||||
];
|
||||
const wsResumo = XLSX.utils.json_to_sheet(resumoData);
|
||||
|
||||
// Adicionar abas ao workbook
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Dados Analíticos');
|
||||
XLSX.utils.book_append_sheet(wb, wsResumo, 'Resumo');
|
||||
XLSX.utils.book_append_sheet(wb, ws, "Dados Analíticos");
|
||||
XLSX.utils.book_append_sheet(wb, wsResumo, "Resumo");
|
||||
|
||||
// Gerar nome do arquivo com data e hora
|
||||
const now = new Date();
|
||||
const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-');
|
||||
const timestamp = now.toISOString().slice(0, 19).replace(/:/g, "-");
|
||||
const fileName = `analitico_${timestamp}.xlsx`;
|
||||
|
||||
// Fazer download
|
||||
|
|
@ -318,163 +344,258 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{/* Header Section */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
{/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg
|
||||
className="w-7 h-7 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Análise Analítica</h1>
|
||||
<p className="text-sm text-gray-500">Relatório detalhado de transações</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Análise Analítica
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Relatório detalhado de transações
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<Input
|
||||
placeholder="Filtrar tudo..."
|
||||
value={globalFilter ?? ""}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
|
||||
className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||
>
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtros Avançados
|
||||
</Button>
|
||||
{(columnFilters.length > 0 || globalFilter) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearFilters}
|
||||
className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Limpar Filtros
|
||||
</Button>
|
||||
)}
|
||||
{data.length > 0 && (
|
||||
<Button
|
||||
onClick={exportToExcel}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Exportar XLSX
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{/* Controls */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<Input
|
||||
placeholder="Filtrar tudo..."
|
||||
value={globalFilter ?? ""}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setGlobalFilter(e.target.value)
|
||||
}
|
||||
className="w-64 bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-white border-gray-300 hover:bg-blue-50 hover:border-blue-300 text-gray-700"
|
||||
>
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtros Avançados
|
||||
{columnFilters.length > 0 && (
|
||||
<span className="ml-2 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
|
||||
{columnFilters.length}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
{(columnFilters.length > 0 || globalFilter) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearFilters}
|
||||
className="bg-white border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-700"
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Limpar Filtros
|
||||
</Button>
|
||||
)}
|
||||
{data.length > 0 && (
|
||||
<Button
|
||||
onClick={exportToExcel}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-2 bg-white border-gray-300 hover:bg-green-50 hover:border-green-300 text-gray-700"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Exportar XLSX
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Container */}
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-x-auto">
|
||||
<div className="min-w-[1200px]">
|
||||
{/* Table Header */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
|
||||
<div className="grid grid-cols-12 gap-4 px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
<div className="col-span-1">Data Comp.</div>
|
||||
<div className="col-span-1">Data Venc.</div>
|
||||
<div className="col-span-1">Data Caixa</div>
|
||||
<div className="col-span-1">Cód. Fornec.</div>
|
||||
<div className="col-span-2">Fornecedor</div>
|
||||
<div className="col-span-1">Cód. Centro</div>
|
||||
<div className="col-span-1">Cód. Conta</div>
|
||||
<div className="col-span-2">Conta</div>
|
||||
<div className="col-span-1 text-right">Valor</div>
|
||||
<div className="col-span-1">Recnum</div>
|
||||
{/* Table Header */}
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 sticky top-0 z-20">
|
||||
<div className="grid grid-cols-12 gap-4 px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wide">
|
||||
<div className="col-span-1">Data Comp.</div>
|
||||
<div className="col-span-1">Data Venc.</div>
|
||||
<div className="col-span-1">Data Caixa</div>
|
||||
<div className="col-span-1">Cód. Fornec.</div>
|
||||
<div className="col-span-2">Fornecedor</div>
|
||||
<div className="col-span-1">Cód. Centro</div>
|
||||
<div className="col-span-1">Cód. Conta</div>
|
||||
<div className="col-span-2">Conta</div>
|
||||
<div className="col-span-1 text-right">Valor</div>
|
||||
<div className="col-span-1">Recnum</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Body */}
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 hover:scrollbar-thumb-gray-400"
|
||||
style={{
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: '#cbd5e0 #f7fafc'
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
|
||||
<p className="text-gray-500">Carregando dados...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : virtualRows.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
{/* Table Body */}
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 hover:scrollbar-thumb-gray-400"
|
||||
style={{
|
||||
scrollbarWidth: "thin",
|
||||
scrollbarColor: "#cbd5e0 #f7fafc",
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
|
||||
<p className="text-gray-500">Carregando dados...</p>
|
||||
</div>
|
||||
<p className="text-gray-500">Nenhum dado encontrado</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative" style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>
|
||||
{virtualRows.map((virtualRow) => {
|
||||
const row = table.getRowModel().rows[virtualRow.index];
|
||||
return (
|
||||
<div
|
||||
key={row.id}
|
||||
className="absolute top-0 left-0 w-full grid grid-cols-12 gap-4 px-4 py-3 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
||||
style={{ transform: `translateY(${virtualRow.start}px)` }}
|
||||
>
|
||||
<div className="col-span-1 text-gray-600">{new Date(row.original.data_competencia).toLocaleDateString('pt-BR')}</div>
|
||||
<div className="col-span-1 text-gray-600">{new Date(row.original.data_vencimento).toLocaleDateString('pt-BR')}</div>
|
||||
<div className="col-span-1 text-gray-600">{new Date(row.original.data_caixa).toLocaleDateString('pt-BR')}</div>
|
||||
<div className="col-span-1 font-medium text-gray-900">{row.original.codigo_fornecedor}</div>
|
||||
<div className="col-span-2 text-gray-700 truncate" title={row.original.nome_fornecedor}>{row.original.nome_fornecedor}</div>
|
||||
<div className="col-span-1 text-gray-600">{row.original.codigo_centrocusto}</div>
|
||||
<div className="col-span-1 text-gray-600">{row.original.codigo_conta}</div>
|
||||
<div className="col-span-2 text-gray-700 truncate" title={row.original.conta}>{row.original.conta}</div>
|
||||
<div className={`col-span-1 text-right font-semibold ${row.original.valor < 0 ? 'text-red-600' : 'text-gray-900'}`}>
|
||||
{new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(row.original.valor)}
|
||||
) : virtualRows.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg
|
||||
className="w-8 h-8 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500">Nenhum dado encontrado</p>
|
||||
</div>
|
||||
<div className="col-span-1 text-gray-500">{row.original.recnum}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="relative"
|
||||
style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
{virtualRows.map((virtualRow) => {
|
||||
const row = table.getRowModel().rows[virtualRow.index];
|
||||
return (
|
||||
<div
|
||||
key={row.id}
|
||||
className="absolute top-0 left-0 w-full grid grid-cols-12 gap-4 px-4 py-3 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
||||
style={{ transform: `translateY(${virtualRow.start}px)` }}
|
||||
>
|
||||
<div className="col-span-1 text-gray-600">
|
||||
{new Date(
|
||||
row.original.data_competencia
|
||||
).toLocaleDateString("pt-BR")}
|
||||
</div>
|
||||
<div className="col-span-1 text-gray-600">
|
||||
{new Date(
|
||||
row.original.data_vencimento
|
||||
).toLocaleDateString("pt-BR")}
|
||||
</div>
|
||||
<div className="col-span-1 text-gray-600">
|
||||
{new Date(row.original.data_caixa).toLocaleDateString(
|
||||
"pt-BR"
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-1 font-medium text-gray-900">
|
||||
{row.original.codigo_fornecedor}
|
||||
</div>
|
||||
<div
|
||||
className="col-span-2 text-gray-700 truncate"
|
||||
title={row.original.nome_fornecedor}
|
||||
>
|
||||
{row.original.nome_fornecedor}
|
||||
</div>
|
||||
<div className="col-span-1 text-gray-600">
|
||||
{row.original.codigo_centrocusto}
|
||||
</div>
|
||||
<div className="col-span-1 text-gray-600">
|
||||
{row.original.codigo_conta}
|
||||
</div>
|
||||
<div
|
||||
className="col-span-2 text-gray-700 truncate"
|
||||
title={row.original.conta}
|
||||
>
|
||||
{row.original.conta}
|
||||
</div>
|
||||
<div
|
||||
className={`col-span-1 text-right font-semibold ${
|
||||
row.original.valor < 0
|
||||
? "text-red-600"
|
||||
: "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
}).format(row.original.valor)}
|
||||
</div>
|
||||
<div className="col-span-1 text-gray-500">
|
||||
{row.original.recnum}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Summary Footer - Integrado */}
|
||||
{data.length > 0 && (
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200 p-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
{/* Summary Footer - Integrado */}
|
||||
{data.length > 0 && (
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200 p-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
|
||||
<svg
|
||||
className="w-6 h-6 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</div> */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
Total de Registros:{" "}
|
||||
<span className="text-blue-600">
|
||||
{table.getRowModel().rows.length}
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Transações encontradas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
Total de Registros: <span className="text-blue-600">{table.getRowModel().rows.length}</span>
|
||||
<div className="text-right">
|
||||
<h3 className="text-lg font-bold">
|
||||
<span
|
||||
className={
|
||||
totalValor < 0 ? "text-red-600" : "text-green-600"
|
||||
}
|
||||
>
|
||||
Valor Total:{" "}
|
||||
{new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
}).format(totalValor)}
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Transações encontradas</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Soma de todos os valores
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<h3 className="text-lg font-bold">
|
||||
<span className={totalValor < 0 ? 'text-red-600' : 'text-green-600'}>
|
||||
Valor Total: {new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
}).format(totalValor)}
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Soma de todos os valores</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -482,12 +603,17 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-2xl w-full mx-4 bg-white">
|
||||
<DialogHeader className="pb-4">
|
||||
<DialogTitle className="text-xl font-semibold text-gray-900">Filtros Avançados</DialogTitle>
|
||||
<DialogTitle className="text-xl font-semibold text-gray-900">
|
||||
Filtros Avançados
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 max-h-96 overflow-y-auto bg-white">
|
||||
{conditions.map((cond, idx) => (
|
||||
<div key={idx} className="flex gap-3 items-start p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div
|
||||
key={idx}
|
||||
className="flex gap-3 items-start p-4 bg-gray-50 rounded-lg border border-gray-200"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Coluna
|
||||
|
|
@ -504,11 +630,14 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
<SelectValue placeholder="Selecione a coluna" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.accessorKey} value={col.accessorKey}>
|
||||
{col.header}
|
||||
</SelectItem>
|
||||
))}
|
||||
{columns.map((col) => (
|
||||
<SelectItem
|
||||
key={col.accessorKey}
|
||||
value={col.accessorKey}
|
||||
>
|
||||
{col.header}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -522,7 +651,8 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
onValueChange={(v: string) => {
|
||||
const next = [...conditions];
|
||||
next[idx].operator = v;
|
||||
if (v === "empty" || v === "notEmpty") next[idx].value = "";
|
||||
if (v === "empty" || v === "notEmpty")
|
||||
next[idx].value = "";
|
||||
setConditions(next);
|
||||
}}
|
||||
>
|
||||
|
|
@ -540,7 +670,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
{!(cond.operator === "empty" || cond.operator === "notEmpty") && (
|
||||
{!(
|
||||
cond.operator === "empty" || cond.operator === "notEmpty"
|
||||
) && (
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Valor
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
'use client';
|
||||
"use client";
|
||||
|
||||
import { LoaderPinwheel } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import AnaliticoComponent from './analitico';
|
||||
import { LoaderPinwheel } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import AnaliticoComponent from "./analitico";
|
||||
|
||||
interface DREItem {
|
||||
codfilial: string;
|
||||
|
|
@ -17,7 +17,7 @@ interface DREItem {
|
|||
}
|
||||
|
||||
interface HierarchicalRow {
|
||||
type: 'grupo' | 'subgrupo' | 'centro_custo' | 'conta';
|
||||
type: "grupo" | "subgrupo" | "centro_custo" | "conta";
|
||||
level: number;
|
||||
grupo?: string;
|
||||
subgrupo?: string;
|
||||
|
|
@ -30,7 +30,6 @@ interface HierarchicalRow {
|
|||
percentuaisPorMes?: Record<string, number>;
|
||||
}
|
||||
|
||||
|
||||
export default function Teste() {
|
||||
const [data, setData] = useState<DREItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
|
@ -46,12 +45,12 @@ export default function Teste() {
|
|||
|
||||
// Estados para analítico
|
||||
const [analiticoFiltros, setAnaliticoFiltros] = useState({
|
||||
dataInicio: '',
|
||||
dataFim: '',
|
||||
centroCusto: '',
|
||||
codigoGrupo: '',
|
||||
codigoSubgrupo: '',
|
||||
codigoConta: '',
|
||||
dataInicio: "",
|
||||
dataFim: "",
|
||||
centroCusto: "",
|
||||
codigoGrupo: "",
|
||||
codigoSubgrupo: "",
|
||||
codigoConta: "",
|
||||
});
|
||||
const [linhaSelecionada, setLinhaSelecionada] = useState<string | null>(null);
|
||||
|
||||
|
|
@ -63,7 +62,7 @@ export default function Teste() {
|
|||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await fetch('/api/dre');
|
||||
const response = await fetch("/api/dre");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erro ao carregar dados: ${response.status}`);
|
||||
|
|
@ -79,29 +78,29 @@ export default function Teste() {
|
|||
const dataCompetencia = new Date(item.data_competencia);
|
||||
return `${dataCompetencia.getFullYear()}-${String(
|
||||
dataCompetencia.getMonth() + 1
|
||||
).padStart(2, '0')}`;
|
||||
).padStart(2, "0")}`;
|
||||
})
|
||||
),
|
||||
].sort() as string[];
|
||||
|
||||
setMesesDisponiveis(meses);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Erro desconhecido');
|
||||
setError(err instanceof Error ? err.message : "Erro desconhecido");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (value: string | number) => {
|
||||
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
||||
return numValue.toLocaleString('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
const numValue = typeof value === "string" ? parseFloat(value) : value;
|
||||
return numValue.toLocaleString("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrencyWithColor = (value: string | number) => {
|
||||
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
||||
const numValue = typeof value === "string" ? parseFloat(value) : value;
|
||||
const formatted = formatCurrency(value);
|
||||
const isNegative = numValue < 0;
|
||||
return { formatted, isNegative };
|
||||
|
|
@ -110,9 +109,9 @@ export default function Teste() {
|
|||
// Função para extrair códigos dos grupos e subgrupos
|
||||
const extractCodes = (grupo: string, subgrupo?: string) => {
|
||||
const grupoMatch = grupo.match(/^(\d+)/);
|
||||
const codigoGrupo = grupoMatch ? grupoMatch[1] : '';
|
||||
const codigoGrupo = grupoMatch ? grupoMatch[1] : "";
|
||||
|
||||
let codigoSubgrupo = '';
|
||||
let codigoSubgrupo = "";
|
||||
if (subgrupo) {
|
||||
// Primeiro tenta extrair código numérico (ex: "001.008 - LOJA 8" -> "001.008")
|
||||
const subgrupoMatch = subgrupo.match(/^(\d+(?:\.\d+)+)/);
|
||||
|
|
@ -140,14 +139,14 @@ export default function Teste() {
|
|||
const dataFimStr = new Date(dataFim).toISOString().substring(0, 7); // YYYY-MM
|
||||
|
||||
const { codigoGrupo, codigoSubgrupo } = extractCodes(
|
||||
row.grupo || '',
|
||||
row.grupo || "",
|
||||
row.subgrupo
|
||||
);
|
||||
|
||||
// Criar um identificador único para a linha
|
||||
const linhaId = `${row.type}-${row.grupo || ''}-${row.subgrupo || ''}-${
|
||||
row.centro_custo || ''
|
||||
}-${row.codigo_conta || ''}`;
|
||||
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
|
||||
row.centro_custo || ""
|
||||
}-${row.codigo_conta || ""}`;
|
||||
setLinhaSelecionada(linhaId);
|
||||
|
||||
// Se um mês específico foi selecionado, usar apenas esse mês
|
||||
|
|
@ -157,10 +156,10 @@ export default function Teste() {
|
|||
setAnaliticoFiltros({
|
||||
dataInicio: dataInicioFiltro,
|
||||
dataFim: dataFimFiltro,
|
||||
centroCusto: row.centro_custo || '',
|
||||
centroCusto: row.centro_custo || "",
|
||||
codigoGrupo,
|
||||
codigoSubgrupo,
|
||||
codigoConta: row.codigo_conta?.toString() || '',
|
||||
codigoConta: row.codigo_conta?.toString() || "",
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -194,7 +193,6 @@ export default function Teste() {
|
|||
setExpandedCentros(newExpanded);
|
||||
};
|
||||
|
||||
|
||||
const calcularValoresPorMes = (items: DREItem[]): Record<string, number> => {
|
||||
const valoresPorMes: Record<string, number> = {};
|
||||
|
||||
|
|
@ -202,7 +200,7 @@ export default function Teste() {
|
|||
const dataCompetencia = new Date(item.data_competencia);
|
||||
const anoMes = `${dataCompetencia.getFullYear()}-${String(
|
||||
dataCompetencia.getMonth() + 1
|
||||
).padStart(2, '0')}`;
|
||||
).padStart(2, "0")}`;
|
||||
|
||||
if (!valoresPorMes[anoMes]) {
|
||||
valoresPorMes[anoMes] = 0;
|
||||
|
|
@ -221,7 +219,7 @@ export default function Teste() {
|
|||
const percentuais: Record<string, number> = {};
|
||||
|
||||
// Se for o grupo 03, retorna 100% para todos os meses
|
||||
if (grupo.includes('03')) {
|
||||
if (grupo.includes("03")) {
|
||||
Object.keys(valoresPorMes).forEach((mes) => {
|
||||
percentuais[mes] = 100;
|
||||
});
|
||||
|
|
@ -237,8 +235,8 @@ export default function Teste() {
|
|||
const dataCompetencia = new Date(item.data_competencia);
|
||||
const anoMes = `${dataCompetencia.getFullYear()}-${String(
|
||||
dataCompetencia.getMonth() + 1
|
||||
).padStart(2, '0')}`;
|
||||
return anoMes === mes && item.grupo.includes('03');
|
||||
).padStart(2, "0")}`;
|
||||
return anoMes === mes && item.grupo.includes("03");
|
||||
});
|
||||
|
||||
const valorGrupo03 = grupo03Items.reduce(
|
||||
|
|
@ -262,16 +260,16 @@ export default function Teste() {
|
|||
// Agrupar por grupo, mas tratar grupo 05 como subgrupo do grupo 04
|
||||
const grupos = data.reduce((acc, item) => {
|
||||
// Se for grupo 05, adicionar ao grupo 04 como subgrupo
|
||||
if (item.grupo.includes('05')) {
|
||||
if (item.grupo.includes("05")) {
|
||||
// Encontrar grupo 04 existente ou criar um
|
||||
const grupo04Key = Object.keys(acc).find((key) => key.includes('04'));
|
||||
const grupo04Key = Object.keys(acc).find((key) => key.includes("04"));
|
||||
if (grupo04Key) {
|
||||
acc[grupo04Key].push(item);
|
||||
} else {
|
||||
// Se não existe grupo 04, criar um grupo especial
|
||||
const grupo04Nome =
|
||||
Object.keys(acc).find((key) => key.includes('04')) ||
|
||||
'04 - GRUPO 04';
|
||||
Object.keys(acc).find((key) => key.includes("04")) ||
|
||||
"04 - GRUPO 04";
|
||||
if (!acc[grupo04Nome]) {
|
||||
acc[grupo04Nome] = [];
|
||||
}
|
||||
|
|
@ -288,7 +286,9 @@ export default function Teste() {
|
|||
}, {} as Record<string, DREItem[]>);
|
||||
|
||||
// Ordenar grupos
|
||||
const sortedGrupos = Object.entries(grupos).sort(([a], [b]) => a.localeCompare(b));
|
||||
const sortedGrupos = Object.entries(grupos).sort(([a], [b]) =>
|
||||
a.localeCompare(b)
|
||||
);
|
||||
|
||||
sortedGrupos.forEach(([grupo, items]) => {
|
||||
const totalGrupo = items.reduce(
|
||||
|
|
@ -299,7 +299,7 @@ export default function Teste() {
|
|||
// Linha do grupo
|
||||
const valoresPorMes = calcularValoresPorMes(items);
|
||||
rows.push({
|
||||
type: 'grupo',
|
||||
type: "grupo",
|
||||
level: 0,
|
||||
grupo,
|
||||
total: totalGrupo,
|
||||
|
|
@ -312,7 +312,7 @@ export default function Teste() {
|
|||
// Agrupar por subgrupo dentro do grupo
|
||||
const subgrupos = items.reduce((acc, item) => {
|
||||
// Se o item originalmente era do grupo 05, agrupar tudo sob o nome do grupo 05
|
||||
if (item.grupo.includes('05')) {
|
||||
if (item.grupo.includes("05")) {
|
||||
const subgrupoKey = item.grupo; // Usar o nome completo do grupo 05
|
||||
if (!acc[subgrupoKey]) {
|
||||
acc[subgrupoKey] = [];
|
||||
|
|
@ -329,7 +329,9 @@ export default function Teste() {
|
|||
}, {} as Record<string, DREItem[]>);
|
||||
|
||||
// Ordenar subgrupos
|
||||
const sortedSubgrupos = Object.entries(subgrupos).sort(([a], [b]) => a.localeCompare(b));
|
||||
const sortedSubgrupos = Object.entries(subgrupos).sort(([a], [b]) =>
|
||||
a.localeCompare(b)
|
||||
);
|
||||
|
||||
sortedSubgrupos.forEach(([subgrupo, subgrupoItems]) => {
|
||||
const totalSubgrupo = subgrupoItems.reduce(
|
||||
|
|
@ -340,7 +342,7 @@ export default function Teste() {
|
|||
// Linha do subgrupo
|
||||
const valoresSubgrupoPorMes = calcularValoresPorMes(subgrupoItems);
|
||||
rows.push({
|
||||
type: 'subgrupo',
|
||||
type: "subgrupo",
|
||||
level: 1,
|
||||
grupo,
|
||||
subgrupo,
|
||||
|
|
@ -364,7 +366,9 @@ export default function Teste() {
|
|||
}, {} as Record<string, DREItem[]>);
|
||||
|
||||
// Ordenar centros de custo
|
||||
const sortedCentros = Object.entries(centros).sort(([a], [b]) => a.localeCompare(b));
|
||||
const sortedCentros = Object.entries(centros).sort(([a], [b]) =>
|
||||
a.localeCompare(b)
|
||||
);
|
||||
|
||||
sortedCentros.forEach(([centro, centroItems]) => {
|
||||
const totalCentro = centroItems.reduce(
|
||||
|
|
@ -375,7 +379,7 @@ export default function Teste() {
|
|||
// Linha do centro de custo
|
||||
const valoresCentroPorMes = calcularValoresPorMes(centroItems);
|
||||
rows.push({
|
||||
type: 'centro_custo',
|
||||
type: "centro_custo",
|
||||
level: 2,
|
||||
grupo,
|
||||
subgrupo,
|
||||
|
|
@ -402,7 +406,9 @@ export default function Teste() {
|
|||
}, {} as Record<string, DREItem[]>);
|
||||
|
||||
// Ordenar contas
|
||||
const sortedContas = Object.entries(contas).sort(([a], [b]) => a.localeCompare(b));
|
||||
const sortedContas = Object.entries(contas).sort(([a], [b]) =>
|
||||
a.localeCompare(b)
|
||||
);
|
||||
|
||||
sortedContas.forEach(([conta, contaItems]) => {
|
||||
const totalConta = contaItems.reduce(
|
||||
|
|
@ -413,7 +419,7 @@ export default function Teste() {
|
|||
// Linha da conta (sem ano/mês no nome)
|
||||
const valoresContaPorMes = calcularValoresPorMes(contaItems);
|
||||
rows.push({
|
||||
type: 'conta',
|
||||
type: "conta",
|
||||
level: 3,
|
||||
grupo,
|
||||
subgrupo,
|
||||
|
|
@ -439,28 +445,30 @@ export default function Teste() {
|
|||
};
|
||||
|
||||
const getRowStyle = (row: HierarchicalRow) => {
|
||||
const baseStyle = 'transition-all duration-200 hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30';
|
||||
const baseStyle =
|
||||
"transition-all duration-200 hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/30";
|
||||
|
||||
// Criar identificador único para a linha
|
||||
const linhaId = `${row.type}-${row.grupo || ''}-${row.subgrupo || ''}-${
|
||||
row.centro_custo || ''
|
||||
}-${row.codigo_conta || ''}`;
|
||||
const linhaId = `${row.type}-${row.grupo || ""}-${row.subgrupo || ""}-${
|
||||
row.centro_custo || ""
|
||||
}-${row.codigo_conta || ""}`;
|
||||
const isSelected = linhaSelecionada === linhaId;
|
||||
|
||||
let style = baseStyle;
|
||||
|
||||
if (isSelected) {
|
||||
style += ' bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500 shadow-lg';
|
||||
style +=
|
||||
" bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500 shadow-lg";
|
||||
}
|
||||
|
||||
switch (row.type) {
|
||||
case 'grupo':
|
||||
case "grupo":
|
||||
return `${style} bg-gradient-to-r from-blue-50/20 to-indigo-50/20 font-bold text-gray-900 border-b-2 border-blue-200`;
|
||||
case 'subgrupo':
|
||||
case "subgrupo":
|
||||
return `${style} bg-gradient-to-r from-gray-50/30 to-blue-50/20 font-semibold text-gray-800`;
|
||||
case 'centro_custo':
|
||||
case "centro_custo":
|
||||
return `${style} bg-gradient-to-r from-gray-50/20 to-gray-100/10 font-medium text-gray-700`;
|
||||
case 'conta':
|
||||
case "conta":
|
||||
return `${style} bg-white font-normal text-gray-600`;
|
||||
default:
|
||||
return style;
|
||||
|
|
@ -473,7 +481,7 @@ export default function Teste() {
|
|||
|
||||
const renderCellContent = (row: HierarchicalRow) => {
|
||||
switch (row.type) {
|
||||
case 'grupo':
|
||||
case "grupo":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<button
|
||||
|
|
@ -481,7 +489,7 @@ export default function Teste() {
|
|||
className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
|
||||
>
|
||||
<span className="text-blue-600 font-bold text-sm">
|
||||
{row.isExpanded ? '▼' : '▶'}
|
||||
{row.isExpanded ? "▼" : "▶"}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -492,7 +500,7 @@ export default function Teste() {
|
|||
</button>
|
||||
</div>
|
||||
);
|
||||
case 'subgrupo':
|
||||
case "subgrupo":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<button
|
||||
|
|
@ -500,18 +508,20 @@ export default function Teste() {
|
|||
className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
|
||||
>
|
||||
<span className="text-blue-600 font-bold text-sm">
|
||||
{row.isExpanded ? '▼' : '▶'}
|
||||
{row.isExpanded ? "▼" : "▶"}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRowClick(row)}
|
||||
className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
|
||||
>
|
||||
<span className="font-semibold text-gray-800">{row.subgrupo}</span>
|
||||
<span className="font-semibold text-gray-800">
|
||||
{row.subgrupo}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
case 'centro_custo':
|
||||
case "centro_custo":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<button
|
||||
|
|
@ -521,18 +531,20 @@ export default function Teste() {
|
|||
className="p-2 hover:bg-blue-100 rounded-lg transition-all duration-200 flex items-center justify-center w-8 h-8 flex-shrink-0"
|
||||
>
|
||||
<span className="text-blue-600 font-bold text-sm">
|
||||
{row.isExpanded ? '▼' : '▶'}
|
||||
{row.isExpanded ? "▼" : "▶"}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRowClick(row)}
|
||||
className="flex-1 text-left hover:bg-blue-50/50 p-2 rounded-lg cursor-pointer transition-all duration-200 truncate"
|
||||
>
|
||||
<span className="font-medium text-gray-700">{row.centro_custo}</span>
|
||||
<span className="font-medium text-gray-700">
|
||||
{row.centro_custo}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
case 'conta':
|
||||
case "conta":
|
||||
return (
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
|
|
@ -556,14 +568,28 @@ export default function Teste() {
|
|||
<div className="w-full max-w-7xl mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
{/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg
|
||||
className="w-7 h-7 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
|
||||
<p className="text-sm text-gray-500">Demonstração do Resultado do Exercício</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
DRE Gerencial
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Demonstração do Resultado do Exercício
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -573,8 +599,12 @@ export default function Teste() {
|
|||
<div className="w-16 h-16 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
<LoaderPinwheel className="h-8 w-8 text-blue-600 animate-spin" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Carregando dados...</h3>
|
||||
<p className="text-sm text-gray-500">Aguarde enquanto processamos as informações</p>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Carregando dados...
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Aguarde enquanto processamos as informações
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -586,14 +616,28 @@ export default function Teste() {
|
|||
<div className="w-full max-w-7xl mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-red-600 to-red-500 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
{/* <div className="w-12 h-12 bg-gradient-to-r from-red-600 to-red-500 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg
|
||||
className="w-7 h-7 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
|
||||
<p className="text-sm text-gray-500">Demonstração do Resultado do Exercício</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
DRE Gerencial
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Demonstração do Resultado do Exercício
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -601,11 +645,23 @@ export default function Teste() {
|
|||
<div className="bg-white rounded-xl shadow-xl border border-red-200 p-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-red-100 to-red-50 rounded-full flex items-center justify-center mb-4">
|
||||
<svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
<svg
|
||||
className="w-8 h-8 text-red-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-red-900 mb-2">Erro ao carregar DRE Gerencial</h3>
|
||||
<h3 className="text-lg font-semibold text-red-900 mb-2">
|
||||
Erro ao carregar DRE Gerencial
|
||||
</h3>
|
||||
<p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 max-w-md">
|
||||
{error}
|
||||
</p>
|
||||
|
|
@ -622,14 +678,26 @@ export default function Teste() {
|
|||
{/* Header Section */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
{/* <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<svg
|
||||
className="w-7 h-7 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">DRE Gerencial</h1>
|
||||
<p className="text-sm text-gray-500">Demonstração do Resultado do Exercício</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Demonstração do Resultado do Exercício
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -643,7 +711,9 @@ export default function Teste() {
|
|||
{mesesDisponiveis.map((mes) => (
|
||||
<div key={mes} className="flex min-w-[200px] max-w-[250px]">
|
||||
<div className="flex-1 min-w-[100px] text-right">{mes}</div>
|
||||
<div className="flex-1 min-w-[100px] text-left text-xs text-gray-500">%</div>
|
||||
<div className="flex-1 min-w-[100px] text-left text-xs text-gray-500">
|
||||
%
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex-1 min-w-[120px] text-right">Total</div>
|
||||
|
|
@ -653,8 +723,16 @@ export default function Teste() {
|
|||
{/* Table Body */}
|
||||
<div className="max-h-[500px] overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
|
||||
{hierarchicalData.map((row, index) => (
|
||||
<div key={index} className={`flex items-center gap-4 px-4 py-3 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors ${getRowStyle(row)}`}>
|
||||
<div className="flex-1 min-w-[300px] max-w-[400px] whitespace-nowrap overflow-hidden" style={getIndentStyle(row.level)}>
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-4 px-4 py-3 text-sm border-b border-gray-100 hover:bg-gray-50 transition-colors ${getRowStyle(
|
||||
row
|
||||
)}`}
|
||||
>
|
||||
<div
|
||||
className="flex-1 min-w-[300px] max-w-[400px] whitespace-nowrap overflow-hidden"
|
||||
style={getIndentStyle(row.level)}
|
||||
>
|
||||
{renderCellContent(row)}
|
||||
</div>
|
||||
{mesesDisponiveis.map((mes) => (
|
||||
|
|
@ -662,39 +740,62 @@ export default function Teste() {
|
|||
<div
|
||||
className="flex-1 min-w-[100px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
|
||||
onClick={() => handleRowClick(row, mes)}
|
||||
title={row.valoresPorMes && row.valoresPorMes[mes] ? formatCurrency(row.valoresPorMes[mes]) : '-'}
|
||||
title={
|
||||
row.valoresPorMes && row.valoresPorMes[mes]
|
||||
? formatCurrency(row.valoresPorMes[mes])
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.valoresPorMes && row.valoresPorMes[mes]
|
||||
? (() => {
|
||||
const { formatted, isNegative } = formatCurrencyWithColor(row.valoresPorMes[mes]);
|
||||
const { formatted, isNegative } =
|
||||
formatCurrencyWithColor(row.valoresPorMes[mes]);
|
||||
return (
|
||||
<span className={isNegative ? 'text-red-600 font-bold' : 'text-gray-900'}>
|
||||
<span
|
||||
className={
|
||||
isNegative
|
||||
? "text-red-600 font-bold"
|
||||
: "text-gray-900"
|
||||
}
|
||||
>
|
||||
{formatted}
|
||||
</span>
|
||||
);
|
||||
})()
|
||||
: '-'}
|
||||
: "-"}
|
||||
</div>
|
||||
<div
|
||||
className="flex-1 min-w-[100px] text-left font-medium cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
|
||||
onClick={() => handleRowClick(row, mes)}
|
||||
title={row.percentuaisPorMes && row.percentuaisPorMes[mes] !== undefined ? `${row.percentuaisPorMes[mes].toFixed(1)}%` : '-'}
|
||||
title={
|
||||
row.percentuaisPorMes &&
|
||||
row.percentuaisPorMes[mes] !== undefined
|
||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||
: "-"
|
||||
}
|
||||
>
|
||||
{row.percentuaisPorMes && row.percentuaisPorMes[mes] !== undefined
|
||||
{row.percentuaisPorMes &&
|
||||
row.percentuaisPorMes[mes] !== undefined
|
||||
? `${row.percentuaisPorMes[mes].toFixed(1)}%`
|
||||
: '-'}
|
||||
: "-"}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
className="flex-1 min-w-[120px] text-right font-semibold cursor-pointer hover:bg-blue-50/50 transition-colors duration-200 whitespace-nowrap overflow-hidden"
|
||||
onClick={() => handleRowClick(row)}
|
||||
title={row.total ? formatCurrency(row.total) : '-'}
|
||||
title={row.total ? formatCurrency(row.total) : "-"}
|
||||
>
|
||||
{(() => {
|
||||
const { formatted, isNegative } = formatCurrencyWithColor(row.total!);
|
||||
const { formatted, isNegative } = formatCurrencyWithColor(
|
||||
row.total!
|
||||
);
|
||||
return (
|
||||
<span className={isNegative ? 'text-red-600 font-bold' : 'text-gray-900'}>
|
||||
<span
|
||||
className={
|
||||
isNegative ? "text-red-600 font-bold" : "text-gray-900"
|
||||
}
|
||||
>
|
||||
{formatted}
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue