git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-06-10 07:16:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): polimento visual — tema, cards, dark mode e landing page

Browse Source 
Raio de borda global 0.625rem → 0.7rem; ajustes finos em --card e --border.
DotPattern removido do layout, tela de auth e landing page.
Account-card redesenhado (cores de saldo, tooltip de flags de exclusão).
Budget-card, card-item, calendário (day-cell, event-modal) com layout revisado.
Auth-card-shell simplificado (sem glassmorphism/blob). Landing page com
mainFeatures + extraFeatures em grid único e dark mode nos botões de CTA.
Imagens de preview da landing atualizadas. CSS --data-7..10 removidas.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-04-20 17:52:17 +00:00
parent 5d84ae928a
commit 6d81ff8b53
67 changed files with 612 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/features/accounts/components/account-card.tsx
View File

@@ -1,4 +1,5 @@
"use client";
import {
RiArrowLeftRightLine,
RiDeleteBin5Line,
@@ -47,6 +48,13 @@ export function AccountCard({
}: AccountCardProps) {
const isInactive = status?.toLowerCase() === "inativa";
const balanceColor =
balance > 0
? "text-success"
: balance < 0
? "text-destructive"
: "text-foreground";
const actions = [
{
label: "editar",
@@ -75,78 +83,90 @@ export function AccountCard({
].filter((action) => typeof action.onClick === "function");
return (
<Card className={cn("h-full w-full gap-0", className)}>
<CardContent className="flex flex-1 flex-col gap-4">
<div className="flex items-center gap-2">
{icon ? (
<div
className={cn(
"flex items-center justify-center",
isInactive && "[&_img]:grayscale [&_img]:opacity-40",
)}
>
{icon}
<Card className={cn("flex w-full flex-col p-6", className)}>
<div className="flex items-start justify-between gap-2">
<div className="flex min-w-0 items-center gap-2">
<div
className={cn(
"flex shrink-0 items-center justify-center",
isInactive && "grayscale opacity-40",
)}
>
{icon}
</div>
<div className="min-w-0">
<div className="flex items-center gap-1">
<h3 className="truncate font-semibold text-foreground">
{accountName}
</h3>
{excludeFromBalance || excludeInitialBalanceFromIncome ? (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
className="shrink-0 text-muted-foreground/70 transition-colors hover:text-foreground"
aria-label="Informações da conta"
>
<RiInformationLine className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="top" align="start" className="max-w-xs">
<div className="space-y-1">
{excludeFromBalance && (
<p className="text-xs">
<strong>Desconsiderado do saldo total:</strong> Esta
conta não é incluída no cálculo do saldo total geral.
</p>
)}
{excludeInitialBalanceFromIncome && (
<p className="text-xs">
<strong>
Saldo inicial desconsiderado das receitas:
</strong>{" "}
O saldo inicial desta conta não é contabilizado como
receita nas métricas.
</p>
)}
</div>
</TooltipContent>
</Tooltip>
) : null}
</div>
) : null}
<h2 className="text-lg font-semibold text-foreground">
{accountName}
</h2>
{(excludeFromBalance || excludeInitialBalanceFromIncome) && (
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center">
<RiInformationLine className="size-5 text-muted-foreground hover:text-foreground transition-colors cursor-help" />
</div>
</TooltipTrigger>
<TooltipContent side="right" className="max-w-xs">
<div className="space-y-1">
{excludeFromBalance && (
<p className="text-xs">
<strong>Desconsiderado do saldo total:</strong> Esta conta
não é incluída no cálculo do saldo total geral.
</p>
)}
{excludeInitialBalanceFromIncome && (
<p className="text-xs">
<strong>
Saldo inicial desconsiderado das receitas:
</strong>{" "}
O saldo inicial desta conta não é contabilizado como
receita nas métricas.
</p>
)}
</div>
</TooltipContent>
</Tooltip>
)}
<p className="text-xs text-muted-foreground">{status}</p>
</div>
</div>
<div className="space-y-2">
<MoneyValues amount={balance} className="text-3xl" />
<p className="text-sm text-muted-foreground">{accountType}</p>
<p className="text-xs text-muted-foreground">{accountType}</p>
</div>
<CardContent className="flex flex-1 flex-col gap-2 px-0 pb-2">
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">Saldo</span>
<MoneyValues
amount={balance}
className={cn("text-2xl font-semibold", balanceColor)}
/>
</div>
</CardContent>
{actions.length > 0 ? (
<CardFooter className="flex flex-wrap gap-3 px-6 pt-6 text-sm">
{actions.map(({ label, icon, onClick, variant }) => (
<button
key={label}
type="button"
onClick={onClick}
className={cn(
"flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
variant === "destructive" ? "text-destructive" : "text-primary",
)}
aria-label={`${label} conta`}
>
{icon}
{label}
</button>
))}
</CardFooter>
) : null}
<CardFooter className="flex flex-wrap gap-4 p-0 text-sm">
{actions.map(({ label, icon, onClick, variant }) => (
<button
key={label}
type="button"
onClick={onClick}
className={cn(
"flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
variant === "destructive" ? "text-destructive" : "text-primary",
)}
aria-label={`${label} conta`}
>
{icon}
{label}
</button>
))}
</CardFooter>
</Card>
);
}

2
src/features/accounts/components/account-statement-card.tsx
View File

@@ -86,7 +86,7 @@ export function AccountStatementCard({
</p>
<MoneyValues
amount={currentBalance}
className="text-3xl leading-none tracking-tighter sm:text-[2rem]"
className="text-3xl leading-none tracking-tighter sm:text-2xl"
/>
<div className="flex items-center gap-2">
<Badge

2
src/features/accounts/statement-queries.ts
View File

@@ -8,7 +8,7 @@ import { INITIAL_BALANCE_NOTE } from "@/shared/lib/accounts/constants";
import { db } from "@/shared/lib/db";
import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
export type AccountSummaryData = {
type AccountSummaryData = {
openingBalance: number;
currentBalance: number;
totalIncomes: number;

22
src/features/auth/components/auth-card-shell.tsx
View File

@@ -1,28 +1,12 @@
import type { PropsWithChildren } from "react";
import { Card, CardContent } from "@/shared/components/ui/card";
import { DotPattern } from "@/shared/components/ui/dot-pattern";
import AuthSidebar from "./auth-sidebar";
export function AuthCardShell({ children }: PropsWithChildren) {
return (
<Card className="relative overflow-hidden rounded-2xl md:rounded-[2rem] p-0 shadow-lg border-primary/10">
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-primary)_0%,transparent_70%)] opacity-10 blur-3xl animate-blob mix-blend-multiply" />
<DotPattern
width={17}
height={17}
cx={1.3}
cy={1.3}
cr={1.3}
className="text-primary/8 mask-[linear-gradient(to_bottom,black,transparent_84%)]"
/>
<div className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent opacity-80" />
</div>
<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr] overflow-hidden rounded-[inherit]">
<div className="flex bg-card/60 backdrop-blur-xl md:rounded-l-[2rem]">
{children}
</div>
<Card className="overflow-hidden border-primary/10 p-0 shadow-lg">
<CardContent className="grid p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr]">
<div className="flex md:rounded-l-4xl">{children}</div>
<AuthSidebar />
</CardContent>
</Card>

110
src/features/budgets/components/budget-card.tsx
View File

@@ -15,7 +15,6 @@ import type { Budget } from "./types";
interface BudgetCardProps {
budget: Budget;
periodLabel: string;
onEdit: (budget: Budget) => void;
onRemove: (budget: Budget) => void;
}
@@ -29,81 +28,88 @@ const buildUsagePercent = (spent: number, limit: number) => {
};
const formatCategoryName = (budget: Budget) =>
budget.category?.name ?? "Category removida";
budget.category?.name ?? "Categoria removida";
export function BudgetCard({
budget,
periodLabel,
onEdit,
onRemove,
}: BudgetCardProps) {
export function BudgetCard({ budget, onEdit, onRemove }: BudgetCardProps) {
const { amount: limit, spent } = budget;
const exceeded = spent > limit && limit >= 0;
const difference = Math.abs(spent - limit);
const usagePercent = buildUsagePercent(spent, limit);
const remaining = Math.max(limit - spent, 0);
return (
<Card className="flex h-full flex-col">
<CardContent className="flex h-full flex-col gap-4">
<div className="flex items-start gap-3">
<CategoryIconBadge
icon={budget.category?.icon ?? undefined}
name={formatCategoryName(budget)}
size="lg"
<Card className="flex w-full flex-col p-6">
<div className="flex items-center gap-2">
<CategoryIconBadge
icon={budget.category?.icon ?? undefined}
name={formatCategoryName(budget)}
size="lg"
/>
<div className="min-w-0">
<h3 className="truncate font-semibold text-foreground">
{formatCategoryName(budget)}
</h3>
</div>
</div>
<CardContent className="flex flex-1 flex-col gap-4 p-0">
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">
{exceeded ? "Excedido em" : "Disponível"}
</span>
<MoneyValues
amount={exceeded ? difference : remaining}
className={cn(
"text-xl font-semibold",
exceeded ? "text-destructive" : "text-success",
)}
/>
<div className="space-y-1">
<h3 className="text-base font-semibold leading-tight">
{formatCategoryName(budget)}
</h3>
<p className="text-xs text-muted-foreground">
Orçamento de {periodLabel}
</p>
</div>
</div>
<div className="flex flex-1 flex-col gap-2">
<div className="flex items-baseline justify-between text-sm">
<span className="text-muted-foreground">Gasto até agora</span>
<div className="grid grid-cols-2 gap-2">
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">Orçamento</span>
<MoneyValues
amount={spent}
className={cn(exceeded && "text-destructive")}
amount={limit}
className="text-sm font-semibold text-foreground"
/>
</div>
<Progress
value={usagePercent}
className={cn("h-2", exceeded && "bg-destructive/20!")}
/>
<div className="flex flex-wrap items-baseline justify-between gap-1 text-sm">
<span className="text-muted-foreground">Limite</span>
<MoneyValues amount={limit} className="text-foreground" />
</div>
<div>
{exceeded ? (
<div className="text-xs text-destructive">
Excedeu em <MoneyValues amount={difference} />
</div>
) : (
<div className="text-xs text-success">
Restam <MoneyValues amount={Math.max(limit - spent, 0)} />{" "}
disponíveis.
</div>
)}
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">Gasto</span>
<MoneyValues
amount={spent}
className={cn(
"text-sm font-semibold",
exceeded ? "text-destructive" : "text-primary",
)}
/>
</div>
</div>
<div className="flex flex-col gap-2">
<Progress
value={usagePercent}
className={cn("h-2.5", exceeded && "bg-destructive/20!")}
aria-label={`${usagePercent.toFixed(1)}% do orçamento utilizado`}
/>
<span className="text-xs text-muted-foreground">
{usagePercent.toFixed(1)}% utilizado
</span>
</div>
</CardContent>
<CardFooter className="flex flex-wrap gap-3 px-5 text-sm">
<CardFooter className="mt-auto flex flex-wrap gap-4 px-0 pt-2 text-sm">
<button
type="button"
onClick={() => onEdit(budget)}
className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
>
<RiPencilLine className="size-4" aria-hidden /> editar
</button>
{budget.category && (
<Link
href={`/categories/${budget.category.id}`}
className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
>
<RiFileList2Line className="size-4" aria-hidden /> detalhes
</Link>
@@ -111,7 +117,7 @@ export function BudgetCard({
<button
type="button"
onClick={() => onRemove(budget)}
className="flex items-center gap-1 text-destructive font-medium transition-opacity hover:opacity-80"
className="flex items-center gap-1 font-medium text-destructive transition-opacity hover:opacity-80"
>
<RiDeleteBin5Line className="size-4" aria-hidden /> remover
</button>

3
src/features/budgets/components/budgets-page.tsx
View File

@@ -19,14 +19,12 @@ interface BudgetsPageProps {
budgets: Budget[];
categories: BudgetCategory[];
selectedPeriod: string;
periodLabel: string;
}
export function BudgetsPage({
budgets,
categories,
selectedPeriod,
periodLabel,
}: BudgetsPageProps) {
const [editOpen, setEditOpen] = useState(false);
const [selectedBudget, setSelectedBudget] = useState<Budget | null>(null);
@@ -137,7 +135,6 @@ export function BudgetsPage({
<BudgetCard
key={budget.id}
budget={budget}
periodLabel={periodLabel}
onEdit={handleEdit}
onRemove={handleRemoveRequest}
/>

2
src/features/budgets/queries.ts
View File

@@ -13,7 +13,7 @@ const toNumber = (value: string | number | null | undefined) => {
return 0;
};
export type BudgetData = {
type BudgetData = {
id: string;
amount: number;
spent: number;

13
src/features/calendar/components/calendar-grid.tsx
View File

@@ -1,10 +1,8 @@
"use client";
import { DayCell } from "@/features/calendar/components/day-cell";
import type { CalendarDay } from "@/shared/lib/types/calendar";
import { WEEK_DAYS_SHORT } from "@/shared/utils/calendar";
import { cn } from "@/shared/utils/ui";
type CalendarGridProps = {
days: CalendarDay[];
@@ -18,21 +16,18 @@ export function CalendarGrid({
onCreateDay,
}: CalendarGridProps) {
return (
<div className="overflow-hidden rounded-lg bg-card drop-shadow-xs border-none">
<div className="overflow-hidden rounded-lg border p-2">
<div className="grid grid-cols-7 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
{WEEK_DAYS_SHORT.map((dayName) => (
<span key={dayName} className="px-3 py-2 text-center">
<span key={dayName} className="text-center">
{dayName}
</span>
))}
</div>
<div className="grid grid-cols-7 gap-px bg-border/60 px-px pb-px pt-px">
<div className="grid grid-cols-7 gap-px px-px pb-px pt-px">
{days.map((day) => (
<div
key={day.date}
className={cn("h-[150px] bg-card p-0.5", !day.isCurrentMonth && "")}
>
<div key={day.date} className="h-[150px] p-0.5">
<DayCell day={day} onSelect={onSelectDay} onCreate={onCreateDay} />
</div>
))}

46
src/features/calendar/components/calendar-legend.tsx
View File

@@ -1,34 +1,32 @@
"use client";
import { EVENT_TYPE_STYLES } from "@/features/calendar/components/day-cell";
import StatusDot from "@/shared/components/status-dot";
import { Card } from "@/shared/components/ui/card";
import type { CalendarEvent } from "@/shared/lib/types/calendar";
import { cn } from "@/shared/utils/ui";
const LEGEND_ITEMS: Array<{
type?: CalendarEvent["type"];
label: string;
dotColor?: string;
}> = [
{ type: "transaction", label: "Lançamentos" },
{ type: "boleto", label: "Boleto com vencimento" },
{ type: "card", label: "Vencimento de cartão" },
{ label: "Pagamento fatura", dotColor: "bg-success" },
const LEGEND_ITEMS = [
{ label: "Lançamentos", ...EVENT_TYPE_STYLES.transaction },
{ label: "Boletos", ...EVENT_TYPE_STYLES.boleto },
{ label: "Fatura de Cartão", ...EVENT_TYPE_STYLES.card },
];
export function CalendarLegend() {
return (
<Card className="flex flex-row gap-2 p-2 text-sm">
{LEGEND_ITEMS.map((item, index) => {
const dotColor =
item.dotColor || (item.type ? EVENT_TYPE_STYLES[item.type].dot : "");
return (
<span key={item.type || index} className="flex items-center gap-2">
<StatusDot color={dotColor} />
{item.label}
</span>
);
})}
</Card>
<ul className="flex items-center justify-start gap-2 px-1">
{LEGEND_ITEMS.map((item) => (
<li
key={item.label}
className={cn(
"flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium",
item.wrapper,
)}
>
<span
className={cn("size-1.5 shrink-0 rounded-full", item.dot)}
aria-hidden
/>
{item.label}
</li>
))}
</ul>
);
}

105
src/features/calendar/components/day-cell.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { RiAddLine } from "@remixicon/react";
import { RiAddLine, RiCheckboxCircleFill } from "@remixicon/react";
import type { KeyboardEvent, MouseEvent } from "react";
import type { CalendarDay, CalendarEvent } from "@/shared/lib/types/calendar";
import { currencyFormatter } from "@/shared/utils/currency";
@@ -14,44 +14,33 @@ type DayCellProps = {
export const EVENT_TYPE_STYLES: Record<
CalendarEvent["type"],
{ wrapper: string; dot: string; accent?: string }
{ wrapper: string; dot: string }
> = {
transaction: {
wrapper:
"bg-warning/10 text-warning dark:bg-warning/5 dark:text-warning border-l-4 border-warning",
dot: "bg-warning",
wrapper: "bg-primary/10 text-primary dark:bg-primary/5 dark:text-primary",
dot: "bg-primary",
},
boleto: {
wrapper:
"bg-info/10 text-info dark:bg-info/5 dark:text-info border-l-4 border-info",
wrapper: "bg-info/10 text-info dark:bg-info/5 dark:text-info",
dot: "bg-info",
},
card: {
wrapper:
"bg-violet-100 text-violet-600 dark:bg-violet-900/10 dark:text-violet-50 border-l-4 border-violet-500",
dot: "bg-violet-600",
"bg-violet-100 text-violet-600 dark:bg-violet-900/10 dark:text-violet-500",
dot: "bg-violet-600 dark:bg-violet-500",
},
};
const eventStyles = EVENT_TYPE_STYLES;
const formatCurrencyValue = (value: number | null | undefined) =>
currencyFormatter.format(Math.abs(value ?? 0));
const formatAmount = (event: Extract<CalendarEvent, { type: "transaction" }>) =>
formatCurrencyValue(event.transaction.amount);
const buildEventLabel = (event: CalendarEvent) => {
switch (event.type) {
case "transaction": {
case "transaction":
case "boleto":
return event.transaction.name;
}
case "boleto": {
return event.transaction.name;
}
case "card": {
case "card":
return event.card.name;
}
default:
return "";
}
@@ -59,60 +48,48 @@ const buildEventLabel = (event: CalendarEvent) => {
const buildEventComplement = (event: CalendarEvent) => {
switch (event.type) {
case "transaction": {
return formatAmount(event);
}
case "boleto": {
case "transaction":
case "boleto":
return formatCurrencyValue(event.transaction.amount);
}
case "card": {
if (event.card.totalDue !== null) {
return formatCurrencyValue(event.card.totalDue);
}
return null;
}
case "card":
return event.card.totalDue !== null
? formatCurrencyValue(event.card.totalDue)
: null;
default:
return null;
}
};
const isPagamentoFatura = (event: CalendarEvent) => {
return (
event.type === "transaction" &&
event.transaction.name.startsWith("Pagamento fatura -")
);
};
const getEventStyle = (event: CalendarEvent) => {
if (isPagamentoFatura(event)) {
return {
wrapper:
"bg-success/10 text-success dark:bg-success/5 dark:text-success border-l-4 border-success",
dot: "bg-success",
};
}
return eventStyles[event.type];
const isPaid = (event: CalendarEvent) => {
if (event.type === "boleto") return Boolean(event.transaction.isSettled);
if (event.type === "card") return event.card.isPaid;
return false;
};
const DayEventPreview = ({ event }: { event: CalendarEvent }) => {
const complement = buildEventComplement(event);
const label = buildEventLabel(event);
const style = getEventStyle(event);
const style = EVENT_TYPE_STYLES[event.type];
return (
<div
className={cn(
"flex w-full items-center justify-between gap-2 rounded p-1 text-xs",
"flex w-full items-center justify-between gap-2 rounded-md px-2 py-1 text-xs",
style.wrapper,
)}
>
<div className="flex min-w-0 items-center gap-1">
<span
className={cn("size-1.5 shrink-0 rounded-full", style.dot)}
aria-hidden
/>
<span className="truncate">{label}</span>
{isPaid(event) && (
<RiCheckboxCircleFill className="size-3.5 shrink-0 text-success" />
)}
</div>
{complement ? (
<span className={cn("shrink-0 font-medium", style.accent ?? "text-xs")}>
{complement}
</span>
<span className="shrink-0 font-medium">{complement}</span>
) : null}
</div>
);
@@ -143,8 +120,8 @@ export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
onClick={() => onSelect(day)}
onKeyDown={handleKeyDown}
className={cn(
"group flex h-full cursor-pointer flex-col gap-1.5 rounded-lg border border-transparent bg-card/80 p-2 text-left transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:border-primary/40 hover:bg-primary/5 dark:hover:bg-accent",
!day.isCurrentMonth && "opacity-60",
"group flex h-full cursor-pointer flex-col gap-1.5 rounded-lg border bg-card/80 p-2 text-left transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:border-primary/40 hover:bg-primary/5 dark:hover:bg-accent",
!day.isCurrentMonth && "bg-muted/20 opacity-60",
day.isToday && "border-primary/70 bg-primary/5 hover:border-primary",
)}
>
@@ -159,14 +136,16 @@ export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
>
{day.label}
</span>
<button
type="button"
onClick={handleCreateClick}
className="flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground opacity-0 transition-all group-hover:opacity-100 hover:bg-primary/20 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
aria-label={`Criar lançamento em ${day.date}`}
>
<RiAddLine className="size-3.5" />
</button>
{day.isCurrentMonth && (
<button
type="button"
onClick={handleCreateClick}
className="flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground opacity-0 transition-all group-hover:opacity-100 hover:bg-primary/20 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
aria-label={`Criar lançamento em ${day.date}`}
>
<RiAddLine className="size-3.5" />
</button>
)}
</div>
<div className="flex flex-1 flex-col gap-1.5">

187
src/features/calendar/components/event-modal.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { RiCalendarEventLine } from "@remixicon/react";
import type { ReactNode } from "react";
import { EVENT_TYPE_STYLES } from "@/features/calendar/components/day-cell";
import MoneyValues from "@/shared/components/money-values";
@@ -29,17 +30,13 @@ type EventModalProps = {
const EventCard = ({
children,
type,
isPagamentoFatura = false,
}: {
children: ReactNode;
type: CalendarEvent["type"];
isPagamentoFatura?: boolean;
}) => {
const style = isPagamentoFatura
? { dot: "bg-success" }
: EVENT_TYPE_STYLES[type];
const style = EVENT_TYPE_STYLES[type];
return (
<Card className="flex flex-row gap-2 p-3 mb-1">
<Card className="flex flex-row gap-2 p-3">
<span
className={cn("mt-1 size-3 shrink-0 rounded-full", style.dot)}
aria-hidden
@@ -49,41 +46,34 @@ const EventCard = ({
);
};
const DATE_FORMAT: Intl.DateTimeFormatOptions = {
day: "2-digit",
month: "2-digit",
year: "numeric",
};
const renderLancamento = (
event: Extract<CalendarEvent, { type: "transaction" }>,
) => {
const isReceita = event.transaction.transactionType === "Receita";
const isPagamentoFatura =
event.transaction.name.startsWith("Pagamento fatura -");
return (
<EventCard type="transaction" isPagamentoFatura={isPagamentoFatura}>
<EventCard type="transaction">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-1">
<span
className={`text-sm font-medium leading-tight ${
isPagamentoFatura && "text-success"
}`}
>
<span className="text-sm font-medium leading-tight">
{event.transaction.name}
</span>
<div className="flex gap-1">
<Badge variant={"outline"}>{event.transaction.categoriaName}</Badge>
</div>
<Badge variant="outline">{event.transaction.categoriaName}</Badge>
</div>
<span
<MoneyValues
showPositiveSign
className={cn(
"text-sm font-medium whitespace-nowrap",
"text-base whitespace-nowrap font-medium",
isReceita ? "text-success" : "text-foreground",
)}
>
<MoneyValues
showPositiveSign
className="text-base"
amount={event.transaction.amount}
/>
</span>
amount={event.transaction.amount}
/>
</div>
</EventCard>
);
@@ -91,59 +81,80 @@ const renderLancamento = (
const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
const isPaid = Boolean(event.transaction.isSettled);
const dueDate = event.transaction.dueDate;
const dueDateLabel = formatFinancialDateLabel(dueDate, "Vence em", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});
const dueDateLabel = formatFinancialDateLabel(
event.transaction.dueDate,
"Vence em",
DATE_FORMAT,
);
const paymentDateLabel = isPaid
? formatFinancialDateLabel(
event.transaction.boletoPaymentDate,
"Pago em",
DATE_FORMAT,
)
: null;
return (
<EventCard type="boleto">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-1">
<div className="flex gap-1 items-center">
<span className="text-sm font-medium leading-tight">
{event.transaction.name}
</span>
<span className="text-sm font-medium leading-tight">
{event.transaction.name}
</span>
<div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs">
{dueDateLabel && (
<span className="text-xs text-muted-foreground leading-tight">
{dueDateLabel}
</span>
<span className="text-muted-foreground">{dueDateLabel}</span>
)}
{paymentDateLabel && (
<span className="text-success">{paymentDateLabel}</span>
)}
</div>
<Badge variant={"outline"}>{isPaid ? "Pago" : "Pendente"}</Badge>
<Badge variant="outline">{isPaid ? "Pago" : "Pendente"}</Badge>
</div>
<span className="font-medium">
<MoneyValues amount={event.transaction.amount} />
</span>
<MoneyValues
className="font-medium whitespace-nowrap"
amount={event.transaction.amount}
/>
</div>
</EventCard>
);
};
const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => (
<EventCard type="card">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-1">
<div className="flex gap-1 items-center">
<span className="text-sm font-medium leading-tight">
Vencimento Fatura - {event.card.name}
</span>
</div>
const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => {
const paymentDateLabel = event.card.isPaid
? formatFinancialDateLabel(event.card.paymentDate, "Pago em", DATE_FORMAT)
: null;
<Badge variant={"outline"}>{event.card.status ?? "Invoice"}</Badge>
return (
<EventCard type="card">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-col gap-1">
<span className="text-sm font-medium leading-tight">
Vencimento Fatura — {event.card.name}
</span>
{paymentDateLabel && (
<span className="text-xs text-success">{paymentDateLabel}</span>
)}
<Badge variant="outline">
{event.card.isPaid ? "Pago" : (event.card.status ?? "Fatura")}
</Badge>
</div>
{event.card.totalDue !== null ? (
<MoneyValues
className="font-medium whitespace-nowrap"
amount={event.card.totalDue}
/>
) : null}
</div>
{event.card.totalDue !== null ? (
<span className="font-medium">
<MoneyValues amount={event.card.totalDue} />
</span>
) : null}
</div>
</EventCard>
);
</EventCard>
);
};
const SECTION_LABELS: Record<CalendarEvent["type"], string> = {
transaction: "Lançamentos",
boleto: "Boletos",
card: "Faturas",
};
const renderEvent = (event: CalendarEvent) => {
switch (event.type) {
@@ -169,28 +180,50 @@ export function EventModal({ open, day, onClose, onCreate }: EventModalProps) {
onCreate(day.date);
};
const description = day?.events.length
? "Confira os lançamentos e vencimentos cadastrados para este dia."
: "Nenhum lançamento encontrado para este dia. Você pode criar um novo lançamento agora.";
const hasEvents = Boolean(day?.events.length);
const grouped = day
? {
transaction: day.events.filter((e) => e.type === "transaction"),
boleto: day.events.filter((e) => e.type === "boleto"),
card: day.events.filter((e) => e.type === "card"),
}
: null;
return (
<Dialog open={open} onOpenChange={(value) => (!value ? onClose() : null)}>
<DialogContent className="max-w-xl">
<DialogHeader>
<DialogTitle>{formattedDate}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
<DialogDescription>
{hasEvents
? "Lançamentos e vencimentos cadastrados para este dia."
: "Nenhum lançamento encontrado para este dia."}
</DialogDescription>
</DialogHeader>
<div className="max-h-[380px] space-y-2 overflow-y-auto pr-2">
{day?.events.length ? (
day.events.map((event) => (
<div key={event.id}>{renderEvent(event)}</div>
))
<div className="max-h-[380px] space-y-3 overflow-y-auto pr-2">
{hasEvents && grouped ? (
(["transaction", "boleto", "card"] as const)
.filter((type) => grouped[type].length > 0)
.map((type) => (
<div key={type} className="space-y-1.5">
<p className="px-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{SECTION_LABELS[type]}
</p>
<div className="space-y-1.5">
{grouped[type].map((event) => (
<div key={event.id}>{renderEvent(event)}</div>
))}
</div>
</div>
))
) : (
<div className="rounded-xl border border-dashed border-border/60 bg-muted/30 p-6 text-center text-sm text-muted-foreground">
Nenhum lançamento ou vencimento registrado. Clique em{" "}
<span className="font-medium text-primary">Novo lançamento</span>{" "}
para começar.
<div className="flex flex-col items-center gap-3 rounded-xl border border-dashed border-border/60 bg-muted/30 p-8 text-center">
<RiCalendarEventLine className="size-8 text-muted-foreground/50" />
<p className="text-sm text-muted-foreground">
Nenhum lançamento registrado para este dia.
</p>
</div>
)}
</div>

34
src/features/calendar/queries.ts
View File

@@ -17,6 +17,7 @@ import { parsePeriod } from "@/shared/utils/period";
const PAYMENT_METHOD_BOLETO = "Boleto";
const TRANSACTION_TYPE_TRANSFERENCIA = "Transferência";
const PAYMENT_PREFIX = "Pagamento fatura - ";
const clampDayInMonth = (year: number, monthIndex: number, day: number) => {
const lastDay = new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
@@ -88,19 +89,28 @@ export const fetchCalendarData = async ({
const transactionData = mapTransactionsData(transactionRows);
const events: CalendarEvent[] = [];
// Totais por cartão para exibir no vencimento
const cardTotals = new Map<string, number>();
for (const item of transactionData) {
if (!item.cardId || item.period !== period) {
continue;
}
if (!item.cardId || item.period !== period) continue;
const amount = Math.abs(item.amount ?? 0);
cardTotals.set(item.cardId, (cardTotals.get(item.cardId) ?? 0) + amount);
}
// Pagamentos de fatura por nome do cartão → data de pagamento
const paymentByCardName = new Map<string, string | null>();
for (const item of transactionData) {
if (!item.name.startsWith(PAYMENT_PREFIX)) continue;
const cardName = item.name.slice(PAYMENT_PREFIX.length);
paymentByCardName.set(cardName, item.purchaseDate?.slice(0, 10) ?? null);
}
for (const item of transactionData) {
// Pagamentos de fatura são consumidos pelos eventos de cartão
if (item.name.startsWith(PAYMENT_PREFIX)) continue;
const isBoleto = item.paymentMethod === PAYMENT_METHOD_BOLETO;
// Para boletos, exibir apenas na data de vencimento
if (isBoleto) {
if (
item.dueDate &&
@@ -114,7 +124,6 @@ export const fetchCalendarData = async ({
});
}
} else {
// Para outros tipos de lançamento, exibir na data de compra
const purchaseDateKey = item.purchaseDate.slice(0, 10);
if (isWithinRange(purchaseDateKey, rangeStartKey, rangeEndKey)) {
events.push({
@@ -127,22 +136,21 @@ export const fetchCalendarData = async ({
}
}
// Exibir vencimentos apenas de cartões com lançamentos do período
// Vencimentos de cartões com lançamentos no período
for (const card of cardRows) {
if (!cardTotals.has(card.id)) {
continue;
}
if (!cardTotals.has(card.id)) continue;
const dueDayNumber = Number.parseInt(card.dueDay ?? "", 10);
if (Number.isNaN(dueDayNumber)) {
continue;
}
if (Number.isNaN(dueDayNumber)) continue;
const normalizedDay = clampDayInMonth(year, monthIndex, dueDayNumber);
const dueDateKey = formatDateKey(
new Date(Date.UTC(year, monthIndex, normalizedDay)),
);
const isPaid = paymentByCardName.has(card.name);
const paymentDate = paymentByCardName.get(card.name) ?? null;
events.push({
id: `${card.id}:cartao`,
type: "card",
@@ -156,6 +164,8 @@ export const fetchCalendarData = async ({
status: card.status,
logo: card.logo ?? null,
totalDue: cardTotals.get(card.id) ?? null,
isPaid,
paymentDate,
},
});
}

155
src/features/cards/components/card-item.tsx
View File

@@ -84,39 +84,11 @@ export function CardItem({
const logoPath = resolveLogoSrc(logo);
const brandAsset = resolveCardBrandAsset(brand);
const isInactive = status?.toLowerCase() === "inativo";
const metrics =
limitTotal === null || used === null || available === null
? null
: [
{ label: "Limite Total", value: limitTotal },
{ label: "Em uso", value: used },
{ label: "Disponível", value: available },
];
const actions = [
{
label: "editar",
icon: <RiPencilLine className="size-4" aria-hidden />,
onClick: onEdit,
className: "text-primary",
},
{
label: "ver fatura",
icon: <RiFileList2Line className="size-4" aria-hidden />,
onClick: onInvoice,
className: "text-primary",
},
{
label: "remover",
icon: <RiDeleteBin5Line className="size-4" aria-hidden />,
onClick: onRemove,
className: "text-destructive",
},
];
const hasMetrics = limitTotal !== null && used !== null && available !== null;
return (
<Card className="flex flex-col p-6 w-full">
<CardHeader className="space-y-2 px-0 pb-0">
<CardHeader className="space-y-2 p-0">
<div className="flex items-start justify-between gap-2">
<div className="flex flex-1 items-center gap-2">
{logoPath ? (
@@ -135,8 +107,8 @@ export function CardItem({
) : null}
<div className="min-w-0">
<div className="flex items-center gap-1.5">
<h3 className="truncate text-sm font-semibold text-foreground sm:text-base">
<div className="flex items-center gap-2">
<h3 className="truncate font-semibold text-foreground">
{name}
</h3>
{note ? (
@@ -166,14 +138,14 @@ export function CardItem({
</div>
{brandAsset ? (
<div className="flex items-center justify-center py-1">
<div className="flex items-center justify-center py-2">
<Image
src={brandAsset}
alt={`Bandeira ${brand}`}
width={36}
height={36}
className={cn(
"h-5 w-auto rounded",
"h-4 w-auto rounded",
isInactive && "grayscale opacity-40",
)}
/>
@@ -185,56 +157,65 @@ export function CardItem({
)}
</div>
<div className="flex items-center justify-between border-y py-3 text-xs font-medium text-muted-foreground sm:text-sm">
<div className="flex items-center justify-between border-y py-3 text-sm text-muted-foreground">
<span>
Fecha dia{" "}
<span className="font-medium text-foreground">
{formatDay(closingDay)}
Fecha em{" "}
<span className="font-semibold text-foreground">
dia {formatDay(closingDay)}
</span>
</span>
<span>
Vence dia{" "}
<span className="font-medium text-foreground">
{formatDay(dueDay)}
Vence em{" "}
<span className="font-semibold text-foreground">
dia {formatDay(dueDay)}
</span>
</span>
</div>
</CardHeader>
<CardContent className="flex flex-1 flex-col gap-5 px-0">
{metrics ? (
<CardContent className="flex flex-1 flex-col gap-4 px-0">
{hasMetrics &&
available !== null &&
used !== null &&
limitTotal !== null ? (
<>
<div className="grid grid-cols-3 gap-4">
<div className="flex flex-col items-start gap-1">
<p className="text-sm font-semibold text-foreground">
<MoneyValues amount={metrics[0].value} />
</p>
<span className="text-xs text-muted-foreground">
{metrics[0].label}
</span>
</div>
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">Disponível</span>
<MoneyValues
amount={available}
className="text-xl font-semibold text-success"
/>
</div>
<div className="flex flex-col items-center gap-1">
<p className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
<span className="size-2 rounded-full bg-primary" />
<MoneyValues amount={metrics[1].value} />
</p>
<div className="grid grid-cols-2 gap-2">
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">
{metrics[1].label}
Limite total
</span>
<MoneyValues
amount={limitTotal}
className="text-sm font-semibold text-foreground"
/>
</div>
<div className="flex flex-col items-end gap-1">
<p className="text-sm font-semibold text-foreground">
<MoneyValues amount={metrics[2].value} />
</p>
<span className="text-xs text-muted-foreground">
{metrics[2].label}
</span>
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">Em uso</span>
<MoneyValues
amount={used}
className="text-sm font-semibold text-primary"
/>
</div>
</div>
<Progress value={usagePercent} className="h-3" />
<div className="flex flex-col gap-2">
<Progress
value={usagePercent}
className="h-2.5"
aria-label={`${usagePercent.toFixed(0)}% do limite utilizado`}
/>
<span className="text-xs text-muted-foreground">
{usagePercent.toFixed(1)}% utilizado
</span>
</div>
</>
) : (
<p className="text-sm text-muted-foreground">
@@ -243,21 +224,31 @@ export function CardItem({
)}
</CardContent>
<CardFooter className="mt-auto flex flex-wrap gap-4 px-0 text-sm">
{actions.map(({ label, icon, onClick, className }) => (
<button
key={label}
type="button"
onClick={onClick}
className={cn(
"flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
className,
)}
>
{icon}
{label}
</button>
))}
<CardFooter className="mt-auto flex flex-wrap gap-4 px-0 pt-2 text-sm">
<button
type="button"
onClick={onEdit}
className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
>
<RiPencilLine className="size-4" aria-hidden />
editar
</button>
<button
type="button"
onClick={onInvoice}
className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
>
<RiFileList2Line className="size-4" aria-hidden />
ver fatura
</button>
<button
type="button"
onClick={onRemove}
className="flex items-center gap-1 font-medium text-destructive transition-opacity hover:opacity-80"
>
<RiDeleteBin5Line className="size-4" aria-hidden />
remover
</button>
</CardFooter>
</Card>
);

2
src/features/cards/queries.ts
View File

@@ -3,7 +3,7 @@ import { cards, financialAccounts, transactions } from "@/db/schema";
import { db } from "@/shared/lib/db";
import { loadLogoOptions } from "@/shared/lib/logo/options";
export type CardData = {
type CardData = {
id: string;
name: string;
brand: string;

5
src/features/categories/components/categories-page.tsx
View File

@@ -30,10 +30,11 @@ import {
import {
CATEGORY_TYPE_LABEL,
CATEGORY_TYPES,
type CategoryType,
} from "@/shared/lib/categories/constants";
import { CategoryIconBadge } from "@/shared/components/entity-avatar";
import { CategoryDialog } from "./category-dialog";
import { CategoryIconBadge } from "./category-icon-badge";
import type { Category, CategoryType } from "./types";
import type { Category } from "./types";
const CATEGORIAS_PROTEGIDAS = [
"Transferência interna",

48
src/features/categories/components/category-detail-header.tsx
View File

@@ -1,11 +1,10 @@
import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
import { CategoryIconBadge } from "@/shared/components/entity-avatar";
import { TransactionTypeBadge } from "@/shared/components/transaction-type-badge";
import { Card } from "@/shared/components/ui/card";
import type { CategoryType } from "@/shared/lib/categories/constants";
import { currencyFormatter } from "@/shared/utils/currency";
import { formatPercentage } from "@/shared/utils/percentage";
import { cn } from "@/shared/utils/ui";
import { CategoryIconBadge } from "./category-icon-badge";
type CategorySummary = {
id: string;
@@ -33,33 +32,6 @@ export function CategoryDetailHeader({
percentageChange,
transactionCount,
}: CategoryDetailHeaderProps) {
const isIncrease =
typeof percentageChange === "number" && percentageChange > 0;
const isDecrease =
typeof percentageChange === "number" && percentageChange < 0;
const variationColor =
category.type === "receita"
? isIncrease
? "text-success"
: isDecrease
? "text-destructive"
: "text-muted-foreground"
: isIncrease
? "text-destructive"
: isDecrease
? "text-success"
: "text-muted-foreground";
const variationIcon =
isIncrease || isDecrease ? (
isIncrease ? (
<RiArrowUpSFill className="size-4" aria-hidden />
) : (
<RiArrowDownSFill className="size-4" aria-hidden />
)
) : null;
const variationLabel =
typeof percentageChange === "number"
? formatPercentage(percentageChange, {
@@ -115,15 +87,13 @@ export function CategoryDetailHeader({
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Variação vs mês anterior
</p>
<div
className={cn(
"mt-1 flex items-center gap-1 text-lg font-semibold",
variationColor,
)}
>
{variationIcon}
<span>{variationLabel}</span>
</div>
<PercentageChangeIndicator
value={percentageChange}
label={variationLabel}
positiveTrend={category.type === "receita" ? "up" : "down"}
className="mt-1 gap-1 text-lg font-semibold"
iconClassName="size-4"
/>
</div>
</div>
</div>

6
src/features/categories/components/category-icon-badge.tsx
View File

@@ -1,6 +0,0 @@
// Re-export from shared — componente movido para src/shared/components/entity-avatar/
export {
CategoryIconBadge,
type CategoryIconBadgeProps,
type CategoryIconBadgeSize,
} from "@/shared/components/entity-avatar";

6
src/features/categories/components/types.ts
View File

@@ -1,11 +1,5 @@
import type { CategoryType } from "@/shared/lib/categories/constants";
export type { CategoryType } from "@/shared/lib/categories/constants";
export {
CATEGORY_TYPE_LABEL,
CATEGORY_TYPES,
} from "@/shared/lib/categories/constants";
export type Category = {
id: string;
name: string;

2
src/features/categories/queries.ts
View File

@@ -1,6 +1,6 @@
import { eq } from "drizzle-orm";
import { type Category, categories } from "@/db/schema";
import type { CategoryType } from "@/features/categories/components/types";
import type { CategoryType } from "@/shared/lib/categories/constants";
import { db } from "@/shared/lib/db";
export type CategoryData = {

4
src/features/inbox/components/inbox-card.tsx
View File

@@ -149,9 +149,9 @@ export const InboxCard = memo(function InboxCard({
</div>
</CardHeader>
<CardContent className="flex-1 py-2">
<CardContent className="min-h-0 flex-1 overflow-hidden py-2">
{item.originalTitle && (
<p className="mb-1 text-sm font-medium">{item.originalTitle}</p>
<p className="mb-1 line-clamp-2 text-sm font-medium">{item.originalTitle}</p>
)}
<p className="line-clamp-4 whitespace-pre-wrap text-sm text-muted-foreground">
{item.originalText}

47
src/features/inbox/components/inbox-items-list.tsx
View File

@@ -102,32 +102,29 @@ export function InboxItemsList({
const groups = groupItemsByDay(items);
return (
<div className="space-y-6">
{groups.map((group) => (
<div key={group.label}>
<div className="mb-3 flex items-center gap-1 text-muted-foreground">
<RiCalendarEventLine className="size-3.5 shrink-0" />
<p className="text-sm font-medium">{group.label}</p>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{groups.flatMap((group) =>
group.items.map((item) => (
<div key={item.id} className="flex flex-col gap-1.5">
<div className="flex items-center gap-1.5 text-muted-foreground">
<RiCalendarEventLine className="size-3 shrink-0" />
<span className="text-xs font-medium">{group.label}</span>
</div>
<InboxCard
item={item}
readonly={readonly}
appLogoMap={appLogoMap}
onProcess={readonly ? undefined : onProcess}
onDiscard={readonly ? undefined : onDiscard}
onViewDetails={readonly ? undefined : onViewDetails}
onDelete={readonly ? onDelete : undefined}
onRestoreToPending={readonly ? onRestoreToPending : undefined}
selected={selectedIds.includes(item.id)}
onSelectToggle={onSelectToggle}
/>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{group.items.map((item) => (
<InboxCard
key={item.id}
item={item}
readonly={readonly}
appLogoMap={appLogoMap}
onProcess={readonly ? undefined : onProcess}
onDiscard={readonly ? undefined : onDiscard}
onViewDetails={readonly ? undefined : onViewDetails}
onDelete={readonly ? onDelete : undefined}
onRestoreToPending={readonly ? onRestoreToPending : undefined}
selected={selectedIds.includes(item.id)}
onSelectToggle={onSelectToggle}
/>
))}
</div>
</div>
))}
)),
)}
</div>
);
}

4
src/features/invoices/components/invoice-summary-card.tsx
View File

@@ -191,9 +191,9 @@ export function InvoiceSummaryCard({
<div className="space-y-4">
<p className="text-sm text-muted-foreground">Valor da fatura</p>
<MoneyValues
amount={totalAmount}
amount={Math.abs(totalAmount)}
className={cn(
"text-3xl leading-none tracking-tighter sm:text-[2rem]",
"text-3xl tracking-tighter font-semibold",
isPaid ? "text-success" : "text-foreground",
)}
/>

16
src/features/landing/components/setup-tabs.tsx
View File

@@ -86,6 +86,13 @@ export function SetupTabs() {
);
}
const DATA_COLORS = [
"var(--data-1)",
"var(--data-3)",
"var(--data-5)",
"var(--data-4)",
];
function StepCard({
step,
title,
@@ -95,11 +102,18 @@ function StepCard({
title: string;
children: React.ReactNode;
}) {
const colorVar = DATA_COLORS[(step - 1) % DATA_COLORS.length];
return (
<Card className="border">
<CardContent>
<div className="flex gap-3 md:gap-4">
<div className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-medium text-sm md:text-base">
<div
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
style={{
backgroundColor: `color-mix(in oklch, ${colorVar} 20%, transparent)`,
color: "var(--foreground)",
}}
>
{step}
</div>
<div className="min-w-0">

44
src/features/landing/constants.ts
View File

@@ -49,42 +49,42 @@ export const mainFeatures: FeatureItem[] = [
icon: RiWalletLine,
title: "Contas e transações",
description:
"Registre suas contas bancárias, cartões e dinheiro. Adicione receitas, despesas e transferências. Organize por categorias. Extratos detalhados por conta.",
colorVar: "var(--data-9)",
"Contas bancárias, cartões e dinheiro em um só lugar, se organize como preferir.",
colorVar: "var(--data-5)",
},
{
icon: RiPercentLine,
title: "Parcelamentos avançados",
description:
"Controle completo de compras parceladas. Antecipe parcelas com cálculo automático de desconto. Veja análise consolidada de todas as parcelas em aberto.",
"Controle compras parceladas e antecipe parcelas com cálculo automático de desconto.",
colorVar: "var(--data-4)",
},
{
icon: RiRobot2Line,
title: "Insights com IA",
description:
"Análises financeiras geradas por IA (Claude, GPT, Gemini). Insights personalizados sobre seus padrões de gastos e recomendações inteligentes.",
colorVar: "var(--data-8)",
"Análises por IA com insights sobre padrões de gastos e recomendações personalizadas.",
colorVar: "var(--data-6)",
},
{
icon: RiBarChartBoxLine,
title: "Relatórios e gráficos",
description:
"Dashboard com 20+ widgets interativos. Relatórios detalhados por categoria. Gráficos de evolução e comparativos. Exportação em PDF e Excel.",
"20+ widgets interativos, relatórios por categoria e exportação em PDF e Excel.",
colorVar: "var(--data-5)",
},
{
icon: RiBankCard2Line,
title: "Faturas de cartão",
description:
"Cadastre seus cartões e acompanhe as faturas por período. Veja o que ainda não foi fechado. Controle limites, vencimentos e fechamentos.",
"Acompanhe faturas por período, limites e vencimentos de cada cartão.",
colorVar: "var(--data-1)",
},
{
icon: RiTeamLine,
title: "Gestão colaborativa",
description:
"Compartilhe pagadores com permissões granulares (admin/viewer). Notificações automáticas por e-mail. Colabore em lançamentos compartilhados.",
"Compartilhe acesso com permissões granulares (admin/viewer) e notificações por e-mail.",
colorVar: "var(--data-3)",
},
];
@@ -94,40 +94,40 @@ export const extraFeatures: FeatureItem[] = [
icon: RiPieChartLine,
title: "Categorias e orçamentos",
description:
"Crie categorias personalizadas e defina orçamentos mensais com indicadores visuais.",
colorVar: "var(--data-7)",
"Categorias personalizadas com orçamentos mensais e indicadores visuais de progresso.",
colorVar: "var(--data-6)",
},
{
icon: RiFileTextLine,
title: "Anotações e tarefas",
description:
"Notas de texto e listas de tarefas com checkboxes. Arquivamento para manter histórico.",
"Notas de texto e listas de tarefas com checkboxes e arquivamento.",
colorVar: "var(--data-6)",
},
{
icon: RiCalendarLine,
title: "Calendário financeiro",
description:
"Visualize transações em calendário mensal. Nunca perca prazos de pagamentos.",
"Visualize transações em calendário mensal para não perder prazos.",
colorVar: "var(--data-2)",
},
{
icon: RiDownloadCloudLine,
title: "Importação em massa",
description: "Lance múltiplos lançamentos de uma vez",
colorVar: "var(--data-9)",
description: "Importe múltiplos lançamentos de uma só vez.",
colorVar: "var(--data-5)",
},
{
icon: RiEyeOffLine,
title: "Modo privacidade",
description:
"Oculte valores sensíveis com um clique. Tema dark/light. Calculadora integrada.",
"Oculte valores com um clique. Tema dark/light e calculadora integrada.",
colorVar: "var(--data-4)",
},
{
icon: RiFlashlightLine,
title: "Performance otimizada",
description: "Sistema rápido e com alta performance",
description: "Interface rápida e otimizada para uso diário.",
colorVar: "var(--data-5)",
},
];
@@ -150,7 +150,7 @@ export const pwaHighlights: FeatureItem[] = [
icon: RiLayoutGridLine,
title: "Acesso rápido ao que importa",
description: "Dashboard, inbox e lançamentos a um toque.",
colorVar: "var(--data-9)",
colorVar: "var(--data-5)",
},
{
icon: RiFlashlightLine,
@@ -193,7 +193,7 @@ export const companionSteps: FeatureItem[] = [
icon: RiCheckLine,
title: "Revise e confirme no OpenMonetis",
description: "Pré-lançamentos ficam na inbox para sua aprovação",
colorVar: "var(--data-9)",
colorVar: "var(--data-5)",
},
];
@@ -210,7 +210,7 @@ export const stackItems = [
title: "Backend",
subtitle: "PostgreSQL, Drizzle ORM, Better Auth",
description: "Banco relacional robusto com type-safe ORM",
colorVar: "var(--data-9)",
colorVar: "var(--data-5)",
},
{
icon: RiShieldCheckLine,
@@ -242,7 +242,7 @@ export const whoIsItForItems: FeatureItem[] = [
title: "Quer controle total sobre seus dados",
description:
"Prefere hospedar seus próprios dados ao invés de depender de serviços terceiros",
colorVar: "var(--data-9)",
colorVar: "var(--data-5)",
},
{
icon: RiLineChartLine,
@@ -270,7 +270,7 @@ export const whoIsItForItems: FeatureItem[] = [
title: "Não sou responsável por nada",
description:
"Não sou responsável por nada que aconteça com você ou com seus dados.",
colorVar: "var(--data-9)",
colorVar: "var(--data-5)",
},
];
@@ -280,7 +280,7 @@ export function getMetricsItems(stars: number, forks: number) {
icon: RiLayoutGridLine,
value: "20+",
label: "Widgets no dashboard",
colorVar: "var(--data-9)",
colorVar: "var(--data-5)",
},
{
icon: RiShieldCheckLine,

2
src/features/notes/lib/formatters.ts
View File

@@ -40,7 +40,7 @@ export const formatNoteCreatedAt = (
value: string | Date | null | undefined,
) => {
const parsed = parseNoteDate(value);
return parsed ? NOTE_CREATED_AT_FORMATTER.format(parsed) : null;
return parsed ? NOTE_CREATED_AT_FORMATTER.format(parsed) : "";
};
export const formatNoteCreatedAtLong = (

2
src/features/payers/components/details/payer-payment-method-cards.tsx
View File

@@ -4,7 +4,7 @@ import {
RiHourglass2Line,
RiWallet3Line,
} from "@remixicon/react";
import { buildBillStatusLabel } from "@/features/dashboard/bills-helpers";
import { buildBillStatusLabel } from "@/features/dashboard/bills/bills-helpers";
import { EstablishmentLogo } from "@/shared/components/entity-avatar";
import MoneyValues from "@/shared/components/money-values";
import { CardContent } from "@/shared/components/ui/card";

2
src/features/payers/components/payer-card.tsx
View File

@@ -72,7 +72,7 @@ export function PayerCard({ payer, onEdit, onRemove }: PayerCardProps) {
</Badge>
{isReadOnly ? (
<Badge variant="outline" className="text-xs text-warning">
<Badge variant="outline" className="text-xs text-primary">
Somente leitura
</Badge>
) : null}

2
src/features/payers/components/payer-dialog.tsx
View File

@@ -370,7 +370,7 @@ export function PayerDialog({
) : (
<div className="size-12 rounded-full bg-muted border-2 border-dashed border-muted-foreground/20 flex items-center justify-center hover:scale-110 transition-transform duration-200">
{isProcessingImage ? (
<span className="text-[10px] text-muted-foreground animate-pulse">
<span className="text-xs text-muted-foreground animate-pulse">
...
</span>
) : (

2
src/features/payers/queries.ts
View File

@@ -9,7 +9,7 @@ import {
PAYER_STATUS_OPTIONS,
} from "@/shared/lib/payers/constants";
export type PayerData = {
type PayerData = {
id: string;
name: string;
email: string | null;

37
src/features/reports/components/category-cell.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
import { formatPercentageChange } from "@/features/reports/utils";
import {
Tooltip,
@@ -30,13 +30,9 @@ export function CategoryCell({
const absoluteChange = !isFirstMonth ? value - previousValue : null;
const isIncrease = percentageChange !== null && percentageChange > 0;
const isDecrease = percentageChange !== null && percentageChange < 0;
// Despesa: aumento é ruim (vermelho), diminuição é bom (verde)
// Receita: aumento é bom (verde), diminuição é ruim (vermelho)
const isPositive = categoryType === "receita" ? isIncrease : isDecrease;
const isNegative = categoryType === "receita" ? isDecrease : isIncrease;
const positiveTrend = categoryType === "receita" ? "up" : "down";
return (
<Tooltip>
@@ -44,19 +40,12 @@ export function CategoryCell({
<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",
isNegative && "text-destructive",
isPositive && "text-success",
)}
>
{isIncrease && <RiArrowUpSFill className="h-3 w-3" />}
{isDecrease && <RiArrowDownSFill className="h-3 w-3" />}
<span className="font-medium">
{formatPercentageChange(percentageChange)}
</span>
</div>
<PercentageChangeIndicator
value={percentageChange}
label={formatPercentageChange(percentageChange)}
positiveTrend={positiveTrend}
iconClassName="h-3 w-3"
/>
)}
</div>
</TooltipTrigger>
@@ -71,8 +60,14 @@ export function CategoryCell({
<div
className={cn(
"font-medium",
isNegative && "text-destructive",
isPositive && "text-success",
(positiveTrend === "up"
? absoluteChange !== null && absoluteChange < 0
: absoluteChange !== null && absoluteChange > 0) &&
"text-destructive",
(positiveTrend === "up"
? absoluteChange !== null && absoluteChange > 0
: absoluteChange !== null && absoluteChange < 0) &&
"text-success",
)}
>
Diferença:{" "}

2
src/features/transactions/components/dialogs/anticipate-installments-dialog/anticipate-installments-dialog.tsx
View File

@@ -341,7 +341,7 @@ export function AnticipateInstallmentsDialog({
{/* Seção 3: Resumo */}
{selectedIds.length > 0 && (
<div className="rounded-lg border bg-muted/20 p-3">
<div className="rounded-lg border p-3">
<h4 className="text-sm font-semibold mb-2">Resumo</h4>
<dl className="space-y-1.5 text-sm">
<div className="flex items-center justify-between">

2
src/features/transactions/components/dialogs/transaction-details-dialog.tsx
View File

@@ -82,7 +82,7 @@ export function TransactionDetailsDialog({
<div className="min-w-0 max-h-[60vh] overflow-x-hidden overflow-y-auto text-sm">
<div className="min-w-0 space-y-4">
<section className="rounded-lg border bg-muted/20 p-3">
<section className="rounded-lg border p-3">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="text-xs uppercase tracking-wide text-muted-foreground">

2
src/features/transactions/components/select-items.tsx
View File

@@ -31,7 +31,7 @@ export function PayerSelectContent({
<span className="flex items-center gap-2">
<Avatar className="size-5 border border-border/60 bg-background">
<AvatarImage src={avatarSrc} alt={`Avatar de ${label}`} />
<AvatarFallback className="text-[10px] font-medium uppercase">
<AvatarFallback className="text-xs font-medium uppercase">
{initial}
</AvatarFallback>
</Avatar>

2
src/features/transactions/components/shared/anticipation-card.tsx
View File

@@ -148,7 +148,7 @@ export function AnticipationCard({
</dl>
{anticipation.note && (
<div className="rounded-lg border bg-muted/20 p-3">
<div className="rounded-lg border p-3">
<dt className="text-xs font-medium text-muted-foreground">
Observação
</dt>

2
src/features/transactions/components/table/transactions-columns.tsx
View File

@@ -419,7 +419,7 @@ function buildColumns({
<>
<Avatar className="size-7">
<AvatarImage src={avatarSrc} alt={`Avatar de ${label}`} />
<AvatarFallback className="text-[10px] font-medium uppercase">
<AvatarFallback className="text-xs font-medium uppercase">
{initial}
</AvatarFallback>
</Avatar>