refactor: update icons and improve layout structure across components

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 */}
-        <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"
+            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">
-        <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>

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