mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
style(ui): padronizar tipografia — font-medium para font-semibold
Padronização de peso tipográfico em títulos, rótulos de seção, nomes de entidades e valores monetários em toda a interface. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiBankLine />}
|
||||
title="Contas"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiBarChart2Line />}
|
||||
title="Orçamentos"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiCalendarEventLine />}
|
||||
title="Calendário"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiBankCard2Line />}
|
||||
title="Cartões"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiPriceTag3Line />}
|
||||
title="Categorias"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiHistoryLine />}
|
||||
title="Changelog"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiAtLine />}
|
||||
title="Pré-Lançamentos"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiSparklingLine />}
|
||||
title="Insights"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiTodoLine />}
|
||||
title="Anotações"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiGroupLine />}
|
||||
title="Pagadores"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiBankCard2Line />}
|
||||
title="Uso de Cartões"
|
||||
|
||||
@@ -71,7 +71,7 @@ export default async function RelatorioCartoesPage({
|
||||
<div className="flex size-14 items-center justify-center rounded-full bg-muted mb-4">
|
||||
<RiBankCard2Line className="size-7 text-muted-foreground" />
|
||||
</div>
|
||||
<p className="text-base font-medium">Nenhum cartão selecionado</p>
|
||||
<p className="text-base font-semibold">Nenhum cartão selecionado</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Selecione um cartão para ver os detalhes de uso.
|
||||
</p>
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiFileChartLine />}
|
||||
title="Tendências"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiStore2Line />}
|
||||
title="Top Estabelecimentos"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiSecurePaymentLine />}
|
||||
title="Análise de Parcelas"
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiSettings2Line />}
|
||||
title="Ajustes"
|
||||
|
||||
@@ -67,7 +67,7 @@ export default async function Page() {
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-medium mb-1">Preferências</h2>
|
||||
<h2 className="text-xl font-semibold mb-1">Preferências</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Personalize sua experiência no OpenMonetis ajustando as
|
||||
configurações de acordo com suas necessidades.
|
||||
@@ -92,7 +92,9 @@ export default async function Page() {
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h2 className="text-xl font-medium">OpenMonetis Companion</h2>
|
||||
<h2 className="text-xl font-semibold">
|
||||
OpenMonetis Companion
|
||||
</h2>
|
||||
<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
|
||||
@@ -114,7 +116,7 @@ export default async function Page() {
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-medium mb-1">Alterar nome</h2>
|
||||
<h2 className="text-xl font-semibold mb-1">Alterar nome</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Atualize como seu nome aparece no OpenMonetis. Esse nome pode
|
||||
ser exibido em diferentes seções do app e em comunicações.
|
||||
@@ -130,7 +132,7 @@ export default async function Page() {
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-medium mb-1">Alterar senha</h2>
|
||||
<h2 className="text-xl font-semibold mb-1">Alterar senha</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Defina uma nova senha para sua conta. Guarde-a em local
|
||||
seguro.
|
||||
@@ -146,7 +148,7 @@ export default async function Page() {
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-medium mb-1">Passkeys</h2>
|
||||
<h2 className="text-xl font-semibold mb-1">Passkeys</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Passkeys permitem login sem senha, usando biometria (Face ID,
|
||||
Touch ID, Windows Hello) ou chaves de segurança.
|
||||
@@ -162,7 +164,7 @@ export default async function Page() {
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-medium mb-1">Alterar e-mail</h2>
|
||||
<h2 className="text-xl font-semibold mb-1">Alterar e-mail</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Atualize o e-mail associado à sua conta. Você precisará
|
||||
confirmar os links enviados para o novo e também para o e-mail
|
||||
@@ -182,7 +184,7 @@ export default async function Page() {
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-medium mb-1 text-destructive">
|
||||
<h2 className="text-xl font-semibold mb-1 text-destructive">
|
||||
Ações perigosas
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 pt-4">
|
||||
<section className="space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiArrowLeftRightLine />}
|
||||
title="Lançamentos"
|
||||
|
||||
@@ -120,13 +120,13 @@ export default async function Page() {
|
||||
</div>
|
||||
|
||||
<div className="max-w-8xl mx-auto px-4 relative">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center text-center gap-5 md:gap-6 pb-10 md:pb-14">
|
||||
<div className="mx-auto flex max-w-4xl flex-col items-center text-center gap-5 md:gap-6 pb-10 md:pb-14">
|
||||
<Badge variant="outline">
|
||||
<RiGithubFill className="size-4 mr-1" />
|
||||
Projeto Open Source
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold">
|
||||
Suas finanças,
|
||||
<span className="text-primary"> do seu jeito</span>
|
||||
</h1>
|
||||
@@ -207,9 +207,7 @@ export default async function Page() {
|
||||
className="flex flex-col items-center text-center gap-1.5"
|
||||
>
|
||||
<Icon className="size-5" style={{ color: colorVar }} />
|
||||
<span className="text-2xl md:text-3xl font-medium">
|
||||
{value}
|
||||
</span>
|
||||
<span className="text-2xl md:text-3xl ">{value}</span>
|
||||
<span className="text-xs md:text-sm text-muted-foreground">
|
||||
{label}
|
||||
</span>
|
||||
@@ -229,7 +227,7 @@ export default async function Page() {
|
||||
<Badge variant="outline" className="mb-4">
|
||||
Conheça as telas
|
||||
</Badge>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl mb-3 md:mb-4">
|
||||
Veja o que você pode fazer
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||
@@ -254,7 +252,7 @@ export default async function Page() {
|
||||
<Badge variant="outline" className="mb-4">
|
||||
O que tem aqui
|
||||
</Badge>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl mb-3 md:mb-4">
|
||||
Funcionalidades que importam
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||
@@ -282,7 +280,7 @@ export default async function Page() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-base md:text-lg mb-1.5 md:mb-2">
|
||||
<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
@@ -298,7 +296,7 @@ export default async function Page() {
|
||||
|
||||
<AnimateOnScroll>
|
||||
<div className="mt-8 md:mt-12">
|
||||
<h3 className="text-sm font-medium text-center mb-4 md:mb-6 text-muted-foreground">
|
||||
<h3 className="text-sm font-semibold text-center mb-4 md:mb-6 text-muted-foreground">
|
||||
Também inclui
|
||||
</h3>
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@@ -319,7 +317,7 @@ export default async function Page() {
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h4 className="font-medium text-sm mb-0.5">
|
||||
<h4 className="font-semibold text-sm mb-0.5">
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
@@ -346,7 +344,7 @@ export default async function Page() {
|
||||
<RiSmartphoneLine className="size-3.5 mr-1" />
|
||||
Mobile
|
||||
</Badge>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl mb-3 md:mb-4">
|
||||
Use o OpenMonetis no celular sem perder o fluxo
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||
@@ -384,7 +382,7 @@ export default async function Page() {
|
||||
<RiSmartphoneLine className="size-3.5 mr-1" />
|
||||
PWA instalável
|
||||
</Badge>
|
||||
<h3 className="text-2xl md:text-3xl font-medium tracking-tight mb-3">
|
||||
<h3 className="text-2xl md:text-3xl font-semibold tracking-tight mb-3">
|
||||
Leve o OpenMonetis para a tela inicial
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||
@@ -430,7 +428,7 @@ export default async function Page() {
|
||||
Companion Android
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-medium tracking-tight mb-3">
|
||||
<h3 className="text-2xl md:text-3xl font-semibold tracking-tight mb-3">
|
||||
Capture, envie e revise no mesmo fluxo
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||
@@ -529,7 +527,7 @@ export default async function Page() {
|
||||
<Badge variant="outline" className="mb-4">
|
||||
Stack técnica
|
||||
</Badge>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl mb-3 md:mb-4">
|
||||
O que roda por baixo
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||
@@ -556,7 +554,7 @@ export default async function Page() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-base md:text-lg mb-1.5 md:mb-2">
|
||||
<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-2 md:mb-3">
|
||||
@@ -582,7 +580,7 @@ export default async function Page() {
|
||||
<Badge variant="outline" className="mb-4">
|
||||
Como usar
|
||||
</Badge>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl mb-3 md:mb-4">
|
||||
Rode no seu computador
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
|
||||
@@ -617,7 +615,7 @@ export default async function Page() {
|
||||
<Badge variant="outline" className="mb-4">
|
||||
Para quem é?
|
||||
</Badge>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl mb-3 md:mb-4">
|
||||
Feito para quem gosta de controle
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
|
||||
@@ -644,7 +642,7 @@ export default async function Page() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium mb-1">{item.title}</h3>
|
||||
<h3 className="font-semibold mb-1">{item.title}</h3>
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||
{item.description}
|
||||
</p>
|
||||
@@ -664,7 +662,7 @@ export default async function Page() {
|
||||
<div className="max-w-8xl mx-auto px-4">
|
||||
<AnimateOnScroll>
|
||||
<div className="mx-auto max-w-4xl rounded-2xl border bg-card px-8 py-12 md:py-16 text-center">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl mb-3 md:mb-4">
|
||||
Pronto para testar?
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-muted-foreground mb-6 md:mb-8">
|
||||
@@ -715,7 +713,7 @@ export default async function Page() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium mb-3 md:mb-4">Projeto</h3>
|
||||
<h3 className="font-semibold mb-3 md:mb-4">Projeto</h3>
|
||||
<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
|
||||
<li>
|
||||
<Link
|
||||
@@ -749,7 +747,7 @@ export default async function Page() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium mb-3 md:mb-4">Companion</h3>
|
||||
<h3 className="font-semibold mb-3 md:mb-4">Companion</h3>
|
||||
<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
|
||||
<li>
|
||||
<Link
|
||||
|
||||
@@ -88,7 +88,9 @@ export function AccountCard({
|
||||
{icon}
|
||||
</div>
|
||||
) : null}
|
||||
<h2 className="text-lg font-medium text-foreground">{accountName}</h2>
|
||||
<h2 className="text-lg font-semibold text-foreground">
|
||||
{accountName}
|
||||
</h2>
|
||||
|
||||
{(excludeFromBalance || excludeInitialBalanceFromIncome) && (
|
||||
<Tooltip>
|
||||
|
||||
@@ -68,7 +68,7 @@ export function AccountStatementCard({
|
||||
</div>
|
||||
) : null}
|
||||
<div className="min-w-0">
|
||||
<h2 className="truncate text-sm font-medium text-foreground">
|
||||
<h2 className="truncate text-sm font-semibold text-foreground">
|
||||
{accountName}
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
@@ -81,12 +81,12 @@ export function AccountStatementCard({
|
||||
|
||||
{/* Linha 2 — saldo final (hero) */}
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm font-medium text-muted-foreground ">
|
||||
<p className="text-sm text-muted-foreground ">
|
||||
Saldo ao final do período
|
||||
</p>
|
||||
<MoneyValues
|
||||
amount={currentBalance}
|
||||
className="text-3xl leading-none font-medium tracking-tight sm:text-[2rem]"
|
||||
className="text-3xl leading-none tracking-tighter sm:text-[2rem]"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
|
||||
@@ -69,9 +69,7 @@ function PdfCanvas({ url }: PdfCanvasProps) {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-muted/50">
|
||||
<RiFilePdf2Line className="size-12 text-muted-foreground/40" />
|
||||
<span className="text-xs font-medium text-muted-foreground/60">
|
||||
PDF Protegido
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/60">PDF Protegido</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -153,7 +151,7 @@ export function AttachmentGridItem({
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<p className="truncate text-sm font-medium leading-tight text-foreground">
|
||||
<p className="truncate text-sm font-semibold leading-tight text-foreground">
|
||||
{attachment.fileName}
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
@@ -180,25 +178,21 @@ export function AttachmentGridItem({
|
||||
{attachment.transactionName}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<span
|
||||
className={cn(
|
||||
"shrink-0 text-sm font-medium tracking-tighter tabular-nums",
|
||||
)}
|
||||
>
|
||||
<span className={cn("shrink-0 text-sm font-medium tracking-tighter")}>
|
||||
{formatCurrency(amount)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Footer: Tamanho + Botão Detalhes */}
|
||||
<div className="mt-auto flex items-center justify-between border-t pt-3">
|
||||
<span className="text-xs font-medium text-muted-foreground/70">
|
||||
<span className="text-xs text-muted-foreground/70">
|
||||
{formatBytes(attachment.fileSize)}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDetails}
|
||||
disabled={isLoadingDetails}
|
||||
className="text-xs font-medium text-muted-foreground/70 underline-offset-2 hover:underline focus-visible:outline-none disabled:opacity-50"
|
||||
className="text-xs text-muted-foreground/70 underline-offset-2 hover:underline focus-visible:outline-none disabled:opacity-50"
|
||||
>
|
||||
{isLoadingDetails ? "Carregando..." : "Detalhes"}
|
||||
</button>
|
||||
|
||||
@@ -105,7 +105,7 @@ export function AttachmentPreview({
|
||||
>
|
||||
<RiArrowLeftSLine className="size-4" />
|
||||
</Button>
|
||||
<span className="select-none text-xs text-muted-foreground tabular-nums">
|
||||
<span className="select-none text-xs text-muted-foreground">
|
||||
{currentIndex + 1} / {attachments.length}
|
||||
</span>
|
||||
<Button
|
||||
|
||||
@@ -19,8 +19,6 @@ import { TransactionDetailsDialog } from "@/features/transactions/components/dia
|
||||
import { TransactionDialog } from "@/features/transactions/components/dialogs/transaction-dialog/transaction-dialog";
|
||||
import type { TransactionItem } from "@/features/transactions/components/types";
|
||||
import { EmptyState } from "@/shared/components/empty-state";
|
||||
import MonthNavigation from "@/shared/components/month-picker/month-navigation";
|
||||
import PageDescription from "@/shared/components/page-description";
|
||||
import { Card, CardContent } from "@/shared/components/ui/card";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
|
||||
@@ -143,14 +141,6 @@ export function AttachmentsPage({ attachments }: AttachmentsPageProps) {
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-6">
|
||||
<PageDescription
|
||||
icon={<RiAttachmentLine className="size-5" />}
|
||||
title="Anexos"
|
||||
subtitle="Comprovantes e documentos dos seus lançamentos no mês."
|
||||
/>
|
||||
|
||||
<MonthNavigation />
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
{attachments.length === 0 ? (
|
||||
|
||||
@@ -8,7 +8,7 @@ interface AuthHeaderProps {
|
||||
export function AuthHeader({ title, description }: AuthHeaderProps) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-2.5")}>
|
||||
<h1 className="text-2xl font-medium tracking-tight text-card-foreground">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-card-foreground">
|
||||
{title}
|
||||
</h1>
|
||||
{description ? (
|
||||
|
||||
@@ -52,7 +52,7 @@ export function BudgetCard({
|
||||
size="lg"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-base font-medium leading-tight">
|
||||
<h3 className="text-base font-semibold leading-tight">
|
||||
{formatCategoryName(budget)}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
|
||||
@@ -19,9 +19,9 @@ export function CalendarGrid({
|
||||
}: CalendarGridProps) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg bg-card drop-shadow-xs border-none">
|
||||
<div className="grid grid-cols-7 text-sm font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<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 text-primary">
|
||||
<span key={dayName} className="px-3 py-2 text-center">
|
||||
{dayName}
|
||||
</span>
|
||||
))}
|
||||
|
||||
@@ -130,7 +130,7 @@ const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex gap-1 items-center">
|
||||
<span className="text-sm font-medium leading-tight">
|
||||
Vencimento Invoice - {event.card.name}
|
||||
Vencimento Fatura - {event.card.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -136,7 +136,7 @@ export function CardItem({
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<h3 className="truncate text-sm font-medium text-foreground sm:text-base">
|
||||
<h3 className="truncate text-sm font-semibold text-foreground sm:text-base">
|
||||
{name}
|
||||
</h3>
|
||||
{note ? (
|
||||
@@ -206,29 +206,29 @@ export function CardItem({
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
<MoneyValues amount={metrics[0].value} />
|
||||
</p>
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{metrics[0].label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<p className="flex items-center gap-1.5 text-sm font-medium text-foreground">
|
||||
<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>
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{metrics[1].label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
<MoneyValues amount={metrics[2].value} />
|
||||
</p>
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{metrics[2].label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -183,7 +183,7 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
|
||||
<TableCell className="font-medium">
|
||||
<Link
|
||||
href={`/categories/${category.id}`}
|
||||
className="inline-flex items-center gap-1 underline-offset-2 hover:text-primary hover:underline"
|
||||
className="inline-flex items-center gap-1 underline-offset-2 hover:text-primary hover:underline font-semibold"
|
||||
>
|
||||
{category.name}
|
||||
<RiExternalLinkLine
|
||||
|
||||
@@ -80,7 +80,7 @@ export function CategoryDetailHeader({
|
||||
size="lg"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-xl font-medium leading-tight">
|
||||
<h1 className="text-xl font-semibold leading-tight">
|
||||
{category.name}
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
@@ -99,7 +99,7 @@ export function CategoryDetailHeader({
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Total em {currentPeriodLabel}
|
||||
</p>
|
||||
<p className="mt-1 text-2xl font-medium">
|
||||
<p className="mt-1 text-2xl font-semibold">
|
||||
{currencyFormatter.format(currentTotal)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -107,7 +107,7 @@ export function CategoryDetailHeader({
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Total em {previousPeriodLabel}
|
||||
</p>
|
||||
<p className="mt-1 text-lg font-medium text-muted-foreground">
|
||||
<p className="mt-1 text-lg font-semibold text-muted-foreground">
|
||||
{currencyFormatter.format(previousTotal)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -117,7 +117,7 @@ export function CategoryDetailHeader({
|
||||
</p>
|
||||
<div
|
||||
className={cn(
|
||||
"mt-1 flex items-center gap-1 text-xl font-medium",
|
||||
"mt-1 flex items-center gap-1 text-lg font-semibold",
|
||||
variationColor,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -80,7 +80,7 @@ export function CategoryPickerDialog({
|
||||
<div className="flex max-h-96 flex-col gap-4 overflow-y-auto pr-1">
|
||||
{filteredGroups.map((group) => (
|
||||
<div key={group.label}>
|
||||
<p className="mb-2 text-xs font-medium text-muted-foreground">
|
||||
<p className="mb-2 text-xs text-muted-foreground">
|
||||
{group.label}
|
||||
</p>
|
||||
<div className="grid grid-cols-8 gap-1.5">
|
||||
|
||||
@@ -5,7 +5,10 @@ import {
|
||||
ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
|
||||
INITIAL_BALANCE_NOTE,
|
||||
} from "@/shared/lib/accounts/constants";
|
||||
import type { CategoryType } from "@/shared/lib/categories/constants";
|
||||
import {
|
||||
type CategoryType,
|
||||
INVOICE_PAYMENT_CATEGORY_NAME,
|
||||
} from "@/shared/lib/categories/constants";
|
||||
import { db } from "@/shared/lib/db";
|
||||
import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
|
||||
import { calculatePercentageChange } from "@/shared/utils/math";
|
||||
@@ -45,6 +48,7 @@ export async function fetchCategoryDetails(
|
||||
const previousPeriod = getPreviousPeriod(period);
|
||||
const transactionType = category.type === "receita" ? "Receita" : "Despesa";
|
||||
const adminPayerId = await getAdminPayerId(userId);
|
||||
const isInvoiceCategory = category.name === INVOICE_PAYMENT_CATEGORY_NAME;
|
||||
|
||||
const sanitizedNote = or(
|
||||
isNull(transactions.note),
|
||||
@@ -59,7 +63,7 @@ export async function fetchCategoryDetails(
|
||||
eq(transactions.transactionType, transactionType),
|
||||
eq(transactions.period, period),
|
||||
eq(transactions.payerId, adminPayerId),
|
||||
sanitizedNote,
|
||||
...(isInvoiceCategory ? [] : [sanitizedNote]),
|
||||
),
|
||||
with: {
|
||||
payer: true,
|
||||
@@ -108,7 +112,7 @@ export async function fetchCategoryDetails(
|
||||
eq(transactions.categoryId, categoryId),
|
||||
eq(transactions.transactionType, transactionType),
|
||||
eq(transactions.payerId, adminPayerId),
|
||||
sanitizedNote,
|
||||
...(isInvoiceCategory ? [] : [sanitizedNote]),
|
||||
eq(transactions.period, previousPeriod),
|
||||
or(
|
||||
isNull(transactions.note),
|
||||
|
||||
@@ -46,7 +46,7 @@ export function BillListItem({ bill, onPay }: BillListItemProps) {
|
||||
<span
|
||||
className={cn(
|
||||
"cursor-help rounded-full py-0.5",
|
||||
bill.isSettled && "text-success",
|
||||
bill.isSettled && "text-success font-semibold",
|
||||
)}
|
||||
>
|
||||
{statusLabel}
|
||||
@@ -60,7 +60,7 @@ export function BillListItem({ bill, onPay }: BillListItemProps) {
|
||||
<span
|
||||
className={cn(
|
||||
"rounded-full py-0.5",
|
||||
bill.isSettled && "text-success",
|
||||
bill.isSettled && "text-success font-semibold",
|
||||
)}
|
||||
>
|
||||
{statusLabel}
|
||||
@@ -72,7 +72,7 @@ export function BillListItem({ bill, onPay }: BillListItemProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues amount={bill.amount} />
|
||||
<MoneyValues className="font-medium" amount={bill.amount} />
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
|
||||
@@ -97,7 +97,7 @@ export function BillPaymentDialog({
|
||||
<p className="mb-1 text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Boleto
|
||||
</p>
|
||||
<p className="text-base font-medium text-foreground">
|
||||
<p className="text-base font-semibold text-foreground">
|
||||
{bill.name}
|
||||
</p>
|
||||
</div>
|
||||
@@ -113,7 +113,7 @@ export function BillPaymentDialog({
|
||||
</div>
|
||||
<MoneyValues
|
||||
amount={bill.amount}
|
||||
className="text-lg font-medium"
|
||||
className="text-lg font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -281,12 +281,12 @@ export function CategoryBreakdownWidgetView({
|
||||
|
||||
<div className="flex shrink-0 flex-col items-end gap-0.5">
|
||||
<MoneyValues
|
||||
className="text-foreground"
|
||||
className="text-foreground font-medium"
|
||||
amount={category.currentAmount}
|
||||
/>
|
||||
{category.percentageChange !== null ? (
|
||||
<span
|
||||
className={`flex items-center gap-0.5 text-xs ${changeClassName}`}
|
||||
className={`flex items-center gap-0.5 text-xs font-medium ${changeClassName}`}
|
||||
>
|
||||
{hasIncrease ? (
|
||||
<RiArrowUpSFill className="size-3" />
|
||||
|
||||
@@ -197,7 +197,9 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
)}
|
||||
<span className="text-foreground">{category.name}</span>
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
{category.name}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@@ -398,7 +400,7 @@ export function CategoryHistoryWidget({ data }: CategoryHistoryWidgetProps) {
|
||||
{config?.label}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
<span className="text-xs font-medium">
|
||||
{formatCurrency(value)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -116,13 +116,14 @@ const getPercentChange = (current: number, previous: number): string => {
|
||||
}
|
||||
|
||||
const change = ((current - previous) / Math.abs(previous)) * 100;
|
||||
return Number.isFinite(change) && Math.abs(change) < 1000000
|
||||
? formatPercentage(change, {
|
||||
maximumFractionDigits: 1,
|
||||
minimumFractionDigits: 1,
|
||||
if (!Number.isFinite(change)) return "—";
|
||||
if (change > 999) return "+999%";
|
||||
if (change < -999) return "-999%";
|
||||
return formatPercentage(change, {
|
||||
maximumFractionDigits: 2,
|
||||
minimumFractionDigits: 2,
|
||||
signDisplay: "always",
|
||||
})
|
||||
: "—";
|
||||
});
|
||||
};
|
||||
|
||||
const getTrendBadgeClass = (trend: Trend, invertTrend: boolean): string => {
|
||||
@@ -159,7 +160,7 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-1.5 tracking-tight">
|
||||
<CardTitle className="flex items-center gap-1.5 ">
|
||||
<Icon className={cn("size-4", iconClass)} aria-hidden />
|
||||
{label}
|
||||
<MetricsCardInfoButton
|
||||
@@ -179,12 +180,12 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 mt-1">
|
||||
<MoneyValues
|
||||
className="text-2xl leading-none"
|
||||
className="text-2xl leading-none font-medium"
|
||||
amount={metric.current}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 text-xs ",
|
||||
"inline-flex items-center gap-1 text-xs font-medium",
|
||||
trendBadgeClass,
|
||||
)}
|
||||
>
|
||||
@@ -195,7 +196,7 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
|
||||
|
||||
<div className="text-xs text-muted-foreground">
|
||||
<MoneyValues
|
||||
className="inline text-xs text-muted-foreground"
|
||||
className="inline text-xs font-medium text-muted-foreground"
|
||||
amount={metric.previous}
|
||||
/>
|
||||
<span className="ml-1">no mês anterior</span>
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
import { formatCurrentDate, getGreeting } from "./welcome-widget";
|
||||
|
||||
export function DashboardWelcome({ name }: { name?: string | null }) {
|
||||
type DashboardWelcomeProps = {
|
||||
name?: string | null;
|
||||
};
|
||||
|
||||
export function DashboardWelcome({ name }: DashboardWelcomeProps) {
|
||||
const displayName = name && name.trim().length > 0 ? name : "Administrador";
|
||||
const formattedDate = formatCurrentDate();
|
||||
const greeting = getGreeting();
|
||||
|
||||
return (
|
||||
<section className="py-4">
|
||||
<div className="tracking-tight">
|
||||
<h1 className="text-xl font-medium">
|
||||
<div>
|
||||
<h1 className="text-xl tracking-tight">
|
||||
{greeting}, {displayName}
|
||||
</h1>
|
||||
<h2 className="text-sm mt-1 text-muted-foreground">{formattedDate}</h2>
|
||||
<h2 className="mt-1 text-sm text-muted-foreground">{formattedDate}</h2>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -44,8 +44,9 @@ export function GoalProgressItem({
|
||||
{item.categoryName}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
<MoneyValues amount={item.spentAmount} /> de{" "}
|
||||
<MoneyValues amount={item.budgetAmount} />
|
||||
<MoneyValues className="font-medium" amount={item.spentAmount} />{" "}
|
||||
de{" "}
|
||||
<MoneyValues className="font-medium" amount={item.budgetAmount} />
|
||||
<span className={`ml-1.5 font-medium ${deltaColor}`}>
|
||||
{formatGoalProgressPercentage(percentageDelta, true)}
|
||||
</span>
|
||||
|
||||
@@ -132,12 +132,12 @@ export function InstallmentAnalysisPage({
|
||||
{/* Card de resumo principal */}
|
||||
<Card className="border-none bg-primary/15">
|
||||
<CardContent className="flex flex-col items-start justify-center gap-2 py-2">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Se você pagar tudo que está selecionado:
|
||||
</p>
|
||||
<MoneyValues
|
||||
amount={grandTotal}
|
||||
className="text-3xl font-medium text-primary"
|
||||
className="text-3xl font-semibold text-primary"
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{selectedCount} {selectedCount === 1 ? "parcela" : "parcelas"}{" "}
|
||||
@@ -167,7 +167,7 @@ export function InstallmentAnalysisPage({
|
||||
|
||||
{/* Seção de Lançamentos Parcelados */}
|
||||
{data.installmentGroups.length > 0 && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{data.installmentGroups.map((group) => (
|
||||
<InstallmentGroupCard
|
||||
key={group.seriesId}
|
||||
|
||||
@@ -59,7 +59,10 @@ export function InstallmentExpenseListItem({
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<MoneyValues amount={expense.amount} className="shrink-0" />
|
||||
<MoneyValues
|
||||
amount={expense.amount}
|
||||
className="shrink-0 font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
@@ -67,7 +70,7 @@ export function InstallmentExpenseListItem({
|
||||
{" · Restante "}
|
||||
<MoneyValues
|
||||
amount={remainingAmount}
|
||||
className="inline-block font-medium"
|
||||
className="inline-block font-semibold"
|
||||
/>{" "}
|
||||
({remainingInstallments})
|
||||
</p>
|
||||
|
||||
@@ -116,7 +116,10 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
<MoneyValues amount={share.amount} />
|
||||
<MoneyValues
|
||||
className="font-medium"
|
||||
amount={share.amount}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
@@ -144,7 +147,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
|
||||
paymentTooltipLabel ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="cursor-help text-success">
|
||||
<span className="cursor-help text-success font-semibold">
|
||||
{paymentInfo.label}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
@@ -153,7 +156,9 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span className="text-success">{paymentInfo.label}</span>
|
||||
<span className="text-success font-semibold">
|
||||
{paymentInfo.label}
|
||||
</span>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
@@ -161,7 +166,10 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues amount={Math.abs(invoice.totalAmount)} />
|
||||
<MoneyValues
|
||||
className="font-medium"
|
||||
amount={Math.abs(invoice.totalAmount)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
|
||||
@@ -113,7 +113,7 @@ export function InvoicePaymentDialog({
|
||||
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Cartão
|
||||
</p>
|
||||
<p className="truncate text-base font-medium text-foreground">
|
||||
<p className="truncate text-base font-semibold text-foreground">
|
||||
{invoice.cardName}
|
||||
</p>
|
||||
</div>
|
||||
@@ -130,7 +130,7 @@ export function InvoicePaymentDialog({
|
||||
</div>
|
||||
<MoneyValues
|
||||
amount={Math.abs(invoice.totalAmount)}
|
||||
className="text-lg font-medium"
|
||||
className="text-lg font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ export function MyAccountsWidget({
|
||||
<div className="flex items-start justify-between gap-3 py-1">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground">Saldo Total</p>
|
||||
<MoneyValues className="text-2xl" amount={totalBalance} />
|
||||
<MoneyValues className="text-2xl font-medium" amount={totalBalance} />
|
||||
</div>
|
||||
|
||||
{excludedAccountsCount > 0 ? (
|
||||
@@ -137,7 +137,7 @@ export function MyAccountsWidget({
|
||||
</div>
|
||||
) : (
|
||||
<ul className="flex flex-col">
|
||||
{displayedAccounts.map((account) => {
|
||||
{displayedAccounts.map((account, index) => {
|
||||
const logoSrc = resolveLogoSrc(account.logo);
|
||||
|
||||
return (
|
||||
@@ -154,6 +154,7 @@ export function MyAccountsWidget({
|
||||
fill
|
||||
sizes="38px"
|
||||
className="object-contain rounded-full"
|
||||
priority={index === 0}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
@@ -199,7 +200,10 @@ export function MyAccountsWidget({
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-0.5 text-right">
|
||||
<MoneyValues amount={account.balance} />
|
||||
<MoneyValues
|
||||
className="font-medium"
|
||||
amount={account.balance}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -83,10 +83,13 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues amount={payer.totalExpenses} />
|
||||
<MoneyValues
|
||||
className="font-medium"
|
||||
amount={payer.totalExpenses}
|
||||
/>
|
||||
{percentageChange !== null && (
|
||||
<span
|
||||
className={`flex items-center gap-0.5 text-xs ${
|
||||
className={`flex items-center gap-0.5 text-xs font-medium ${
|
||||
percentageChange > 0
|
||||
? "text-destructive"
|
||||
: percentageChange < 0
|
||||
|
||||
@@ -8,11 +8,15 @@ import { PaymentOverviewWidgetView } from "./payment-overview/payment-overview-w
|
||||
type PaymentOverviewWidgetProps = {
|
||||
paymentConditionsData: PaymentConditionsData;
|
||||
paymentMethodsData: PaymentMethodsData;
|
||||
period: string;
|
||||
adminPayerSlug: string | null;
|
||||
};
|
||||
|
||||
export function PaymentOverviewWidget({
|
||||
paymentConditionsData,
|
||||
paymentMethodsData,
|
||||
period,
|
||||
adminPayerSlug,
|
||||
}: PaymentOverviewWidgetProps) {
|
||||
const { activeTab, handleTabChange } = usePaymentOverviewWidgetController();
|
||||
|
||||
@@ -22,6 +26,8 @@ export function PaymentOverviewWidget({
|
||||
paymentConditionsData={paymentConditionsData}
|
||||
paymentMethodsData={paymentMethodsData}
|
||||
onTabChange={handleTabChange}
|
||||
period={period}
|
||||
adminPayerSlug={adminPayerSlug}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { RiExternalLinkLine } from "@remixicon/react";
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
import {
|
||||
formatPaymentBreakdownPercentage,
|
||||
@@ -17,6 +19,7 @@ export type PaymentBreakdownListItemData = {
|
||||
amount: number;
|
||||
transactions: number;
|
||||
percentage: number;
|
||||
href?: string;
|
||||
};
|
||||
|
||||
type PaymentBreakdownListItemProps = {
|
||||
@@ -40,8 +43,21 @@ export function PaymentBreakdownListItem({
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
{item.href ? (
|
||||
<Link
|
||||
href={item.href}
|
||||
className="inline-flex items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
|
||||
>
|
||||
<span className="truncate">{item.title}</span>
|
||||
<RiExternalLinkLine
|
||||
className="size-3 shrink-0 text-muted-foreground"
|
||||
aria-hidden
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<p className="text-sm font-medium text-foreground">{item.title}</p>
|
||||
<MoneyValues amount={item.amount} />
|
||||
)}
|
||||
<MoneyValues className="font-medium" amount={item.amount} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { RiCheckLine, RiSlideshowLine } from "@remixicon/react";
|
||||
import type { PaymentConditionsData } from "@/features/dashboard/payments/payment-conditions-queries";
|
||||
import { getConditionIcon } from "@/shared/utils/icons";
|
||||
import { formatPeriodForUrl } from "@/shared/utils/period";
|
||||
import { slugify } from "@/shared/utils/string";
|
||||
import {
|
||||
PaymentBreakdownList,
|
||||
type PaymentBreakdownListItemData,
|
||||
@@ -8,6 +10,8 @@ import {
|
||||
|
||||
type PaymentConditionsWidgetProps = {
|
||||
data: PaymentConditionsData;
|
||||
period: string;
|
||||
adminPayerSlug: string | null;
|
||||
};
|
||||
|
||||
const resolveConditionIcon = (condition: string) =>
|
||||
@@ -15,16 +19,27 @@ const resolveConditionIcon = (condition: string) =>
|
||||
|
||||
export function PaymentConditionsWidget({
|
||||
data,
|
||||
period,
|
||||
adminPayerSlug,
|
||||
}: PaymentConditionsWidgetProps) {
|
||||
const items: PaymentBreakdownListItemData[] = data.conditions.map(
|
||||
(condition) => ({
|
||||
(condition) => {
|
||||
const params = new URLSearchParams({
|
||||
type: slugify("Despesa"),
|
||||
condition: slugify(condition.condition),
|
||||
periodo: formatPeriodForUrl(period),
|
||||
});
|
||||
if (adminPayerSlug) params.set("payer", adminPayerSlug);
|
||||
return {
|
||||
id: condition.condition,
|
||||
title: condition.condition,
|
||||
icon: resolveConditionIcon(condition.condition),
|
||||
amount: condition.amount,
|
||||
transactions: condition.transactions,
|
||||
percentage: condition.percentage,
|
||||
}),
|
||||
href: `/transactions?${params.toString()}`,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { RiBankCard2Line, RiMoneyDollarCircleLine } from "@remixicon/react";
|
||||
import type { PaymentMethodsData } from "@/features/dashboard/payments/payment-methods-queries";
|
||||
import { getPaymentMethodIcon } from "@/shared/utils/icons";
|
||||
import { formatPeriodForUrl } from "@/shared/utils/period";
|
||||
import { slugify } from "@/shared/utils/string";
|
||||
import {
|
||||
PaymentBreakdownList,
|
||||
type PaymentBreakdownListItemData,
|
||||
@@ -8,6 +10,8 @@ import {
|
||||
|
||||
type PaymentMethodsWidgetProps = {
|
||||
data: PaymentMethodsData;
|
||||
period: string;
|
||||
adminPayerSlug: string | null;
|
||||
};
|
||||
|
||||
const resolvePaymentMethodIcon = (paymentMethod: string) =>
|
||||
@@ -15,15 +19,28 @@ const resolvePaymentMethodIcon = (paymentMethod: string) =>
|
||||
<RiBankCard2Line className="size-5" aria-hidden />
|
||||
);
|
||||
|
||||
export function PaymentMethodsWidget({ data }: PaymentMethodsWidgetProps) {
|
||||
const items: PaymentBreakdownListItemData[] = data.methods.map((method) => ({
|
||||
export function PaymentMethodsWidget({
|
||||
data,
|
||||
period,
|
||||
adminPayerSlug,
|
||||
}: PaymentMethodsWidgetProps) {
|
||||
const items: PaymentBreakdownListItemData[] = data.methods.map((method) => {
|
||||
const params = new URLSearchParams({
|
||||
type: slugify("Despesa"),
|
||||
payment: slugify(method.paymentMethod),
|
||||
periodo: formatPeriodForUrl(period),
|
||||
});
|
||||
if (adminPayerSlug) params.set("payer", adminPayerSlug);
|
||||
return {
|
||||
id: method.paymentMethod,
|
||||
title: method.paymentMethod,
|
||||
icon: resolvePaymentMethodIcon(method.paymentMethod),
|
||||
amount: method.amount,
|
||||
transactions: method.transactions,
|
||||
percentage: method.percentage,
|
||||
}));
|
||||
href: `/transactions?${params.toString()}`,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<PaymentBreakdownList
|
||||
|
||||
@@ -16,6 +16,8 @@ type PaymentOverviewWidgetViewProps = {
|
||||
paymentConditionsData: PaymentConditionsData;
|
||||
paymentMethodsData: PaymentMethodsData;
|
||||
onTabChange: (value: string) => void;
|
||||
period: string;
|
||||
adminPayerSlug: string | null;
|
||||
};
|
||||
|
||||
export function PaymentOverviewWidgetView({
|
||||
@@ -23,6 +25,8 @@ export function PaymentOverviewWidgetView({
|
||||
paymentConditionsData,
|
||||
paymentMethodsData,
|
||||
onTabChange,
|
||||
period,
|
||||
adminPayerSlug,
|
||||
}: PaymentOverviewWidgetViewProps) {
|
||||
return (
|
||||
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
|
||||
@@ -38,11 +42,19 @@ export function PaymentOverviewWidgetView({
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="conditions" className="mt-2">
|
||||
<PaymentConditionsWidget data={paymentConditionsData} />
|
||||
<PaymentConditionsWidget
|
||||
data={paymentConditionsData}
|
||||
period={period}
|
||||
adminPayerSlug={adminPayerSlug}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="methods" className="mt-2">
|
||||
<PaymentMethodsWidget data={paymentMethodsData} />
|
||||
<PaymentMethodsWidget
|
||||
data={paymentMethodsData}
|
||||
period={period}
|
||||
adminPayerSlug={adminPayerSlug}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
@@ -24,10 +24,7 @@ export function PaymentStatusCategorySection({
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">{title}</span>
|
||||
<MoneyValues
|
||||
amount={total}
|
||||
className="text-sm font-medium tabular-nums"
|
||||
/>
|
||||
<MoneyValues amount={total} className="font-medium" />
|
||||
</div>
|
||||
|
||||
<Progress value={confirmedPercentage} className="h-2" />
|
||||
@@ -35,13 +32,13 @@ export function PaymentStatusCategorySection({
|
||||
<div className="flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-4">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<StatusDot color="bg-primary" />
|
||||
<MoneyValues amount={confirmed} className="tabular-nums" />
|
||||
<MoneyValues amount={confirmed} className="font-medium" />
|
||||
<span className="text-xs text-muted-foreground">confirmados</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<StatusDot color="bg-warning/40" />
|
||||
<MoneyValues amount={pending} className="tabular-nums" />
|
||||
<MoneyValues amount={pending} className="font-medium" />
|
||||
<span className="text-xs text-muted-foreground">pendentes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -178,7 +178,10 @@ export function PurchasesByCategoryWidget({
|
||||
</div>
|
||||
|
||||
<div className="shrink-0 text-foreground">
|
||||
<MoneyValues amount={transaction.amount} />
|
||||
<MoneyValues
|
||||
className="font-medium"
|
||||
amount={transaction.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -45,7 +45,7 @@ export function RecurringExpensesWidget({
|
||||
{expense.name}
|
||||
</p>
|
||||
|
||||
<MoneyValues amount={expense.amount} />
|
||||
<MoneyValues className="font-medium" amount={expense.amount} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
|
||||
@@ -48,7 +48,10 @@ export function TopEstablishmentsWidget({
|
||||
</div>
|
||||
|
||||
<div className="shrink-0 text-foreground">
|
||||
<MoneyValues amount={establishment.amount} />
|
||||
<MoneyValues
|
||||
className="font-medium"
|
||||
amount={establishment.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -113,7 +113,10 @@ export function TopExpensesWidget({
|
||||
</div>
|
||||
|
||||
<div className="shrink-0 text-foreground">
|
||||
<MoneyValues amount={expense.amount} />
|
||||
<MoneyValues
|
||||
className="font-medium"
|
||||
amount={expense.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -67,7 +67,7 @@ export function InboxDetailsDialog({
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-medium text-muted-foreground">
|
||||
<h4 className="mb-1 text-sm font-semibold text-muted-foreground">
|
||||
Notificação Original
|
||||
</h4>
|
||||
{item.originalTitle && (
|
||||
|
||||
@@ -82,7 +82,7 @@ export function InsightsGrid({ insights }: InsightsGridProps) {
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={cn("size-5", colors.chatAiIcon)} />
|
||||
<CardTitle className={cn("font-medium", colors.titleText)}>
|
||||
<CardTitle className={cn("font-semibold", colors.titleText)}>
|
||||
{categoryConfig.title}
|
||||
</CardTitle>
|
||||
</div>
|
||||
|
||||
@@ -301,7 +301,7 @@ function ErrorState({
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4 py-12 px-4 text-center">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-lg font-medium text-destructive">{title}</h3>
|
||||
<h3 className="text-lg font-semibold text-destructive">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground max-w-md">{error}</p>
|
||||
</div>
|
||||
<Button onClick={onRetry} variant="outline">
|
||||
|
||||
@@ -133,7 +133,7 @@ export function ModelSelector({
|
||||
<Card className="grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start p-6">
|
||||
{/* Descrição */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">Definir modelo de análise</h3>
|
||||
<h3 className="text-lg font-semibold">Definir modelo de análise</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
Escolha o provedor de IA e o modelo específico que será utilizado para
|
||||
gerar insights sobre seus dados financeiros. <br />
|
||||
|
||||
@@ -176,7 +176,7 @@ export function InvoiceSummaryCard({
|
||||
</span>
|
||||
) : null}
|
||||
<div className="min-w-0">
|
||||
<h2 className="truncate text-sm font-medium text-foreground">
|
||||
<h2 className="truncate text-sm font-semibold text-foreground">
|
||||
{cardName}
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
@@ -189,13 +189,11 @@ export function InvoiceSummaryCard({
|
||||
|
||||
{/* Linha 2 — valor da fatura (hero) */}
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
Valor da fatura
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">Valor da fatura</p>
|
||||
<MoneyValues
|
||||
amount={totalAmount}
|
||||
className={cn(
|
||||
"text-3xl leading-none font-medium tracking-tight sm:text-[2rem]",
|
||||
"text-3xl leading-none tracking-tighter sm:text-[2rem]",
|
||||
isPaid ? "text-success" : "text-foreground",
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -103,7 +103,7 @@ function StepCard({
|
||||
{step}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-medium mb-1.5 md:mb-2">{title}</h3>
|
||||
<h3 className="font-semibold mb-1.5 md:mb-2">{title}</h3>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,7 +77,7 @@ export function NoteCard({
|
||||
<CardContent className="flex min-h-0 flex-1 flex-col gap-4">
|
||||
<div className="flex shrink-0 items-start justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-col gap-1">
|
||||
<h3 className="text-lg font-medium leading-tight text-foreground wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-foreground wrap-break-word">
|
||||
{displayTitle}
|
||||
</h3>
|
||||
{createdAtLabel && (
|
||||
|
||||
@@ -118,7 +118,7 @@ export function PayerHeaderCard({
|
||||
|
||||
<div className="flex flex-1 flex-col gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<CardTitle className="text-xl font-medium text-foreground">
|
||||
<CardTitle className="text-xl font-semibold text-foreground">
|
||||
{payer.name}
|
||||
</CardTitle>
|
||||
{isAdmin ? (
|
||||
@@ -215,10 +215,10 @@ export function PayerHeaderCard({
|
||||
<RiExchangeDollarLine className="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Total de Despesas
|
||||
</p>
|
||||
<p className="text-2xl font-medium text-foreground">
|
||||
<p className="text-2xl font-semibold text-foreground">
|
||||
{formatCurrency(summary.totalExpenses)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -239,7 +239,7 @@ export function PayerHeaderCard({
|
||||
Cartões
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-lg font-medium text-foreground">
|
||||
<p className="text-lg font-semibold text-foreground">
|
||||
{formatCurrency(summary.paymentSplits.card)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -251,7 +251,7 @@ export function PayerHeaderCard({
|
||||
Boletos
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-lg font-medium text-foreground">
|
||||
<p className="text-lg font-semibold text-foreground">
|
||||
{formatCurrency(summary.paymentSplits.boleto)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -263,7 +263,7 @@ export function PayerHeaderCard({
|
||||
Pix/Débito
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-lg font-medium text-foreground">
|
||||
<p className="text-lg font-semibold text-foreground">
|
||||
{formatCurrency(summary.paymentSplits.instant)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -63,7 +63,7 @@ export function PayerHistoryCard({ data }: PagadorHistoryCardProps) {
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader className="gap-1.5 pb-3">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
Evolução (últimos 6 meses)
|
||||
</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
|
||||
@@ -31,7 +31,7 @@ export function PagadorInfoCard({ payer }: PayerInfoCardProps) {
|
||||
return (
|
||||
<Card className="border gap-4">
|
||||
<CardHeader className="gap-1.5">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
Detalhes do pagador
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -106,7 +106,7 @@ export function PagadorInfoCard({ payer }: PayerInfoCardProps) {
|
||||
|
||||
const resolveRoleLabel = (role: string | null) => {
|
||||
if (role === PAYER_ROLE_ADMIN) return "Administrador";
|
||||
return "Payer";
|
||||
return "Pagador";
|
||||
};
|
||||
|
||||
type InfoItemProps = {
|
||||
|
||||
@@ -53,7 +53,7 @@ export function PayerLeaveShareCard({
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-medium">
|
||||
<CardTitle className="text-base font-semibold">
|
||||
Acesso Compartilhado
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
||||
@@ -51,7 +51,7 @@ export function PayerMonthlySummaryCard({
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-1.5">
|
||||
<CardTitle className="text-lg font-medium">Totais do mês</CardTitle>
|
||||
<CardTitle className="text-lg font-semibold">Totais do mês</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{periodLabel} - Despesas por forma de pagamento
|
||||
</p>
|
||||
@@ -65,7 +65,7 @@ export function PayerMonthlySummaryCard({
|
||||
</span>
|
||||
<MoneyValues
|
||||
amount={breakdown.totalExpenses}
|
||||
className="block text-2xl font-medium text-foreground"
|
||||
className="block text-2xl font-semibold text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -100,7 +100,7 @@ export function PayerMonthlySummaryCard({
|
||||
totalBase > 0 ? Math.round((entry.value / totalBase) * 100) : 0;
|
||||
return (
|
||||
<div key={entry.key} className="space-y-1 rounded-lg border p-3">
|
||||
<span className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground/70">
|
||||
<span className="flex items-center gap-2 text-xs uppercase tracking-wide text-muted-foreground/70">
|
||||
<span
|
||||
className={cn("size-2 rounded-full", entry.color)}
|
||||
aria-hidden
|
||||
@@ -109,7 +109,7 @@ export function PayerMonthlySummaryCard({
|
||||
</span>
|
||||
<MoneyValues
|
||||
amount={entry.value}
|
||||
className="block text-lg font-medium text-foreground"
|
||||
className="block text-lg font-semibold text-foreground"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{percent}% das despesas
|
||||
|
||||
@@ -84,7 +84,9 @@ export function PayerSharingCard({
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-medium">Compartilhamentos</CardTitle>
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
Compartilhamentos
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Compartilhe o código abaixo com outra pessoa. Ela poderá adicioná-lo
|
||||
na página de pagadores usando a opção Adicionar por código para ter
|
||||
|
||||
@@ -42,9 +42,7 @@ export function PayerCard({ payer, onEdit, onRemove }: PayerCardProps) {
|
||||
|
||||
{/* Nome e badges */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<h3 className="text-base font-medium text-foreground">
|
||||
{payer.name}
|
||||
</h3>
|
||||
<h3 className="font-semibold text-foreground">{payer.name}</h3>
|
||||
{isAdmin ? (
|
||||
<RiVerifiedBadgeFill className="size-4 text-blue-500" aria-hidden />
|
||||
) : null}
|
||||
|
||||
@@ -119,7 +119,7 @@ export function PayerDialog({
|
||||
const payerId = payer?.id;
|
||||
|
||||
if (mode === "update" && !payerId) {
|
||||
const message = "Payer inválido.";
|
||||
const message = "Pagador inválido.";
|
||||
setErrorMessage(message);
|
||||
toast.error(message);
|
||||
return;
|
||||
|
||||
@@ -142,7 +142,7 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Uso
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
<span className="text-xs font-medium">
|
||||
{formatCurrency(value, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
@@ -154,7 +154,7 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
|
||||
<span className="text-xs text-muted-foreground">
|
||||
% do Limite
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
<span className="text-xs font-medium">
|
||||
{formatPercentage(usagePercent, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
|
||||
@@ -67,11 +67,11 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
<p className="text-xs text-muted-foreground">{card.title}</p>
|
||||
{card.isMoney ? (
|
||||
<MoneyValues
|
||||
className="text-2xl font-medium"
|
||||
className="text-2xl font-semibold"
|
||||
amount={card.value}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-2xl font-medium">
|
||||
<p className="text-2xl font-semibold">
|
||||
{formatPercentage(card.value, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
@@ -83,7 +83,7 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-base font-medium ml-2 py-2">Meus cartões</p>
|
||||
<p className="text-base font-semibold ml-2 py-2">Meus cartões</p>
|
||||
|
||||
{/* Cards list */}
|
||||
<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
|
||||
@@ -116,7 +116,7 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-base font-medium truncate">
|
||||
<span className="text-base font-semibold truncate">
|
||||
{card.name}
|
||||
</span>
|
||||
{brandAsset && (
|
||||
@@ -129,7 +129,7 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground tabular-nums">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatCurrency(card.currentUsage)} /{" "}
|
||||
{formatCurrency(card.limit)}
|
||||
</p>
|
||||
@@ -141,7 +141,7 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
`[&>div]:${getUsageColor(card.usagePercent)}`,
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
<span className="text-xs font-medium">
|
||||
{formatPercentage(card.usagePercent, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
|
||||
@@ -53,7 +53,9 @@ export function CategoryCell({
|
||||
>
|
||||
{isIncrease && <RiArrowUpSFill className="h-3 w-3" />}
|
||||
{isDecrease && <RiArrowDownSFill className="h-3 w-3" />}
|
||||
<span>{formatPercentageChange(percentageChange)}</span>
|
||||
<span className="font-medium">
|
||||
{formatPercentageChange(percentageChange)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,7 @@ function AreaTooltip({
|
||||
{entry.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="shrink-0 text-xs font-medium tabular-nums text-foreground">
|
||||
<span className="shrink-0 text-xs font-medium text-foreground">
|
||||
{currencyFormatter.format(Number(entry.value))}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -78,12 +78,12 @@ export function CategoryTable({
|
||||
{periods.map((period) => (
|
||||
<TableHead
|
||||
key={period}
|
||||
className="text-right min-w-[120px] font-medium"
|
||||
className="text-right min-w-[120px] font-semibold"
|
||||
>
|
||||
{formatPeriodLabel(period)}
|
||||
</TableHead>
|
||||
))}
|
||||
<TableHead className="text-right min-w-[140px] font-medium">
|
||||
<TableHead className="text-right min-w-[140px] font-semibold">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
Média
|
||||
<Tooltip>
|
||||
@@ -100,7 +100,7 @@ export function CategoryTable({
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="text-right min-w-[120px] font-medium">
|
||||
<TableHead className="text-right min-w-[120px] font-semibold">
|
||||
Total
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
@@ -128,7 +128,7 @@ export function CategoryTable({
|
||||
/>
|
||||
<Link
|
||||
href={`/categories/${category.categoryId}?periodo=${periodParam}`}
|
||||
className="flex items-center gap-1.5 truncate hover:underline underline-offset-2"
|
||||
className="flex items-center gap-1.5 truncate hover:underline underline-offset-2 font-semibold"
|
||||
>
|
||||
{category.name}
|
||||
</Link>
|
||||
@@ -149,7 +149,7 @@ export function CategoryTable({
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
<TableCell className="text-right font-medium text-info">
|
||||
<TableCell className="text-right font-semibold text-info">
|
||||
{(() => {
|
||||
const nonZeroCount = periods.filter(
|
||||
(p) => (category.monthlyData.get(p)?.amount ?? 0) > 0,
|
||||
@@ -178,10 +178,10 @@ export function CategoryTable({
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
<TableCell className="text-right font-medium text-info">
|
||||
<TableCell className="text-right font-semibold text-info">
|
||||
{formatCurrency(sectionTotals.averageMonthlyTotal)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-medium">
|
||||
<TableCell className="text-right font-semibold">
|
||||
{formatCurrency(sectionTotals.grandTotal)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -19,7 +19,7 @@ export function HighlightsCards({ summary }: HighlightsCardsProps) {
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium">Mais Frequente</p>
|
||||
<p className="font-medium text-2xl truncate">
|
||||
<p className="font-semibold text-2xl truncate">
|
||||
{summary.mostFrequent || "—"}
|
||||
</p>
|
||||
</div>
|
||||
@@ -35,7 +35,7 @@ export function HighlightsCards({ summary }: HighlightsCardsProps) {
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium">Maior Gasto Total</p>
|
||||
<p className="font-medium text-2xl truncate">
|
||||
<p className="font-semibold text-2xl truncate">
|
||||
{summary.highestSpending || "—"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -53,16 +53,14 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
|
||||
<CardContent className="px-4 py-2">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
{card.title}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">{card.title}</p>
|
||||
{card.isMoney ? (
|
||||
<MoneyValues
|
||||
className="text-2xl font-medium"
|
||||
className="text-2xl font-semibold"
|
||||
amount={card.value}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-2xl font-medium">{card.value}</p>
|
||||
<p className="text-2xl font-semibold">{card.value}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{card.description}
|
||||
|
||||
@@ -139,7 +139,7 @@ export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium">Dispositivos conectados</h3>
|
||||
<h3 className="font-semibold">Dispositivos conectados</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Gerencie os dispositivos que podem enviar notificações para o
|
||||
OpenMonetis.
|
||||
|
||||
@@ -32,7 +32,7 @@ export function ChangelogTab({ versions }: { versions: ChangelogVersion[] }) {
|
||||
{versions.map((version) => (
|
||||
<Card key={version.version} className="p-6">
|
||||
<div className="flex items-baseline gap-3">
|
||||
<h3 className="text-lg font-medium">v{version.version}</h3>
|
||||
<h3 className="text-lg font-semibold">v{version.version}</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{version.date}
|
||||
</span>
|
||||
|
||||
@@ -84,7 +84,7 @@ export function DeleteAccountForm() {
|
||||
<div className="rounded-lg border p-4">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="font-medium">Zerar conta</h3>
|
||||
<h3 className="font-semibold">Zerar conta</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Apaga todos os dados do OpenMonetis e deixa sua conta no estado
|
||||
inicial, mantendo seu login e credenciais de acesso.
|
||||
@@ -120,7 +120,7 @@ export function DeleteAccountForm() {
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="font-medium text-destructive">Deletar conta</h3>
|
||||
<h3 className="font-semibold text-destructive">Deletar conta</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Remove seu usuário e todos os dados associados de forma
|
||||
permanente.
|
||||
|
||||
@@ -197,7 +197,7 @@ export function PasskeysForm() {
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium">Suas passkeys</h3>
|
||||
<h3 className="font-semibold">Suas passkeys</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Gerencie suas passkeys para login sem senha.
|
||||
</p>
|
||||
|
||||
@@ -145,7 +145,7 @@ export function PreferencesForm({
|
||||
{/* Seção: Lançamentos */}
|
||||
<section className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-medium">Lançamentos</h3>
|
||||
<h3 className="text-base font-semibold">Lançamentos</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Configurações de exibição da tabela de movimentações.
|
||||
</p>
|
||||
|
||||
@@ -131,7 +131,7 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
|
||||
<div className="flex gap-3">
|
||||
<RiAlertLine className="h-5 w-5 text-warning shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h3 className="font-medium text-warning">
|
||||
<h3 className="font-semibold text-warning">
|
||||
Alteração de senha não disponível
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-warning">
|
||||
|
||||
@@ -54,6 +54,7 @@ function AttachmentPreview({
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
aria-describedby={undefined}
|
||||
className="flex h-[92vh] w-[min(96vw,1400px)] max-w-none flex-col gap-0 overflow-hidden p-0 sm:p-0"
|
||||
>
|
||||
<DialogHeader className="flex-row items-center justify-between gap-3 border-b px-4 py-3 sm:px-5">
|
||||
|
||||
@@ -44,8 +44,10 @@ export function AttachmentSection({
|
||||
} = useTransactionAttachments(transactionId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
onLoaded?.(items.length);
|
||||
}, [items.length, onLoaded]);
|
||||
}
|
||||
}, [items.length, isLoading, onLoaded]);
|
||||
|
||||
const invalidateAttachments = () => {
|
||||
void queryClient.invalidateQueries({
|
||||
|
||||
@@ -342,21 +342,21 @@ export function AnticipateInstallmentsDialog({
|
||||
{/* Seção 3: Resumo */}
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="rounded-lg border bg-muted/20 p-3">
|
||||
<h4 className="text-sm font-medium mb-2">Resumo</h4>
|
||||
<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">
|
||||
<dt className="text-muted-foreground">
|
||||
{selectedIds.length} parcela
|
||||
{selectedIds.length > 1 ? "s" : ""}
|
||||
</dt>
|
||||
<dd className="font-medium tabular-nums">
|
||||
<dd className="font-medium">
|
||||
<MoneyValues amount={totalAmount} className="text-sm" />
|
||||
</dd>
|
||||
</div>
|
||||
{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-success">
|
||||
<dd className="font-medium text-success">
|
||||
-{" "}
|
||||
<MoneyValues
|
||||
amount={Number(formState.discount)}
|
||||
@@ -367,7 +367,7 @@ export function AnticipateInstallmentsDialog({
|
||||
)}
|
||||
<div className="flex items-center justify-between border-t pt-1.5">
|
||||
<dt className="font-medium">Total</dt>
|
||||
<dd className="text-base font-medium tabular-nums text-primary">
|
||||
<dd className="text-base font-semibold text-primary">
|
||||
<MoneyValues amount={finalAmount} className="text-sm" />
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
@@ -116,7 +116,7 @@ export function InstallmentSelectionTable({
|
||||
<TableCell className="text-muted-foreground">
|
||||
{formatDate(inst.dueDate)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-medium tabular-nums">
|
||||
<TableCell className="text-right font-medium">
|
||||
<MoneyValues amount={Number(inst.amount)} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -279,7 +279,7 @@ export function MassAddDialog({
|
||||
<div className="space-y-4">
|
||||
{/* Fixed Fields Section */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium">Valores Padrão</h3>
|
||||
<h3 className="text-sm font-semibold">Valores Padrão</h3>
|
||||
<div className="grid gap-3 grid-cols-1 sm:grid-cols-3">
|
||||
{/* Transaction Type */}
|
||||
<div className="space-y-2">
|
||||
@@ -452,7 +452,7 @@ export function MassAddDialog({
|
||||
|
||||
{/* Transactions Section */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium">Lançamentos</h3>
|
||||
<h3 className="text-sm font-semibold">Lançamentos</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{transactions.map((transaction, index) => (
|
||||
|
||||
@@ -88,7 +88,7 @@ export function TransactionDetailsDialog({
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Resumo
|
||||
</p>
|
||||
<p className="mt-1 text-2xl font-medium">
|
||||
<p className="mt-1 text-2xl font-semibold">
|
||||
{currencyFormatter.format(valorTotal)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -116,7 +116,7 @@ export function TransactionDetailsDialog({
|
||||
</section>
|
||||
|
||||
<section className="space-y-2">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Detalhes
|
||||
</h3>
|
||||
<ul className="min-w-0 grid gap-2 rounded-lg border p-3">
|
||||
@@ -167,7 +167,7 @@ export function TransactionDetailsDialog({
|
||||
</section>
|
||||
|
||||
<section className="space-y-2">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Valores
|
||||
</h3>
|
||||
<ul className="min-w-0 grid gap-2 rounded-lg border p-3">
|
||||
@@ -207,7 +207,7 @@ export function TransactionDetailsDialog({
|
||||
|
||||
{transaction.note ? (
|
||||
<section className="space-y-2">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Notas
|
||||
</h3>
|
||||
<div className="rounded-lg border p-3 text-foreground">
|
||||
@@ -218,7 +218,7 @@ export function TransactionDetailsDialog({
|
||||
|
||||
{attachmentCount !== 0 && (
|
||||
<section className="space-y-2">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Anexos
|
||||
</h3>
|
||||
<div className="min-w-0">
|
||||
|
||||
@@ -131,7 +131,7 @@ export function ReviewTable({
|
||||
aria-label={`Selecionar ${row.description}`}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-sm tabular-nums">
|
||||
<TableCell className="text-muted-foreground text-sm">
|
||||
{formatDate(row.date)}
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[200px] text-sm">
|
||||
@@ -204,7 +204,7 @@ export function ReviewTable({
|
||||
}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums text-sm">
|
||||
<TableCell className="text-right text-sm">
|
||||
<MoneyValues
|
||||
amount={
|
||||
row.transactionType === "expense"
|
||||
|
||||
@@ -84,7 +84,7 @@ export function AnticipationCard({
|
||||
<dl className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<dt className="text-muted-foreground">Valor Original</dt>
|
||||
<dd className="mt-1 font-medium tabular-nums">
|
||||
<dd className="mt-1 font-medium">
|
||||
<MoneyValues amount={Number(anticipation.totalAmount)} />
|
||||
</dd>
|
||||
</div>
|
||||
@@ -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-success">
|
||||
<dd className="mt-1 font-medium text-success">
|
||||
- <MoneyValues amount={Number(anticipation.discount)} />
|
||||
</dd>
|
||||
</div>
|
||||
@@ -110,7 +110,7 @@ export function AnticipationCard({
|
||||
? "Valor Final"
|
||||
: "Valor Total"}
|
||||
</dt>
|
||||
<dd className="mt-1 text-lg font-medium tabular-nums text-primary">
|
||||
<dd className="mt-1 text-lg font-semibold text-primary">
|
||||
<MoneyValues
|
||||
amount={
|
||||
Number(anticipation.totalAmount) < 0
|
||||
|
||||
@@ -34,7 +34,7 @@ export function CalculatorDisplay({
|
||||
<div className="mt-auto flex items-end justify-end gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"truncate text-right font-medium tracking-tight tabular-nums leading-none transition-all",
|
||||
"truncate text-right font-medium tracking-tight leading-none transition-all",
|
||||
isResultView ? "text-2xl" : "text-3xl",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -20,9 +20,9 @@ function MoneyValues({ amount, className, showPositiveSign = false }: Props) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-baseline transition-all duration-200 tracking-tighter",
|
||||
"inline-flex items-baseline tabular-nums transition-all duration-200 tracking-tighter",
|
||||
privacyMode &&
|
||||
"blur-[6px] select-none hover:blur-none focus-within:blur-none",
|
||||
"blur-sm select-none hover:blur-none focus-within:blur-none",
|
||||
className,
|
||||
)}
|
||||
aria-label={privacyMode ? "Valor oculto" : displayValue}
|
||||
|
||||
@@ -37,7 +37,7 @@ export default function MonthNavigation() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="sticky top-16 z-10 flex w-full flex-row p-4 backdrop-blur-xs supports-backdrop-filter:bg-card/80">
|
||||
<Card className="sticky top-16 z-10 flex w-full flex-row p-4 backdrop-blur-xs supports-backdrop-filter:bg-card/80 ">
|
||||
<div className="flex items-center gap-1">
|
||||
<NavigationButton
|
||||
direction="left"
|
||||
|
||||
@@ -96,7 +96,7 @@ export function FeedbackDialogBody({ onClose }: { onClose?: () => void }) {
|
||||
<Icon className={cn("h-5 w-5", item.color)} />
|
||||
</div>
|
||||
<div className="flex-1 text-left space-y-1">
|
||||
<h3 className="font-medium text-sm flex items-center gap-2">
|
||||
<h3 className="font-semibold text-sm flex items-center gap-2">
|
||||
{item.title}
|
||||
<RiExternalLinkLine className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</h3>
|
||||
|
||||
@@ -42,7 +42,7 @@ export function NavDropdown({ items }: NavDropdownProps) {
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="flex flex-col min-w-0">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
<span className="font-semibold">{item.label}</span>
|
||||
{item.description && (
|
||||
<span className="text-xs text-muted-foreground truncate lowercase">
|
||||
{item.description}
|
||||
|
||||
@@ -42,7 +42,7 @@ export function NavMenu() {
|
||||
return (
|
||||
<>
|
||||
{/* Desktop */}
|
||||
<nav className="hidden md:flex items-center justify-center flex-1 ">
|
||||
<nav className="hidden md:flex items-center justify-center flex-1">
|
||||
<NavigationMenu viewport={false}>
|
||||
<NavigationMenuList className="gap-0">
|
||||
<NavigationMenuItem>
|
||||
|
||||
@@ -22,7 +22,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
|
||||
<RiCalculatorLine className="size-4" />
|
||||
</span>
|
||||
<span className="flex flex-col flex-1 text-left">
|
||||
<span className="font-medium">calculadora</span>
|
||||
<span className="font-semibold">calculadora</span>
|
||||
<span className="text-xs text-muted-foreground lowercase">
|
||||
Faça cálculos rápidos
|
||||
</span>
|
||||
@@ -39,7 +39,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
|
||||
)}
|
||||
</span>
|
||||
<span className="flex flex-col flex-1 text-left">
|
||||
<span className="font-medium">privacidade</span>
|
||||
<span className="font-semibold">privacidade</span>
|
||||
<span className="text-xs text-muted-foreground lowercase">
|
||||
Oculta valores na tela
|
||||
</span>
|
||||
|
||||
@@ -126,7 +126,9 @@ export function NavbarUser({
|
||||
>
|
||||
<RiHistoryLine className="size-4 text-muted-foreground shrink-0" />
|
||||
<span className="flex-1">Changelog</span>
|
||||
<Badge variant="outline">v{version}</Badge>
|
||||
<Badge variant="outline" className="text-xs font-semibold">
|
||||
v{version}
|
||||
</Badge>
|
||||
</Link>
|
||||
|
||||
<DialogTrigger asChild>
|
||||
@@ -147,7 +149,7 @@ export function NavbarUser({
|
||||
className={cn(itemClass, "text-success")}
|
||||
>
|
||||
<RiMegaphoneLine className="size-4 text-success shrink-0" />
|
||||
<span className="flex-1 tracking-wide text-xs font-medium">
|
||||
<span className="flex-1 tracking-wide text-xs font-bold">
|
||||
Atualização {updateCheck.latestVersion} disponível
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user