This commit is contained in:
Felipe Batista 2025-10-08 09:28:20 -03:00
parent 6b0929e96f
commit c859870321
2 changed files with 91 additions and 35 deletions

View File

@ -147,6 +147,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
}).format(value); }).format(value);
}; };
const formatCurrencyWithColor = (value: number) => {
const formatted = formatCurrency(value);
const isNegative = value < 0;
return { formatted, isNegative };
};
const formatDate = (dateString: string) => { const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('pt-BR'); return new Date(dateString).toLocaleDateString('pt-BR');
}; };
@ -208,7 +214,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
return ( return (
<div className="w-full mt-2 border-t pt-1"> <div className="w-full mt-2 border-t pt-1">
<div className="flex justify-between items-center mb-1"> <div className="w-[95%] mx-auto flex justify-between items-center mb-1">
<h2 className="text-lg font-bold">Análise Analítica</h2> <h2 className="text-lg font-bold">Análise Analítica</h2>
{data.length > 0 && ( {data.length > 0 && (
<Button <Button
@ -265,7 +271,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
className="flex p-2 font-semibold text-xs" className="flex p-2 font-semibold text-xs"
style={{ backgroundColor: 'white', opacity: 1 }} style={{ backgroundColor: 'white', opacity: 1 }}
> >
<div className="flex-1 min-w-[100px] max-w-[120px]"> <div className="flex-1 min-w-[80px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('data_competencia')} onClick={() => handleSort('data_competencia')}
@ -275,7 +281,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('data_competencia')} {getSortIcon('data_competencia')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px]"> <div className="flex-1 min-w-[80px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('data_vencimento')} onClick={() => handleSort('data_vencimento')}
@ -285,7 +291,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('data_vencimento')} {getSortIcon('data_vencimento')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px]"> <div className="flex-1 min-w-[80px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('data_caixa')} onClick={() => handleSort('data_caixa')}
@ -295,7 +301,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('data_caixa')} {getSortIcon('data_caixa')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px]"> <div className="flex-1 min-w-[80px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('codigo_fornecedor')} onClick={() => handleSort('codigo_fornecedor')}
@ -305,7 +311,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('codigo_fornecedor')} {getSortIcon('codigo_fornecedor')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[150px] max-w-[200px]"> <div className="flex-2 min-w-[120px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('nome_fornecedor')} onClick={() => handleSort('nome_fornecedor')}
@ -315,7 +321,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('nome_fornecedor')} {getSortIcon('nome_fornecedor')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px]"> <div className="flex-1 min-w-[80px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('codigo_centrocusto')} onClick={() => handleSort('codigo_centrocusto')}
@ -325,7 +331,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('codigo_centrocusto')} {getSortIcon('codigo_centrocusto')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px]"> <div className="flex-1 min-w-[80px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('codigo_conta')} onClick={() => handleSort('codigo_conta')}
@ -335,7 +341,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('codigo_conta')} {getSortIcon('codigo_conta')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[120px] max-w-[150px]"> <div className="flex-2 min-w-[120px]">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('conta')} onClick={() => handleSort('conta')}
@ -345,7 +351,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('conta')} {getSortIcon('conta')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] text-right"> <div className="flex-1 min-w-[80px] text-right">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => handleSort('valor')} onClick={() => handleSort('valor')}
@ -355,11 +361,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
{getSortIcon('valor')} {getSortIcon('valor')}
</Button> </Button>
</div> </div>
<div className="flex-1 min-w-[150px] max-w-[200px]">Histórico</div> <div className="flex-2 min-w-[120px]">Histórico</div>
<div className="flex-1 min-w-[150px] max-w-[200px]"> <div className="flex-2 min-w-[120px]">Histórico 2</div>
Histórico 2 <div className="flex-1 min-w-[80px]">Recnum</div>
</div>
<div className="flex-1 min-w-[100px] max-w-[120px]">Recnum</div>
</div> </div>
</div> </div>
@ -375,44 +379,56 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
) : ( ) : (
sortedData.map((row, index) => ( sortedData.map((row, index) => (
<div key={index} className="flex border-b hover:bg-gray-50"> <div key={index} className="flex border-b hover:bg-gray-50">
<div className="flex-1 min-w-[100px] max-w-[120px] p-1 text-xs"> <div className="flex-1 min-w-[80px] p-1 text-xs">
{formatDate(row.data_competencia)} {formatDate(row.data_competencia)}
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] p-1 text-xs"> <div className="flex-1 min-w-[80px] p-1 text-xs">
{formatDate(row.data_vencimento)} {formatDate(row.data_vencimento)}
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] p-1 text-xs"> <div className="flex-1 min-w-[80px] p-1 text-xs">
{formatDate(row.data_caixa)} {formatDate(row.data_caixa)}
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] p-1 text-xs"> <div className="flex-1 min-w-[80px] p-1 text-xs">
{row.codigo_fornecedor || '-'} {row.codigo_fornecedor || '-'}
</div> </div>
<div className="flex-1 min-w-[150px] max-w-[200px] p-1 text-xs"> <div className="flex-2 min-w-[120px] p-1 text-xs">
{row.nome_fornecedor || '-'} {row.nome_fornecedor || '-'}
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] p-1 text-xs"> <div className="flex-1 min-w-[80px] p-1 text-xs">
{row.codigo_centrocusto || '-'} {row.codigo_centrocusto || '-'}
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] p-1 text-xs"> <div className="flex-1 min-w-[80px] p-1 text-xs">
{row.codigo_conta || '-'} {row.codigo_conta || '-'}
</div> </div>
<div className="flex-1 min-w-[120px] max-w-[150px] p-1 text-xs"> <div className="flex-2 min-w-[120px] p-1 text-xs">
{row.conta || '-'} {row.conta || '-'}
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] text-right p-1 text-xs font-medium"> <div className="flex-1 min-w-[80px] text-right p-1 text-xs font-medium">
{formatCurrency( {(() => {
const valor =
typeof row.valor === 'string' typeof row.valor === 'string'
? parseFloat(row.valor) ? parseFloat(row.valor)
: row.valor : row.valor;
)} const { formatted, isNegative } =
formatCurrencyWithColor(valor);
return (
<span
className={
isNegative ? 'text-red-600' : 'text-gray-900'
}
>
{formatted}
</span>
);
})()}
</div> </div>
<div className="flex-1 min-w-[150px] max-w-[200px] p-1 text-xs"> <div className="flex-2 min-w-[120px] p-1 text-xs">
{row.historico || '-'} {row.historico || '-'}
</div> </div>
<div className="flex-1 min-w-[150px] max-w-[200px] p-1 text-xs"> <div className="flex-2 min-w-[120px] p-1 text-xs">
{row.historico2 || '-'} {row.historico2 || '-'}
</div> </div>
<div className="flex-1 min-w-[100px] max-w-[120px] p-1 text-xs"> <div className="flex-1 min-w-[80px] p-1 text-xs">
{row.recnum || '-'} {row.recnum || '-'}
</div> </div>
</div> </div>
@ -430,7 +446,17 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
</div> </div>
<div> <div>
<h3 className="text-sm font-semibold"> <h3 className="text-sm font-semibold">
Valor Total: {formatCurrency(totalValor)} {(() => {
const { formatted, isNegative } =
formatCurrencyWithColor(totalValor);
return (
<span
className={isNegative ? 'text-red-600' : 'text-blue-600'}
>
Valor Total: {formatted}
</span>
);
})()}
</h3> </h3>
</div> </div>
</div> </div>

View File

@ -112,6 +112,13 @@ export default function Teste() {
}); });
}; };
const formatCurrencyWithColor = (value: string | number) => {
const numValue = typeof value === 'string' ? parseFloat(value) : value;
const formatted = formatCurrency(value);
const isNegative = numValue < 0;
return { formatted, isNegative };
};
// Função para extrair códigos dos grupos e subgrupos // Função para extrair códigos dos grupos e subgrupos
const extractCodes = (grupo: string, subgrupo?: string) => { const extractCodes = (grupo: string, subgrupo?: string) => {
const grupoMatch = grupo.match(/^(\d+)/); const grupoMatch = grupo.match(/^(\d+)/);
@ -640,7 +647,19 @@ export default function Teste() {
onClick={() => handleRowClick(row, mes)} onClick={() => handleRowClick(row, mes)}
> >
{row.valoresPorMes && row.valoresPorMes[mes] {row.valoresPorMes && row.valoresPorMes[mes]
? formatCurrency(row.valoresPorMes[mes]) ? (() => {
const { formatted, isNegative } =
formatCurrencyWithColor(row.valoresPorMes[mes]);
return (
<span
className={
isNegative ? 'text-red-600' : 'text-gray-900'
}
>
{formatted}
</span>
);
})()
: '-'} : '-'}
</div> </div>
))} ))}
@ -648,7 +667,18 @@ export default function Teste() {
className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs cursor-pointer hover:bg-blue-50" className="flex-1 min-w-[120px] max-w-[150px] text-right font-medium p-1 border-b px-1 text-xs cursor-pointer hover:bg-blue-50"
onClick={() => handleRowClick(row)} onClick={() => handleRowClick(row)}
> >
{formatCurrency(row.total!)} {(() => {
const { formatted, isNegative } = formatCurrencyWithColor(
row.total!
);
return (
<span
className={isNegative ? 'text-red-600' : 'text-gray-900'}
>
{formatted}
</span>
);
})()}
</div> </div>
</div> </div>
))} ))}