mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
style(tipografia): adiciona fonte America Medium e padroniza pesos de texto
Adiciona os arquivos `america-medium.woff2` e `america-bold.woff2` e registra o weight 500 no `font_index.ts`. Padroniza o uso de `font-medium` em substituição a `font-semibold` e `font-bold` em títulos, valores monetários e rótulos de destaque em todos os componentes do app, landing page e componentes de UI base. `Card` ganha `hover:border-primary/40` e `CardTitle` recebe `text-base`. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
BIN
public/fonts/america-bold.woff2
Normal file
BIN
public/fonts/america-bold.woff2
Normal file
Binary file not shown.
BIN
public/fonts/america-medium.woff2
Normal file
BIN
public/fonts/america-medium.woff2
Normal file
Binary file not shown.
@@ -7,6 +7,11 @@ export const america = localFont({
|
|||||||
weight: "400",
|
weight: "400",
|
||||||
style: "normal",
|
style: "normal",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "./america-medium.woff2",
|
||||||
|
weight: "500",
|
||||||
|
style: "normal",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
display: "swap",
|
display: "swap",
|
||||||
variable: "--font-america",
|
variable: "--font-america",
|
||||||
|
|||||||
@@ -126,7 +126,7 @@ export default async function Page() {
|
|||||||
Projeto Open Source
|
Projeto Open Source
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|
||||||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
|
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight">
|
||||||
Suas finanças,
|
Suas finanças,
|
||||||
<span className="text-primary"> do seu jeito</span>
|
<span className="text-primary"> do seu jeito</span>
|
||||||
</h1>
|
</h1>
|
||||||
@@ -207,7 +207,7 @@ export default async function Page() {
|
|||||||
className="flex flex-col items-center text-center gap-1.5"
|
className="flex flex-col items-center text-center gap-1.5"
|
||||||
>
|
>
|
||||||
<Icon className="size-5" style={{ color: colorVar }} />
|
<Icon className="size-5" style={{ color: colorVar }} />
|
||||||
<span className="text-2xl md:text-3xl font-bold">
|
<span className="text-2xl md:text-3xl font-medium">
|
||||||
{value}
|
{value}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs md:text-sm text-muted-foreground">
|
<span className="text-xs md:text-sm text-muted-foreground">
|
||||||
@@ -229,7 +229,7 @@ export default async function Page() {
|
|||||||
<Badge variant="outline" className="mb-4">
|
<Badge variant="outline" className="mb-4">
|
||||||
Conheça as telas
|
Conheça as telas
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||||
Veja o que você pode fazer
|
Veja o que você pode fazer
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||||
@@ -254,7 +254,7 @@ export default async function Page() {
|
|||||||
<Badge variant="outline" className="mb-4">
|
<Badge variant="outline" className="mb-4">
|
||||||
O que tem aqui
|
O que tem aqui
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||||
Funcionalidades que importam
|
Funcionalidades que importam
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||||
@@ -282,7 +282,7 @@ export default async function Page() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
|
<h3 className="font-medium text-base md:text-lg mb-1.5 md:mb-2">
|
||||||
{feature.title}
|
{feature.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
@@ -346,7 +346,7 @@ export default async function Page() {
|
|||||||
<RiSmartphoneLine className="size-3.5 mr-1" />
|
<RiSmartphoneLine className="size-3.5 mr-1" />
|
||||||
Mobile
|
Mobile
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||||
Use o OpenMonetis no celular sem perder o fluxo
|
Use o OpenMonetis no celular sem perder o fluxo
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||||
@@ -384,7 +384,7 @@ export default async function Page() {
|
|||||||
<RiSmartphoneLine className="size-3.5 mr-1" />
|
<RiSmartphoneLine className="size-3.5 mr-1" />
|
||||||
PWA instalável
|
PWA instalável
|
||||||
</Badge>
|
</Badge>
|
||||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight mb-3">
|
<h3 className="text-2xl md:text-3xl font-medium tracking-tight mb-3">
|
||||||
Leve o OpenMonetis para a tela inicial
|
Leve o OpenMonetis para a tela inicial
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||||
@@ -430,7 +430,7 @@ export default async function Page() {
|
|||||||
Companion Android
|
Companion Android
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight mb-3">
|
<h3 className="text-2xl md:text-3xl font-medium tracking-tight mb-3">
|
||||||
Capture, envie e revise no mesmo fluxo
|
Capture, envie e revise no mesmo fluxo
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||||
@@ -441,7 +441,7 @@ export default async function Page() {
|
|||||||
{companionSteps.map((step, index) => (
|
{companionSteps.map((step, index) => (
|
||||||
<li key={step.title} className="flex items-start gap-3">
|
<li key={step.title} className="flex items-start gap-3">
|
||||||
<span
|
<span
|
||||||
className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold"
|
className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: `color-mix(in oklch, ${step.colorVar} 14%, transparent)`,
|
backgroundColor: `color-mix(in oklch, ${step.colorVar} 14%, transparent)`,
|
||||||
color: step.colorVar,
|
color: step.colorVar,
|
||||||
@@ -529,7 +529,7 @@ export default async function Page() {
|
|||||||
<Badge variant="outline" className="mb-4">
|
<Badge variant="outline" className="mb-4">
|
||||||
Stack técnica
|
Stack técnica
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||||
O que roda por baixo
|
O que roda por baixo
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
||||||
@@ -556,7 +556,7 @@ export default async function Page() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
|
<h3 className="font-medium text-base md:text-lg mb-1.5 md:mb-2">
|
||||||
{item.title}
|
{item.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-muted-foreground mb-2 md:mb-3">
|
<p className="text-sm text-muted-foreground mb-2 md:mb-3">
|
||||||
@@ -582,7 +582,7 @@ export default async function Page() {
|
|||||||
<Badge variant="outline" className="mb-4">
|
<Badge variant="outline" className="mb-4">
|
||||||
Como usar
|
Como usar
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||||
Rode no seu computador
|
Rode no seu computador
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
|
<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
|
||||||
@@ -617,7 +617,7 @@ export default async function Page() {
|
|||||||
<Badge variant="outline" className="mb-4">
|
<Badge variant="outline" className="mb-4">
|
||||||
Para quem é?
|
Para quem é?
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||||
Feito para quem gosta de controle
|
Feito para quem gosta de controle
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
|
<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
|
||||||
@@ -644,7 +644,7 @@ export default async function Page() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold mb-1">{item.title}</h3>
|
<h3 className="font-medium mb-1">{item.title}</h3>
|
||||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||||
{item.description}
|
{item.description}
|
||||||
</p>
|
</p>
|
||||||
@@ -664,7 +664,7 @@ export default async function Page() {
|
|||||||
<div className="max-w-8xl mx-auto px-4">
|
<div className="max-w-8xl mx-auto px-4">
|
||||||
<AnimateOnScroll>
|
<AnimateOnScroll>
|
||||||
<div className="mx-auto max-w-4xl rounded-2xl border bg-card px-8 py-12 md:py-16 text-center">
|
<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-bold tracking-tight mb-3 md:mb-4">
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
||||||
Pronto para testar?
|
Pronto para testar?
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-lg text-muted-foreground mb-6 md:mb-8">
|
<p className="text-base md:text-lg text-muted-foreground mb-6 md:mb-8">
|
||||||
@@ -715,7 +715,7 @@ export default async function Page() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold mb-3 md:mb-4">Projeto</h3>
|
<h3 className="font-medium mb-3 md:mb-4">Projeto</h3>
|
||||||
<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
|
<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
@@ -749,7 +749,7 @@ export default async function Page() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold mb-3 md:mb-4">Companion</h3>
|
<h3 className="font-medium mb-3 md:mb-4">Companion</h3>
|
||||||
<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
|
<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
|
|||||||
@@ -88,9 +88,7 @@ export function AccountCard({
|
|||||||
{icon}
|
{icon}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
<h2 className="text-lg font-semibold text-foreground">
|
<h2 className="text-lg font-medium text-foreground">{accountName}</h2>
|
||||||
{accountName}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{(excludeFromBalance || excludeInitialBalanceFromIncome) && (
|
{(excludeFromBalance || excludeInitialBalanceFromIncome) && (
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ export function AccountStatementCard({
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<h2 className="truncate text-sm font-semibold text-foreground">
|
<h2 className="truncate text-sm font-medium text-foreground">
|
||||||
{accountName}
|
{accountName}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
@@ -86,12 +86,12 @@ export function AccountStatementCard({
|
|||||||
</p>
|
</p>
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={currentBalance}
|
amount={currentBalance}
|
||||||
className="text-3xl leading-none font-semibold tracking-tight sm:text-[2rem]"
|
className="text-3xl leading-none font-medium tracking-tight sm:text-[2rem]"
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Badge
|
<Badge
|
||||||
variant={getAccountStatusBadgeVariant(status)}
|
variant={getAccountStatusBadgeVariant(status)}
|
||||||
className="text-[11px]"
|
className="text-xs"
|
||||||
>
|
>
|
||||||
{status}
|
{status}
|
||||||
</Badge>
|
</Badge>
|
||||||
@@ -107,7 +107,7 @@ export function AccountStatementCard({
|
|||||||
label="Saldo inicial"
|
label="Saldo inicial"
|
||||||
tooltip="Saldo inicial cadastrado na conta somado aos lançamentos pagos anteriores a este mês."
|
tooltip="Saldo inicial cadastrado na conta somado aos lançamentos pagos anteriores a este mês."
|
||||||
>
|
>
|
||||||
<span className="text-sm font-semibold text-foreground">
|
<span className="text-sm font-medium text-foreground">
|
||||||
{formatCurrency(openingBalance)}
|
{formatCurrency(openingBalance)}
|
||||||
</span>
|
</span>
|
||||||
</MetaItem>
|
</MetaItem>
|
||||||
@@ -116,7 +116,7 @@ export function AccountStatementCard({
|
|||||||
label="Entradas"
|
label="Entradas"
|
||||||
tooltip="Total de receitas deste mês classificadas como pagas para esta conta."
|
tooltip="Total de receitas deste mês classificadas como pagas para esta conta."
|
||||||
>
|
>
|
||||||
<span className="text-sm font-semibold text-success">
|
<span className="text-sm font-medium text-success">
|
||||||
{formatCurrency(totalIncomes)}
|
{formatCurrency(totalIncomes)}
|
||||||
</span>
|
</span>
|
||||||
</MetaItem>
|
</MetaItem>
|
||||||
@@ -125,7 +125,7 @@ export function AccountStatementCard({
|
|||||||
label="Saídas"
|
label="Saídas"
|
||||||
tooltip="Total de despesas pagas neste mês (considerando divisão entre pagadores)."
|
tooltip="Total de despesas pagas neste mês (considerando divisão entre pagadores)."
|
||||||
>
|
>
|
||||||
<span className="text-sm font-semibold text-destructive">
|
<span className="text-sm font-medium text-destructive">
|
||||||
{formatCurrency(totalExpenses)}
|
{formatCurrency(totalExpenses)}
|
||||||
</span>
|
</span>
|
||||||
</MetaItem>
|
</MetaItem>
|
||||||
@@ -136,7 +136,7 @@ export function AccountStatementCard({
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-sm font-semibold",
|
"text-sm font-medium",
|
||||||
resultado >= 0 ? "text-success" : "text-destructive",
|
resultado >= 0 ? "text-success" : "text-destructive",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -7,8 +7,8 @@ interface AuthHeaderProps {
|
|||||||
|
|
||||||
export function AuthHeader({ title, description }: AuthHeaderProps) {
|
export function AuthHeader({ title, description }: AuthHeaderProps) {
|
||||||
return (
|
return (
|
||||||
<div className={cn("flex flex-col gap-2")}>
|
<div className={cn("flex flex-col gap-2.5")}>
|
||||||
<h1 className="text-2xl font-semibold tracking-tight text-card-foreground">
|
<h1 className="text-2xl font-medium tracking-tight text-card-foreground">
|
||||||
{title}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
{description ? (
|
{description ? (
|
||||||
|
|||||||
@@ -240,7 +240,7 @@ export function LoginForm({ className, ...props }: DivProps) {
|
|||||||
</a>
|
</a>
|
||||||
</FieldDescription>
|
</FieldDescription>
|
||||||
|
|
||||||
<FieldDescription className="text-center text-[13px] text-muted-foreground">
|
<FieldDescription className="text-center text-sm text-muted-foreground">
|
||||||
<a href="/" className={authLinkClassName}>
|
<a href="/" className={authLinkClassName}>
|
||||||
Voltar para a página inicial
|
Voltar para a página inicial
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -277,7 +277,7 @@ export function SignupForm({ className, ...props }: DivProps) {
|
|||||||
</a>
|
</a>
|
||||||
</FieldDescription>
|
</FieldDescription>
|
||||||
|
|
||||||
<FieldDescription className="text-center text-[13px] text-muted-foreground">
|
<FieldDescription className="text-center text-sm text-muted-foreground">
|
||||||
<a href="/" className={authLinkClassName}>
|
<a href="/" className={authLinkClassName}>
|
||||||
Voltar para a página inicial
|
Voltar para a página inicial
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ export function BudgetCard({
|
|||||||
size="lg"
|
size="lg"
|
||||||
/>
|
/>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<h3 className="text-base font-semibold leading-tight">
|
<h3 className="text-base font-medium leading-tight">
|
||||||
{formatCategoryName(budget)}
|
{formatCategoryName(budget)}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
|
|||||||
@@ -244,7 +244,7 @@ export function BudgetDialog({
|
|||||||
<div className="space-y-3 rounded-md border p-3">
|
<div className="space-y-3 rounded-md border p-3">
|
||||||
<div className="flex items-center justify-between text-sm">
|
<div className="flex items-center justify-between text-sm">
|
||||||
<span className="text-muted-foreground">Limite atual</span>
|
<span className="text-muted-foreground">Limite atual</span>
|
||||||
<span className="font-semibold text-foreground">
|
<span className="font-medium text-foreground">
|
||||||
{formatCurrency(sliderValue)}
|
{formatCurrency(sliderValue)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export function CalendarGrid({
|
|||||||
}: CalendarGridProps) {
|
}: CalendarGridProps) {
|
||||||
return (
|
return (
|
||||||
<div className="overflow-hidden rounded-lg bg-card drop-shadow-xs border-none">
|
<div className="overflow-hidden rounded-lg bg-card drop-shadow-xs border-none">
|
||||||
<div className="grid grid-cols-7 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
|
<div className="grid grid-cols-7 text-sm font-medium uppercase tracking-wide text-muted-foreground">
|
||||||
{WEEK_DAYS_SHORT.map((dayName) => (
|
{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 text-primary">
|
||||||
{dayName}
|
{dayName}
|
||||||
|
|||||||
@@ -110,9 +110,7 @@ const DayEventPreview = ({ event }: { event: CalendarEvent }) => {
|
|||||||
<span className="truncate">{label}</span>
|
<span className="truncate">{label}</span>
|
||||||
</div>
|
</div>
|
||||||
{complement ? (
|
{complement ? (
|
||||||
<span
|
<span className={cn("shrink-0 font-medium", style.accent ?? "text-xs")}>
|
||||||
className={cn("shrink-0 font-semibold", style.accent ?? "text-xs")}
|
|
||||||
>
|
|
||||||
{complement}
|
{complement}
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
@@ -153,7 +151,7 @@ export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
|
|||||||
<div className="flex items-start justify-between gap-2">
|
<div className="flex items-start justify-between gap-2">
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-sm font-semibold leading-none",
|
"text-sm font-medium leading-none",
|
||||||
day.isToday
|
day.isToday
|
||||||
? "text-primary-foreground bg-primary size-5 rounded-full flex items-center justify-center"
|
? "text-primary-foreground bg-primary size-5 rounded-full flex items-center justify-center"
|
||||||
: "text-foreground/90",
|
: "text-foreground/90",
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ const renderLancamento = (
|
|||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<span
|
<span
|
||||||
className={`text-sm font-semibold leading-tight ${
|
className={`text-sm font-medium leading-tight ${
|
||||||
isPagamentoFatura && "text-success"
|
isPagamentoFatura && "text-success"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@@ -74,7 +74,7 @@ const renderLancamento = (
|
|||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-sm font-semibold whitespace-nowrap",
|
"text-sm font-medium whitespace-nowrap",
|
||||||
isReceita ? "text-success" : "text-foreground",
|
isReceita ? "text-success" : "text-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -103,7 +103,7 @@ const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
|
|||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<div className="flex gap-1 items-center">
|
<div className="flex gap-1 items-center">
|
||||||
<span className="text-sm font-semibold leading-tight">
|
<span className="text-sm font-medium leading-tight">
|
||||||
{event.transaction.name}
|
{event.transaction.name}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
@@ -116,7 +116,7 @@ const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
|
|||||||
|
|
||||||
<Badge variant={"outline"}>{isPaid ? "Pago" : "Pendente"}</Badge>
|
<Badge variant={"outline"}>{isPaid ? "Pago" : "Pendente"}</Badge>
|
||||||
</div>
|
</div>
|
||||||
<span className="font-semibold">
|
<span className="font-medium">
|
||||||
<MoneyValues amount={event.transaction.amount} />
|
<MoneyValues amount={event.transaction.amount} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -129,7 +129,7 @@ const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => (
|
|||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<div className="flex gap-1 items-center">
|
<div className="flex gap-1 items-center">
|
||||||
<span className="text-sm font-semibold leading-tight">
|
<span className="text-sm font-medium leading-tight">
|
||||||
Vencimento Invoice - {event.card.name}
|
Vencimento Invoice - {event.card.name}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -137,7 +137,7 @@ const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => (
|
|||||||
<Badge variant={"outline"}>{event.card.status ?? "Invoice"}</Badge>
|
<Badge variant={"outline"}>{event.card.status ?? "Invoice"}</Badge>
|
||||||
</div>
|
</div>
|
||||||
{event.card.totalDue !== null ? (
|
{event.card.totalDue !== null ? (
|
||||||
<span className="font-semibold">
|
<span className="font-medium">
|
||||||
<MoneyValues amount={event.card.totalDue} />
|
<MoneyValues amount={event.card.totalDue} />
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@@ -136,7 +136,7 @@ export function CardItem({
|
|||||||
|
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
<h3 className="truncate text-sm font-semibold text-foreground sm:text-base">
|
<h3 className="truncate text-sm font-medium text-foreground sm:text-base">
|
||||||
{name}
|
{name}
|
||||||
</h3>
|
</h3>
|
||||||
{note ? (
|
{note ? (
|
||||||
@@ -188,13 +188,13 @@ export function CardItem({
|
|||||||
<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-xs font-medium text-muted-foreground sm:text-sm">
|
||||||
<span>
|
<span>
|
||||||
Fecha dia{" "}
|
Fecha dia{" "}
|
||||||
<span className="font-semibold text-foreground">
|
<span className="font-medium text-foreground">
|
||||||
{formatDay(closingDay)}
|
{formatDay(closingDay)}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
Vence dia{" "}
|
Vence dia{" "}
|
||||||
<span className="font-semibold text-foreground">
|
<span className="font-medium text-foreground">
|
||||||
{formatDay(dueDay)}
|
{formatDay(dueDay)}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@@ -206,7 +206,7 @@ export function CardItem({
|
|||||||
<>
|
<>
|
||||||
<div className="grid grid-cols-3 gap-4">
|
<div className="grid grid-cols-3 gap-4">
|
||||||
<div className="flex flex-col items-start gap-1">
|
<div className="flex flex-col items-start gap-1">
|
||||||
<p className="text-sm font-semibold text-foreground">
|
<p className="text-sm font-medium text-foreground">
|
||||||
<MoneyValues amount={metrics[0].value} />
|
<MoneyValues amount={metrics[0].value} />
|
||||||
</p>
|
</p>
|
||||||
<span className="text-xs font-medium text-muted-foreground">
|
<span className="text-xs font-medium text-muted-foreground">
|
||||||
@@ -215,7 +215,7 @@ export function CardItem({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center gap-1">
|
<div className="flex flex-col items-center gap-1">
|
||||||
<p className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
|
<p className="flex items-center gap-1.5 text-sm font-medium text-foreground">
|
||||||
<span className="size-2 rounded-full bg-primary" />
|
<span className="size-2 rounded-full bg-primary" />
|
||||||
<MoneyValues amount={metrics[1].value} />
|
<MoneyValues amount={metrics[1].value} />
|
||||||
</p>
|
</p>
|
||||||
@@ -225,7 +225,7 @@ export function CardItem({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-end gap-1">
|
<div className="flex flex-col items-end gap-1">
|
||||||
<p className="text-sm font-semibold text-foreground">
|
<p className="text-sm font-medium text-foreground">
|
||||||
<MoneyValues amount={metrics[2].value} />
|
<MoneyValues amount={metrics[2].value} />
|
||||||
</p>
|
</p>
|
||||||
<span className="text-xs font-medium text-muted-foreground">
|
<span className="text-xs font-medium text-muted-foreground">
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ export function CategoryDetailHeader({
|
|||||||
size="lg"
|
size="lg"
|
||||||
/>
|
/>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<h1 className="text-xl font-semibold leading-tight">
|
<h1 className="text-xl font-medium leading-tight">
|
||||||
{category.name}
|
{category.name}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
<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">
|
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||||
Total em {currentPeriodLabel}
|
Total em {currentPeriodLabel}
|
||||||
</p>
|
</p>
|
||||||
<p className="mt-1 text-2xl font-semibold">
|
<p className="mt-1 text-2xl font-medium">
|
||||||
{currencyFormatter.format(currentTotal)}
|
{currencyFormatter.format(currentTotal)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -117,7 +117,7 @@ export function CategoryDetailHeader({
|
|||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"mt-1 flex items-center gap-1 text-xl font-semibold",
|
"mt-1 flex items-center gap-1 text-xl font-medium",
|
||||||
variationColor,
|
variationColor,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ export function BillPaymentDialog({
|
|||||||
<p className="mb-1 text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
<p className="mb-1 text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
Boleto
|
Boleto
|
||||||
</p>
|
</p>
|
||||||
<p className="text-base font-semibold text-foreground">
|
<p className="text-base font-medium text-foreground">
|
||||||
{bill.name}
|
{bill.name}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -107,24 +107,24 @@ export function BillPaymentDialog({
|
|||||||
<div className="rounded-xl border p-3">
|
<div className="rounded-xl border p-3">
|
||||||
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
||||||
<RiMoneyDollarCircleLine className="size-3.5" />
|
<RiMoneyDollarCircleLine className="size-3.5" />
|
||||||
<span className="text-[11px] font-semibold uppercase tracking-wide">
|
<span className="text-xs font-medium uppercase tracking-wide">
|
||||||
Valor
|
Valor
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={bill.amount}
|
amount={bill.amount}
|
||||||
className="text-lg font-bold"
|
className="text-lg font-medium"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-xl border p-3">
|
<div className="rounded-xl border p-3">
|
||||||
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
||||||
<RiCalendarLine className="size-3.5" />
|
<RiCalendarLine className="size-3.5" />
|
||||||
<span className="text-[11px] font-semibold uppercase tracking-wide">
|
<span className="text-xs font-medium uppercase tracking-wide">
|
||||||
Vencimento
|
Vencimento
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm font-semibold text-foreground">
|
<p className="text-sm font-medium text-foreground">
|
||||||
{dueLabel?.replace("Vencimento: ", "") ?? "—"}
|
{dueLabel?.replace("Vencimento: ", "") ?? "—"}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -343,10 +343,10 @@ export function CategoryBreakdownWidgetView({
|
|||||||
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
<span className="text-xs uppercase text-muted-foreground">
|
||||||
{entry.name}
|
{entry.name}
|
||||||
</span>
|
</span>
|
||||||
<span className="font-bold text-foreground">
|
<span className="font-medium text-foreground">
|
||||||
{formatCurrency(entry.value)}
|
{formatCurrency(entry.value)}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
|
|||||||
@@ -337,7 +337,7 @@ export function DashboardGridEditable({
|
|||||||
<div className="absolute inset-0 z-10 bg-background/50 backdrop-blur-[1px] rounded-lg border-2 border-dashed border-primary/50 flex items-center justify-center">
|
<div className="absolute inset-0 z-10 bg-background/50 backdrop-blur-[1px] rounded-lg border-2 border-dashed border-primary/50 flex items-center justify-center">
|
||||||
<div className="flex flex-col items-center gap-2">
|
<div className="flex flex-col items-center gap-2">
|
||||||
<RiDragMove2Line className="size-8 text-primary" />
|
<RiDragMove2Line className="size-8 text-primary" />
|
||||||
<span className="text-xs font-bold">
|
<span className="text-xs font-medium">
|
||||||
Arraste para mover
|
Arraste para mover
|
||||||
</span>
|
</span>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -134,12 +134,12 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
|
|||||||
<CardContent className="flex flex-col gap-3">
|
<CardContent className="flex flex-col gap-3">
|
||||||
<div className="flex flex-wrap items-center justify-between gap-2 mt-1">
|
<div className="flex flex-wrap items-center justify-between gap-2 mt-1">
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
className="text-[1.55rem] leading-none font-medium"
|
className="text-2xl leading-none"
|
||||||
amount={metric.current}
|
amount={metric.current}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"inline-flex items-center gap-1 text-xs font-medium",
|
"inline-flex items-center gap-1 text-xs ",
|
||||||
trendBadgeClass,
|
trendBadgeClass,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -150,7 +150,7 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
|
|||||||
|
|
||||||
<div className="text-xs text-muted-foreground">
|
<div className="text-xs text-muted-foreground">
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
className="inline text-xs font-medium text-muted-foreground"
|
className="inline text-xs text-muted-foreground"
|
||||||
amount={metric.previous}
|
amount={metric.previous}
|
||||||
/>
|
/>
|
||||||
<span className="ml-1">no mês anterior</span>
|
<span className="ml-1">no mês anterior</span>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export function DashboardWelcome({ name }: { name?: string | null }) {
|
|||||||
return (
|
return (
|
||||||
<section className="py-4">
|
<section className="py-4">
|
||||||
<div className="tracking-tight">
|
<div className="tracking-tight">
|
||||||
<h1 className="text-xl">
|
<h1 className="text-xl font-medium">
|
||||||
{greeting}, {displayName}
|
{greeting}, {displayName}
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="text-sm mt-1 text-muted-foreground">{formattedDate}</h2>
|
<h2 className="text-sm mt-1 text-muted-foreground">{formattedDate}</h2>
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ export function InstallmentAnalysisPage({
|
|||||||
</p>
|
</p>
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={grandTotal}
|
amount={grandTotal}
|
||||||
className="text-3xl font-bold text-primary"
|
className="text-3xl font-medium text-primary"
|
||||||
/>
|
/>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
{selectedCount} {selectedCount === 1 ? "parcela" : "parcelas"}{" "}
|
{selectedCount} {selectedCount === 1 ? "parcela" : "parcelas"}{" "}
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export function InstallmentGroupCard({
|
|||||||
<span className="text-xs text-muted-foreground">Total:</span>
|
<span className="text-xs text-muted-foreground">Total:</span>
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={totalAmount}
|
amount={totalAmount}
|
||||||
className="text-base font-bold"
|
className="text-base font-medium"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
|
|||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-semibold text-foreground">
|
<div className="text-sm font-medium text-foreground">
|
||||||
<MoneyValues amount={share.amount} />
|
<MoneyValues amount={share.amount} />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ export function InvoiceLogo({
|
|||||||
) : (
|
) : (
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-sm font-semibold uppercase text-muted-foreground",
|
"text-sm font-medium uppercase text-muted-foreground",
|
||||||
tone === "accent" && "text-primary",
|
tone === "accent" && "text-primary",
|
||||||
fallbackClassName,
|
fallbackClassName,
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -110,10 +110,10 @@ export function InvoicePaymentDialog({
|
|||||||
fallbackClassName="text-xs"
|
fallbackClassName="text-xs"
|
||||||
/>
|
/>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<p className="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">
|
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
Cartão
|
Cartão
|
||||||
</p>
|
</p>
|
||||||
<p className="truncate text-base font-semibold text-foreground">
|
<p className="truncate text-base font-medium text-foreground">
|
||||||
{invoice.cardName}
|
{invoice.cardName}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -124,26 +124,26 @@ export function InvoicePaymentDialog({
|
|||||||
<div className="rounded-xl border p-3">
|
<div className="rounded-xl border p-3">
|
||||||
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
||||||
<RiMoneyDollarCircleLine className="size-3.5" />
|
<RiMoneyDollarCircleLine className="size-3.5" />
|
||||||
<span className="text-[11px] font-semibold uppercase tracking-wide">
|
<span className="text-xs font-medium uppercase tracking-wide">
|
||||||
Total da fatura
|
Total da fatura
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={Math.abs(invoice.totalAmount)}
|
amount={Math.abs(invoice.totalAmount)}
|
||||||
className="text-lg font-bold"
|
className="text-lg font-medium"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-xl border p-3">
|
<div className="rounded-xl border p-3">
|
||||||
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
|
||||||
<RiCalendarLine className="size-3.5" />
|
<RiCalendarLine className="size-3.5" />
|
||||||
<span className="text-[11px] font-semibold uppercase tracking-wide">
|
<span className="text-xs font-medium uppercase tracking-wide">
|
||||||
{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID
|
{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID
|
||||||
? "Pago em"
|
? "Pago em"
|
||||||
: "Vencimento"}
|
: "Vencimento"}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm font-semibold text-foreground">
|
<p className="text-sm font-medium text-foreground">
|
||||||
{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID
|
{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID
|
||||||
? (paymentInfo?.label ?? "—")
|
? (paymentInfo?.label ?? "—")
|
||||||
: (dueInfo?.label ?? "—")}
|
: (dueInfo?.label ?? "—")}
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export function NoteListItem({
|
|||||||
{getNoteTasksSummary(note)}
|
{getNoteTasksSummary(note)}
|
||||||
</Badge>
|
</Badge>
|
||||||
{createdAtLabel ? (
|
{createdAtLabel ? (
|
||||||
<p className="truncate text-[11px] text-muted-foreground">
|
<p className="truncate text-xs text-muted-foreground">
|
||||||
{createdAtLabel}
|
{createdAtLabel}
|
||||||
</p>
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@@ -130,7 +130,7 @@ export function PurchasesByCategoryWidget({
|
|||||||
<SelectContent>
|
<SelectContent>
|
||||||
{Object.entries(categoriesByType).map(([type, categories]) => (
|
{Object.entries(categoriesByType).map(([type, categories]) => (
|
||||||
<div key={type}>
|
<div key={type}>
|
||||||
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
|
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||||
{CATEGORY_TYPE_LABEL[
|
{CATEGORY_TYPE_LABEL[
|
||||||
type as keyof typeof CATEGORY_TYPE_LABEL
|
type as keyof typeof CATEGORY_TYPE_LABEL
|
||||||
] ?? type}
|
] ?? type}
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ export const InboxCard = memo(function InboxCard({
|
|||||||
|
|
||||||
<CardContent className="flex-1 py-2">
|
<CardContent className="flex-1 py-2">
|
||||||
{item.originalTitle && (
|
{item.originalTitle && (
|
||||||
<p className="mb-1 text-sm font-bold">{item.originalTitle}</p>
|
<p className="mb-1 text-sm font-medium">{item.originalTitle}</p>
|
||||||
)}
|
)}
|
||||||
<p className="line-clamp-4 whitespace-pre-wrap text-sm text-muted-foreground">
|
<p className="line-clamp-4 whitespace-pre-wrap text-sm text-muted-foreground">
|
||||||
{item.originalText}
|
{item.originalText}
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ export function InsightsGrid({ insights }: InsightsGridProps) {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Icon className={cn("size-5", colors.chatAiIcon)} />
|
<Icon className={cn("size-5", colors.chatAiIcon)} />
|
||||||
<CardTitle className={cn("font-semibold", colors.titleText)}>
|
<CardTitle className={cn("font-medium", colors.titleText)}>
|
||||||
{categoryConfig.title}
|
{categoryConfig.title}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -267,7 +267,7 @@ function ErrorState({
|
|||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center gap-4 py-12 px-4 text-center">
|
<div className="flex flex-col items-center justify-center gap-4 py-12 px-4 text-center">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<h3 className="text-lg font-semibold text-destructive">
|
<h3 className="text-lg font-medium text-destructive">
|
||||||
Erro ao gerar insights
|
Erro ao gerar insights
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-muted-foreground max-w-md">{error}</p>
|
<p className="text-sm text-muted-foreground max-w-md">{error}</p>
|
||||||
|
|||||||
@@ -133,7 +133,7 @@ export function ModelSelector({
|
|||||||
<Card className="grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start p-6">
|
<Card className="grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start p-6">
|
||||||
{/* Descrição */}
|
{/* Descrição */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<h3 className="text-lg font-semibold">Definir modelo de análise</h3>
|
<h3 className="text-lg font-medium">Definir modelo de análise</h3>
|
||||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
Escolha o provedor de IA e o modelo específico que será utilizado para
|
Escolha o provedor de IA e o modelo específico que será utilizado para
|
||||||
gerar insights sobre seus dados financeiros. <br />
|
gerar insights sobre seus dados financeiros. <br />
|
||||||
|
|||||||
@@ -171,12 +171,12 @@ export function InvoiceSummaryCard({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : cardBrand ? (
|
) : cardBrand ? (
|
||||||
<span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-background text-xs font-semibold text-muted-foreground">
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-background text-xs font-medium text-muted-foreground">
|
||||||
{cardBrand.slice(0, 2).toUpperCase()}
|
{cardBrand.slice(0, 2).toUpperCase()}
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<h2 className="truncate text-sm font-semibold text-foreground">
|
<h2 className="truncate text-sm font-medium text-foreground">
|
||||||
{cardName}
|
{cardName}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
@@ -195,14 +195,14 @@ export function InvoiceSummaryCard({
|
|||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={totalAmount}
|
amount={totalAmount}
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-3xl leading-none font-semibold tracking-tight sm:text-[2rem]",
|
"text-3xl leading-none font-medium tracking-tight sm:text-[2rem]",
|
||||||
isPaid ? "text-success" : "text-foreground",
|
isPaid ? "text-success" : "text-foreground",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Badge
|
<Badge
|
||||||
variant={INVOICE_STATUS_BADGE_VARIANT[invoiceStatus]}
|
variant={INVOICE_STATUS_BADGE_VARIANT[invoiceStatus]}
|
||||||
className="text-[11px]"
|
className="text-xs"
|
||||||
>
|
>
|
||||||
{INVOICE_STATUS_LABEL[invoiceStatus]}
|
{INVOICE_STATUS_LABEL[invoiceStatus]}
|
||||||
</Badge>
|
</Badge>
|
||||||
@@ -218,20 +218,20 @@ export function InvoiceSummaryCard({
|
|||||||
{/* Linha 3 — metadados do cartão */}
|
{/* Linha 3 — metadados do cartão */}
|
||||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||||
<MetaItem label="Vencimento">
|
<MetaItem label="Vencimento">
|
||||||
<span className="text-sm font-semibold text-foreground">
|
<span className="text-sm font-medium text-foreground">
|
||||||
Dia {formatDay(dueDay)}
|
Dia {formatDay(dueDay)}
|
||||||
</span>
|
</span>
|
||||||
</MetaItem>
|
</MetaItem>
|
||||||
|
|
||||||
<MetaItem label="Fechamento">
|
<MetaItem label="Fechamento">
|
||||||
<span className="text-sm font-semibold text-foreground">
|
<span className="text-sm font-medium text-foreground">
|
||||||
Dia {formatDay(closingDay)}
|
Dia {formatDay(closingDay)}
|
||||||
</span>
|
</span>
|
||||||
</MetaItem>
|
</MetaItem>
|
||||||
|
|
||||||
{typeof limitAmount === "number" ? (
|
{typeof limitAmount === "number" ? (
|
||||||
<MetaItem label="Limite">
|
<MetaItem label="Limite">
|
||||||
<span className="text-sm font-semibold text-foreground">
|
<span className="text-sm font-medium text-foreground">
|
||||||
{formatCurrency(limitAmount)}
|
{formatCurrency(limitAmount)}
|
||||||
</span>
|
</span>
|
||||||
</MetaItem>
|
</MetaItem>
|
||||||
@@ -249,7 +249,7 @@ export function InvoiceSummaryCard({
|
|||||||
className="h-4 w-auto shrink-0"
|
className="h-4 w-auto shrink-0"
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
<span className="text-sm font-semibold text-foreground truncate">
|
<span className="text-sm font-medium text-foreground truncate">
|
||||||
{cardBrand}
|
{cardBrand}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -99,11 +99,11 @@ function StepCard({
|
|||||||
<Card className="border">
|
<Card className="border">
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="flex gap-3 md:gap-4">
|
<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-bold text-sm md:text-base">
|
<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">
|
||||||
{step}
|
{step}
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<h3 className="font-semibold mb-1.5 md:mb-2">{title}</h3>
|
<h3 className="font-medium mb-1.5 md:mb-2">{title}</h3>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ export function NoteCard({
|
|||||||
<CardContent className="flex min-h-0 flex-1 flex-col gap-4">
|
<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 shrink-0 items-start justify-between gap-3">
|
||||||
<div className="flex min-w-0 flex-col gap-1">
|
<div className="flex min-w-0 flex-col gap-1">
|
||||||
<h3 className="text-lg font-semibold leading-tight text-foreground wrap-break-word">
|
<h3 className="text-lg font-medium leading-tight text-foreground wrap-break-word">
|
||||||
{displayTitle}
|
{displayTitle}
|
||||||
</h3>
|
</h3>
|
||||||
{createdAtLabel && (
|
{createdAtLabel && (
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export function PayerCardUsageCard({ items }: PagadorCardUsageCardProps) {
|
|||||||
className="h-full w-full object-contain"
|
className="h-full w-full object-contain"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<span className="text-sm font-semibold uppercase text-muted-foreground">
|
<span className="text-sm font-medium uppercase text-muted-foreground">
|
||||||
{initials}
|
{initials}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export function PayerHeaderCard({
|
|||||||
|
|
||||||
<div className="flex flex-1 flex-col gap-2">
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
<CardTitle className="text-xl font-semibold text-foreground">
|
<CardTitle className="text-xl font-medium text-foreground">
|
||||||
{payer.name}
|
{payer.name}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
{isAdmin ? (
|
{isAdmin ? (
|
||||||
@@ -197,11 +197,11 @@ export function PayerHeaderCard({
|
|||||||
<DialogTitle>Confirmar envio do resumo</DialogTitle>
|
<DialogTitle>Confirmar envio do resumo</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Resumo de{" "}
|
Resumo de{" "}
|
||||||
<span className="font-semibold text-foreground">
|
<span className="font-medium text-foreground">
|
||||||
{summary.periodLabel}
|
{summary.periodLabel}
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
para{" "}
|
para{" "}
|
||||||
<span className="font-semibold text-foreground">
|
<span className="font-medium text-foreground">
|
||||||
{payer.email}
|
{payer.email}
|
||||||
</span>
|
</span>
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
@@ -218,7 +218,7 @@ export function PayerHeaderCard({
|
|||||||
<p className="text-sm font-medium text-muted-foreground">
|
<p className="text-sm font-medium text-muted-foreground">
|
||||||
Total de Despesas
|
Total de Despesas
|
||||||
</p>
|
</p>
|
||||||
<p className="text-2xl font-bold text-foreground">
|
<p className="text-2xl font-medium text-foreground">
|
||||||
{formatCurrency(summary.totalExpenses)}
|
{formatCurrency(summary.totalExpenses)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -235,11 +235,11 @@ export function PayerHeaderCard({
|
|||||||
<div className="rounded-lg border p-3">
|
<div className="rounded-lg border p-3">
|
||||||
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
||||||
<RiBankCard2Line className="size-4" />
|
<RiBankCard2Line className="size-4" />
|
||||||
<span className="text-xs font-semibold uppercase">
|
<span className="text-xs font-medium uppercase">
|
||||||
Cartões
|
Cartões
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-lg font-bold text-foreground">
|
<p className="text-lg font-medium text-foreground">
|
||||||
{formatCurrency(summary.paymentSplits.card)}
|
{formatCurrency(summary.paymentSplits.card)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -247,11 +247,11 @@ export function PayerHeaderCard({
|
|||||||
<div className="rounded-lg border p-3">
|
<div className="rounded-lg border p-3">
|
||||||
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
||||||
<RiBillLine className="size-4" />
|
<RiBillLine className="size-4" />
|
||||||
<span className="text-xs font-semibold uppercase">
|
<span className="text-xs font-medium uppercase">
|
||||||
Boletos
|
Boletos
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-lg font-bold text-foreground">
|
<p className="text-lg font-medium text-foreground">
|
||||||
{formatCurrency(summary.paymentSplits.boleto)}
|
{formatCurrency(summary.paymentSplits.boleto)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -259,11 +259,11 @@ export function PayerHeaderCard({
|
|||||||
<div className="rounded-lg border p-3">
|
<div className="rounded-lg border p-3">
|
||||||
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
||||||
<RiExchangeDollarLine className="size-4" />
|
<RiExchangeDollarLine className="size-4" />
|
||||||
<span className="text-xs font-semibold uppercase">
|
<span className="text-xs font-medium uppercase">
|
||||||
Pix/Débito
|
Pix/Débito
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-lg font-bold text-foreground">
|
<p className="text-lg font-medium text-foreground">
|
||||||
{formatCurrency(summary.paymentSplits.instant)}
|
{formatCurrency(summary.paymentSplits.instant)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -274,7 +274,7 @@ export function PayerHeaderCard({
|
|||||||
<div className="rounded-lg border p-3">
|
<div className="rounded-lg border p-3">
|
||||||
<div className="mb-2 flex items-center gap-2">
|
<div className="mb-2 flex items-center gap-2">
|
||||||
<RiBankCard2Line className="size-4 text-muted-foreground" />
|
<RiBankCard2Line className="size-4 text-muted-foreground" />
|
||||||
<span className="text-xs font-semibold uppercase text-muted-foreground">
|
<span className="text-xs font-medium uppercase text-muted-foreground">
|
||||||
Cartões Utilizados
|
Cartões Utilizados
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -299,14 +299,14 @@ export function PayerHeaderCard({
|
|||||||
<div className="rounded-lg border p-3">
|
<div className="rounded-lg border p-3">
|
||||||
<div className="mb-2 flex items-center gap-2">
|
<div className="mb-2 flex items-center gap-2">
|
||||||
<RiBillLine className="size-4 text-muted-foreground" />
|
<RiBillLine className="size-4 text-muted-foreground" />
|
||||||
<span className="text-xs font-semibold uppercase text-muted-foreground">
|
<span className="text-xs font-medium uppercase text-muted-foreground">
|
||||||
Status de Boletos
|
Status de Boletos
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2 sm:grid-cols-2">
|
<div className="grid gap-2 sm:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs text-muted-foreground">Pagos</p>
|
<p className="text-xs text-muted-foreground">Pagos</p>
|
||||||
<p className="text-sm font-semibold text-success">
|
<p className="text-sm font-medium text-success">
|
||||||
{formatCurrency(summary.boletoStats.paidAmount)}{" "}
|
{formatCurrency(summary.boletoStats.paidAmount)}{" "}
|
||||||
<span className="text-xs font-normal">
|
<span className="text-xs font-normal">
|
||||||
({summary.boletoStats.paidCount})
|
({summary.boletoStats.paidCount})
|
||||||
@@ -317,7 +317,7 @@ export function PayerHeaderCard({
|
|||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
Pendentes
|
Pendentes
|
||||||
</p>
|
</p>
|
||||||
<p className="text-sm font-semibold text-warning">
|
<p className="text-sm font-medium text-warning">
|
||||||
{formatCurrency(summary.boletoStats.pendingAmount)}{" "}
|
{formatCurrency(summary.boletoStats.pendingAmount)}{" "}
|
||||||
<span className="text-xs font-normal">
|
<span className="text-xs font-normal">
|
||||||
({summary.boletoStats.pendingCount})
|
({summary.boletoStats.pendingCount})
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ const ValueLabel = (props: LabelProps) => {
|
|||||||
y={labelY}
|
y={labelY}
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
textAnchor="middle"
|
textAnchor="middle"
|
||||||
className="text-[11px] font-semibold text-muted-foreground"
|
className="text-xs font-medium text-muted-foreground"
|
||||||
>
|
>
|
||||||
{amount}
|
{amount}
|
||||||
</text>
|
</text>
|
||||||
@@ -63,7 +63,7 @@ export function PayerHistoryCard({ data }: PagadorHistoryCardProps) {
|
|||||||
return (
|
return (
|
||||||
<Card className="border">
|
<Card className="border">
|
||||||
<CardHeader className="gap-1.5 pb-3">
|
<CardHeader className="gap-1.5 pb-3">
|
||||||
<CardTitle className="text-lg font-semibold">
|
<CardTitle className="text-lg font-medium">
|
||||||
Evolução (últimos 6 meses)
|
Evolução (últimos 6 meses)
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ export function PagadorInfoCard({ payer }: PayerInfoCardProps) {
|
|||||||
return (
|
return (
|
||||||
<Card className="border gap-4">
|
<Card className="border gap-4">
|
||||||
<CardHeader className="gap-1.5">
|
<CardHeader className="gap-1.5">
|
||||||
<CardTitle className="text-lg font-semibold">
|
<CardTitle className="text-lg font-medium">
|
||||||
Detalhes do pagador
|
Detalhes do pagador
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
@@ -79,7 +79,7 @@ export function PagadorInfoCard({ payer }: PayerInfoCardProps) {
|
|||||||
<InfoItem
|
<InfoItem
|
||||||
label="Aviso"
|
label="Aviso"
|
||||||
value={
|
value={
|
||||||
<span className="text-[13px] text-warning">
|
<span className="text-sm text-warning">
|
||||||
Cadastre um e-mail para permitir o envio automático.
|
Cadastre um e-mail para permitir o envio automático.
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
@@ -118,7 +118,7 @@ type InfoItemProps = {
|
|||||||
function InfoItem({ label, value, className }: InfoItemProps) {
|
function InfoItem({ label, value, className }: InfoItemProps) {
|
||||||
return (
|
return (
|
||||||
<div className={cn("space-y-1", className)}>
|
<div className={cn("space-y-1", className)}>
|
||||||
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground/80">
|
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground/80">
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
<div className="text-base text-foreground">{value}</div>
|
<div className="text-base text-foreground">{value}</div>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export function PayerLeaveShareCard({
|
|||||||
return (
|
return (
|
||||||
<Card className="border">
|
<Card className="border">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base font-semibold">
|
<CardTitle className="text-base font-medium">
|
||||||
Acesso Compartilhado
|
Acesso Compartilhado
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
@@ -63,7 +63,7 @@ export function PayerLeaveShareCard({
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
|
<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
|
||||||
<span className="text-xs font-semibold uppercase text-muted-foreground/80">
|
<span className="text-xs font-medium uppercase text-muted-foreground/80">
|
||||||
Informações do compartilhamento
|
Informações do compartilhamento
|
||||||
</span>
|
</span>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ export function PayerMonthlySummaryCard({
|
|||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="flex flex-col gap-1.5">
|
<CardHeader className="flex flex-col gap-1.5">
|
||||||
<CardTitle className="text-lg font-semibold">Totais do mês</CardTitle>
|
<CardTitle className="text-lg font-medium">Totais do mês</CardTitle>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
{periodLabel} - Despesas por forma de pagamento
|
{periodLabel} - Despesas por forma de pagamento
|
||||||
</p>
|
</p>
|
||||||
@@ -65,7 +65,7 @@ export function PayerMonthlySummaryCard({
|
|||||||
</span>
|
</span>
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={breakdown.totalExpenses}
|
amount={breakdown.totalExpenses}
|
||||||
className="block text-2xl font-semibold text-foreground"
|
className="block text-2xl font-medium text-foreground"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -100,7 +100,7 @@ export function PayerMonthlySummaryCard({
|
|||||||
totalBase > 0 ? Math.round((entry.value / totalBase) * 100) : 0;
|
totalBase > 0 ? Math.round((entry.value / totalBase) * 100) : 0;
|
||||||
return (
|
return (
|
||||||
<div key={entry.key} className="space-y-1 rounded-lg border p-3">
|
<div key={entry.key} className="space-y-1 rounded-lg border p-3">
|
||||||
<span className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70">
|
<span className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground/70">
|
||||||
<span
|
<span
|
||||||
className={cn("size-2 rounded-full", entry.color)}
|
className={cn("size-2 rounded-full", entry.color)}
|
||||||
aria-hidden
|
aria-hidden
|
||||||
@@ -109,7 +109,7 @@ export function PayerMonthlySummaryCard({
|
|||||||
</span>
|
</span>
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={entry.value}
|
amount={entry.value}
|
||||||
className="block text-lg font-semibold text-foreground"
|
className="block text-lg font-medium text-foreground"
|
||||||
/>
|
/>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{percent}% das despesas
|
{percent}% das despesas
|
||||||
|
|||||||
@@ -84,9 +84,7 @@ export function PayerSharingCard({
|
|||||||
return (
|
return (
|
||||||
<Card className="border">
|
<Card className="border">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg font-semibold">
|
<CardTitle className="text-lg font-medium">Compartilhamentos</CardTitle>
|
||||||
Compartilhamentos
|
|
||||||
</CardTitle>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Compartilhe o código abaixo com outra pessoa. Ela poderá adicioná-lo
|
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
|
na página de pagadores usando a opção Adicionar por código para ter
|
||||||
@@ -95,7 +93,7 @@ export function PayerSharingCard({
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
|
<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
|
||||||
<span className="text-xs font-semibold uppercase text-muted-foreground/80">
|
<span className="text-xs font-medium uppercase text-muted-foreground/80">
|
||||||
Código de compartilhamento
|
Código de compartilhamento
|
||||||
</span>
|
</span>
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export function PayerCard({ payer, onEdit, onRemove }: PayerCardProps) {
|
|||||||
|
|
||||||
{/* Nome e badges */}
|
{/* Nome e badges */}
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
<h3 className="text-base font-semibold text-foreground">
|
<h3 className="text-base font-medium text-foreground">
|
||||||
{payer.name}
|
{payer.name}
|
||||||
</h3>
|
</h3>
|
||||||
{isAdmin ? (
|
{isAdmin ? (
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ export function CardTopExpenses({ data }: CardTopExpensesProps) {
|
|||||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||||
{/* Rank number */}
|
{/* Rank number */}
|
||||||
<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
|
<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
|
||||||
<span className="text-sm font-semibold text-muted-foreground">
|
<span className="text-sm font-medium text-muted-foreground">
|
||||||
{index + 1}
|
{index + 1}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -67,11 +67,11 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
|||||||
<p className="text-xs text-muted-foreground">{card.title}</p>
|
<p className="text-xs text-muted-foreground">{card.title}</p>
|
||||||
{card.isMoney ? (
|
{card.isMoney ? (
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
className="text-2xl font-semibold"
|
className="text-2xl font-medium"
|
||||||
amount={card.value}
|
amount={card.value}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-2xl font-semibold">
|
<p className="text-2xl font-medium">
|
||||||
{formatPercentage(card.value, {
|
{formatPercentage(card.value, {
|
||||||
maximumFractionDigits: 0,
|
maximumFractionDigits: 0,
|
||||||
minimumFractionDigits: 0,
|
minimumFractionDigits: 0,
|
||||||
@@ -83,7 +83,7 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-base font-bold ml-2 py-2">Meus cartões</p>
|
<p className="text-base font-medium ml-2 py-2">Meus cartões</p>
|
||||||
|
|
||||||
{/* Cards list */}
|
{/* Cards list */}
|
||||||
<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
|
<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>
|
||||||
<div className="min-w-0 flex-1 space-y-1">
|
<div className="min-w-0 flex-1 space-y-1">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-base font-bold truncate">
|
<span className="text-base font-medium truncate">
|
||||||
{card.name}
|
{card.name}
|
||||||
</span>
|
</span>
|
||||||
{brandAsset && (
|
{brandAsset && (
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export function CategoryCell({
|
|||||||
<div className="font-medium">{formatCurrency(value)}</div>
|
<div className="font-medium">{formatCurrency(value)}</div>
|
||||||
{!isFirstMonth && absoluteChange !== null && (
|
{!isFirstMonth && absoluteChange !== null && (
|
||||||
<>
|
<>
|
||||||
<div className="font-bold">
|
<div className="font-medium">
|
||||||
Mês anterior: {formatCurrency(previousValue)}
|
Mês anterior: {formatCurrency(previousValue)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -67,11 +67,11 @@ function CategoryCard({ category, periods, periodCount }: CategoryCardProps) {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<div className="flex items-center justify-between font-semibold text-info">
|
<div className="flex items-center justify-between font-medium text-info">
|
||||||
<span>Média mensal</span>
|
<span>Média mensal</span>
|
||||||
<span>{formatCurrency(averageMonthlyTotal)}</span>
|
<span>{formatCurrency(averageMonthlyTotal)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between pt-2 font-semibold">
|
<div className="flex items-center justify-between pt-2 font-medium">
|
||||||
<span>Total</span>
|
<span>Total</span>
|
||||||
<span>{formatCurrency(category.total)}</span>
|
<span>{formatCurrency(category.total)}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -111,7 +111,7 @@ function Section({
|
|||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{formatCurrency(total)}
|
{formatCurrency(total)}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs font-semibold text-info">
|
<span className="text-xs font-medium text-info">
|
||||||
Média: {formatCurrency(averageMonthlyTotal)}
|
Média: {formatCurrency(averageMonthlyTotal)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ function AreaTooltip({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-w-[210px] rounded-lg border border-border/50 bg-background px-3 py-2.5 shadow-xl">
|
<div className="min-w-[210px] rounded-lg border border-border/50 bg-background px-3 py-2.5 shadow-xl">
|
||||||
<p className="mb-2.5 border-b border-border/50 pb-1.5 text-xs font-semibold text-foreground">
|
<p className="mb-2.5 border-b border-border/50 pb-1.5 text-xs font-medium text-foreground">
|
||||||
{label}
|
{label}
|
||||||
</p>
|
</p>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
@@ -73,7 +73,7 @@ function AreaTooltip({
|
|||||||
{entry.name}
|
{entry.name}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="shrink-0 text-xs font-semibold tabular-nums text-foreground">
|
<span className="shrink-0 text-xs font-medium tabular-nums text-foreground">
|
||||||
{currencyFormatter.format(Number(entry.value))}
|
{currencyFormatter.format(Number(entry.value))}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
import {
|
import {
|
||||||
RiDownloadLine,
|
RiDownloadLine,
|
||||||
RiFileExcelLine,
|
RiFileExcelLine,
|
||||||
RiFilePdfLine,
|
RiFilePdf2Line,
|
||||||
RiFileTextLine,
|
RiFileTextLine,
|
||||||
} from "@remixicon/react";
|
} from "@remixicon/react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@@ -388,7 +388,7 @@ export function CategoryReportExport({
|
|||||||
Exportar como Excel (.xlsx)
|
Exportar como Excel (.xlsx)
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem onClick={exportToPDF} disabled={isExporting}>
|
<DropdownMenuItem onClick={exportToPDF} disabled={isExporting}>
|
||||||
<RiFilePdfLine className="mr-2 h-4 w-4" aria-hidden="true" />
|
<RiFilePdf2Line className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||||
Exportar como PDF
|
Exportar como PDF
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|||||||
@@ -72,18 +72,18 @@ export function CategoryTable({
|
|||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead className="w-[240px] min-w-[240px] font-bold">
|
<TableHead className="w-[240px] min-w-[240px] font-medium">
|
||||||
Categoria
|
Categoria
|
||||||
</TableHead>
|
</TableHead>
|
||||||
{periods.map((period) => (
|
{periods.map((period) => (
|
||||||
<TableHead
|
<TableHead
|
||||||
key={period}
|
key={period}
|
||||||
className="text-right min-w-[120px] font-bold"
|
className="text-right min-w-[120px] font-medium"
|
||||||
>
|
>
|
||||||
{formatPeriodLabel(period)}
|
{formatPeriodLabel(period)}
|
||||||
</TableHead>
|
</TableHead>
|
||||||
))}
|
))}
|
||||||
<TableHead className="text-right min-w-[140px] font-bold">
|
<TableHead className="text-right min-w-[140px] font-medium">
|
||||||
<div className="flex items-center justify-end gap-1">
|
<div className="flex items-center justify-end gap-1">
|
||||||
Média
|
Média
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
@@ -100,7 +100,7 @@ export function CategoryTable({
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableHead className="text-right min-w-[120px] font-bold">
|
<TableHead className="text-right min-w-[120px] font-medium">
|
||||||
Total
|
Total
|
||||||
</TableHead>
|
</TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
@@ -149,7 +149,7 @@ export function CategoryTable({
|
|||||||
</TableCell>
|
</TableCell>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<TableCell className="text-right font-semibold text-info">
|
<TableCell className="text-right font-medium text-info">
|
||||||
{(() => {
|
{(() => {
|
||||||
const nonZeroCount = periods.filter(
|
const nonZeroCount = periods.filter(
|
||||||
(p) => (category.monthlyData.get(p)?.amount ?? 0) > 0,
|
(p) => (category.monthlyData.get(p)?.amount ?? 0) > 0,
|
||||||
@@ -159,7 +159,7 @@ export function CategoryTable({
|
|||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right font-semibold">
|
<TableCell className="text-right font-medium">
|
||||||
{formatCurrency(category.total)}
|
{formatCurrency(category.total)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
@@ -169,19 +169,19 @@ export function CategoryTable({
|
|||||||
|
|
||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell className="font-bold">Total</TableCell>
|
<TableCell className="font-medium">Total</TableCell>
|
||||||
{periods.map((period) => {
|
{periods.map((period) => {
|
||||||
const periodTotal = sectionTotals.totalsMap.get(period) ?? 0;
|
const periodTotal = sectionTotals.totalsMap.get(period) ?? 0;
|
||||||
return (
|
return (
|
||||||
<TableCell key={period} className="text-right font-semibold">
|
<TableCell key={period} className="text-right font-medium">
|
||||||
{formatCurrency(periodTotal)}
|
{formatCurrency(periodTotal)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<TableCell className="text-right font-semibold text-info">
|
<TableCell className="text-right font-medium text-info">
|
||||||
{formatCurrency(sectionTotals.averageMonthlyTotal)}
|
{formatCurrency(sectionTotals.averageMonthlyTotal)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right font-semibold">
|
<TableCell className="text-right font-medium">
|
||||||
{formatCurrency(sectionTotals.grandTotal)}
|
{formatCurrency(sectionTotals.grandTotal)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export function EstablishmentsList({
|
|||||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||||
{/* Rank number - same size as icon containers */}
|
{/* Rank number - same size as icon containers */}
|
||||||
<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
|
<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
|
||||||
<span className="text-sm font-semibold text-muted-foreground">
|
<span className="text-sm font-medium text-muted-foreground">
|
||||||
{index + 1}
|
{index + 1}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -18,8 +18,8 @@ export function HighlightsCards({ summary }: HighlightsCardsProps) {
|
|||||||
<RiTrophyLine className="size-5" />
|
<RiTrophyLine className="size-5" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<p className="text-xs font-bold">Mais Frequente</p>
|
<p className="text-xs font-medium">Mais Frequente</p>
|
||||||
<p className="font-bold text-2xl truncate">
|
<p className="font-medium text-2xl truncate">
|
||||||
{summary.mostFrequent || "—"}
|
{summary.mostFrequent || "—"}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,8 +34,8 @@ export function HighlightsCards({ summary }: HighlightsCardsProps) {
|
|||||||
<RiFireLine className="size-5" />
|
<RiFireLine className="size-5" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<p className="text-xs font-bold">Maior Gasto Total</p>
|
<p className="text-xs font-medium">Maior Gasto Total</p>
|
||||||
<p className="font-bold text-2xl truncate">
|
<p className="font-medium text-2xl truncate">
|
||||||
{summary.highestSpending || "—"}
|
{summary.highestSpending || "—"}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -58,11 +58,11 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
|
|||||||
</p>
|
</p>
|
||||||
{card.isMoney ? (
|
{card.isMoney ? (
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
className="text-2xl font-semibold"
|
className="text-2xl font-medium"
|
||||||
amount={card.value}
|
amount={card.value}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-2xl font-semibold">{card.value}</p>
|
<p className="text-2xl font-medium">{card.value}</p>
|
||||||
)}
|
)}
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
{card.description}
|
{card.description}
|
||||||
|
|||||||
@@ -272,7 +272,7 @@ export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-sm font-bold">{token.name}</span>
|
<span className="text-sm font-medium">{token.name}</span>
|
||||||
<Badge variant="outline" className="text-xs font-mono">
|
<Badge variant="outline" className="text-xs font-mono">
|
||||||
{token.tokenPrefix}...
|
{token.tokenPrefix}...
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export function ChangelogTab({ versions }: { versions: ChangelogVersion[] }) {
|
|||||||
{versions.map((version) => (
|
{versions.map((version) => (
|
||||||
<Card key={version.version} className="p-6">
|
<Card key={version.version} className="p-6">
|
||||||
<div className="flex items-baseline gap-3">
|
<div className="flex items-baseline gap-3">
|
||||||
<h3 className="text-lg font-bold">v{version.version}</h3>
|
<h3 className="text-lg font-medium">v{version.version}</h3>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{version.date}
|
{version.date}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export function DeleteAccountForm() {
|
|||||||
<div className="rounded-lg border p-4">
|
<div className="rounded-lg border p-4">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold">Zerar conta</h3>
|
<h3 className="font-medium">Zerar conta</h3>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Apaga todos os dados do OpenMonetis e deixa sua conta no estado
|
Apaga todos os dados do OpenMonetis e deixa sua conta no estado
|
||||||
inicial, mantendo seu login e credenciais de acesso.
|
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="rounded-lg border border-destructive/30 bg-destructive/5 p-4">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-destructive">Deletar conta</h3>
|
<h3 className="font-medium text-destructive">Deletar conta</h3>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Remove seu usuário e todos os dados associados de forma
|
Remove seu usuário e todos os dados associados de forma
|
||||||
permanente.
|
permanente.
|
||||||
@@ -131,7 +131,7 @@ export function DeleteAccountForm() {
|
|||||||
<li>Lançamentos, orçamentos e anotações</li>
|
<li>Lançamentos, orçamentos e anotações</li>
|
||||||
<li>Contas, cartões e categorias</li>
|
<li>Contas, cartões e categorias</li>
|
||||||
<li>Pagadores, credenciais e configurações</li>
|
<li>Pagadores, credenciais e configurações</li>
|
||||||
<li className="font-bold">
|
<li className="font-medium">
|
||||||
Resumindo tudo, sua conta será permanentemente removida
|
Resumindo tudo, sua conta será permanentemente removida
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -348,7 +348,7 @@ export function PasskeysForm() {
|
|||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-sm font-bold truncate">
|
<span className="text-sm font-medium truncate">
|
||||||
{pk.name || "Passkey sem nome"}
|
{pk.name || "Passkey sem nome"}
|
||||||
</span>
|
</span>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ export function PreferencesForm({
|
|||||||
{/* Seção: Lançamentos */}
|
{/* Seção: Lançamentos */}
|
||||||
<section className="space-y-4">
|
<section className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-base font-semibold">Lançamentos</h3>
|
<h3 className="text-base font-medium">Lançamentos</h3>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
Configurações de exibição da tabela de movimentações.
|
Configurações de exibição da tabela de movimentações.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -342,7 +342,7 @@ export function AnticipateInstallmentsDialog({
|
|||||||
{/* Seção 3: Resumo */}
|
{/* Seção 3: Resumo */}
|
||||||
{selectedIds.length > 0 && (
|
{selectedIds.length > 0 && (
|
||||||
<div className="rounded-lg border bg-muted/20 p-3">
|
<div className="rounded-lg border bg-muted/20 p-3">
|
||||||
<h4 className="text-sm font-semibold mb-2">Resumo</h4>
|
<h4 className="text-sm font-medium mb-2">Resumo</h4>
|
||||||
<dl className="space-y-1.5 text-sm">
|
<dl className="space-y-1.5 text-sm">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<dt className="text-muted-foreground">
|
<dt className="text-muted-foreground">
|
||||||
@@ -367,7 +367,7 @@ export function AnticipateInstallmentsDialog({
|
|||||||
)}
|
)}
|
||||||
<div className="flex items-center justify-between border-t pt-1.5">
|
<div className="flex items-center justify-between border-t pt-1.5">
|
||||||
<dt className="font-medium">Total</dt>
|
<dt className="font-medium">Total</dt>
|
||||||
<dd className="text-base font-semibold tabular-nums text-primary">
|
<dd className="text-base font-medium tabular-nums text-primary">
|
||||||
<MoneyValues amount={finalAmount} className="text-sm" />
|
<MoneyValues amount={finalAmount} className="text-sm" />
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export function InstallmentSelectionTable({
|
|||||||
<TableCell className="text-muted-foreground">
|
<TableCell className="text-muted-foreground">
|
||||||
{formatDate(inst.dueDate)}
|
{formatDate(inst.dueDate)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right font-semibold tabular-nums">
|
<TableCell className="text-right font-medium tabular-nums">
|
||||||
<MoneyValues amount={Number(inst.amount)} />
|
<MoneyValues amount={Number(inst.amount)} />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
@@ -134,7 +134,7 @@ export function InstallmentSelectionTable({
|
|||||||
? "parcela selecionada"
|
? "parcela selecionada"
|
||||||
: "parcelas selecionadas"}
|
: "parcelas selecionadas"}
|
||||||
</span>
|
</span>
|
||||||
<span className="font-semibold">
|
<span className="font-medium">
|
||||||
Total:{" "}
|
Total:{" "}
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={installments
|
amount={installments
|
||||||
|
|||||||
@@ -272,14 +272,14 @@ export function MassAddDialog({
|
|||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Configure os valores padrão e adicione várias transações de uma vez.
|
Configure os valores padrão e adicione várias transações de uma vez.
|
||||||
Todos os lançamentos adicionados aqui são{" "}
|
Todos os lançamentos adicionados aqui são{" "}
|
||||||
<span className="font-bold">sempre à vista</span>.
|
<span className="font-medium">sempre à vista</span>.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* Fixed Fields Section */}
|
{/* Fixed Fields Section */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-sm font-semibold">Valores Padrão</h3>
|
<h3 className="text-sm font-medium">Valores Padrão</h3>
|
||||||
<div className="grid gap-3 grid-cols-1 sm:grid-cols-3">
|
<div className="grid gap-3 grid-cols-1 sm:grid-cols-3">
|
||||||
{/* Transaction Type */}
|
{/* Transaction Type */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -452,7 +452,7 @@ export function MassAddDialog({
|
|||||||
|
|
||||||
{/* Transactions Section */}
|
{/* Transactions Section */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-sm font-semibold">Lançamentos</h3>
|
<h3 className="text-sm font-medium">Lançamentos</h3>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{transactions.map((transaction, index) => (
|
{transactions.map((transaction, index) => (
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ export function AnticipationCard({
|
|||||||
? "Valor Final"
|
? "Valor Final"
|
||||||
: "Valor Total"}
|
: "Valor Total"}
|
||||||
</dt>
|
</dt>
|
||||||
<dd className="mt-1 text-lg font-semibold tabular-nums text-primary">
|
<dd className="mt-1 text-lg font-medium tabular-nums text-primary">
|
||||||
<MoneyValues
|
<MoneyValues
|
||||||
amount={
|
amount={
|
||||||
Number(anticipation.totalAmount) < 0
|
Number(anticipation.totalAmount) < 0
|
||||||
|
|||||||
@@ -104,7 +104,7 @@ export function EstabelecimentoInput({
|
|||||||
className="cursor-pointer"
|
className="cursor-pointer"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={`truncate flex-1 ${value === item ? "font-semibold" : ""}`}
|
className={`truncate flex-1 ${value === item ? "font-medium" : ""}`}
|
||||||
>
|
>
|
||||||
{item}
|
{item}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -223,7 +223,7 @@ const buildColumns = ({
|
|||||||
<span className="flex items-center gap-1">
|
<span className="flex items-center gap-1">
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<span className="line-clamp-2 max-w-[180px] font-bold truncate">
|
<span className="line-clamp-2 max-w-[180px] font-medium truncate">
|
||||||
{name}
|
{name}
|
||||||
</span>
|
</span>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
import {
|
import {
|
||||||
RiDownloadLine,
|
RiDownloadLine,
|
||||||
RiFileExcelLine,
|
RiFileExcelLine,
|
||||||
RiFilePdfLine,
|
RiFilePdf2Line,
|
||||||
RiFileTextLine,
|
RiFileTextLine,
|
||||||
} from "@remixicon/react";
|
} from "@remixicon/react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@@ -363,7 +363,7 @@ export function TransactionsExport({
|
|||||||
Exportar como Excel (.xlsx)
|
Exportar como Excel (.xlsx)
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem onClick={exportToPDF} disabled={isExporting}>
|
<DropdownMenuItem onClick={exportToPDF} disabled={isExporting}>
|
||||||
<RiFilePdfLine className="mr-2 h-4 w-4" />
|
<RiFilePdf2Line className="mr-2 h-4 w-4" />
|
||||||
Exportar como PDF
|
Exportar como PDF
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export function CalculatorDisplay({
|
|||||||
<div className="mt-auto flex items-end justify-end gap-2">
|
<div className="mt-auto flex items-end justify-end gap-2">
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"truncate text-right font-semibold tracking-tight tabular-nums leading-none transition-all",
|
"truncate text-right font-medium tracking-tight tabular-nums leading-none transition-all",
|
||||||
isResultView ? "text-2xl" : "text-3xl",
|
isResultView ? "text-2xl" : "text-3xl",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export function CalculatorKeypad({
|
|||||||
variant={isActive ? "default" : (btn.variant ?? "outline")}
|
variant={isActive ? "default" : (btn.variant ?? "outline")}
|
||||||
onClick={btn.onClick}
|
onClick={btn.onClick}
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-12 text-base font-semibold",
|
"h-12 text-base font-medium",
|
||||||
btn.colSpan === 2 && "col-span-2",
|
btn.colSpan === 2 && "col-span-2",
|
||||||
btn.colSpan === 3 && "col-span-3",
|
btn.colSpan === 3 && "col-span-3",
|
||||||
isActive &&
|
isActive &&
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export function EstablishmentLogo({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex shrink-0 items-center justify-center rounded-full font-bold",
|
"flex shrink-0 items-center justify-center rounded-full font-medium",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export default function MonthNavigation() {
|
|||||||
|
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div
|
<div
|
||||||
className="mx-1 space-x-1 capitalize font-semibold"
|
className="mx-1 space-x-1 capitalize font-medium"
|
||||||
aria-current={!isDifferentFromCurrent ? "date" : undefined}
|
aria-current={!isDifferentFromCurrent ? "date" : undefined}
|
||||||
aria-label={`Período selecionado: ${currentMonthLabel}`}
|
aria-label={`Período selecionado: ${currentMonthLabel}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -96,7 +96,7 @@ export function FeedbackDialogBody({ onClose }: { onClose?: () => void }) {
|
|||||||
<Icon className={cn("h-5 w-5", item.color)} />
|
<Icon className={cn("h-5 w-5", item.color)} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 text-left space-y-1">
|
<div className="flex-1 text-left space-y-1">
|
||||||
<h3 className="font-semibold text-sm flex items-center gap-2">
|
<h3 className="font-medium text-sm flex items-center gap-2">
|
||||||
{item.title}
|
{item.title}
|
||||||
<RiExternalLinkLine className="h-3.5 w-3.5 text-muted-foreground" />
|
<RiExternalLinkLine className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
</h3>
|
</h3>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export function MobileLink({
|
|||||||
<span className="flex-1 flex flex-col gap-0.5">
|
<span className="flex-1 flex flex-col gap-0.5">
|
||||||
<span>{children}</span>
|
<span>{children}</span>
|
||||||
{description && (
|
{description && (
|
||||||
<span className="text-[11px] text-muted-foreground leading-snug">
|
<span className="text-xs text-muted-foreground leading-snug">
|
||||||
{description}
|
{description}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@@ -69,7 +69,7 @@ export function MobileLink({
|
|||||||
|
|
||||||
export function MobileSectionLabel({ label }: { label: string }) {
|
export function MobileSectionLabel({ label }: { label: string }) {
|
||||||
return (
|
return (
|
||||||
<p className="mt-3 mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
|
<p className="mt-3 mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||||
{label}
|
{label}
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -42,11 +42,7 @@ export function NavDropdown({ items }: NavDropdownProps) {
|
|||||||
{item.icon}
|
{item.icon}
|
||||||
</span>
|
</span>
|
||||||
<span className="flex flex-col min-w-0">
|
<span className="flex flex-col min-w-0">
|
||||||
<span
|
<span className="font-medium">{item.label}</span>
|
||||||
className={cn("font-medium", isActive && "font-semibold")}
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</span>
|
|
||||||
{item.description && (
|
{item.description && (
|
||||||
<span className="text-xs text-muted-foreground truncate lowercase">
|
<span className="text-xs text-muted-foreground truncate lowercase">
|
||||||
{item.description}
|
{item.description}
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
|
|||||||
{privacyMode && (
|
{privacyMode && (
|
||||||
<Badge
|
<Badge
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
className="text-[10px] px-1.5 py-0 h-4 text-success"
|
className="text-xs px-1.5 py-0 h-4 text-success"
|
||||||
>
|
>
|
||||||
Ativo
|
Ativo
|
||||||
</Badge>
|
</Badge>
|
||||||
@@ -100,7 +100,7 @@ export function MobileTools({ onClose, onOpenCalculator }: MobileToolsProps) {
|
|||||||
{privacyMode && (
|
{privacyMode && (
|
||||||
<Badge
|
<Badge
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
className="text-[10px] px-1.5 py-0 h-4 text-success"
|
className="text-xs px-1.5 py-0 h-4 text-success"
|
||||||
>
|
>
|
||||||
Ativo
|
Ativo
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ function SectionLabel({
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1.5 p-2 first:pt-1">
|
<div className="flex items-center gap-1.5 p-2 first:pt-1">
|
||||||
<span className="text-muted-foreground">{icon}</span>
|
<span className="text-muted-foreground">{icon}</span>
|
||||||
<span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
|
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||||
{title}
|
{title}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ export function NotificationBellHeader({
|
|||||||
}: NotificationBellHeaderProps) {
|
}: NotificationBellHeaderProps) {
|
||||||
return (
|
return (
|
||||||
<div className="border-b px-3 py-2.5">
|
<div className="border-b px-3 py-2.5">
|
||||||
<div className="flex items-center justify-between gap-2 text-sm font-semibold">
|
<div className="flex items-center justify-between gap-2 text-sm font-medium">
|
||||||
<span>Notificações</span>
|
<span>Notificações</span>
|
||||||
{hasAnySourceItems ? (
|
{hasAnySourceItems ? (
|
||||||
<Badge variant="outline" className="text-xs font-medium">
|
<Badge variant="outline" className="text-xs font-medium">
|
||||||
|
|||||||
@@ -9,11 +9,11 @@ export default function PageDescription({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-semibold flex items-center gap-1 tracking-tighter">
|
<h1 className="text-xl font-medium flex items-center gap-1 tracking-tight">
|
||||||
<span className="text-primary">{icon}</span>
|
<span className="text-primary">{icon}</span>
|
||||||
{title}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="text-sm max-w-2xl text-muted-foreground leading-relaxed mt-2">
|
<h2 className="text-sm max-w-2xl text-muted-foreground leading-relaxed mt-1.5">
|
||||||
{subtitle}
|
{subtitle}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ export function PaymentSuccess({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<DialogTitle className="text-xl font-bold">{title}</DialogTitle>
|
<DialogTitle className="text-xl font-medium">{title}</DialogTitle>
|
||||||
<DialogDescription className="text-sm leading-relaxed">
|
<DialogDescription className="text-sm leading-relaxed">
|
||||||
{description}
|
{description}
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
|
|||||||
@@ -172,7 +172,7 @@ function CategoryReportTableSkeleton() {
|
|||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
{/* Total label */}
|
{/* Total label */}
|
||||||
<TableCell className="font-bold">
|
<TableCell className="font-medium">
|
||||||
<Skeleton className="h-5 w-16 rounded-md bg-foreground/10" />
|
<Skeleton className="h-5 w-16 rounded-md bg-foreground/10" />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
{/* Period totals */}
|
{/* Period totals */}
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ function AlertDialogTitle({
|
|||||||
return (
|
return (
|
||||||
<AlertDialogPrimitive.Title
|
<AlertDialogPrimitive.Title
|
||||||
data-slot="alert-dialog-title"
|
data-slot="alert-dialog-title"
|
||||||
className={cn("text-lg font-semibold", className)}
|
className={cn("text-lg font-medium", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|||||||
<div
|
<div
|
||||||
data-slot="card"
|
data-slot="card"
|
||||||
className={cn(
|
className={cn(
|
||||||
"bg-card text-card-foreground flex flex-col gap-4 border py-6 rounded-lg",
|
"bg-card text-card-foreground flex flex-col gap-4 border py-6 rounded-lg hover:border-primary/40",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="card-title"
|
data-slot="card-title"
|
||||||
className={cn("leading-none font-semibold", className)}
|
className={cn("text-base leading-none font-medium", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ function DialogTitle({
|
|||||||
return (
|
return (
|
||||||
<DialogPrimitive.Title
|
<DialogPrimitive.Title
|
||||||
data-slot="dialog-title"
|
data-slot="dialog-title"
|
||||||
className={cn("text-lg leading-none font-semibold", className)}
|
className={cn("text-lg leading-none font-medium", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ function DrawerTitle({
|
|||||||
return (
|
return (
|
||||||
<DrawerPrimitive.Title
|
<DrawerPrimitive.Title
|
||||||
data-slot="drawer-title"
|
data-slot="drawer-title"
|
||||||
className={cn("text-foreground font-semibold", className)}
|
className={cn("text-foreground font-medium", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -123,7 +123,7 @@ function MonthCal({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex justify-center pt-1 relative items-center">
|
<div className="flex justify-center pt-1 relative items-center">
|
||||||
<div className="text-sm font-bold">
|
<div className="text-sm font-medium">
|
||||||
{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}
|
{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-x-1 flex items-center">
|
<div className="space-x-1 flex items-center">
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ function SheetTitle({
|
|||||||
return (
|
return (
|
||||||
<SheetPrimitive.Title
|
<SheetPrimitive.Title
|
||||||
data-slot="sheet-title"
|
data-slot="sheet-title"
|
||||||
className={cn("text-foreground font-semibold", className)}
|
className={cn("text-foreground font-medium", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ function TabsTrigger({
|
|||||||
<TabsPrimitive.Trigger
|
<TabsPrimitive.Trigger
|
||||||
data-slot="tabs-trigger"
|
data-slot="tabs-trigger"
|
||||||
className={cn(
|
className={cn(
|
||||||
"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative inline-flex h-9 items-center justify-center rounded-none border-b-2 border-b-transparent bg-transparent px-4 py-1 pt-2 pb-3 text-sm font-semibold whitespace-nowrap shadow-none transition-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-none",
|
"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative inline-flex h-9 items-center justify-center rounded-none border-b-2 border-b-transparent bg-transparent px-4 py-1 pt-2 pb-3 text-sm font-medium whitespace-nowrap shadow-none transition-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-none",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
Reference in New Issue
Block a user