git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-03-10 04:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(v1.4.0): design system semântico, correções de revalidação e melhorias de UX

Browse Source 
- Adicionar tokens semânticos de estado (success, warning, info) no globals.css
- Migrar ~60+ componentes de cores hardcoded do Tailwind para tokens semânticos
- Unificar 3 arrays duplicados de cores de categorias em importação única
- Corrigir widgets de boleto/fatura que não atualizavam após pagamento
  (actions de fatura e antecipação não invalidavam cache do dashboard)
- Corrigir scroll em listas Popover+Command (modal prop)
- Adicionar link "detalhes" no card de orçamento para página da categoria
- Adicionar indicadores de tendência coloridos nos cards de métricas
- Estender cores de chart de 6 para 10
- Normalizar dark mode e remover tokens não utilizados

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-07 15:14:59 +00:00
parent 390754c0e8
commit f50261208a
60 changed files with 324 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/ajustes/api-tokens-form.tsx
View File

@@ -226,14 +226,14 @@ export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
onClick={handleCopy}
>
{copied ? (
<RiCheckLine className="h-4 w-4 text-green-500" />
<RiCheckLine className="h-4 w-4 text-success" />
) : (
<RiFileCopyLine className="h-4 w-4" />
)}
</Button>
</div>
</div>
<div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-sm text-amber-800 dark:text-amber-200">
<div className="rounded-md bg-warning/10 p-3 text-sm text-warning">
<p className="font-medium">Importante:</p>
<ul className="list-disc list-inside mt-1 space-y-1">
<li>Guarde este token em local seguro</li>

2
components/ajustes/companion-tab.tsx
View File

@@ -75,7 +75,7 @@ export function CompanionTab({ tokens }: CompanionTabProps) {
<div>
<div className="flex items-center gap-2 mb-1">
<h2 className="text-lg font-bold">OpenSheets Companion</h2>
<span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
<span className="inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success dark:bg-success/10">
<RiAndroidLine className="h-3 w-3" />
Android
</span>

16
components/ajustes/update-email-form.tsx
View File

@@ -149,13 +149,13 @@ export function UpdateEmailForm({
aria-invalid={!isEmailDifferent}
className={
!isEmailDifferent
? "border-red-500 focus-visible:ring-red-500"
? "border-destructive focus-visible:ring-destructive"
: ""
}
/>
{!isEmailDifferent && newEmail && (
<p
className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1"
className="text-xs text-destructive flex items-center gap-1"
role="alert"
>
<RiCloseLine className="h-3.5 w-3.5" />O novo e-mail deve ser
@@ -188,9 +188,9 @@ export function UpdateEmailForm({
aria-invalid={emailsMatch === false}
className={
emailsMatch === false
? "border-red-500 focus-visible:ring-red-500 pr-10"
? "border-destructive focus-visible:ring-destructive pr-10"
: emailsMatch === true
? "border-green-500 focus-visible:ring-green-500 pr-10"
? "border-success focus-visible:ring-success pr-10"
: ""
}
/>
@@ -199,12 +199,12 @@ export function UpdateEmailForm({
<div className="absolute right-3 top-1/2 -translate-y-1/2">
{emailsMatch ? (
<RiCheckLine
className="h-5 w-5 text-green-500"
className="h-5 w-5 text-success"
aria-label="Os e-mails coincidem"
/>
) : (
<RiCloseLine
className="h-5 w-5 text-red-500"
className="h-5 w-5 text-destructive"
aria-label="Os e-mails não coincidem"
/>
)}
@@ -215,7 +215,7 @@ export function UpdateEmailForm({
{emailsMatch === false && (
<p
id="confirm-email-help"
className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1"
className="text-xs text-destructive flex items-center gap-1"
role="alert"
>
<RiCloseLine className="h-3.5 w-3.5" />
@@ -225,7 +225,7 @@ export function UpdateEmailForm({
{emailsMatch === true && (
<p
id="confirm-email-help"
className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1"
className="text-xs text-success flex items-center gap-1"
>
<RiCheckLine className="h-3.5 w-3.5" />
Os e-mails coincidem

24
components/ajustes/update-password-form.tsx
View File

@@ -55,9 +55,7 @@ function PasswordRequirement({ met, label }: { met: boolean; label: string }) {
<div
className={cn(
"flex items-center gap-1.5 text-xs transition-colors",
met
? "text-emerald-600 dark:text-emerald-400"
: "text-muted-foreground",
met ? "text-success" : "text-muted-foreground",
)}
>
{met ? (
@@ -133,14 +131,14 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
// Se o usuário usa Google OAuth, mostrar aviso
if (isGoogleAuth) {
return (
<div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/20">
<div className="rounded-lg border border-warning/30 bg-warning/10 p-4 dark:border-warning/20 dark:bg-warning/10">
<div className="flex gap-3">
<RiAlertLine className="h-5 w-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
<RiAlertLine className="h-5 w-5 text-warning shrink-0 mt-0.5" />
<div>
<h3 className="font-medium text-amber-900 dark:text-amber-400">
<h3 className="font-medium text-warning">
Alteração de senha não disponível
</h3>
<p className="mt-1 text-sm text-amber-800 dark:text-amber-500">
<p className="mt-1 text-sm text-warning">
Você fez login usando sua conta do Google. A senha é gerenciada
diretamente pelo Google e não pode ser alterada aqui. Para
modificar sua senha, acesse as configurações de segurança da sua
@@ -285,9 +283,9 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
aria-invalid={passwordsMatch === false}
className={
passwordsMatch === false
? "border-red-500 focus-visible:ring-red-500"
? "border-destructive focus-visible:ring-destructive"
: passwordsMatch === true
? "border-green-500 focus-visible:ring-green-500"
? "border-success focus-visible:ring-success"
: ""
}
/>
@@ -312,12 +310,12 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
<div className="absolute right-3 top-1/2 -translate-y-1/2">
{passwordsMatch ? (
<RiCheckLine
className="h-5 w-5 text-green-500"
className="h-5 w-5 text-success"
aria-label="As senhas coincidem"
/>
) : (
<RiCloseLine
className="h-5 w-5 text-red-500"
className="h-5 w-5 text-destructive"
aria-label="As senhas não coincidem"
/>
)}
@@ -328,7 +326,7 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
{passwordsMatch === false && (
<p
id="confirm-password-help"
className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1"
className="text-xs text-destructive flex items-center gap-1"
role="alert"
>
<RiCloseLine className="h-3.5 w-3.5" />
@@ -338,7 +336,7 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
{passwordsMatch === true && (
<p
id="confirm-password-help"
className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1"
className="text-xs text-success flex items-center gap-1"
>
<RiCheckLine className="h-3.5 w-3.5" />
As senhas coincidem

2
components/anotacoes/note-card.tsx
View File

@@ -104,7 +104,7 @@ export function NoteCard({
<div
className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
task.completed
? "bg-green-600 border-green-600"
? "bg-success border-success"
: "border-input"
}`}
>

2
components/anotacoes/note-details-dialog.tsx
View File

@@ -79,7 +79,7 @@ export function NoteDetailsDialog({
<div
className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
task.completed
? "bg-green-600 border-green-600"
? "bg-success border-success"
: "border-input"
}`}
>

2
components/anotacoes/note-dialog.tsx
View File

@@ -383,7 +383,7 @@ export function NoteDialog({
className="flex items-center gap-3 px-3 py-2 flex-row mt-1"
>
<Checkbox
className="data-[state=checked]:bg-green-600 data-[state=checked]:border-green-600"
className="data-[state=checked]:bg-success data-[state=checked]:border-success"
checked={task.completed}
onCheckedChange={() => handleToggleTask(task.id)}
disabled={isPending}

2
components/auth/auth-error-alert.tsx
View File

@@ -9,7 +9,7 @@ export function AuthErrorAlert({ error }: AuthErrorAlertProps) {
if (!error) return null;
return (
<Alert className="mt-2 border border-red-500" variant="destructive">
<Alert className="mt-2 border border-destructive" variant="destructive">
<RiTerminalLine className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>

4
components/auth/signup-form.tsx
View File

@@ -61,9 +61,7 @@ function PasswordRequirement({ met, label }: { met: boolean; label: string }) {
<div
className={cn(
"flex items-center gap-1.5 text-xs transition-colors",
met
? "text-emerald-600 dark:text-emerald-400"
: "text-muted-foreground",
met ? "text-success" : "text-muted-foreground",
)}
>
{met ? (

2
components/calendario/calendar-legend.tsx
View File

@@ -12,7 +12,7 @@ const LEGEND_ITEMS: Array<{
{ type: "lancamento", label: "Lançamentos" },
{ type: "boleto", label: "Boleto com vencimento" },
{ type: "cartao", label: "Vencimento de cartão" },
{ label: "Pagamento fatura", dotColor: "bg-green-600" },
{ label: "Pagamento fatura", dotColor: "bg-success" },
];
export function CalendarLegend() {

12
components/calendario/day-cell.tsx
View File

@@ -18,13 +18,13 @@ export const EVENT_TYPE_STYLES: Record<
> = {
lancamento: {
wrapper:
"bg-orange-100 text-orange-600 dark:bg-orange-900/10 dark:text-orange-50 border-l-4 border-orange-500",
dot: "bg-orange-600",
"bg-warning/10 text-warning dark:bg-warning/5 dark:text-warning border-l-4 border-warning",
dot: "bg-warning",
},
boleto: {
wrapper:
"bg-blue-100 text-blue-600 dark:bg-blue-900/10 dark:text-blue-50 border-l-4 border-blue-500",
dot: "bg-blue-600",
"bg-info/10 text-info dark:bg-info/5 dark:text-info border-l-4 border-info",
dot: "bg-info",
},
cartao: {
wrapper:
@@ -87,8 +87,8 @@ const getEventStyle = (event: CalendarEvent) => {
if (isPagamentoFatura(event)) {
return {
wrapper:
"bg-green-100 text-green-600 dark:bg-green-900/10 dark:text-green-50 border-l-4 border-green-500",
dot: "bg-green-600",
"bg-success/10 text-success dark:bg-success/5 dark:text-success border-l-4 border-success",
dot: "bg-success",
};
}
return eventStyles[event.type];

8
components/calendario/event-modal.tsx
View File

@@ -35,7 +35,7 @@ const EventCard = ({
isPagamentoFatura?: boolean;
}) => {
const style = isPagamentoFatura
? { dot: "bg-green-600" }
? { dot: "bg-success" }
: EVENT_TYPE_STYLES[type];
return (
<Card className="flex flex-row gap-2 p-3 mb-1">
@@ -61,7 +61,7 @@ const renderLancamento = (
<div className="flex flex-col gap-1">
<span
className={`text-sm font-semibold leading-tight ${
isPagamentoFatura && "text-green-600 dark:text-green-400"
isPagamentoFatura && "text-success"
}`}
>
{event.lancamento.name}
@@ -76,9 +76,7 @@ const renderLancamento = (
<span
className={cn(
"text-sm font-semibold whitespace-nowrap",
isReceita
? "text-green-600 dark:text-green-400"
: "text-foreground",
isReceita ? "text-success" : "text-foreground",
)}
>
<MoneyValues

6
components/cartoes/card-select-items.tsx
View File

@@ -56,11 +56,7 @@ export function StatusSelectContent({ label }: { label: string }) {
return (
<span className="flex items-center gap-2">
<DotIcon
color={
isActive
? "bg-emerald-600 dark:bg-emerald-300"
: "bg-slate-400 dark:bg-slate-500"
}
color={isActive ? "bg-success" : "bg-slate-400 dark:bg-slate-500"}
/>
<span>{label}</span>
</span>

14
components/categorias/category-detail-header.tsx
View File

@@ -1,4 +1,4 @@
import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
import type { CategoryType } from "@/lib/categorias/constants";
import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
import { cn } from "@/lib/utils/ui";
@@ -40,22 +40,22 @@ export function CategoryDetailHeader({
const variationColor =
category.type === "receita"
? isIncrease
? "text-emerald-600"
? "text-success"
: isDecrease
? "text-rose-600"
? "text-destructive"
: "text-muted-foreground"
: isIncrease
? "text-rose-600"
? "text-destructive"
: isDecrease
? "text-emerald-600"
? "text-success"
: "text-muted-foreground";
const variationIcon =
isIncrease || isDecrease ? (
isIncrease ? (
<RiArrowUpLine className="size-4" aria-hidden />
<RiArrowUpSFill className="size-4" aria-hidden />
) : (
<RiArrowDownLine className="size-4" aria-hidden />
<RiArrowDownSFill className="size-4" aria-hidden />
)
) : null;

8
components/categorias/category-select-items.tsx
View File

@@ -7,13 +7,7 @@ export function TypeSelectContent({ label }: { label: string }) {
return (
<span className="flex items-center gap-2">
<DotIcon
color={
isReceita
? "bg-emerald-600 dark:bg-emerald-300"
: "bg-rose-600 dark:bg-rose-300"
}
/>
<DotIcon color={isReceita ? "bg-success" : "bg-destructive"} />
<span>{label}</span>
</span>
);

6
components/contas/account-select-items.tsx
View File

@@ -8,11 +8,7 @@ export function StatusSelectContent({ label }: { label: string }) {
return (
<span className="flex items-center gap-2">
<DotIcon
color={
isActive
? "bg-emerald-600 dark:bg-emerald-300"
: "bg-slate-400 dark:bg-slate-500"
}
color={isActive ? "bg-success" : "bg-slate-400 dark:bg-slate-500"}
/>
<span>{label}</span>
</span>

4
components/contas/account-statement-card.tsx
View File

@@ -113,7 +113,7 @@ export function AccountStatementCard({
<DetailItem
label="Entradas"
value={
<span className="font-medium text-emerald-600">
<span className="font-medium text-success">
{formatCurrency(totalIncomes)}
</span>
}
@@ -137,7 +137,7 @@ export function AccountStatementCard({
className={cn(
"font-semibold text-xl",
totalIncomes - totalExpenses >= 0
? "text-emerald-600"
? "text-success"
: "text-destructive",
)}
/>

7
components/dashboard/boletos-widget.tsx
View File

@@ -182,8 +182,7 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
<span
className={cn(
"rounded-full py-0.5",
boleto.isSettled &&
"text-green-600 dark:text-green-400",
boleto.isSettled && "text-success",
)}
>
{statusLabel}
@@ -203,7 +202,7 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
onClick={() => handleOpenModal(boleto.id)}
>
{boleto.isSettled ? (
<span className="flex items-center gap-1 text-green-600 dark:text-green-400">
<span className="flex items-center gap-1 text-success">
<RiCheckboxCircleFill className="size-3" /> Pago
</span>
) : (
@@ -248,7 +247,7 @@ export function BoletosWidget({ boletos }: BoletosWidgetProps) {
>
{modalState === "success" ? (
<div className="flex flex-col items-center gap-4 py-6 text-center">
<div className="flex size-16 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
<RiCheckboxCircleLine className="size-8" />
</div>
<div className="space-y-2">

20
components/dashboard/category-history-widget.tsx
View File

@@ -28,6 +28,7 @@ import {
} from "@/components/ui/popover";
import { WidgetEmptyState } from "@/components/widget-empty-state";
import type { CategoryHistoryData } from "@/lib/dashboard/categories/category-history";
import { CATEGORY_COLORS } from "@/lib/utils/category-colors";
import { getIconComponent } from "@/lib/utils/icons";
type CategoryHistoryWidgetProps = {
@@ -36,14 +37,7 @@ type CategoryHistoryWidgetProps = {
const STORAGE_KEY_SELECTED = "dashboard-category-history-selected";
// Vibrant colors for categories
const CHART_COLORS = [
"#ef4444", // red-500
"#3b82f6", // blue-500
"#10b981", // emerald-500
"#f59e0b", // amber-500
"#8b5cf6", // violet-500
];
const CHART_COLORS = CATEGORY_COLORS;
export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
@@ -260,7 +254,7 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
)}
{selectedCategories.length < 5 && availableCategories.length > 0 && (
<Popover open={open} onOpenChange={setOpen}>
<Popover open={open} onOpenChange={setOpen} modal>
<PopoverTrigger asChild>
<Button
variant="outline"
@@ -295,9 +289,9 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
className="gap-2"
>
{IconComponent ? (
<IconComponent className="size-4 text-red-600" />
<IconComponent className="size-4 text-destructive" />
) : (
<div className="size-3 rounded-sm bg-red-600" />
<div className="size-3 rounded-sm bg-destructive" />
)}
<span>{category.name}</span>
</CommandItem>
@@ -320,9 +314,9 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
className="gap-2"
>
{IconComponent ? (
<IconComponent className="size-4 text-green-600" />
<IconComponent className="size-4 text-success" />
) : (
<div className="size-3 rounded-sm bg-green-600" />
<div className="size-3 rounded-sm bg-success" />
)}
<span>{category.name}</span>
</CommandItem>

20
components/dashboard/expenses-by-category-widget-with-chart.tsx
View File

@@ -1,8 +1,8 @@
"use client";
import {
RiArrowDownLine,
RiArrowUpLine,
RiArrowDownSFill,
RiArrowUpSFill,
RiExternalLinkLine,
RiListUnordered,
RiPieChart2Line,
@@ -220,14 +220,14 @@ export function ExpensesByCategoryWidgetWithChart({
<span
className={`flex items-center gap-0.5 text-xs ${
hasIncrease
? "text-red-600 dark:text-red-500"
? "text-destructive"
: hasDecrease
? "text-green-600 dark:text-green-500"
? "text-success"
: "text-muted-foreground"
}`}
>
{hasIncrease && <RiArrowUpLine className="size-3" />}
{hasDecrease && <RiArrowDownLine className="size-3" />}
{hasIncrease && <RiArrowUpSFill className="size-3" />}
{hasDecrease && <RiArrowDownSFill className="size-3" />}
{formatPercentage(category.percentageChange)}
</span>
)}
@@ -238,16 +238,12 @@ export function ExpensesByCategoryWidgetWithChart({
<div className="ml-11 flex items-center gap-1.5 text-xs">
<RiWallet3Line
className={`size-3 ${
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
budgetExceeded ? "text-destructive" : "text-info"
}`}
/>
<span
className={
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
budgetExceeded ? "text-destructive" : "text-info"
}
>
{budgetExceeded ? (

22
components/dashboard/expenses-by-category-widget.tsx
View File

@@ -1,6 +1,6 @@
import {
RiArrowDownLine,
RiArrowUpLine,
RiArrowDownSFill,
RiArrowUpSFill,
RiExternalLinkLine,
RiPieChartLine,
RiWallet3Line,
@@ -127,14 +127,14 @@ export function ExpensesByCategoryWidget({
<span
className={`flex items-center gap-0.5 text-xs ${
hasIncrease
? "text-red-600 dark:text-red-500"
? "text-destructive"
: hasDecrease
? "text-green-600 dark:text-green-500"
? "text-success"
: "text-muted-foreground"
}`}
>
{hasIncrease && <RiArrowUpLine className="size-3" />}
{hasDecrease && <RiArrowDownLine className="size-3" />}
{hasIncrease && <RiArrowUpSFill className="size-3" />}
{hasDecrease && <RiArrowDownSFill className="size-3" />}
{formatPercentage(category.percentageChange)}
</span>
)}
@@ -145,17 +145,11 @@ export function ExpensesByCategoryWidget({
<div className="ml-11 flex items-center gap-1.5 text-xs">
<RiWallet3Line
className={`size-3 ${
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
budgetExceeded ? "text-destructive" : "text-info"
}`}
/>
<span
className={
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
}
className={budgetExceeded ? "text-destructive" : "text-info"}
>
{budgetExceeded ? (
<>

20
components/dashboard/income-by-category-widget-with-chart.tsx
View File

@@ -1,8 +1,8 @@
"use client";
import {
RiArrowDownLine,
RiArrowUpLine,
RiArrowDownSFill,
RiArrowUpSFill,
RiExternalLinkLine,
RiListUnordered,
RiPieChart2Line,
@@ -220,14 +220,14 @@ export function IncomeByCategoryWidgetWithChart({
<span
className={`flex items-center gap-0.5 text-xs ${
hasIncrease
? "text-green-600 dark:text-green-500"
? "text-success"
: hasDecrease
? "text-red-600 dark:text-red-500"
? "text-destructive"
: "text-muted-foreground"
}`}
>
{hasIncrease && <RiArrowUpLine className="size-3" />}
{hasDecrease && <RiArrowDownLine className="size-3" />}
{hasIncrease && <RiArrowUpSFill className="size-3" />}
{hasDecrease && <RiArrowDownSFill className="size-3" />}
{formatPercentage(category.percentageChange)}
</span>
)}
@@ -240,16 +240,12 @@ export function IncomeByCategoryWidgetWithChart({
<div className="ml-11 flex items-center gap-1.5 text-xs">
<RiWallet3Line
className={`size-3 ${
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
budgetExceeded ? "text-destructive" : "text-info"
}`}
/>
<span
className={
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
budgetExceeded ? "text-destructive" : "text-info"
}
>
{budgetExceeded ? (

20
components/dashboard/income-by-category-widget.tsx
View File

@@ -1,6 +1,6 @@
import {
RiArrowDownLine,
RiArrowUpLine,
RiArrowDownSFill,
RiArrowUpSFill,
RiExternalLinkLine,
RiPieChartLine,
RiWallet3Line,
@@ -127,14 +127,14 @@ export function IncomeByCategoryWidget({
<span
className={`flex items-center gap-0.5 text-xs ${
hasIncrease
? "text-green-600 dark:text-green-500"
? "text-success"
: hasDecrease
? "text-red-600 dark:text-red-500"
? "text-destructive"
: "text-muted-foreground"
}`}
>
{hasIncrease && <RiArrowUpLine className="size-3" />}
{hasDecrease && <RiArrowDownLine className="size-3" />}
{hasIncrease && <RiArrowUpSFill className="size-3" />}
{hasDecrease && <RiArrowDownSFill className="size-3" />}
{formatPercentage(category.percentageChange)}
</span>
)}
@@ -147,16 +147,12 @@ export function IncomeByCategoryWidget({
<div className="ml-11 flex items-center gap-1.5 text-xs">
<RiWallet3Line
className={`size-3 ${
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
budgetExceeded ? "text-destructive" : "text-info"
}`}
/>
<span
className={
budgetExceeded
? "text-red-600"
: "text-blue-600 dark:text-blue-400"
budgetExceeded ? "text-destructive" : "text-info"
}
>
{budgetExceeded ? (

12
components/dashboard/installment-analysis/installment-group-card.tsx
View File

@@ -176,7 +176,7 @@ export function InstallmentGroupCard({
"flex items-center gap-3 rounded-md border p-2 transition-colors",
isSelected && !isPaid && "border-primary/50 bg-primary/5",
isPaid &&
"border-green-400 bg-green-50 dark:border-green-900 dark:bg-green-950/30",
"border-success/40 bg-success/5 dark:border-success/20 dark:bg-success/5",
)}
>
<Checkbox
@@ -194,7 +194,7 @@ export function InstallmentGroupCard({
className={cn(
"text-xs font-medium",
isPaid &&
"text-green-700 dark:text-green-400 line-through decoration-green-600/50",
"text-success line-through decoration-success/50",
)}
>
Parcela {installment.currentInstallment}/
@@ -202,7 +202,7 @@ export function InstallmentGroupCard({
{isPaid && (
<Badge
variant="outline"
className="ml-1 text-xs border-none border-green-700 text-green-700 dark:text-green-400"
className="ml-1 text-xs border-none text-success"
>
<RiCheckboxCircleFill /> Pago
</Badge>
@@ -211,9 +211,7 @@ export function InstallmentGroupCard({
<p
className={cn(
"text-xs mt-1",
isPaid
? "text-green-700 dark:text-green-500"
: "text-muted-foreground",
isPaid ? "text-success" : "text-muted-foreground",
)}
>
Vencimento: {dueDate}
@@ -224,7 +222,7 @@ export function InstallmentGroupCard({
amount={installment.amount}
className={cn(
"shrink-0 text-sm",
isPaid && "text-green-700 dark:text-green-400",
isPaid && "text-success",
)}
/>
</div>

8
components/dashboard/invoices-widget.tsx
View File

@@ -358,7 +358,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
{!isPaid ? <span>{dueInfo.label}</span> : null}
{isPaid && paymentInfo ? (
<span className="text-green-600 dark:text-green-400">
<span className="text-success">
{paymentInfo.label}
</span>
) : null}
@@ -378,7 +378,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
className="p-0 h-auto disabled:opacity-100"
>
{isPaid ? (
<span className="text-green-600 dark:text-green-400 flex items-center gap-1">
<span className="text-success flex items-center gap-1">
<RiCheckboxCircleFill className="size-3" /> Pago
</span>
) : (
@@ -421,7 +421,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
>
{modalState === "success" ? (
<div className="flex flex-col items-center gap-4 py-6 text-center">
<div className="flex size-16 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
<RiCheckboxCircleLine className="size-8" />
</div>
<div className="space-y-2">
@@ -489,7 +489,7 @@ export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
) : null}
{selectedInvoice.paymentStatus ===
INVOICE_PAYMENT_STATUS.PAID && selectedPaymentInfo ? (
<p className="text-xs text-emerald-600">
<p className="text-xs text-success">
{selectedPaymentInfo.label}
</p>
) : null}

4
components/dashboard/payment-status-widget.tsx
View File

@@ -47,13 +47,13 @@ function CategorySection({
{/* Status de confirmados e pendentes */}
<div className="flex items-center justify-between gap-4 text-sm">
<div className="flex items-center gap-1.5 ">
<RiCheckboxCircleLine className="size-3 text-emerald-600" />
<RiCheckboxCircleLine className="size-3 text-success" />
<MoneyValues amount={confirmed} />
<span className="text-xs text-muted-foreground">confirmados</span>
</div>
<div className="flex items-center gap-1.5 ">
<RiHourglass2Line className="size-3 text-orange-500" />
<RiHourglass2Line className="size-3 text-warning" />
<MoneyValues amount={pending} />
<span className="text-xs text-muted-foreground">pendentes</span>
</div>

4
components/dashboard/purchases-by-category-widget.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { RiArrowDownLine, RiStore3Line } from "@remixicon/react";
import { RiArrowDownSFill, RiStore3Line } from "@remixicon/react";
import { useEffect, useMemo, useState } from "react";
import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
import MoneyValues from "@/components/money-values";
@@ -146,7 +146,7 @@ export function PurchasesByCategoryWidget({
{currentTransactions.length === 0 ? (
<WidgetEmptyState
icon={<RiArrowDownLine className="size-6 text-muted-foreground" />}
icon={<RiArrowDownSFill className="size-6 text-muted-foreground" />}
title="Nenhuma compra encontrada"
description={
selectedCategory

49
components/dashboard/section-cards.tsx
View File

@@ -1,11 +1,12 @@
import {
RiArrowDownLine,
RiArrowDownSFill,
RiArrowUpLine,
RiCurrencyLine,
RiArrowUpSFill,
RiCashLine,
RiIncreaseDecreaseLine,
RiSubtractLine,
} from "@remixicon/react";
import { Badge } from "@/components/ui/badge";
import {
Card,
CardAction,
@@ -25,15 +26,30 @@ type Trend = "up" | "down" | "flat";
const TREND_THRESHOLD = 0.005;
const CARDS = [
{ label: "Receitas", key: "receitas", icon: RiArrowUpLine },
{ label: "Despesas", key: "despesas", icon: RiArrowDownLine },
{ label: "Balanço", key: "balanco", icon: RiIncreaseDecreaseLine },
{ label: "Previsto", key: "previsto", icon: RiCurrencyLine },
{
label: "Receitas",
key: "receitas",
icon: RiArrowUpLine,
invertTrend: false,
},
{
label: "Despesas",
key: "despesas",
icon: RiArrowDownLine,
invertTrend: true,
},
{
label: "Balanço",
key: "balanco",
icon: RiIncreaseDecreaseLine,
invertTrend: false,
},
{ label: "Previsto", key: "previsto", icon: RiCashLine, invertTrend: false },
] as const;
const TREND_ICONS = {
up: RiArrowUpLine,
down: RiArrowDownLine,
up: RiArrowUpSFill,
down: RiArrowDownSFill,
flat: RiSubtractLine,
} as const;
@@ -58,13 +74,22 @@ const getPercentChange = (current: number, previous: number): string => {
: "—";
};
const getTrendColor = (trend: Trend, invertTrend: boolean): string => {
if (trend === "flat") return "";
const isPositive = invertTrend ? trend === "down" : trend === "up";
return isPositive
? "text-success border-success"
: "text-destructive border-destructive";
};
export function SectionCards({ metrics }: SectionCardsProps) {
return (
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
{CARDS.map(({ label, key, icon: Icon }) => {
{CARDS.map(({ label, key, icon: Icon, invertTrend }) => {
const metric = metrics[key];
const trend = getTrend(metric.current, metric.previous);
const TrendIcon = TREND_ICONS[trend];
const trendColor = getTrendColor(trend, invertTrend);
return (
<Card key={label} className="@container/card gap-2">
@@ -75,10 +100,10 @@ export function SectionCards({ metrics }: SectionCardsProps) {
</CardTitle>
<MoneyValues className="text-2xl" amount={metric.current} />
<CardAction>
<Badge variant="outline">
<TrendIcon />
<div className={`flex items-center text-xs ${trendColor}`}>
<TrendIcon size={16} />
{getPercentChange(metric.current, metric.previous)}
</Badge>
</div>
</CardAction>
</CardHeader>
<CardFooter className="flex-col items-start gap-2 text-sm">

2
components/faturas/invoice-summary-card.tsx
View File

@@ -93,7 +93,7 @@ const getCardStatusDotColor = (status: string | null) => {
if (!status) return "bg-gray-400";
const normalizedStatus = status.toLowerCase();
if (normalizedStatus === "ativo" || normalizedStatus === "active") {
return "bg-green-500";
return "bg-success";
}
return "bg-gray-400";
};

6
components/feedback/feedback-dialog.tsx
View File

@@ -35,7 +35,7 @@ const feedbackCategories = [
title: "Reportar Bug",
icon: RiBugLine,
description: "Encontrou algo que não está funcionando?",
color: "text-red-500 dark:text-red-400",
color: "text-destructive",
url: GITHUB_ISSUES_URL,
},
{
@@ -43,7 +43,7 @@ const feedbackCategories = [
title: "Sugerir Feature",
icon: RiLightbulbLine,
description: "Tem uma ideia para melhorar o app?",
color: "text-yellow-500 dark:text-yellow-400",
color: "text-warning",
url: `${GITHUB_DISCUSSIONS_BASE}?category=ideias`,
},
{
@@ -51,7 +51,7 @@ const feedbackCategories = [
title: "Dúvidas/Suporte",
icon: RiQuestionLine,
description: "Precisa de ajuda com alguma coisa?",
color: "text-blue-500 dark:text-blue-400",
color: "text-info",
url: `${GITHUB_DISCUSSIONS_BASE}?category=q-a`,
},
{

2
components/lancamentos/dialogs/anticipate-installments-dialog/anticipate-installments-dialog.tsx
View File

@@ -365,7 +365,7 @@ export function AnticipateInstallmentsDialog({
{Number(formState.discount) > 0 && (
<div className="flex items-center justify-between">
<dt className="text-muted-foreground">Desconto</dt>
<dd className="font-medium tabular-nums text-green-600">
<dd className="font-medium tabular-nums text-success">
-{" "}
<MoneyValues
amount={Number(formState.discount)}

6
components/lancamentos/select-items.tsx
View File

@@ -49,9 +49,9 @@ export function CategoriaSelectContent({
export function TransactionTypeSelectContent({ label }: { label: string }) {
const colorMap: Record<string, string> = {
Receita: "bg-emerald-600 dark:bg-emerald-400",
Despesa: "bg-red-600 dark:bg-red-400",
Transferência: "bg-blue-600 dark:bg-blue-400",
Receita: "bg-success",
Despesa: "bg-destructive",
Transferência: "bg-info",
};
return (

2
components/lancamentos/shared/anticipation-card.tsx
View File

@@ -92,7 +92,7 @@ export function AnticipationCard({
{Number(anticipation.discount) > 0 && (
<div>
<dt className="text-muted-foreground">Desconto</dt>
<dd className="mt-1 font-medium tabular-nums text-green-600">
<dd className="mt-1 font-medium tabular-nums text-success">
- <MoneyValues amount={Number(anticipation.discount)} />
</dd>
</div>

4
components/lancamentos/shared/estabelecimento-input.tsx
View File

@@ -67,7 +67,7 @@ export function EstabelecimentoInput({
}, [estabelecimentos, searchValue]);
return (
<Popover open={open} onOpenChange={setOpen}>
<Popover open={open} onOpenChange={setOpen} modal>
<PopoverTrigger asChild>
<div className="relative">
<Input
@@ -112,7 +112,7 @@ export function EstabelecimentoInput({
className={cn(
"size-4 shrink-0",
value === item
? "opacity-100 text-green-500"
? "opacity-100 text-success"
: "opacity-5",
)}
/>

8
components/lancamentos/shared/installment-timeline.tsx
View File

@@ -30,7 +30,7 @@ export function InstallmentTimeline({
{/* Linha de conexão */}
<div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
<div
className="h-full bg-green-600 transition-all duration-300"
className="h-full bg-success transition-all duration-300"
style={{
width: `${
((currentInstallment - 1) / (totalInstallments - 1)) * 100
@@ -41,7 +41,7 @@ export function InstallmentTimeline({
{/* Ponto 1: Data de Compra */}
<div className="relative z-10 flex flex-col items-center gap-2">
<div className="flex size-4 items-center justify-center rounded-full border-2 border-green-600 bg-green-600 shadow-sm">
<div className="flex size-4 items-center justify-center rounded-full border-2 border-success bg-success shadow-sm">
<RiCheckLine className="size-5 text-white" />
</div>
<div className="flex flex-col items-center">
@@ -57,7 +57,7 @@ export function InstallmentTimeline({
{/* Ponto 2: Parcela Atual */}
<div className="relative z-10 flex flex-col items-center gap-2">
<div
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-orange-600 bg-orange-600`}
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-warning bg-warning`}
>
<RiArrowDownFill className="size-5 text-white" />
</div>
@@ -74,7 +74,7 @@ export function InstallmentTimeline({
{/* Ponto 3: Última Parcela */}
<div className="relative z-10 flex flex-col items-center gap-2">
<div
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-green-600 bg-green-600`}
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-success bg-success`}
>
<RiCheckLine className="size-5 text-white" />
</div>

6
components/lancamentos/table/lancamentos-filters.tsx
View File

@@ -388,7 +388,11 @@ export function LancamentosFilters({
<div className="space-y-2">
<label className="text-sm font-medium">Categoria</label>
<Popover open={categoriaOpen} onOpenChange={setCategoriaOpen}>
<Popover
open={categoriaOpen}
onOpenChange={setCategoriaOpen}
modal
>
<PopoverTrigger asChild>
<Button
variant="outline"

14
components/lancamentos/table/lancamentos-table.tsx
View File

@@ -324,10 +324,8 @@ const buildColumns = ({
showPositiveSign={isReceita}
className={cn(
"whitespace-nowrap",
isReceita
? "text-green-600 dark:text-green-400"
: "text-foreground",
isTransfer && "text-blue-700 dark:text-blue-500",
isReceita ? "text-success" : "text-foreground",
isTransfer && "text-info",
)}
/>
);
@@ -545,7 +543,7 @@ const buildColumns = ({
{loading ? (
<Spinner className="size-4" />
) : (
<Icon className={cn("size-4", settled && "text-green-600")} />
<Icon className={cn("size-4", settled && "text-success")} />
)}
<span className="sr-only">
{settled ? "Desfazer pagamento" : "Marcar como pago"}
@@ -631,7 +629,7 @@ const buildColumns = ({
{row.original.isAnticipated && (
<DropdownMenuItem disabled>
<RiCheckLine className="size-4 text-green-500" />
<RiCheckLine className="size-4 text-success" />
Parcela Antecipada
</DropdownMenuItem>
)}
@@ -799,7 +797,7 @@ export function LancamentosTable({
variant="outline"
className="w-full sm:w-auto"
>
<RiAddCircleLine className="size-4 text-green-500" />
<RiAddCircleLine className="size-4 text-success" />
Nova Receita
</Button>
<Button
@@ -807,7 +805,7 @@ export function LancamentosTable({
variant="outline"
className="w-full sm:w-auto"
>
<RiAddCircleLine className="size-4 text-red-500" />
<RiAddCircleLine className="size-4 text-destructive" />
Nova Despesa
</Button>
</>

2
components/month-picker/month-navigation.tsx
View File

@@ -79,7 +79,7 @@ export default function MonthNavigation() {
};
return (
<Card className="sticky top-0 z-30 w-full flex-row bg-month-picker text-month-picker-foreground p-4">
<Card className="sticky top-0 z-30 w-full flex-row bg-card text-card-foreground p-4">
<div className="flex items-center gap-1">
<NavigationButton
direction="left"

2
components/month-picker/nav-button.tsx
View File

@@ -18,7 +18,7 @@ export default function NavigationButton({
return (
<button
onClick={onClick}
className="text-month-picker-foreground transition-all duration-200 cursor-pointer rounded-lg p-1 hover:bg-month-picker-foreground/10 focus:outline-hidden focus:ring-2 focus:ring-month-picker-foreground/30 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
className="text-card-foreground transition-all duration-200 cursor-pointer rounded-lg p-1 hover:bg-card-foreground/10 focus:outline-hidden focus:ring-2 focus:ring-card-foreground/30 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
disabled={disabled}
aria-label={`Navegar para o mês ${
direction === "left" ? "anterior" : "seguinte"

19
components/orcamentos/budget-card.tsx
View File

@@ -1,6 +1,11 @@
"use client";
import { RiDeleteBin5Line, RiPencilLine } from "@remixicon/react";
import {
RiDeleteBin5Line,
RiFileList2Line,
RiPencilLine,
} from "@remixicon/react";
import Link from "next/link";
import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
import MoneyValues from "@/components/money-values";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
@@ -78,11 +83,11 @@ export function BudgetCard({
<div>
{exceeded ? (
<div className="text-xs text-red-500">
<div className="text-xs text-destructive">
Excedeu em <MoneyValues amount={difference} />
</div>
) : (
<div className="text-xs text-green-600">
<div className="text-xs text-success">
Restam <MoneyValues amount={Math.max(limit - spent, 0)} />{" "}
disponíveis.
</div>
@@ -98,6 +103,14 @@ export function BudgetCard({
>
<RiPencilLine className="size-4" aria-hidden /> editar
</button>
{budget.category && (
<Link
href={`/categorias/${budget.category.id}`}
className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
>
<RiFileList2Line className="size-4" aria-hidden /> detalhes
</Link>
)}
<button
type="button"
onClick={() => onRemove(budget)}

8
components/pagadores/details/pagador-info-card.tsx
View File

@@ -193,7 +193,7 @@ export function PagadorInfoCard({
</span>
</>
) : (
<span className="text-xs font-medium text-amber-600">
<span className="text-xs font-medium text-warning">
Acesso somente leitura
</span>
)}
@@ -247,7 +247,7 @@ export function PagadorInfoCard({
<InfoItem
label="Aviso"
value={
<span className="text-[13px] text-amber-700">
<span className="text-[13px] text-warning">
Cadastre um e-mail para permitir o envio automático.
</span>
}
@@ -397,7 +397,7 @@ export function PagadorInfoCard({
<div className="grid gap-2 sm:grid-cols-2">
<div>
<p className="text-xs text-muted-foreground">Pagos</p>
<p className="text-sm font-semibold text-green-600">
<p className="text-sm font-semibold text-success">
{formatCurrency(summary.boletoStats.paidAmount)}{" "}
<span className="text-xs font-normal">
({summary.boletoStats.paidCount})
@@ -408,7 +408,7 @@ export function PagadorInfoCard({
<p className="text-xs text-muted-foreground">
Pendentes
</p>
<p className="text-sm font-semibold text-amber-600">
<p className="text-sm font-semibold text-warning">
{formatCurrency(summary.boletoStats.pendingAmount)}{" "}
<span className="text-xs font-normal">
({summary.boletoStats.pendingCount})

4
components/pagadores/details/pagador-payment-method-cards.tsx
View File

@@ -86,7 +86,7 @@ function StatusRow({ label, amount, count, percent, tone }: StatusRowProps) {
amount={amount}
className={cn(
"text-xl font-semibold",
tone === "success" ? "text-emerald-600" : "text-amber-600",
tone === "success" ? "text-success" : "text-warning",
)}
/>
<div className="flex items-center justify-between text-xs text-muted-foreground">
@@ -95,7 +95,7 @@ function StatusRow({ label, amount, count, percent, tone }: StatusRowProps) {
<div
className={cn(
"h-full rounded-full",
tone === "success" ? "bg-emerald-500" : "bg-amber-500",
tone === "success" ? "bg-success" : "bg-warning",
)}
style={{ width: `${clampedPercent}%` }}
/>

2
components/pagadores/pagador-card.tsx
View File

@@ -77,7 +77,7 @@ export function PagadorCard({ pagador, onEdit, onRemove }: PagadorCardProps) {
</Badge>
{isReadOnly ? (
<Badge variant="outline" className="text-xs text-amber-600">
<Badge variant="outline" className="text-xs text-warning">
Somente leitura
</Badge>
) : null}

6
components/pagadores/pagador-select-items.tsx
View File

@@ -8,11 +8,7 @@ export function StatusSelectContent({ label }: { label: string }) {
return (
<span className="flex items-center gap-2">
<DotIcon
color={
isActive
? "bg-emerald-600 dark:bg-emerald-300"
: "bg-slate-400 dark:bg-slate-500"
}
color={isActive ? "bg-success" : "bg-slate-400 dark:bg-slate-500"}
/>
<span>{label}</span>
</span>

6
components/relatorios/cartoes/card-invoice-status.tsx
View File

@@ -43,11 +43,11 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
const getStatusColor = (status: string | null) => {
switch (status) {
case "pago":
return "bg-green-500";
return "bg-success";
case "pendente":
return "bg-yellow-500";
return "bg-warning";
case "atrasado":
return "bg-red-500";
return "bg-destructive";
default:
return "bg-muted";
}

2
components/relatorios/cartoes/card-usage-chart.tsx
View File

@@ -134,7 +134,7 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
label={{
value: "Limite",
position: "right",
className: "text-xs fill-red-500",
className: "text-xs fill-destructive",
}}
/>
)}

6
components/relatorios/cartoes/cards-overview.tsx
View File

@@ -58,9 +58,9 @@ export function CardsOverview({ data }: CardsOverviewProps) {
}).format(value);
const getUsageColor = (percent: number) => {
if (percent < 50) return "bg-green-500";
if (percent < 80) return "bg-yellow-500";
return "bg-red-500";
if (percent < 50) return "bg-success";
if (percent < 80) return "bg-warning";
return "bg-destructive";
};
const buildUrl = (cardId: string) => {

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

@@ -1,6 +1,6 @@
"use client";
import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
import {
Tooltip,
TooltipContent,
@@ -41,12 +41,12 @@ export function CategoryCell({
<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 && "text-destructive",
isDecrease && "text-success",
)}
>
{isIncrease && <RiArrowUpLine className="h-3 w-3" />}
{isDecrease && <RiArrowDownLine className="h-3 w-3" />}
{isIncrease && <RiArrowUpSFill className="h-3 w-3" />}
{isDecrease && <RiArrowDownSFill className="h-3 w-3" />}
<span>{formatPercentageChange(percentageChange)}</span>
</div>
)}
@@ -63,8 +63,8 @@ export function CategoryCell({
<div
className={cn(
"font-medium",
isIncrease && "text-red-500",
isDecrease && "text-green-500",
isIncrease && "text-destructive",
isDecrease && "text-success",
)}
>
Diferença:{" "}

14
components/relatorios/category-report-chart.tsx
View File

@@ -15,23 +15,13 @@ import { EmptyState } from "@/components/empty-state";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
import type { CategoryChartData } from "@/lib/relatorios/fetch-category-chart-data";
import { CATEGORY_COLORS } from "@/lib/utils/category-colors";
interface CategoryReportChartProps {
data: CategoryChartData;
}
const CHART_COLORS = [
"#ef4444", // red-500
"#3b82f6", // blue-500
"#10b981", // emerald-500
"#f59e0b", // amber-500
"#8b5cf6", // violet-500
"#ec4899", // pink-500
"#14b8a6", // teal-500
"#f97316", // orange-500
"#06b6d4", // cyan-500
"#84cc16", // lime-500
];
const CHART_COLORS = CATEGORY_COLORS;
const MAX_CATEGORIES_IN_CHART = 15;

2
components/relatorios/category-report-filters.tsx
View File

@@ -165,7 +165,7 @@ export function CategoryReportFilters({
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex flex-wrap items-center gap-2">
{/* Category Multi-Select */}
<Popover open={open} onOpenChange={setOpen}>
<Popover open={open} onOpenChange={setOpen} modal>
<PopoverTrigger asChild>
<Button
variant="outline"

4
components/relatorios/category-table.tsx
View File

@@ -87,8 +87,8 @@ export function CategoryTable({
<DotIcon
color={
category.type === "receita"
? "bg-green-600"
: "bg-red-600"
? "bg-success"
: "bg-destructive"
}
/>

12
components/type-badge.tsx
View File

@@ -36,16 +36,16 @@ export function TypeBadge({ type, className }: TypeBadgeProps) {
const label = TYPE_LABELS[type] || type;
const colorClass = isTransferencia
? "text-blue-700 dark:text-blue-400"
? "text-info"
: isReceita || isSaldoInicial
? "text-green-700 dark:text-green-400"
: "text-red-700 dark:text-red-400";
? "text-success"
: "text-destructive";
const dotColor = isTransferencia
? "bg-blue-700 dark:bg-blue-400"
? "bg-info"
: isReceita || isSaldoInicial
? "bg-green-600 dark:bg-green-400"
: "bg-red-600 dark:bg-red-400";
? "bg-success"
: "bg-destructive";
return (
<Badge

4
components/ui/badge.tsx
View File

@@ -18,8 +18,8 @@ const badgeVariants = cva(
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
success:
"border-transparent bg-green-500 text-white [a&]:hover:bg-green-600 dark:bg-green-600 dark:[a&]:hover:bg-green-700",
info: "border-transparent bg-blue-500 text-white [a&]:hover:bg-blue-600 dark:bg-blue-600 dark:[a&]:hover:bg-blue-700",
"border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90 dark:bg-success dark:[a&]:hover:bg-success/90",
info: "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90 dark:bg-info dark:[a&]:hover:bg-info/90",
},
},
defaultVariants: {