refactor: update icons and improve layout structure across components

app/(dashboard)/anotacoes/layout.tsx

@@ -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."
       />

app/(dashboard)/contas/data.ts

@@ -18,8 +18,7 @@ export type AccountData = {
 };
 
 export async function fetchAccountsForUser(
-  userId: string,
+  userId: string
-  currentPeriod: 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(
+      .leftJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
-        pagadores,
-        eq(lancamentos.pagadorId, pagadores.id)
-      )
       .where(
         and(
           eq(contas.userId, userId),

app/(dashboard)/contas/page.tsx

@@ -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(
+  const { accounts, logoOptions } = await fetchAccountsForUser(userId);
-    userId,
-    currentPeriod
-  );
 
   return (
     <main className="flex flex-col items-start gap-6">

app/(dashboard)/dashboard/analise-parcelas/layout.tsx

@@ -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>
+  );
+}

app/(dashboard)/dashboard/analise-parcelas/page.tsx

@@ -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>
   );

app/(dashboard)/dashboard/page.tsx

@@ -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} />

app/(dashboard)/layout.tsx

@@ -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 { fetchDashboardNotifications } from "@/lib/dashboard/notifications";
-import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
 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,
@@ -29,8 +29,8 @@ export default async function layout({
     typeof periodoParam === "string"
       ? periodoParam
       : Array.isArray(periodoParam)
-        ? periodoParam[0]
+      ? periodoParam[0]
-        : null;
+      : null;
   const { period: currentPeriod } = parsePeriodParam(
     singlePeriodoParam ?? null
   );

components/anotacoes/notes-page.tsx

@@ -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."
             />

components/contas/account-statement-card.tsx

@@ -101,13 +101,66 @@ export function AccountStatementCard({
       </CardHeader>
 
       <CardContent className="space-y-4 border-t border-border/60 border-dashed pt-4">
-        {/* Destaque Principal */}
+        {/* Composição do Saldo */}
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <div className="space-y-3">
           <DetailItem
-            label="Saldo atual"
+            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={
+                <span className="font-medium text-emerald-600">
+                  {formatCurrency(totalIncomes)}
+                </span>
+              }
+              tooltip="Total de receitas deste mês classificadas como pagas para esta conta."
+            />
+            <DetailItem
+              label="Saídas"
+              value={
+                <span className="font-medium text-destructive">
+                  {formatCurrency(totalExpenses)}
+                </span>
+              }
+              tooltip="Total de despesas pagas neste mês (considerando divisão entre pagadores)."
+            />
+
+            <DetailItem
+              label="Resultado do período"
+              value={
+                <MoneyValues
+                  amount={totalIncomes - totalExpenses}
+                  className={cn(
+                    "font-semibold text-xl",
+                    totalIncomes - totalExpenses >= 0
+                      ? "text-emerald-600"
+                      : "text-destructive"
+                  )}
+                />
+              }
+              tooltip="Diferença entre entradas e saídas do mês; positivo indica saldo crescente."
+            />
+          </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.)."
+          />
           <DetailItem
             label="Status da conta"
             value={
@@ -123,61 +176,6 @@ export function AccountStatementCard({
             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"
-              />
-            }
-            tooltip="Saldo inicial cadastrado na conta somado aos lançamentos pagos anteriores a este mês."
-          />
-          <DetailItem
-            label="Entradas"
-            value={
-              <span className="font-medium text-emerald-600">
-                {formatCurrency(totalIncomes)}
-              </span>
-            }
-            tooltip="Total de receitas deste mês classificadas como pagas para esta conta."
-          />
-          <DetailItem
-            label="Saídas"
-            value={
-              <span className="font-medium text-destructive">
-                {formatCurrency(totalExpenses)}
-              </span>
-            }
-            tooltip="Total de despesas pagas neste mês (considerando divisão entre pagadores)."
-          />
-          <DetailItem
-            label="Resultado"
-            value={
-              <MoneyValues
-                amount={totalIncomes - totalExpenses}
-                className={cn(
-                  "font-semibold",
-                  totalIncomes - totalExpenses >= 0
-                    ? "text-emerald-600"
-                    : "text-destructive"
-                )}
-              />
-            }
-            tooltip="Diferença entre entradas e saídas do mês; positivo indica saldo crescente."
-          />
-        </div>
-
-        {/* Informações da Conta */}
-        <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"
-        />
       </CardContent>
     </Card>
   );

components/dashboard/installment-analysis/installment-analysis-page.tsx

@@ -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">
+      <Card className="border-primary/20 bg-primary/5">
-        <CardContent className="flex flex-col items-start justify-center gap-2 py-5">
+        <CardContent className="flex flex-col items-start justify-center gap-2 py-2">
-          <p className="text-xs font-medium text-muted-foreground">
+          <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>

components/sidebar/nav-link.tsx

@@ -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",

lib/dashboard/widgets/widgets-config.tsx

@@ -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>
     ),