Gladyson/openmonetis
1
0
Fork 0
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

10
app/(dashboard)/cartoes/[cartaoId]/fatura/actions.ts
View File

@@ -1,7 +1,6 @@
"use server";
import { and, eq, sql } from "drizzle-orm";
import { revalidatePath } from "next/cache";
import { z } from "zod";
import {
cartoes,
@@ -11,6 +10,7 @@ import {
pagadores,
} from "@/db/schema";
import { buildInvoicePaymentNote } from "@/lib/accounts/constants";
import { revalidateForEntity } from "@/lib/actions/helpers";
import { getUser } from "@/lib/auth/server";
import { db } from "@/lib/db";
import {
@@ -206,9 +206,7 @@ export async function updateInvoicePaymentStatusAction(
}
});
revalidatePath(`/cartoes/${data.cartaoId}/fatura`);
revalidatePath("/cartoes");
revalidatePath("/contas");
revalidateForEntity("cartoes");
return { success: true, message: successMessageByStatus[data.status] };
} catch (error) {
@@ -275,9 +273,7 @@ export async function updatePaymentDateAction(
.where(eq(lancamentos.id, existingPayment.id));
});
revalidatePath(`/cartoes/${data.cartaoId}/fatura`);
revalidatePath("/cartoes");
revalidatePath("/contas");
revalidateForEntity("cartoes");
return { success: true, message: "Data de pagamento atualizada." };
} catch (error) {

9
app/(dashboard)/lancamentos/anticipation-actions.ts
View File

@@ -1,7 +1,6 @@
"use server";
import { and, asc, desc, eq, inArray, isNull, or } from "drizzle-orm";
import { revalidatePath } from "next/cache";
import { z } from "zod";
import {
antecipacoesParcelas,
@@ -9,7 +8,7 @@ import {
lancamentos,
pagadores,
} from "@/db/schema";
import { handleActionError } from "@/lib/actions/helpers";
import { handleActionError, revalidateForEntity } from "@/lib/actions/helpers";
import type { ActionResult } from "@/lib/actions/types";
import { getUser } from "@/lib/auth/server";
import { db } from "@/lib/db";
@@ -263,8 +262,7 @@ export async function createInstallmentAnticipationAction(
.where(inArray(lancamentos.id, data.installmentIds));
});
revalidatePath("/lancamentos");
revalidatePath("/dashboard");
revalidateForEntity("lancamentos");
return {
success: true,
@@ -427,8 +425,7 @@ export async function cancelInstallmentAnticipationAction(
.where(eq(antecipacoesParcelas.id, data.anticipationId));
});
revalidatePath("/lancamentos");
revalidatePath("/dashboard");
revalidateForEntity("lancamentos");
return {
success: true,

106
app/globals.css
View File

@@ -10,7 +10,7 @@
/* Base surfaces - warm cream with subtle orange undertone */
--background: oklch(96.563% 0.00504 67.275);
--foreground: oklch(18% 0.02 45);
--card: oklch(100% 0.00011 271.152);
--card: oklch(100% 0 0);
--card-foreground: oklch(18% 0.02 45);
--popover: oklch(99.5% 0.004 80);
--popover-foreground: oklch(18% 0.02 45);
@@ -28,9 +28,17 @@
--muted-foreground: oklch(45% 0.015 60);
/* Accent - complementary warm tone */
--accent: oklch(96.563% 0.00504 67.275);
--accent: oklch(94% 0.01 70);
--accent-foreground: oklch(22% 0.025 45);
/* Semantic states */
--success: oklch(55% 0.17 150);
--success-foreground: oklch(98% 0.01 150);
--warning: oklch(75.976% 0.16034 71.493);
--warning-foreground: oklch(20% 0.04 85);
--info: oklch(55% 0.17 250);
--info-foreground: oklch(98% 0.01 250);
/* Destructive - accessible red */
--destructive: oklch(55% 0.22 27);
--destructive-foreground: oklch(98% 0.005 30);
@@ -40,22 +48,26 @@
--input: oklch(82% 0.012 75);
--ring: oklch(69.18% 0.18855 38.353);
/* Charts - harmonious, distinct, accessible */
/* Charts - 10 harmonious, distinct, accessible colors */
--chart-1: var(--color-emerald-400);
--chart-2: var(--color-orange-400);
--chart-3: var(--color-indigo-400);
--chart-4: var(--color-amber-400);
--chart-5: var(--color-pink-400);
--chart-6: var(--color-stone-400);
--chart-7: var(--color-teal-400);
--chart-8: var(--color-violet-400);
--chart-9: var(--color-cyan-400);
--chart-10: var(--color-lime-400);
/* Sidebar - slight elevation from background */
--sidebar: oklch(100% 0.00011 271.152);
--sidebar: oklch(100% 0 0);
--sidebar-foreground: oklch(20% 0.02 45);
--sidebar-primary: oklch(25% 0.025 45);
--sidebar-primary-foreground: oklch(98% 0.008 80);
--sidebar-accent: oklch(96.563% 0.00504 67.275);
--sidebar-accent-foreground: oklch(22% 0.025 45);
--sidebar-border: oklch(58.814% 0.15852 38.26);
--sidebar-border: oklch(69.18% 0.18855 38.353);
--sidebar-ring: oklch(69.18% 0.18855 38.353);
/* Layout */
@@ -79,46 +91,50 @@
--spacing: 0.25rem;
/* Special components */
--month-picker: oklch(100% 0.00011 271.152);
--month-picker-foreground: oklch(22% 0.015 45);
--dark: oklch(22% 0.015 45);
--dark-foreground: oklch(94% 0.008 80);
--welcome-banner: var(--primary);
--welcome-banner-foreground: oklch(98% 0.008 80);
--welcome-banner-foreground: var(--primary-foreground);
}
.dark {
/* Base surfaces - true dark with minimal saturation */
--background: oklch(18.674% 0.00002 271.152);
--foreground: oklch(92.189% 0.0186 103.516);
--card: oklch(24.039% 0.00151 16.27);
--card-foreground: oklch(92.189% 0.0186 103.516);
--popover: oklch(24.039% 0.00151 16.27);
--popover-foreground: oklch(92.189% 0.0186 103.516);
/* Base surfaces - warm dark with consistent hue family */
--background: oklch(18.5% 0.002 70);
--foreground: oklch(92% 0.015 80);
--card: oklch(24% 0.003 70);
--card-foreground: oklch(92% 0.015 80);
--popover: oklch(24% 0.003 70);
--popover-foreground: oklch(92% 0.015 80);
/* Primary - vibrant terracotta stands out on dark */
--primary: oklch(69.18% 0.18855 38.353);
--primary-foreground: oklch(20.019% 0.00002 271.152);
--primary-foreground: oklch(20% 0.002 70);
/* Secondary - elevated surface */
--secondary: oklch(22% 0.004 285);
--secondary-foreground: oklch(92.189% 0.0186 103.516);
--secondary: oklch(22% 0.004 70);
--secondary-foreground: oklch(92% 0.015 80);
/* Muted - subtle surface variant */
--muted: oklch(33.674% 0.00531 91.552);
--muted-foreground: oklch(72.285% 0.00436 286.016);
--muted: oklch(33.5% 0.005 70);
--muted-foreground: oklch(72% 0.004 70);
/* Accent - subtle highlight */
--accent: oklch(26.893% 0.00391 84.539);
--accent-foreground: oklch(92.189% 0.0186 103.516);
--accent: oklch(27% 0.004 70);
--accent-foreground: oklch(92% 0.015 80);
/* Semantic states */
--success: oklch(65% 0.19 150);
--success-foreground: oklch(15% 0.02 150);
--warning: oklch(75.976% 0.16034 71.493);
--warning-foreground: oklch(15% 0.04 85);
--info: oklch(65% 0.17 250);
--info-foreground: oklch(15% 0.02 250);
/* Destructive - accessible red for dark */
--destructive: oklch(62% 0.2 28);
--destructive-foreground: oklch(98% 0.005 30);
/* Borders and inputs - visible but subtle */
--border: oklch(37.332% 0.01493 101.928);
--input: oklch(32% 0.005 285);
--border: oklch(37% 0.01 70);
--input: oklch(32% 0.005 70);
--ring: oklch(69.18% 0.18855 38.353);
/* Charts - bright and distinct on dark */
@@ -128,15 +144,19 @@
--chart-4: var(--color-amber-500);
--chart-5: var(--color-pink-500);
--chart-6: var(--color-stone-500);
--chart-7: var(--color-teal-500);
--chart-8: var(--color-violet-500);
--chart-9: var(--color-cyan-500);
--chart-10: var(--color-lime-500);
/* Sidebar - slight separation from main */
--sidebar: oklch(24.039% 0.00151 16.27);
--sidebar-foreground: oklch(92.189% 0.0186 103.516);
--sidebar: oklch(24% 0.003 70);
--sidebar-foreground: oklch(92% 0.015 80);
--sidebar-primary: oklch(69.18% 0.18855 38.353);
--sidebar-primary-foreground: oklch(12.897% 0.00619 87.19);
--sidebar-accent: oklch(32.242% 0.00447 67.486);
--sidebar-accent-foreground: oklch(92.189% 0.0186 103.516);
--sidebar-border: oklch(26% 0.004 285);
--sidebar-primary-foreground: oklch(13% 0.006 70);
--sidebar-accent: oklch(32% 0.004 70);
--sidebar-accent-foreground: oklch(92% 0.015 80);
--sidebar-border: oklch(26% 0.004 70);
--sidebar-ring: oklch(69.18% 0.18855 38.353);
/* Layout */
@@ -161,12 +181,8 @@
--spacing: 0.25rem;
/* Special components */
--month-picker: oklch(24.039% 0.00151 16.27);
--month-picker-foreground: oklch(92.189% 0.0186 103.516);
--dark: oklch(92.189% 0.0186 103.516);
--dark-foreground: oklch(18.711% 0.00427 84.566);
--welcome-banner: oklch(24.039% 0.00151 16.27);
--welcome-banner-foreground: oklch(92.189% 0.0186 103.516);
--welcome-banner: var(--card);
--welcome-banner-foreground: var(--card-foreground);
}
@theme inline {
@@ -184,6 +200,12 @@
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
@@ -195,6 +217,10 @@
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-chart-6: var(--chart-6);
--color-chart-7: var(--chart-7);
--color-chart-8: var(--chart-8);
--color-chart-9: var(--chart-9);
--color-chart-10: var(--chart-10);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
@@ -217,10 +243,6 @@
--shadow-2xl: var(--shadow-2xl);
--tracking-normal: var(--tracking-normal);
--spacing: var(--spacing);
--color-month-picker: var(--month-picker);
--color-month-picker-foreground: var(--month-picker-foreground);
--color-dark: var(--dark);
--color-dark-foreground: var(--dark-foreground);
--color-welcome-banner: var(--welcome-banner);
--color-welcome-banner-foreground: var(--welcome-banner-foreground);
}