refactor: update icons and improve layout structure across components

This commit is contained in:
Felipe Coutinho
2025-11-17 11:29:06 -03:00
parent cdf79600e9
commit 3ca495384c
12 changed files with 107 additions and 110 deletions

View File

@@ -1,5 +1,5 @@
import PageDescription from "@/components/page-description";
import { RiFileListLine } from "@remixicon/react";
import { RiTodoLine } from "@remixicon/react";
export const metadata = {
title: "Anotações | OpenSheets",
@@ -13,7 +13,7 @@ export default function RootLayout({
return (
<section className="space-y-6 px-6">
<PageDescription
icon={<RiFileListLine />}
icon={<RiTodoLine />}
title="Notas"
subtitle="Gerencie suas anotações e mantenha o controle sobre suas ideias e tarefas."
/>

View File

@@ -18,8 +18,7 @@ export type AccountData = {
};
export async function fetchAccountsForUser(
userId: string,
currentPeriod: string
userId: string
): Promise<{ accounts: AccountData[]; logoOptions: LogoOption[] }> {
const [accountRows, logoOptions] = await Promise.all([
db
@@ -50,14 +49,10 @@ export async function fetchAccountsForUser(
and(
eq(lancamentos.contaId, contas.id),
eq(lancamentos.userId, userId),
eq(lancamentos.period, currentPeriod),
eq(lancamentos.isSettled, true)
)
)
.leftJoin(
pagadores,
eq(lancamentos.pagadorId, pagadores.id)
)
.leftJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
.where(
and(
eq(contas.userId, userId),

View File

@@ -5,14 +5,8 @@ import { fetchAccountsForUser } from "./data";
export default async function Page() {
const userId = await getUserId();
const now = new Date();
const currentPeriod = `${now.getFullYear()}-${String(
now.getMonth() + 1
).padStart(2, "0")}`;
const { accounts, logoOptions } = await fetchAccountsForUser(
userId,
currentPeriod
);
const { accounts, logoOptions } = await fetchAccountsForUser(userId);
return (
<main className="flex flex-col items-start gap-6">

View File

@@ -0,0 +1,23 @@
import PageDescription from "@/components/page-description";
import { RiSecurePaymentLine } from "@remixicon/react";
export const metadata = {
title: "Análise de Parcelas | OpenSheets",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section className="space-y-6 px-6">
<PageDescription
icon={<RiSecurePaymentLine />}
title="Análise de Parcelas"
subtitle="Quanto você gastaria pagando suas despesas parceladas à vista?"
/>
{children}
</section>
);
}

View File

@@ -1,13 +1,13 @@
import { InstallmentAnalysisPage } from "@/components/dashboard/installment-analysis/installment-analysis-page";
import { fetchInstallmentAnalysis } from "@/lib/dashboard/expenses/installment-analysis";
import { getUser } from "@/lib/auth/server";
import { fetchInstallmentAnalysis } from "@/lib/dashboard/expenses/installment-analysis";
export default async function Page() {
const user = await getUser();
const data = await fetchInstallmentAnalysis(user.id);
return (
<main className="flex flex-col gap-4 px-4 pb-8">
<main className="flex flex-col gap-4 pb-8">
<InstallmentAnalysisPage data={data} />
</main>
);

View File

@@ -2,8 +2,8 @@ import { DashboardGrid } from "@/components/dashboard/dashboard-grid";
import { DashboardWelcome } from "@/components/dashboard/dashboard-welcome";
import { SectionCards } from "@/components/dashboard/section-cards";
import MonthPicker from "@/components/month-picker/month-picker";
import { fetchDashboardData } from "@/lib/dashboard/fetch-dashboard-data";
import { getUser } from "@/lib/auth/server";
import { fetchDashboardData } from "@/lib/dashboard/fetch-dashboard-data";
import { parsePeriodParam } from "@/lib/utils/period";
type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
@@ -30,7 +30,7 @@ export default async function Page({ searchParams }: PageProps) {
const data = await fetchDashboardData(user.id, selectedPeriod);
return (
<main className="flex flex-col gap-4 px-4">
<main className="flex flex-col gap-4 px-6">
<DashboardWelcome name={user.name} />
<MonthPicker />
<SectionCards metrics={data.metrics} />

View File

@@ -1,11 +1,11 @@
import { SiteHeader } from "@/components/header-dashboard";
import { AppSidebar } from "@/components/sidebar/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { fetchDashboardNotifications } from "@/lib/dashboard/notifications";
import { getUserSession } from "@/lib/auth/server";
import { parsePeriodParam } from "@/lib/utils/period";
import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
import { fetchDashboardNotifications } from "@/lib/dashboard/notifications";
import { fetchPagadoresWithAccess } from "@/lib/pagadores/access";
import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
import { parsePeriodParam } from "@/lib/utils/period";
export default async function layout({
children,

View File

@@ -4,7 +4,7 @@ import { deleteNoteAction } from "@/app/(dashboard)/anotacoes/actions";
import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
import { EmptyState } from "@/components/empty-state";
import { Button } from "@/components/ui/button";
import { RiAddCircleLine, RiFileListLine } from "@remixicon/react";
import { RiAddCircleLine, RiTodoLine } from "@remixicon/react";
import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
import { Card } from "../ui/card";
@@ -117,7 +117,7 @@ export function NotesPage({ notes }: NotesPageProps) {
{sortedNotes.length === 0 ? (
<Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
<EmptyState
media={<RiFileListLine className="size-6 text-primary" />}
media={<RiTodoLine className="size-6 text-primary" />}
title="Nenhuma anotação registrada"
description="Crie anotações personalizadas para acompanhar lembretes, decisões ou observações financeiras importantes."
/>

View File

@@ -101,41 +101,15 @@ export function AccountStatementCard({
</CardHeader>
<CardContent className="space-y-4 border-t border-border/60 border-dashed pt-4">
{/* Destaque Principal */}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
{/* Composição do Saldo */}
<div className="space-y-3">
<DetailItem
label="Saldo atual"
value={<MoneyValues amount={currentBalance} className="text-2xl" />}
tooltip="Saldo inicial do período + entradas - saídas realizadas neste mês."
/>
<DetailItem
label="Status da conta"
value={
<div className="flex items-center">
<Badge
variant={getAccountStatusBadgeVariant(status)}
className="text-xs"
>
{status}
</Badge>
</div>
}
tooltip="Indica se a conta está ativa para lançamentos ou foi desativada."
/>
</div>
{/* Movimentação do Período */}
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
<DetailItem
label="Saldo inicial"
value={
<MoneyValues
amount={openingBalance}
className="font-medium text-foreground"
/>
}
label="Saldo no início do período"
value={<MoneyValues amount={openingBalance} className="text-2xl" />}
tooltip="Saldo inicial cadastrado na conta somado aos lançamentos pagos anteriores a este mês."
/>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
<DetailItem
label="Entradas"
value={
@@ -154,13 +128,14 @@ export function AccountStatementCard({
}
tooltip="Total de despesas pagas neste mês (considerando divisão entre pagadores)."
/>
<DetailItem
label="Resultado"
label="Resultado do período"
value={
<MoneyValues
amount={totalIncomes - totalExpenses}
className={cn(
"font-semibold",
"font-semibold text-xl",
totalIncomes - totalExpenses >= 0
? "text-emerald-600"
: "text-destructive"
@@ -171,13 +146,36 @@ export function AccountStatementCard({
/>
</div>
{/* Saldo Atual - Destaque Principal */}
<DetailItem
label="Saldo ao final do período"
value={<MoneyValues amount={currentBalance} className="text-2xl" />}
tooltip="Saldo inicial do período + entradas - saídas realizadas neste mês."
/>
</div>
{/* Informações da Conta */}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 pt-2 border-t border-border/60 border-dashed">
<DetailItem
label="Tipo da conta"
value={accountType}
tooltip="Classificação definida na criação da conta (corrente, poupança, etc.)."
className="sm:w-1/2"
/>
<DetailItem
label="Status da conta"
value={
<div className="flex items-center">
<Badge
variant={getAccountStatusBadgeVariant(status)}
className="text-xs"
>
{status}
</Badge>
</div>
}
tooltip="Indica se a conta está ativa para lançamentos ou foi desativada."
/>
</div>
</CardContent>
</Card>
);

View File

@@ -3,14 +3,14 @@
import MoneyValues from "@/components/money-values";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { useMemo, useState } from "react";
import type { InstallmentAnalysisData } from "./types";
import { InstallmentGroupCard } from "./installment-group-card";
import {
RiCalculatorLine,
RiCheckboxBlankLine,
RiCheckboxLine,
} from "@remixicon/react";
import { useMemo, useState } from "react";
import { InstallmentGroupCard } from "./installment-group-card";
import type { InstallmentAnalysisData } from "./types";
type InstallmentAnalysisPageProps = {
data: InstallmentAnalysisData;
@@ -128,30 +128,17 @@ export function InstallmentAnalysisPage({
return (
<div className="flex flex-col gap-4">
{/* Header */}
<div className="flex items-center gap-3">
<div className="flex size-9 items-center justify-center rounded-lg bg-primary/10">
<RiCalculatorLine className="size-4 text-primary" />
</div>
<div>
<h1 className="text-xl font-bold">Análise de Parcelas</h1>
<p className="text-xs text-muted-foreground">
Quanto você gastaria pagando tudo que está em aberto
</p>
</div>
</div>
{/* Card de resumo principal */}
<Card className="border-primary/20 bg-linear-to-br from-primary/5 to-primary/10">
<CardContent className="flex flex-col items-start justify-center gap-2 py-5">
<p className="text-xs font-medium text-muted-foreground">
<Card className="border-primary/20 bg-primary/5">
<CardContent className="flex flex-col items-start justify-center gap-2 py-2">
<p className="text-sm font-medium text-muted-foreground">
Se você pagar tudo que está selecionado:
</p>
<MoneyValues
amount={grandTotal}
className="text-3xl font-bold text-primary"
/>
<p className="text-xs text-muted-foreground">
<p className="text-sm text-muted-foreground">
{selectedCount} {selectedCount === 1 ? "parcela" : "parcelas"}{" "}
selecionadas
</p>

View File

@@ -4,12 +4,12 @@ import {
RiBankLine,
RiCalendarEventLine,
RiDashboardLine,
RiFileListLine,
RiFundsLine,
RiGroupLine,
RiPriceTag3Line,
RiSettingsLine,
RiSparklingLine,
RiTodoLine,
type RemixiconComponentType,
} from "@remixicon/react";
@@ -129,7 +129,7 @@ export function createSidebarNavData(pagadores: PagadorLike[]): SidebarNavData {
{
title: "Anotações",
url: "/anotacoes",
icon: RiFileListLine,
icon: RiTodoLine,
},
{
title: "Insights",

View File

@@ -13,24 +13,24 @@ import { RecentTransactionsWidget } from "@/components/dashboard/recent-transact
import { RecurringExpensesWidget } from "@/components/dashboard/recurring-expenses-widget";
import { TopEstablishmentsWidget } from "@/components/dashboard/top-establishments-widget";
import { TopExpensesWidget } from "@/components/dashboard/top-expenses-widget";
import Link from "next/link";
import {
RiArrowUpDoubleLine,
RiBarChartBoxLine,
RiBarcodeLine,
RiBillLine,
RiCalculatorLine,
RiExchangeLine,
RiLineChartLine,
RiMoneyDollarCircleLine,
RiNumbersLine,
RiPieChartLine,
RiRefreshLine,
RiSecurePaymentLine,
RiSlideshowLine,
RiStore2Line,
RiStore3Line,
RiWallet3Line,
} from "@remixicon/react";
import Link from "next/link";
import type { ReactNode } from "react";
import type { DashboardData } from "./fetch-dashboard-data";
@@ -142,7 +142,7 @@ export const widgetsConfig: WidgetConfig[] = [
href="/dashboard/analise-parcelas"
className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
>
<RiCalculatorLine className="inline mr-1 size-4" />
<RiSecurePaymentLine className="inline mr-1 size-4" />
Análise
</Link>
),