feat: implementar sistema de preferências do usuário e refatorar changelog

Adiciona sistema completo de preferências de usuário:
  - Cria tabela userPreferences no schema com campos disableMagnetlines, periodMonthsBefore e periodMonthsAfter
  - Implementa página de Ajustes com abas (Preferências, Alterar nome, Senha, E-mail, Deletar conta)
  - Adiciona componente PreferencesForm para configuração de magnetlines e períodos de exibição
  - Propaga periodPreferences para todos os componentes de lançamentos e calendário

  Refatora sistema de changelog:
  - Remove implementação anterior baseada em JSON estático
  - Adiciona nova página de changelog dinâmica em app/(dashboard)/changelog
  - Adiciona componente changelog-list.tsx
  - Remove arquivos obsoletos (changelog-notification, actions, data, utils, scripts)

  Adiciona controle de saldo inicial em contas:
  - Novo campo excludeInitialBalanceFromIncome em contas
  - Permite excluir saldo inicial do cálculo de receitas
  - Atualiza queries de lançamentos para respeitar esta configuração

  Melhorias adicionais:
  - Adiciona componente ui/accordion.tsx do shadcn/ui
  - Refatora formatPeriodLabel para displayPeriod centralizado
  - Propaga estabelecimentos para componentes de lançamentos
  - Remove variável DB_PROVIDER obsoleta do .env.example e documentação
  - Adiciona 6 migrações de banco de dados (0003-0008)

components/ajustes/delete-account-form.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { deleteAccountAction } from "@/app/(dashboard)/ajustes/actions";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,7 +12,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { authClient } from "@/lib/auth/client";
-import { RiAlertLine } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
@@ -54,34 +52,29 @@ export function DeleteAccountForm() {
 
   return (
     <>
-      <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 space-y-4">
-        <div className="flex items-start gap-3">
-          <RiAlertLine className="size-5 text-destructive mt-0.5" />
-          <div className="flex-1 space-y-1">
-            <h3 className="font-medium text-destructive">
-              Remoção definitiva de conta
-            </h3>
-            <p className="text-sm text-foreground">
-              Ao prosseguir, sua conta e todos os dados associados serão
-              excluídos de forma irreversível.
-            </p>
-          </div>
+      <div className="flex flex-col space-y-6">
+        <div className="space-y-4 max-w-md">
+          <ul className="list-disc list-inside text-sm text-destructive space-y-1">
+            <li>Lançamentos, orçamentos e anotações</li>
+            <li>Contas, cartões e categorias</li>
+            <li>Pagadores (incluindo o pagador padrão)</li>
+            <li>Preferências e configurações</li>
+            <li className="font-bold">
+              Resumindo tudo, sua conta será permanentemente removida
+            </li>
+          </ul>
         </div>
 
-        <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1 pl-8">
-          <li>Lançamentos, anexos e notas</li>
-          <li>Contas, cartões, orçamentos e categorias</li>
-          <li>Pagadores (incluindo o pagador padrão)</li>
-          <li>Preferências e configurações</li>
-        </ul>
-
-        <Button
-          variant="destructive"
-          onClick={handleOpenModal}
-          disabled={isPending}
-        >
-          Deletar conta
-        </Button>
+        <div className="flex justify-end">
+          <Button
+            variant="destructive"
+            onClick={handleOpenModal}
+            disabled={isPending}
+            className="w-fit"
+          >
+            Deletar conta
+          </Button>
+        </div>
       </div>
 
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>

components/ajustes/preferences-form.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { updatePreferencesAction } from "@/app/(dashboard)/ajustes/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+interface PreferencesFormProps {
+  disableMagnetlines: boolean;
+  periodMonthsBefore: number;
+  periodMonthsAfter: number;
+}
+
+export function PreferencesForm({
+  disableMagnetlines,
+  periodMonthsBefore,
+  periodMonthsAfter,
+}: PreferencesFormProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [magnetlinesDisabled, setMagnetlinesDisabled] =
+    useState(disableMagnetlines);
+  const [monthsBefore, setMonthsBefore] = useState(periodMonthsBefore);
+  const [monthsAfter, setMonthsAfter] = useState(periodMonthsAfter);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    startTransition(async () => {
+      const result = await updatePreferencesAction({
+        disableMagnetlines: magnetlinesDisabled,
+        periodMonthsBefore: monthsBefore,
+        periodMonthsAfter: monthsAfter,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        // Recarregar a página para aplicar as mudanças nos componentes
+        router.refresh();
+        // Forçar reload completo para garantir que os hooks re-executem
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        toast.error(result.error);
+      }
+    });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col space-y-6"
+    >
+      <div className="space-y-4 max-w-md">
+        <div className="flex items-center justify-between rounded-lg border border-dashed p-4">
+          <div className="space-y-0.5">
+            <Label htmlFor="magnetlines" className="text-base">
+              Desabilitar Magnetlines
+            </Label>
+            <p className="text-sm text-muted-foreground">
+              Remove o recurso de linhas magnéticas do sistema. Essa mudança
+              afeta a interface e interações visuais.
+            </p>
+          </div>
+          <Switch
+            id="magnetlines"
+            checked={magnetlinesDisabled}
+            onCheckedChange={setMagnetlinesDisabled}
+            disabled={isPending}
+          />
+        </div>
+
+        <div className="space-y-4 rounded-lg border border-dashed p-4">
+          <div>
+            <h3 className="text-base font-medium mb-2">
+              Seleção de Período
+            </h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              Configure quantos meses antes e depois do mês atual serão exibidos
+              nos seletores de período.
+            </p>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="monthsBefore" className="text-sm">
+                Meses anteriores
+              </Label>
+              <Input
+                id="monthsBefore"
+                type="number"
+                min={1}
+                max={24}
+                value={monthsBefore}
+                onChange={(e) => setMonthsBefore(Number(e.target.value))}
+                disabled={isPending}
+                className="w-full"
+              />
+              <p className="text-xs text-muted-foreground">
+                1 a 24 meses
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="monthsAfter" className="text-sm">
+                Meses posteriores
+              </Label>
+              <Input
+                id="monthsAfter"
+                type="number"
+                min={1}
+                max={24}
+                value={monthsAfter}
+                onChange={(e) => setMonthsAfter(Number(e.target.value))}
+                disabled={isPending}
+                className="w-full"
+              />
+              <p className="text-xs text-muted-foreground">
+                1 a 24 meses
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <Button type="submit" disabled={isPending} className="w-fit">
+          {isPending ? "Salvando..." : "Salvar preferências"}
+        </Button>
+      </div>
+    </form>
+  );
+}

components/ajustes/update-email-form.tsx

@@ -68,148 +68,153 @@ export function UpdateEmailForm({ currentEmail, authProvider }: UpdateEmailFormP
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      {/* E-mail atual (apenas informativo) */}
-      <div className="space-y-2">
-        <Label htmlFor="currentEmail">E-mail atual</Label>
-        <Input
-          id="currentEmail"
-          type="email"
-          value={currentEmail}
-          disabled
-          className="bg-muted cursor-not-allowed"
-          aria-describedby="current-email-help"
-        />
-        <p id="current-email-help" className="text-xs text-muted-foreground">
-          Este é seu e-mail atual cadastrado
-        </p>
-      </div>
-
-      {/* Senha de confirmação (apenas para usuários com login por e-mail/senha) */}
-      {!isGoogleAuth && (
+    <form onSubmit={handleSubmit} className="flex flex-col space-y-6">
+      <div className="space-y-4 max-w-md">
+        {/* E-mail atual (apenas informativo) */}
         <div className="space-y-2">
-          <Label htmlFor="password">
-            Senha atual <span className="text-destructive">*</span>
+          <Label htmlFor="currentEmail">E-mail atual</Label>
+          <Input
+            id="currentEmail"
+            type="email"
+            value={currentEmail}
+            disabled
+            className="bg-muted cursor-not-allowed"
+            aria-describedby="current-email-help"
+          />
+          <p id="current-email-help" className="text-xs text-muted-foreground">
+            Este é seu e-mail atual cadastrado
+          </p>
+        </div>
+
+        {/* Senha de confirmação (apenas para usuários com login por e-mail/senha) */}
+        {!isGoogleAuth && (
+          <div className="space-y-2">
+            <Label htmlFor="password">
+              Senha atual <span className="text-destructive">*</span>
+            </Label>
+            <div className="relative">
+              <Input
+                id="password"
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={isPending}
+                placeholder="Digite sua senha para confirmar"
+                required
+                aria-required="true"
+                aria-describedby="password-help"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
+              >
+                {showPassword ? (
+                  <RiEyeOffLine size={20} />
+                ) : (
+                  <RiEyeLine size={20} />
+                )}
+              </button>
+            </div>
+            <p id="password-help" className="text-xs text-muted-foreground">
+              Por segurança, confirme sua senha antes de alterar seu e-mail
+            </p>
+          </div>
+        )}
+
+        {/* Novo e-mail */}
+        <div className="space-y-2">
+          <Label htmlFor="newEmail">
+            Novo e-mail <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="newEmail"
+            type="email"
+            value={newEmail}
+            onChange={(e) => setNewEmail(e.target.value)}
+            disabled={isPending}
+            placeholder="Digite o novo e-mail"
+            required
+            aria-required="true"
+            aria-describedby="new-email-help"
+            aria-invalid={!isEmailDifferent}
+            className={!isEmailDifferent ? "border-red-500 focus-visible:ring-red-500" : ""}
+          />
+          {!isEmailDifferent && newEmail && (
+            <p className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1" role="alert">
+              <RiCloseLine className="h-3.5 w-3.5" />
+              O novo e-mail deve ser diferente do atual
+            </p>
+          )}
+          {!newEmail && (
+            <p id="new-email-help" className="text-xs text-muted-foreground">
+              Digite o novo endereço de e-mail para sua conta
+            </p>
+          )}
+        </div>
+
+        {/* Confirmar novo e-mail */}
+        <div className="space-y-2">
+          <Label htmlFor="confirmEmail">
+            Confirmar novo e-mail <span className="text-destructive">*</span>
           </Label>
           <div className="relative">
             <Input
-              id="password"
-              type={showPassword ? "text" : "password"}
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
+              id="confirmEmail"
+              type="email"
+              value={confirmEmail}
+              onChange={(e) => setConfirmEmail(e.target.value)}
               disabled={isPending}
-              placeholder="Digite sua senha para confirmar"
+              placeholder="Repita o novo e-mail"
               required
               aria-required="true"
-              aria-describedby="password-help"
+              aria-describedby="confirm-email-help"
+              aria-invalid={emailsMatch === false}
+              className={
+                emailsMatch === false
+                  ? "border-red-500 focus-visible:ring-red-500 pr-10"
+                  : emailsMatch === true
+                  ? "border-green-500 focus-visible:ring-green-500 pr-10"
+                  : ""
+              }
             />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
-            >
-              {showPassword ? (
-                <RiEyeOffLine size={20} />
-              ) : (
-                <RiEyeLine size={20} />
-              )}
-            </button>
+            {/* Indicador visual de match */}
+            {emailsMatch !== null && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                {emailsMatch ? (
+                  <RiCheckLine className="h-5 w-5 text-green-500" aria-label="Os e-mails coincidem" />
+                ) : (
+                  <RiCloseLine className="h-5 w-5 text-red-500" aria-label="Os e-mails não coincidem" />
+                )}
+              </div>
+            )}
           </div>
-          <p id="password-help" className="text-xs text-muted-foreground">
-            Por segurança, confirme sua senha antes de alterar seu e-mail
-          </p>
-        </div>
-      )}
-
-      {/* Novo e-mail */}
-      <div className="space-y-2">
-        <Label htmlFor="newEmail">
-          Novo e-mail <span className="text-destructive">*</span>
-        </Label>
-        <Input
-          id="newEmail"
-          type="email"
-          value={newEmail}
-          onChange={(e) => setNewEmail(e.target.value)}
-          disabled={isPending}
-          placeholder="Digite o novo e-mail"
-          required
-          aria-required="true"
-          aria-describedby="new-email-help"
-          aria-invalid={!isEmailDifferent}
-          className={!isEmailDifferent ? "border-red-500 focus-visible:ring-red-500" : ""}
-        />
-        {!isEmailDifferent && newEmail && (
-          <p className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1" role="alert">
-            <RiCloseLine className="h-3.5 w-3.5" />
-            O novo e-mail deve ser diferente do atual
-          </p>
-        )}
-        {!newEmail && (
-          <p id="new-email-help" className="text-xs text-muted-foreground">
-            Digite o novo endereço de e-mail para sua conta
-          </p>
-        )}
-      </div>
-
-      {/* Confirmar novo e-mail */}
-      <div className="space-y-2">
-        <Label htmlFor="confirmEmail">
-          Confirmar novo e-mail <span className="text-destructive">*</span>
-        </Label>
-        <div className="relative">
-          <Input
-            id="confirmEmail"
-            type="email"
-            value={confirmEmail}
-            onChange={(e) => setConfirmEmail(e.target.value)}
-            disabled={isPending}
-            placeholder="Repita o novo e-mail"
-            required
-            aria-required="true"
-            aria-describedby="confirm-email-help"
-            aria-invalid={emailsMatch === false}
-            className={
-              emailsMatch === false
-                ? "border-red-500 focus-visible:ring-red-500 pr-10"
-                : emailsMatch === true
-                ? "border-green-500 focus-visible:ring-green-500 pr-10"
-                : ""
-            }
-          />
-          {/* Indicador visual de match */}
-          {emailsMatch !== null && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2">
-              {emailsMatch ? (
-                <RiCheckLine className="h-5 w-5 text-green-500" aria-label="Os e-mails coincidem" />
-              ) : (
-                <RiCloseLine className="h-5 w-5 text-red-500" aria-label="Os e-mails não coincidem" />
-              )}
-            </div>
+          {/* Mensagem de erro em tempo real */}
+          {emailsMatch === false && (
+            <p id="confirm-email-help" className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1" role="alert">
+              <RiCloseLine className="h-3.5 w-3.5" />
+              Os e-mails não coincidem
+            </p>
+          )}
+          {emailsMatch === true && (
+            <p id="confirm-email-help" className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
+              <RiCheckLine className="h-3.5 w-3.5" />
+              Os e-mails coincidem
+            </p>
           )}
         </div>
-        {/* Mensagem de erro em tempo real */}
-        {emailsMatch === false && (
-          <p id="confirm-email-help" className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1" role="alert">
-            <RiCloseLine className="h-3.5 w-3.5" />
-            Os e-mails não coincidem
-          </p>
-        )}
-        {emailsMatch === true && (
-          <p id="confirm-email-help" className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
-            <RiCheckLine className="h-3.5 w-3.5" />
-            Os e-mails coincidem
-          </p>
-        )}
       </div>
 
-      <Button
-        type="submit"
-        disabled={isPending || emailsMatch === false || !isEmailDifferent}
-      >
-        {isPending ? "Atualizando..." : "Atualizar e-mail"}
-      </Button>
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          disabled={isPending || emailsMatch === false || !isEmailDifferent}
+          className="w-fit"
+        >
+          {isPending ? "Atualizando..." : "Atualizar e-mail"}
+        </Button>
+      </div>
     </form>
   );
 }

components/ajustes/update-name-form.tsx

@@ -40,32 +40,36 @@ export function UpdateNameForm({ currentName }: UpdateNameFormProps) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="firstName">Primeiro nome</Label>
-        <Input
-          id="firstName"
-          value={firstName}
-          onChange={(e) => setFirstName(e.target.value)}
-          disabled={isPending}
-          required
-        />
+    <form onSubmit={handleSubmit} className="flex flex-col space-y-6">
+      <div className="space-y-4 max-w-md">
+        <div className="space-y-2">
+          <Label htmlFor="firstName">Primeiro nome</Label>
+          <Input
+            id="firstName"
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+            disabled={isPending}
+            required
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="lastName">Sobrenome</Label>
+          <Input
+            id="lastName"
+            value={lastName}
+            onChange={(e) => setLastName(e.target.value)}
+            disabled={isPending}
+            required
+          />
+        </div>
       </div>
 
-      <div className="space-y-2">
-        <Label htmlFor="lastName">Sobrenome</Label>
-        <Input
-          id="lastName"
-          value={lastName}
-          onChange={(e) => setLastName(e.target.value)}
-          disabled={isPending}
-          required
-        />
+      <div className="flex justify-end">
+        <Button type="submit" disabled={isPending} className="w-fit">
+          {isPending ? "Atualizando..." : "Atualizar nome"}
+        </Button>
       </div>
-
-      <Button type="submit" disabled={isPending}>
-        {isPending ? "Atualizando..." : "Atualizar nome"}
-      </Button>
     </form>
   );
 }

components/ajustes/update-password-form.tsx

@@ -5,7 +5,13 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils/ui";
-import { RiEyeLine, RiEyeOffLine, RiCheckLine, RiCloseLine, RiAlertLine } from "@remixicon/react";
+import {
+  RiEyeLine,
+  RiEyeOffLine,
+  RiCheckLine,
+  RiCloseLine,
+  RiAlertLine,
+} from "@remixicon/react";
 import { useState, useTransition, useMemo } from "react";
 import { toast } from "sonner";
 
@@ -44,13 +50,7 @@ function validatePassword(password: string): PasswordValidation {
   };
 }
 
-function PasswordRequirement({
-  met,
-  label,
-}: {
-  met: boolean;
-  label: string;
-}) {
+function PasswordRequirement({ met, label }: { met: boolean; label: string }) {
   return (
     <div
       className={cn(
@@ -133,15 +133,16 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
     return (
       <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/20">
         <div className="flex gap-3">
-          <RiAlertLine className="h-5 w-5 text-amber-600 dark:text-amber-500 flex-shrink-0 mt-0.5" />
+          <RiAlertLine className="h-5 w-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
           <div>
             <h3 className="font-medium text-amber-900 dark:text-amber-400">
               Alteração de senha não disponível
             </h3>
             <p className="mt-1 text-sm text-amber-800 dark:text-amber-500">
-              Você fez login usando sua conta do Google. A senha é gerenciada diretamente pelo Google
-              e não pode ser alterada aqui. Para modificar sua senha, acesse as configurações de
-              segurança da sua conta Google.
+              Você fez login usando sua conta do Google. A senha é gerenciada
+              diretamente pelo Google e não pode ser alterada aqui. Para
+              modificar sua senha, acesse as configurações de segurança da sua
+              conta Google.
             </p>
           </div>
         </div>
@@ -150,173 +151,213 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      {/* Senha atual */}
-      <div className="space-y-2">
-        <Label htmlFor="currentPassword">
-          Senha atual <span className="text-destructive">*</span>
-        </Label>
-        <div className="relative">
-          <Input
-            id="currentPassword"
-            type={showCurrentPassword ? "text" : "password"}
-            value={currentPassword}
-            onChange={(e) => setCurrentPassword(e.target.value)}
-            disabled={isPending}
-            placeholder="Digite sua senha atual"
-            required
-            aria-required="true"
-            aria-describedby="current-password-help"
-          />
-          <button
-            type="button"
-            onClick={() => setShowCurrentPassword(!showCurrentPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            aria-label={showCurrentPassword ? "Ocultar senha atual" : "Mostrar senha atual"}
-          >
-            {showCurrentPassword ? (
-              <RiEyeOffLine size={20} />
-            ) : (
-              <RiEyeLine size={20} />
-            )}
-          </button>
-        </div>
-        <p id="current-password-help" className="text-xs text-muted-foreground">
-          Por segurança, confirme sua senha atual antes de alterá-la
-        </p>
-      </div>
-
-      {/* Nova senha */}
-      <div className="space-y-2">
-        <Label htmlFor="newPassword">
-          Nova senha <span className="text-destructive">*</span>
-        </Label>
-        <div className="relative">
-          <Input
-            id="newPassword"
-            type={showNewPassword ? "text" : "password"}
-            value={newPassword}
-            onChange={(e) => setNewPassword(e.target.value)}
-            disabled={isPending}
-            placeholder="Crie uma senha forte"
-            required
-            minLength={7}
-            maxLength={23}
-            aria-required="true"
-            aria-describedby="new-password-help"
-            aria-invalid={newPassword.length > 0 && !passwordValidation.isValid}
-          />
-          <button
-            type="button"
-            onClick={() => setShowNewPassword(!showNewPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            aria-label={showNewPassword ? "Ocultar nova senha" : "Mostrar nova senha"}
-          >
-            {showNewPassword ? (
-              <RiEyeOffLine size={20} />
-            ) : (
-              <RiEyeLine size={20} />
-            )}
-          </button>
-        </div>
-        {/* Indicadores de requisitos da senha */}
-        {newPassword.length > 0 && (
-          <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
-            <PasswordRequirement
-              met={passwordValidation.hasMinLength}
-              label="Mínimo 7 caracteres"
+    <form onSubmit={handleSubmit} className="flex flex-col space-y-6">
+      <div className="space-y-4 max-w-md">
+        {/* Senha atual */}
+        <div className="space-y-2">
+          <Label htmlFor="currentPassword">
+            Senha atual <span className="text-destructive">*</span>
+          </Label>
+          <div className="relative">
+            <Input
+              id="currentPassword"
+              type={showCurrentPassword ? "text" : "password"}
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              disabled={isPending}
+              placeholder="Digite sua senha atual"
+              required
+              aria-required="true"
+              aria-describedby="current-password-help"
             />
-            <PasswordRequirement
-              met={passwordValidation.hasMaxLength}
-              label="Máximo 23 caracteres"
-            />
-            <PasswordRequirement
-              met={passwordValidation.hasLowercase}
-              label="Letra minúscula"
-            />
-            <PasswordRequirement
-              met={passwordValidation.hasUppercase}
-              label="Letra maiúscula"
-            />
-            <PasswordRequirement
-              met={passwordValidation.hasNumber}
-              label="Número"
-            />
-            <PasswordRequirement
-              met={passwordValidation.hasSpecial}
-              label="Caractere especial"
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Confirmar nova senha */}
-      <div className="space-y-2">
-        <Label htmlFor="confirmPassword">
-          Confirmar nova senha <span className="text-destructive">*</span>
-        </Label>
-        <div className="relative">
-          <Input
-            id="confirmPassword"
-            type={showConfirmPassword ? "text" : "password"}
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            disabled={isPending}
-            placeholder="Repita a senha"
-            required
-            minLength={6}
-            aria-required="true"
-            aria-describedby="confirm-password-help"
-            aria-invalid={passwordsMatch === false}
-            className={
-              passwordsMatch === false
-                ? "border-red-500 focus-visible:ring-red-500"
-                : passwordsMatch === true
-                ? "border-green-500 focus-visible:ring-green-500"
-                : ""
-            }
-          />
-          <button
-            type="button"
-            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-            className="absolute right-10 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            aria-label={showConfirmPassword ? "Ocultar confirmação de senha" : "Mostrar confirmação de senha"}
-          >
-            {showConfirmPassword ? (
-              <RiEyeOffLine size={20} />
-            ) : (
-              <RiEyeLine size={20} />
-            )}
-          </button>
-          {/* Indicador visual de match */}
-          {passwordsMatch !== null && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2">
-              {passwordsMatch ? (
-                <RiCheckLine className="h-5 w-5 text-green-500" aria-label="As senhas coincidem" />
+            <button
+              type="button"
+              onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label={
+                showCurrentPassword
+                  ? "Ocultar senha atual"
+                  : "Mostrar senha atual"
+              }
+            >
+              {showCurrentPassword ? (
+                <RiEyeOffLine size={20} />
               ) : (
-                <RiCloseLine className="h-5 w-5 text-red-500" aria-label="As senhas não coincidem" />
+                <RiEyeLine size={20} />
               )}
+            </button>
+          </div>
+          <p
+            id="current-password-help"
+            className="text-xs text-muted-foreground"
+          >
+            Por segurança, confirme sua senha atual antes de alterá-la
+          </p>
+        </div>
+
+        {/* Nova senha */}
+        <div className="space-y-2">
+          <Label htmlFor="newPassword">
+            Nova senha <span className="text-destructive">*</span>
+          </Label>
+          <div className="relative">
+            <Input
+              id="newPassword"
+              type={showNewPassword ? "text" : "password"}
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={isPending}
+              placeholder="Crie uma senha forte"
+              required
+              minLength={7}
+              maxLength={23}
+              aria-required="true"
+              aria-describedby="new-password-help"
+              aria-invalid={
+                newPassword.length > 0 && !passwordValidation.isValid
+              }
+            />
+            <button
+              type="button"
+              onClick={() => setShowNewPassword(!showNewPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label={
+                showNewPassword ? "Ocultar nova senha" : "Mostrar nova senha"
+              }
+            >
+              {showNewPassword ? (
+                <RiEyeOffLine size={20} />
+              ) : (
+                <RiEyeLine size={20} />
+              )}
+            </button>
+          </div>
+          {/* Indicadores de requisitos da senha */}
+          {newPassword.length > 0 && (
+            <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+              <PasswordRequirement
+                met={passwordValidation.hasMinLength}
+                label="Mínimo 7 caracteres"
+              />
+              <PasswordRequirement
+                met={passwordValidation.hasMaxLength}
+                label="Máximo 23 caracteres"
+              />
+              <PasswordRequirement
+                met={passwordValidation.hasLowercase}
+                label="Letra minúscula"
+              />
+              <PasswordRequirement
+                met={passwordValidation.hasUppercase}
+                label="Letra maiúscula"
+              />
+              <PasswordRequirement
+                met={passwordValidation.hasNumber}
+                label="Número"
+              />
+              <PasswordRequirement
+                met={passwordValidation.hasSpecial}
+                label="Caractere especial"
+              />
             </div>
           )}
         </div>
-        {/* Mensagem de erro em tempo real */}
-        {passwordsMatch === false && (
-          <p id="confirm-password-help" className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1" role="alert">
-            <RiCloseLine className="h-3.5 w-3.5" />
-            As senhas não coincidem
-          </p>
-        )}
-        {passwordsMatch === true && (
-          <p id="confirm-password-help" className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
-            <RiCheckLine className="h-3.5 w-3.5" />
-            As senhas coincidem
-          </p>
-        )}
+
+        {/* Confirmar nova senha */}
+        <div className="space-y-2">
+          <Label htmlFor="confirmPassword">
+            Confirmar nova senha <span className="text-destructive">*</span>
+          </Label>
+          <div className="relative">
+            <Input
+              id="confirmPassword"
+              type={showConfirmPassword ? "text" : "password"}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={isPending}
+              placeholder="Repita a senha"
+              required
+              minLength={6}
+              aria-required="true"
+              aria-describedby="confirm-password-help"
+              aria-invalid={passwordsMatch === false}
+              className={
+                passwordsMatch === false
+                  ? "border-red-500 focus-visible:ring-red-500"
+                  : passwordsMatch === true
+                  ? "border-green-500 focus-visible:ring-green-500"
+                  : ""
+              }
+            />
+            <button
+              type="button"
+              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              className="absolute right-10 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label={
+                showConfirmPassword
+                  ? "Ocultar confirmação de senha"
+                  : "Mostrar confirmação de senha"
+              }
+            >
+              {showConfirmPassword ? (
+                <RiEyeOffLine size={20} />
+              ) : (
+                <RiEyeLine size={20} />
+              )}
+            </button>
+            {/* Indicador visual de match */}
+            {passwordsMatch !== null && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                {passwordsMatch ? (
+                  <RiCheckLine
+                    className="h-5 w-5 text-green-500"
+                    aria-label="As senhas coincidem"
+                  />
+                ) : (
+                  <RiCloseLine
+                    className="h-5 w-5 text-red-500"
+                    aria-label="As senhas não coincidem"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+          {/* Mensagem de erro em tempo real */}
+          {passwordsMatch === false && (
+            <p
+              id="confirm-password-help"
+              className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1"
+              role="alert"
+            >
+              <RiCloseLine className="h-3.5 w-3.5" />
+              As senhas não coincidem
+            </p>
+          )}
+          {passwordsMatch === true && (
+            <p
+              id="confirm-password-help"
+              className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1"
+            >
+              <RiCheckLine className="h-3.5 w-3.5" />
+              As senhas coincidem
+            </p>
+          )}
+        </div>
       </div>
 
-      <Button type="submit" disabled={isPending || passwordsMatch === false || (newPassword.length > 0 && !passwordValidation.isValid)}>
-        {isPending ? "Atualizando..." : "Atualizar senha"}
-      </Button>
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          disabled={
+            isPending ||
+            passwordsMatch === false ||
+            (newPassword.length > 0 && !passwordValidation.isValid)
+          }
+          className="w-fit"
+        >
+          {isPending ? "Atualizando..." : "Atualizar senha"}
+        </Button>
+      </div>
     </form>
   );
 }