ajustes
This commit is contained in:
parent
6b0929e96f
commit
c859870321
|
|
@ -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(
|
{(() => {
|
||||||
typeof row.valor === 'string'
|
const valor =
|
||||||
? parseFloat(row.valor)
|
typeof row.valor === 'string'
|
||||||
: row.valor
|
? parseFloat(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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue