Gladyson/openmonetis
1
0
Fork 0
forked from git.gladyson/openmonetis
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(relatorios): reorganizar páginas e criar componente CategoryIconBadge

Browse Source 
- Renomear /relatorios/categorias para /relatorios/tendencias
- Renomear /relatorios/cartoes para /relatorios/uso-cartoes
- Criar componente CategoryIconBadge unificado com cores dinâmicas
- Atualizar cards de categorias com novo layout (ações no footer)
- Atualizar cards de orçamentos com CategoryIconBadge
- Adicionar tooltip detalhado nas células de tendências (valor anterior e diferença)
- Adicionar dot colorido (verde/vermelho) para indicar tipo de categoria

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-01-30 14:52:11 +00:00
parent 11f85e4b28
commit fd84a0d1ac
25 changed files with 611 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/relatorios/category-cell.tsx
View File

@@ -1,6 +1,11 @@
"use client";
import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { formatCurrency, formatPercentageChange } from "@/lib/relatorios/utils";
import { cn } from "@/lib/utils/ui";
@@ -22,25 +27,55 @@ export function CategoryCell({
? ((value - previousValue) / previousValue) * 100
: null;
const absoluteChange = !isFirstMonth ? value - previousValue : null;
const isIncrease = percentageChange !== null && percentageChange > 0;
const isDecrease = percentageChange !== null && percentageChange < 0;
return (
<div className="flex flex-col items-end gap-0.5 min-h-9">
<span className="font-medium">{formatCurrency(value)}</span>
{!isFirstMonth && percentageChange !== null && (
<div
className={cn(
"flex items-center gap-0.5 text-xs",
isIncrease && "text-red-600 dark:text-red-400",
isDecrease && "text-green-600 dark:text-green-400",
<Tooltip>
<TooltipTrigger asChild>
<div className="flex flex-col items-end gap-0.5 min-h-9 justify-center cursor-default px-4 py-2">
<span className="font-medium">{formatCurrency(value)}</span>
{!isFirstMonth && percentageChange !== null && (
<div
className={cn(
"flex items-center gap-0.5 text-xs",
isIncrease && "text-red-600 dark:text-red-400",
isDecrease && "text-green-600 dark:text-green-400",
)}
>
{isIncrease && <RiArrowUpLine className="h-3 w-3" />}
{isDecrease && <RiArrowDownLine className="h-3 w-3" />}
<span>{formatPercentageChange(percentageChange)}</span>
</div>
)}
>
{isIncrease && <RiArrowUpLine className="h-3 w-3" />}
{isDecrease && <RiArrowDownLine className="h-3 w-3" />}
<span>{formatPercentageChange(percentageChange)}</span>
</div>
)}
</div>
</TooltipTrigger>
<TooltipContent side="top" className="text-xs">
<div className="flex flex-col gap-1">
<div className="font-medium">{formatCurrency(value)}</div>
{!isFirstMonth && absoluteChange !== null && (
<>
<div className="font-bold">
Mês anterior: {formatCurrency(previousValue)}
</div>
<div
className={cn(
"font-medium",
isIncrease && "text-red-500",
isDecrease && "text-green-500",
)}
>
Diferença:{" "}
{absoluteChange >= 0
? `+${formatCurrency(absoluteChange)}`
: formatCurrency(absoluteChange)}
</div>
</>
)}
</div>
</TooltipContent>
</Tooltip>
);
}