ajustes
This commit is contained in:
parent
6b0929e96f
commit
c859870321
|
|
@ -147,6 +147,12 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
}).format(value);
|
||||
};
|
||||
|
||||
const formatCurrencyWithColor = (value: number) => {
|
||||
const formatted = formatCurrency(value);
|
||||
const isNegative = value < 0;
|
||||
return { formatted, isNegative };
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('pt-BR');
|
||||
};
|
||||
|
|
@ -208,7 +214,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
|
||||
return (
|
||||
<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>
|
||||
{data.length > 0 && (
|
||||
<Button
|
||||
|
|
@ -265,7 +271,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
className="flex p-2 font-semibold text-xs"
|
||||
style={{ backgroundColor: 'white', opacity: 1 }}
|
||||
>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px]">
|
||||
<div className="flex-1 min-w-[80px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('data_competencia')}
|
||||
|
|
@ -275,7 +281,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('data_competencia')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px]">
|
||||
<div className="flex-1 min-w-[80px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('data_vencimento')}
|
||||
|
|
@ -285,7 +291,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('data_vencimento')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px]">
|
||||
<div className="flex-1 min-w-[80px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('data_caixa')}
|
||||
|
|
@ -295,7 +301,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('data_caixa')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px]">
|
||||
<div className="flex-1 min-w-[80px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('codigo_fornecedor')}
|
||||
|
|
@ -305,7 +311,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('codigo_fornecedor')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[150px] max-w-[200px]">
|
||||
<div className="flex-2 min-w-[120px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('nome_fornecedor')}
|
||||
|
|
@ -315,7 +321,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('nome_fornecedor')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px]">
|
||||
<div className="flex-1 min-w-[80px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('codigo_centrocusto')}
|
||||
|
|
@ -325,7 +331,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('codigo_centrocusto')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px]">
|
||||
<div className="flex-1 min-w-[80px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('codigo_conta')}
|
||||
|
|
@ -335,7 +341,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('codigo_conta')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[120px] max-w-[150px]">
|
||||
<div className="flex-2 min-w-[120px]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('conta')}
|
||||
|
|
@ -345,7 +351,7 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('conta')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px] text-right">
|
||||
<div className="flex-1 min-w-[80px] text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => handleSort('valor')}
|
||||
|
|
@ -355,11 +361,9 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
{getSortIcon('valor')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-[150px] max-w-[200px]">Histórico</div>
|
||||
<div className="flex-1 min-w-[150px] max-w-[200px]">
|
||||
Histórico 2
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px]">Recnum</div>
|
||||
<div className="flex-2 min-w-[120px]">Histórico</div>
|
||||
<div className="flex-2 min-w-[120px]">Histórico 2</div>
|
||||
<div className="flex-1 min-w-[80px]">Recnum</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -375,44 +379,56 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
) : (
|
||||
sortedData.map((row, index) => (
|
||||
<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)}
|
||||
</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)}
|
||||
</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)}
|
||||
</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 || '-'}
|
||||
</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 || '-'}
|
||||
</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 || '-'}
|
||||
</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 || '-'}
|
||||
</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 || '-'}
|
||||
</div>
|
||||
<div className="flex-1 min-w-[100px] max-w-[120px] text-right p-1 text-xs font-medium">
|
||||
{formatCurrency(
|
||||
typeof row.valor === 'string'
|
||||
? parseFloat(row.valor)
|
||||
: row.valor
|
||||
)}
|
||||
<div className="flex-1 min-w-[80px] text-right p-1 text-xs font-medium">
|
||||
{(() => {
|
||||
const valor =
|
||||
typeof row.valor === 'string'
|
||||
? parseFloat(row.valor)
|
||||
: row.valor;
|
||||
const { formatted, isNegative } =
|
||||
formatCurrencyWithColor(valor);
|
||||
return (
|
||||
<span
|
||||
className={
|
||||
isNegative ? 'text-red-600' : 'text-gray-900'
|
||||
}
|
||||
>
|
||||
{formatted}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</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 || '-'}
|
||||
</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 || '-'}
|
||||
</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 || '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -430,7 +446,17 @@ export default function AnaliticoComponent({ filtros }: AnaliticoProps) {
|
|||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</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
|
||||
const extractCodes = (grupo: string, subgrupo?: string) => {
|
||||
const grupoMatch = grupo.match(/^(\d+)/);
|
||||
|
|
@ -640,7 +647,19 @@ export default function Teste() {
|
|||
onClick={() => handleRowClick(row, 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>
|
||||
))}
|
||||
|
|
@ -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"
|
||||
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>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in New Issue