chore: add Biome for lint and fix all lint errors

- Install @biomejs/biome as devDependency at root - Configure biome.json with 2-space indent, double quotes, Tailwind CSS support - Add lint/lint:fix/format/format:fix scripts to root and app package.json - Fix noNonNullAssertion: env vars extracted to variables with suppression, <div role=button> replaced with <button> - Fix noUnusedVariables: remove unused destructured vars - Fix useIterableCallbackReturn: arrow functions with block body - Fix noExplicitAny: recharts Tooltip formatters - Fix noLabelWithoutControl: add htmlFor+id or use <span> for non-input labels - Fix noStaticElementInteractions/useKeyWithClickEvents: role+keyboard events for overlays - Fix noArrayIndexKey: use error string as key - Fix CSS parse: enable tailwindDirectives parser - Normalize formatting across 80 files with biome check --write
2026-06-04 10:48:07 -03:00
parent 53a797703e
commit 5b6ccf0fa6
81 changed files with 1565 additions and 794 deletions
--- a/apps/frontend/src/features/expenses/ExpensesPage.tsx
+++ b/apps/frontend/src/features/expenses/ExpensesPage.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { Route } from "@/routes/_authenticated/expenses";
-import { ExpensesProvider } from "./ExpensesProvider";
 import { ExpensesTabContent } from "./components/ExpensesTabContent";
 import { PeriodicExpensesTabContent } from "./components/PeriodicExpensesTabContent";
+import { ExpensesProvider } from "./ExpensesProvider";

 const tabs = [
  { id: "expenses", label: "Gastos" },
--- a/apps/frontend/src/features/expenses/ExpensesProvider.tsx
+++ b/apps/frontend/src/features/expenses/ExpensesProvider.tsx
@@ -1,30 +1,38 @@
-import { createContext, useContext, useState, useCallback, useEffect, useRef, type ReactNode } from "react";
 import {
-  usePeriodicExpenses,
-  useCreatePeriodicExpense,
-  useUpdatePeriodicExpense,
-  useDeletePeriodicExpense,
-  useGenerateMonthlyExpense,
-  useExpenses,
-  useCreateNonPeriodicExpense,
-  usePayExpense,
-  useMonthlyTotals,
-  useTotalPending,
-  useImportPeriodicExpenses,
-  useImportExpenses,
-} from "@/lib/queries";
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import type {
-  PeriodicExpense,
-  Expense,
-  CreatePeriodicExpenseInput,
  CreateNonPeriodicExpenseInput,
-  PayExpenseInput,
-  PaginatedResponse,
-  MonthlyTotals,
-  MonthlyExpensesTotal,
-  ImportResult,
+  CreatePeriodicExpenseInput,
+  Expense,
  ImportExpensesResult,
+  ImportResult,
+  MonthlyExpensesTotal,
+  MonthlyTotals,
+  PaginatedResponse,
+  PayExpenseInput,
+  PeriodicExpense,
 } from "@/lib/api";
+import {
+  useCreateNonPeriodicExpense,
+  useCreatePeriodicExpense,
+  useDeletePeriodicExpense,
+  useExpenses,
+  useGenerateMonthlyExpense,
+  useImportExpenses,
+  useImportPeriodicExpenses,
+  useMonthlyTotals,
+  usePayExpense,
+  usePeriodicExpenses,
+  useTotalPending,
+  useUpdatePeriodicExpense,
+} from "@/lib/queries";

 interface ExpensesContextValue {
  periodicExpenses: PeriodicExpense[];
@@ -47,11 +55,18 @@ interface ExpensesContextValue {
  totalPending: MonthlyExpensesTotal | undefined;
  isLoadingTotalPending: boolean;

-  createPeriodicExpense: (data: CreatePeriodicExpenseInput) => Promise<PeriodicExpense>;
-  updatePeriodicExpense: (id: number, data: CreatePeriodicExpenseInput) => Promise<void>;
+  createPeriodicExpense: (
+    data: CreatePeriodicExpenseInput,
+  ) => Promise<PeriodicExpense>;
+  updatePeriodicExpense: (
+    id: number,
+    data: CreatePeriodicExpenseInput,
+  ) => Promise<void>;
  deletePeriodicExpense: (id: number) => Promise<void>;
  generateMonthlyExpense: (id: number) => Promise<Expense>;
-  createNonPeriodicExpense: (data: CreateNonPeriodicExpenseInput) => Promise<void>;
+  createNonPeriodicExpense: (
+    data: CreateNonPeriodicExpenseInput,
+  ) => Promise<void>;
  payExpense: (id: number, data: PayExpenseInput) => Promise<void>;
  importPeriodicExpenses: (file: File) => Promise<ImportResult>;
  importExpenses: (file: File) => Promise<ImportExpensesResult>;
@@ -59,11 +74,19 @@ interface ExpensesContextValue {

 const ExpensesContext = createContext<ExpensesContextValue | null>(null);

-export function ExpensesProvider({ children, initialPeriodicExpenseId }: { children: ReactNode; initialPeriodicExpenseId?: number }) {
+export function ExpensesProvider({
+  children,
+  initialPeriodicExpenseId,
+}: {
+  children: ReactNode;
+  initialPeriodicExpenseId?: number;
+}) {
  const [statusFilter, setStatusFilter] = useState("PENDING");
  const [page, setPage] = useState(1);
  const pageSize = 10;
-  const [periodicExpenseFilter, setPeriodicExpenseFilter] = useState<number | undefined>(initialPeriodicExpenseId);
+  const [periodicExpenseFilter, setPeriodicExpenseFilter] = useState<
+    number | undefined
+  >(initialPeriodicExpenseId);
  const [searchInput, setSearchInput] = useState("");
  const [searchQuery, setSearchQuery] = useState("");

@@ -81,15 +104,28 @@ export function ExpensesProvider({ children, initialPeriodicExpenseId }: { child

  useEffect(() => {
    setPage(1);
-  }, [periodicExpenseFilter, searchQuery]);
+  }, []);

-  const { data: periodicExpenses = [], isLoading: isLoadingPeriodic } = usePeriodicExpenses();
-  const { data: expenses = { data: [], total: 0, page: 1, pageSize: 10 }, isLoading: isLoadingExpenses } =
-    useExpenses(statusFilter, page, pageSize, periodicExpenseFilter, searchQuery || undefined);
+  const { data: periodicExpenses = [], isLoading: isLoadingPeriodic } =
+    usePeriodicExpenses();
+  const {
+    data: expenses = { data: [], total: 0, page: 1, pageSize: 10 },
+    isLoading: isLoadingExpenses,
+  } = useExpenses(
+    statusFilter,
+    page,
+    pageSize,
+    periodicExpenseFilter,
+    searchQuery || undefined,
+  );

  const now = new Date();
-  const { data: monthlyTotals, isLoading: isLoadingTotals } = useMonthlyTotals(now.getFullYear(), now.getMonth() + 1);
-  const { data: totalPending, isLoading: isLoadingTotalPending } = useTotalPending();
+  const { data: monthlyTotals, isLoading: isLoadingTotals } = useMonthlyTotals(
+    now.getFullYear(),
+    now.getMonth() + 1,
+  );
+  const { data: totalPending, isLoading: isLoadingTotalPending } =
+    useTotalPending();

  const createPeriodicMutation = useCreatePeriodicExpense();
  const updatePeriodicMutation = useUpdatePeriodicExpense();
@@ -193,6 +229,7 @@ export function ExpensesProvider({ children, initialPeriodicExpenseId }: { child

 export function useExpensesContext() {
  const ctx = useContext(ExpensesContext);
-  if (!ctx) throw new Error("useExpensesContext must be used within ExpensesProvider");
+  if (!ctx)
+    throw new Error("useExpensesContext must be used within ExpensesProvider");
  return ctx;
 }
--- a/apps/frontend/src/features/expenses/components/ExpensesTabContent.tsx
+++ b/apps/frontend/src/features/expenses/components/ExpensesTabContent.tsx
@@ -1,17 +1,14 @@
-import { useState, useRef } from "react";
-import { useExpensesContext } from "../ExpensesProvider";
-import { ExpensesTable } from "./ExpensesTable";
-import { PayExpenseDialog } from "./PayExpenseDialog";
-import { NewExpenseDialog } from "./NewExpenseDialog";
+import { Plus, Search, Upload, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
  ResponsiveDialog,
  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
  ResponsiveDialogHeader,
  ResponsiveDialogTitle,
-  ResponsiveDialogDescription,
 } from "@/components/ui/responsive-dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import {
  Select,
  SelectContent,
@@ -19,8 +16,11 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select";
-import { Plus, Upload, Search, X } from "lucide-react";
 import type { Expense, ImportExpensesResult } from "@/lib/api";
+import { useExpensesContext } from "../ExpensesProvider";
+import { ExpensesTable } from "./ExpensesTable";
+import { NewExpenseDialog } from "./NewExpenseDialog";
+import { PayExpenseDialog } from "./PayExpenseDialog";

 const priceFormatter = new Intl.NumberFormat("es-AR", {
  minimumFractionDigits: 2,
@@ -33,9 +33,7 @@ export function ExpensesTabContent() {
    isLoadingExpenses,
    statusFilter,
    setStatusFilter,
-    page,
    setPage,
-    pageSize,
    monthlyTotals,
    isLoadingTotals,
    totalPending,
@@ -48,12 +46,16 @@ export function ExpensesTabContent() {
    importExpenses,
  } = useExpensesContext();

-  const [payDialogExpense, setPayDialogExpense] = useState<Expense | null>(null);
+  const [payDialogExpense, setPayDialogExpense] = useState<Expense | null>(
+    null,
+  );
  const [newExpenseOpen, setNewExpenseOpen] = useState(false);

  const [importDialogOpen, setImportDialogOpen] = useState(false);
  const [importing, setImporting] = useState(false);
-  const [importResult, setImportResult] = useState<ImportExpensesResult | null>(null);
+  const [importResult, setImportResult] = useState<ImportExpensesResult | null>(
+    null,
+  );
  const fileInputRef = useRef<HTMLInputElement>(null);

  const filters = [
@@ -72,7 +74,10 @@ export function ExpensesTabContent() {
              variant={statusFilter === f.value ? "default" : "outline"}
              size="xs"
              className="shrink-0"
-              onClick={() => { setStatusFilter(f.value); setPage(1); }}
+              onClick={() => {
+                setStatusFilter(f.value);
+                setPage(1);
+              }}
            >
              {f.label}
            </Button>
@@ -98,7 +103,11 @@ export function ExpensesTabContent() {
            )}
          </div>
          <Select
-            value={periodicExpenseFilter !== undefined ? String(periodicExpenseFilter) : "all"}
+            value={
+              periodicExpenseFilter !== undefined
+                ? String(periodicExpenseFilter)
+                : "all"
+            }
            onValueChange={(val) => {
              setPeriodicExpenseFilter(val === "all" ? undefined : Number(val));
              setPage(1);
@@ -117,11 +126,20 @@ export function ExpensesTabContent() {
            </SelectContent>
          </Select>
          <div className="grid grid-cols-2 gap-2 sm:flex">
-            <Button onClick={() => setImportDialogOpen(true)} variant="outline" size="sm" className="min-w-0">
+            <Button
+              onClick={() => setImportDialogOpen(true)}
+              variant="outline"
+              size="sm"
+              className="min-w-0"
+            >
              <Upload className="size-4" />
              <span className="truncate">Importar</span>
            </Button>
-            <Button onClick={() => setNewExpenseOpen(true)} size="sm" className="min-w-0">
+            <Button
+              onClick={() => setNewExpenseOpen(true)}
+              size="sm"
+              className="min-w-0"
+            >
              <Plus className="size-4" />
              <span className="truncate">Nuevo gasto</span>
            </Button>
@@ -152,7 +170,9 @@ export function ExpensesTabContent() {
          </p>
        </div>
        <div className="rounded-lg border p-4">
-          <p className="text-sm text-muted-foreground">Total Pendiente del Mes</p>
+          <p className="text-sm text-muted-foreground">
+            Total Pendiente del Mes
+          </p>
          <p className="text-2xl font-bold tabular-nums">
            {isLoadingTotals
              ? "..."
@@ -160,7 +180,9 @@ export function ExpensesTabContent() {
          </p>
        </div>
        <div className="rounded-lg border p-4">
-          <p className="text-sm text-muted-foreground">Total Pendiente General</p>
+          <p className="text-sm text-muted-foreground">
+            Total Pendiente General
+          </p>
          <p className="text-2xl font-bold tabular-nums">
            {isLoadingTotalPending
              ? "..."
@@ -177,19 +199,26 @@ export function ExpensesTabContent() {
        }}
      />

-      <NewExpenseDialog open={newExpenseOpen} onOpenChange={setNewExpenseOpen} />
+      <NewExpenseDialog
+        open={newExpenseOpen}
+        onOpenChange={setNewExpenseOpen}
+      />

-      <ResponsiveDialog open={importDialogOpen} onOpenChange={(open) => {
-        setImportDialogOpen(open);
-        if (!open) {
-          setImportResult(null);
-        }
-      }}>
+      <ResponsiveDialog
+        open={importDialogOpen}
+        onOpenChange={(open) => {
+          setImportDialogOpen(open);
+          if (!open) {
+            setImportResult(null);
+          }
+        }}
+      >
        <ResponsiveDialogContent>
          <ResponsiveDialogHeader>
            <ResponsiveDialogTitle>Importar gastos</ResponsiveDialogTitle>
            <ResponsiveDialogDescription>
-              Seleccioná un archivo CSV (delimitado por pipes) para importar gastos.
+              Seleccioná un archivo CSV (delimitado por pipes) para importar
+              gastos.
            </ResponsiveDialogDescription>
          </ResponsiveDialogHeader>

@@ -208,15 +237,20 @@ export function ExpensesTabContent() {
              </ul>
              {importResult.errors && importResult.errors.length > 0 && (
                <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
-                  <p className="mb-1 text-xs font-medium text-destructive">Errores:</p>
+                  <p className="mb-1 text-xs font-medium text-destructive">
+                    Errores:
+                  </p>
                  <ul className="list-inside list-disc text-xs text-destructive/80">
-                    {importResult.errors.map((err, i) => (
-                      <li key={i}>{err}</li>
+                    {importResult.errors.map((err) => (
+                      <li key={err}>{err}</li>
                    ))}
                  </ul>
                </div>
              )}
-              <Button className="w-full" onClick={() => setImportDialogOpen(false)}>
+              <Button
+                className="w-full"
+                onClick={() => setImportDialogOpen(false)}
+              >
                Cerrar
              </Button>
            </div>
@@ -239,8 +273,13 @@ export function ExpensesTabContent() {
                    const result = await importExpenses(file);
                    setImportResult(result);
                  } catch (err) {
-                    const message = err instanceof Error ? err.message : String(err);
-                    setImportResult({ imported: 0, skipped: 0, errors: [message] });
+                    const message =
+                      err instanceof Error ? err.message : String(err);
+                    setImportResult({
+                      imported: 0,
+                      skipped: 0,
+                      errors: [message],
+                    });
                  } finally {
                    setImporting(false);
                  }
--- a/apps/frontend/src/features/expenses/components/ExpensesTable.tsx
+++ b/apps/frontend/src/features/expenses/components/ExpensesTable.tsx
@@ -1,13 +1,18 @@
-import { useMemo } from "react";
 import {
+  type ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
-  type ColumnDef,
 } from "@tanstack/react-table";
-import type { Expense } from "@/lib/api";
+import {
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  CircleDollarSign,
+  SkipBackIcon,
+  SkipForwardIcon,
+} from "lucide-react";
+import { useMemo } from "react";
 import { Button } from "@/components/ui/button";
-import { CircleDollarSign, ChevronsLeftIcon, ChevronsRightIcon, SkipBackIcon, SkipForwardIcon } from "lucide-react";
 import {
  Pagination,
  PaginationContent,
@@ -16,6 +21,7 @@ import {
  PaginationNext,
  PaginationPrevious,
 } from "@/components/ui/pagination";
+import type { Expense } from "@/lib/api";

 interface ExpensesTableProps {
  data: Expense[];
@@ -37,7 +43,10 @@ function formatExpenseDate(value: string) {

 function formatExpenseAmount(expense: Expense) {
  const isPayed = expense.status === "PAYED";
-  const value = isPayed && expense.amountPayed ? Number(expense.amountPayed) : Number(expense.amount);
+  const value =
+    isPayed && expense.amountPayed
+      ? Number(expense.amountPayed)
+      : Number(expense.amount);

  return `$${value.toLocaleString("es-AR", { minimumFractionDigits: 2 })}`;
 }
@@ -58,7 +67,14 @@ function ExpenseStatusBadge({ status }: { status: Expense["status"] }) {
  );
 }

-export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange }: ExpensesTableProps) {
+export function ExpensesTable({
+  data,
+  onPay,
+  page,
+  total,
+  pageSize,
+  onPageChange,
+}: ExpensesTableProps) {
  const columns = useMemo<ColumnDef<Expense>[]>(
    () => [
      {
@@ -74,9 +90,7 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
        cell: ({ row }) => {
          const expense = row.original;
          return (
-            <span className="tabular-nums">
-              {formatExpenseAmount(expense)}
-            </span>
+            <span className="tabular-nums">{formatExpenseAmount(expense)}</span>
          );
        },
      },
@@ -95,7 +109,11 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
        header: "Estado",
        accessorKey: "status",
        cell: ({ row }) => {
-          return <ExpenseStatusBadge status={row.getValue("status") as Expense["status"]} />;
+          return (
+            <ExpenseStatusBadge
+              status={row.getValue("status") as Expense["status"]}
+            />
+          );
        },
      },
      {
@@ -149,31 +167,32 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
  const endPage = Math.min(startPage + GROUP_SIZE - 1, totalPages);
  const firstItem = total === 0 ? 0 : (page - 1) * pageSize + 1;
  const lastItem = Math.min(page * pageSize, total);
-  const mobilePagination = total > 0 ? (
-    <div className="rounded-lg border bg-card p-2 sm:hidden">
-      <div className="mb-2 text-center text-xs text-muted-foreground tabular-nums">
-        {firstItem}-{lastItem} de {total} · Página {page} de {totalPages}
+  const mobilePagination =
+    total > 0 ? (
+      <div className="rounded-lg border bg-card p-2 sm:hidden">
+        <div className="mb-2 text-center text-xs text-muted-foreground tabular-nums">
+          {firstItem}-{lastItem} de {total} · Página {page} de {totalPages}
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => onPageChange(page - 1)}
+          >
+            Anterior
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= totalPages}
+            onClick={() => onPageChange(page + 1)}
+          >
+            Siguiente
+          </Button>
+        </div>
      </div>
-      <div className="grid grid-cols-2 gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={page <= 1}
-          onClick={() => onPageChange(page - 1)}
-        >
-          Anterior
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={page >= totalPages}
-          onClick={() => onPageChange(page + 1)}
-        >
-          Siguiente
-        </Button>
-      </div>
-    </div>
-  ) : null;
+    ) : null;

  return (
    <div className="space-y-4">
@@ -181,7 +200,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange

      <div className="space-y-2 sm:hidden">
        {data.map((expense) => (
-          <div key={expense.id} className="rounded-lg border bg-card p-3 text-sm">
+          <div
+            key={expense.id}
+            className="rounded-lg border bg-card p-3 text-sm"
+          >
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0">
                <p className="truncate font-medium">{expense.description}</p>
@@ -194,9 +216,13 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange

            <div className="mt-3 flex items-end justify-between gap-3">
              <div className="min-w-0">
-                <p className="text-lg font-semibold tabular-nums">{formatExpenseAmount(expense)}</p>
+                <p className="text-lg font-semibold tabular-nums">
+                  {formatExpenseAmount(expense)}
+                </p>
                <p className="text-xs text-muted-foreground">
-                  {expense.paymentDate ? `Pagado ${formatExpenseDate(expense.paymentDate)}` : "Sin fecha de pago"}
+                  {expense.paymentDate
+                    ? `Pagado ${formatExpenseDate(expense.paymentDate)}`
+                    : "Sin fecha de pago"}
                </p>
              </div>

@@ -231,7 +257,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
                    key={header.id}
                    className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
                  >
-                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
                  </th>
                ))}
              </tr>
@@ -239,7 +268,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
          </thead>
          <tbody>
            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className="border-b last:border-0 hover:bg-muted/30">
+              <tr
+                key={row.id}
+                className="border-b last:border-0 hover:bg-muted/30"
+              >
                {row.getVisibleCells().map((cell) => (
                  <td key={cell.id} className="px-3 py-2.5">
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -249,7 +281,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
            ))}
            {table.getRowModel().rows.length === 0 && (
              <tr>
-                <td colSpan={columns.length} className="px-3 py-8 text-center text-sm text-muted-foreground">
+                <td
+                  colSpan={columns.length}
+                  className="px-3 py-8 text-center text-sm text-muted-foreground"
+                >
                  No hay gastos para mostrar.
                </td>
              </tr>
@@ -265,7 +300,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
          <PaginationContent>
            <PaginationItem>
              <PaginationLink
-                onClick={(e) => { e.preventDefault(); onPageChange(1); }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onPageChange(1);
+                }}
                href="#"
                aria-label="Ir a la primera página"
                className={page <= 1 ? "pointer-events-none opacity-50" : ""}
@@ -275,7 +313,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
            </PaginationItem>
            <PaginationItem>
              <PaginationPrevious
-                onClick={(e) => { e.preventDefault(); if (page > 1) onPageChange(page - 1); }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (page > 1) onPageChange(page - 1);
+                }}
                href="#"
                className={page <= 1 ? "pointer-events-none opacity-50" : ""}
              />
@@ -283,7 +324,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
            {currentGroup > 0 && (
              <PaginationItem>
                <PaginationLink
-                  onClick={(e) => { e.preventDefault(); onPageChange(startPage - 1); }}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onPageChange(startPage - 1);
+                  }}
                  href="#"
                  aria-label="Ir al grupo anterior"
                >
@@ -291,11 +335,17 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
                </PaginationLink>
              </PaginationItem>
            )}
-            {Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((p) => (
+            {Array.from(
+              { length: endPage - startPage + 1 },
+              (_, i) => startPage + i,
+            ).map((p) => (
              <PaginationItem key={p}>
                <PaginationLink
                  isActive={p === page}
-                  onClick={(e) => { e.preventDefault(); onPageChange(p); }}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onPageChange(p);
+                  }}
                  href="#"
                >
                  {p}
@@ -305,7 +355,10 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
            {(currentGroup + 1) * GROUP_SIZE < totalPages && (
              <PaginationItem>
                <PaginationLink
-                  onClick={(e) => { e.preventDefault(); onPageChange(endPage + 1); }}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onPageChange(endPage + 1);
+                  }}
                  href="#"
                  aria-label="Ir al siguiente grupo"
                >
@@ -315,17 +368,27 @@ export function ExpensesTable({ data, onPay, page, total, pageSize, onPageChange
            )}
            <PaginationItem>
              <PaginationNext
-                onClick={(e) => { e.preventDefault(); if (page < totalPages) onPageChange(page + 1); }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (page < totalPages) onPageChange(page + 1);
+                }}
                href="#"
-                className={page >= totalPages ? "pointer-events-none opacity-50" : ""}
+                className={
+                  page >= totalPages ? "pointer-events-none opacity-50" : ""
+                }
              />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink
-                onClick={(e) => { e.preventDefault(); onPageChange(totalPages); }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onPageChange(totalPages);
+                }}
                href="#"
                aria-label="Ir a la última página"
-                className={page >= totalPages ? "pointer-events-none opacity-50" : ""}
+                className={
+                  page >= totalPages ? "pointer-events-none opacity-50" : ""
+                }
              >
                <SkipForwardIcon className="size-4" />
              </PaginationLink>
--- a/apps/frontend/src/features/expenses/components/GenerateCurrentMonthDialog.tsx
+++ b/apps/frontend/src/features/expenses/components/GenerateCurrentMonthDialog.tsx
@@ -1,12 +1,12 @@
+import { Button } from "@/components/ui/button";
 import {
  ResponsiveDialog,
  ResponsiveDialogContent,
-  ResponsiveDialogHeader,
-  ResponsiveDialogTitle,
  ResponsiveDialogDescription,
  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
 } from "@/components/ui/responsive-dialog";
-import { Button } from "@/components/ui/button";

 interface GenerateCurrentMonthDialogProps {
  open: boolean;
@@ -27,18 +27,19 @@ export function GenerateCurrentMonthDialog({
    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>
      <ResponsiveDialogContent>
        <ResponsiveDialogHeader>
-          <ResponsiveDialogTitle>¿Generar gasto para este mes?</ResponsiveDialogTitle>
+          <ResponsiveDialogTitle>
+            ¿Generar gasto para este mes?
+          </ResponsiveDialogTitle>
          <ResponsiveDialogDescription>
-            <strong>{description}</strong> aplica al mes actual. ¿Querés generar el gasto ahora?
+            <strong>{description}</strong> aplica al mes actual. ¿Querés generar
+            el gasto ahora?
          </ResponsiveDialogDescription>
        </ResponsiveDialogHeader>
        <ResponsiveDialogFooter>
          <Button variant="outline" onClick={onSkip}>
            No, gracias
          </Button>
-          <Button onClick={onConfirm}>
-            Sí, generar
-          </Button>
+          <Button onClick={onConfirm}>Sí, generar</Button>
        </ResponsiveDialogFooter>
      </ResponsiveDialogContent>
    </ResponsiveDialog>
--- a/apps/frontend/src/features/expenses/components/NewExpenseDialog.tsx
+++ b/apps/frontend/src/features/expenses/components/NewExpenseDialog.tsx
@@ -1,20 +1,22 @@
-import { useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useExpensesContext } from "../ExpensesProvider";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
 import {
  ResponsiveDialog,
  ResponsiveDialogContent,
+  ResponsiveDialogFooter,
  ResponsiveDialogHeader,
  ResponsiveDialogTitle,
-  ResponsiveDialogFooter,
 } from "@/components/ui/responsive-dialog";
-import { Button } from "@/components/ui/button";
+import { useExpensesContext } from "../ExpensesProvider";

 const newExpenseSchema = z.object({
-  description: z.string().min(1, "La descripción es obligatoria").max(50, "Máximo 50 caracteres"),
+  description: z
+    .string()
+    .min(1, "La descripción es obligatoria")
+    .max(50, "Máximo 50 caracteres"),
  amount: z.number().positive("El monto debe ser mayor a 0"),
  dueDate: z.date({ message: "La fecha es obligatoria" }),
 });
@@ -26,7 +28,10 @@ interface NewExpenseDialogProps {
  onOpenChange: (open: boolean) => void;
 }

-export function NewExpenseDialog({ open, onOpenChange }: NewExpenseDialogProps) {
+export function NewExpenseDialog({
+  open,
+  onOpenChange,
+}: NewExpenseDialogProps) {
  const { createNonPeriodicExpense } = useExpensesContext();

  const {
@@ -65,7 +70,11 @@ export function NewExpenseDialog({ open, onOpenChange }: NewExpenseDialogProps)
          <ResponsiveDialogTitle>Nuevo gasto</ResponsiveDialogTitle>
        </ResponsiveDialogHeader>

-        <form id="new-expense-form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+        <form
+          id="new-expense-form"
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col gap-4"
+        >
          <div className="flex flex-col gap-1.5">
            <label htmlFor="description" className="text-sm font-medium">
              Descripción
@@ -77,7 +86,9 @@ export function NewExpenseDialog({ open, onOpenChange }: NewExpenseDialogProps)
              className="h-8 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
            />
            {errors.description && (
-              <span className="text-xs text-destructive">{errors.description.message}</span>
+              <span className="text-xs text-destructive">
+                {errors.description.message}
+              </span>
            )}
          </div>

@@ -95,14 +106,14 @@ export function NewExpenseDialog({ open, onOpenChange }: NewExpenseDialogProps)
              className="h-8 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
            />
            {errors.amount && (
-              <span className="text-xs text-destructive">{errors.amount.message}</span>
+              <span className="text-xs text-destructive">
+                {errors.amount.message}
+              </span>
            )}
          </div>

          <div className="flex flex-col gap-1.5">
-            <label className="text-sm font-medium">
-              Fecha del gasto
-            </label>
+            <span className="text-sm font-medium">Fecha del gasto</span>
            <Controller
              control={control}
              name="dueDate"
@@ -115,13 +126,19 @@ export function NewExpenseDialog({ open, onOpenChange }: NewExpenseDialogProps)
              )}
            />
            {errors.dueDate && (
-              <span className="text-xs text-destructive">{errors.dueDate.message}</span>
+              <span className="text-xs text-destructive">
+                {errors.dueDate.message}
+              </span>
            )}
          </div>
        </form>

        <ResponsiveDialogFooter>
-          <Button variant="outline" onClick={() => handleClose(false)} disabled={isSubmitting}>
+          <Button
+            variant="outline"
+            onClick={() => handleClose(false)}
+            disabled={isSubmitting}
+          >
            Cancelar
          </Button>
          <Button type="submit" form="new-expense-form" disabled={isSubmitting}>
--- a/apps/frontend/src/features/expenses/components/PayExpenseDialog.tsx
+++ b/apps/frontend/src/features/expenses/components/PayExpenseDialog.tsx
@@ -1,18 +1,18 @@
-import { useEffect, useRef } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import type { Expense } from "@/lib/api";
-import { useExpensesContext } from "../ExpensesProvider";
+import { useEffect, useRef } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
 import {
  ResponsiveDialog,
  ResponsiveDialogContent,
+  ResponsiveDialogFooter,
  ResponsiveDialogHeader,
  ResponsiveDialogTitle,
-  ResponsiveDialogFooter,
 } from "@/components/ui/responsive-dialog";
-import { Button } from "@/components/ui/button";
+import type { Expense } from "@/lib/api";
+import { useExpensesContext } from "../ExpensesProvider";

 const paySchema = z.object({
  amountPayed: z.number().positive("El monto debe ser mayor a 0"),
@@ -27,7 +27,11 @@ interface PayExpenseDialogProps {
  onOpenChange: (open: boolean) => void;
 }

-export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDialogProps) {
+export function PayExpenseDialog({
+  expense,
+  open,
+  onOpenChange,
+}: PayExpenseDialogProps) {
  const { payExpense } = useExpensesContext();
  const amountInputRef = useRef<HTMLInputElement | null>(null);

@@ -94,11 +98,18 @@ export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDial
        <div className="flex flex-col gap-1 rounded-lg bg-muted px-3 py-2 text-sm">
          <span className="font-medium">{expense.description}</span>
          <span className="text-muted-foreground">
-            Monto original: ${Number(expense.amount).toLocaleString("es-AR", { minimumFractionDigits: 2 })}
+            Monto original: $
+            {Number(expense.amount).toLocaleString("es-AR", {
+              minimumFractionDigits: 2,
+            })}
          </span>
        </div>

-        <form id="pay-form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+        <form
+          id="pay-form"
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col gap-4"
+        >
          <div className="flex flex-col gap-1.5">
            <label htmlFor="amountPayed" className="text-sm font-medium">
              Monto pagado
@@ -116,14 +127,14 @@ export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDial
              className="h-8 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
            />
            {errors.amountPayed && (
-              <span className="text-xs text-destructive">{errors.amountPayed.message}</span>
+              <span className="text-xs text-destructive">
+                {errors.amountPayed.message}
+              </span>
            )}
          </div>

          <div className="flex flex-col gap-1.5">
-            <label className="text-sm font-medium">
-              Fecha de pago
-            </label>
+            <span className="text-sm font-medium">Fecha de pago</span>
            <Controller
              control={control}
              name="paymentDate"
@@ -136,13 +147,19 @@ export function PayExpenseDialog({ expense, open, onOpenChange }: PayExpenseDial
              )}
            />
            {errors.paymentDate && (
-              <span className="text-xs text-destructive">{errors.paymentDate.message}</span>
+              <span className="text-xs text-destructive">
+                {errors.paymentDate.message}
+              </span>
            )}
          </div>
        </form>

        <ResponsiveDialogFooter>
-          <Button variant="outline" onClick={() => handleClose(false)} disabled={isSubmitting}>
+          <Button
+            variant="outline"
+            onClick={() => handleClose(false)}
+            disabled={isSubmitting}
+          >
            Cancelar
          </Button>
          <Button type="submit" form="pay-form" disabled={isSubmitting}>
--- a/apps/frontend/src/features/expenses/components/PeriodicExpenseForm.tsx
+++ b/apps/frontend/src/features/expenses/components/PeriodicExpenseForm.tsx
@@ -1,8 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import type { PeriodicExpense } from "@/lib/api";
 import { Button } from "@/components/ui/button";
+import type { PeriodicExpense } from "@/lib/api";

 const months = [
  { value: 1, label: "Ene" },
@@ -20,8 +20,15 @@ const months = [
 ];

 const periodicExpenseFormSchema = z.object({
-  description: z.string().min(1, "La descripción es obligatoria").max(50, "Máximo 50 caracteres"),
-  defaultDueDay: z.number().int().min(1, "Día entre 1 y 31").max(31, "Día entre 1 y 31"),
+  description: z
+    .string()
+    .min(1, "La descripción es obligatoria")
+    .max(50, "Máximo 50 caracteres"),
+  defaultDueDay: z
+    .number()
+    .int()
+    .min(1, "Día entre 1 y 31")
+    .max(31, "Día entre 1 y 31"),
  defaultAmount: z.number().positive("El monto debe ser mayor a 0"),
  periods: z.array(z.number()).min(1, "Seleccioná al menos un mes"),
 });
@@ -34,7 +41,11 @@ interface PeriodicExpenseFormProps {
  onCancel: () => void;
 }

-export function PeriodicExpenseForm({ initialData, onSubmit, onCancel }: PeriodicExpenseFormProps) {
+export function PeriodicExpenseForm({
+  initialData,
+  onSubmit,
+  onCancel,
+}: PeriodicExpenseFormProps) {
  const {
    register,
    handleSubmit,
@@ -62,9 +73,15 @@ export function PeriodicExpenseForm({ initialData, onSubmit, onCancel }: Periodi

  function toggleMonth(month: number) {
    if (selectedPeriods.includes(month)) {
-      setValue("periods", selectedPeriods.filter((m) => m !== month), { shouldValidate: true });
+      setValue(
+        "periods",
+        selectedPeriods.filter((m) => m !== month),
+        { shouldValidate: true },
+      );
    } else {
-      setValue("periods", [...selectedPeriods, month], { shouldValidate: true });
+      setValue("periods", [...selectedPeriods, month], {
+        shouldValidate: true,
+      });
    }
  }

@@ -81,7 +98,9 @@ export function PeriodicExpenseForm({ initialData, onSubmit, onCancel }: Periodi
          className="h-8 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
        />
        {errors.description && (
-          <span className="text-xs text-destructive">{errors.description.message}</span>
+          <span className="text-xs text-destructive">
+            {errors.description.message}
+          </span>
        )}
      </div>

@@ -100,7 +119,9 @@ export function PeriodicExpenseForm({ initialData, onSubmit, onCancel }: Periodi
            className="h-8 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
          />
          {errors.defaultAmount && (
-            <span className="text-xs text-destructive">{errors.defaultAmount.message}</span>
+            <span className="text-xs text-destructive">
+              {errors.defaultAmount.message}
+            </span>
          )}
        </div>

@@ -117,14 +138,16 @@ export function PeriodicExpenseForm({ initialData, onSubmit, onCancel }: Periodi
            className="h-8 rounded-lg border border-input bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
          />
          {errors.defaultDueDay && (
-            <span className="text-xs text-destructive">{errors.defaultDueDay.message}</span>
+            <span className="text-xs text-destructive">
+              {errors.defaultDueDay.message}
+            </span>
          )}
        </div>
      </div>

      <div className="flex flex-col gap-1.5">
        <div className="flex items-center justify-between">
-          <label className="text-sm font-medium">Meses de aplicación</label>
+          <span className="text-sm font-medium">Meses de aplicación</span>
          <div className="flex gap-2">
            <button
              type="button"
@@ -162,13 +185,20 @@ export function PeriodicExpenseForm({ initialData, onSubmit, onCancel }: Periodi
          ))}
        </div>
        {errors.periods && (
-          <span className="text-xs text-destructive">{errors.periods.message}</span>
+          <span className="text-xs text-destructive">
+            {errors.periods.message}
+          </span>
        )}
        <input type="hidden" {...register("periods")} />
      </div>

      <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-2">
-        <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isSubmitting}
+        >
          Cancelar
        </Button>
        <Button type="submit" disabled={isSubmitting}>
--- a/apps/frontend/src/features/expenses/components/PeriodicExpensesTabContent.tsx
+++ b/apps/frontend/src/features/expenses/components/PeriodicExpensesTabContent.tsx
@@ -1,18 +1,18 @@
-import { useState, useRef } from "react";
-import { useExpensesContext } from "../ExpensesProvider";
-import { PeriodicExpensesTable } from "./PeriodicExpensesTable";
-import { PeriodicExpenseForm } from "./PeriodicExpenseForm";
-import { GenerateCurrentMonthDialog } from "./GenerateCurrentMonthDialog";
+import { Plus, Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
 import {
  ResponsiveDialog,
  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
  ResponsiveDialogHeader,
  ResponsiveDialogTitle,
-  ResponsiveDialogDescription,
 } from "@/components/ui/responsive-dialog";
-import { Button } from "@/components/ui/button";
-import { Plus, Upload } from "lucide-react";
-import type { PeriodicExpense, ImportResult } from "@/lib/api";
+import type { ImportResult, PeriodicExpense } from "@/lib/api";
+import { useExpensesContext } from "../ExpensesProvider";
+import { GenerateCurrentMonthDialog } from "./GenerateCurrentMonthDialog";
+import { PeriodicExpenseForm } from "./PeriodicExpenseForm";
+import { PeriodicExpensesTable } from "./PeriodicExpensesTable";

 export function PeriodicExpensesTabContent() {
  const {
@@ -53,7 +53,12 @@ export function PeriodicExpensesTabContent() {
    setEditingItem(null);
  }

-  async function handleSubmit(data: { description: string; defaultDueDay: number; defaultAmount: number; periods: number[] }) {
+  async function handleSubmit(data: {
+    description: string;
+    defaultDueDay: number;
+    defaultAmount: number;
+    periods: number[];
+  }) {
    if (editingItem) {
      await updatePeriodicExpense(editingItem.id, data);
    } else {
@@ -97,7 +102,12 @@ export function PeriodicExpensesTabContent() {
          Administrá tus gastos recurrentes.
        </p>
        <div className="grid grid-cols-2 gap-2 sm:flex">
-          <Button onClick={() => setImportDialogOpen(true)} variant="outline" size="sm" className="min-w-0">
+          <Button
+            onClick={() => setImportDialogOpen(true)}
+            variant="outline"
+            size="sm"
+            className="min-w-0"
+          >
            <Upload className="size-4" />
            <span className="truncate">Importar</span>
          </Button>
@@ -135,23 +145,31 @@ export function PeriodicExpensesTabContent() {

      <GenerateCurrentMonthDialog
        open={generateDialog.open}
-        onOpenChange={(open) => setGenerateDialog((prev) => ({ ...prev, open }))}
+        onOpenChange={(open) =>
+          setGenerateDialog((prev) => ({ ...prev, open }))
+        }
        description={generateDialog.description}
        onConfirm={handleConfirmGenerate}
        onSkip={handleSkipGenerate}
      />

-      <ResponsiveDialog open={importDialogOpen} onOpenChange={(open) => {
-        setImportDialogOpen(open);
-        if (!open) {
-          setImportResult(null);
-        }
-      }}>
+      <ResponsiveDialog
+        open={importDialogOpen}
+        onOpenChange={(open) => {
+          setImportDialogOpen(open);
+          if (!open) {
+            setImportResult(null);
+          }
+        }}
+      >
        <ResponsiveDialogContent>
          <ResponsiveDialogHeader>
-            <ResponsiveDialogTitle>Importar gastos periódicos</ResponsiveDialogTitle>
+            <ResponsiveDialogTitle>
+              Importar gastos periódicos
+            </ResponsiveDialogTitle>
            <ResponsiveDialogDescription>
-              Seleccioná un archivo CSV (delimitado por pipes) para importar gastos periódicos.
+              Seleccioná un archivo CSV (delimitado por pipes) para importar
+              gastos periódicos.
            </ResponsiveDialogDescription>
          </ResponsiveDialogHeader>

@@ -174,15 +192,20 @@ export function PeriodicExpensesTabContent() {
              </ul>
              {importResult.errors && importResult.errors.length > 0 && (
                <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
-                  <p className="mb-1 text-xs font-medium text-destructive">Errores:</p>
+                  <p className="mb-1 text-xs font-medium text-destructive">
+                    Errores:
+                  </p>
                  <ul className="list-inside list-disc text-xs text-destructive/80">
-                    {importResult.errors.map((err, i) => (
-                      <li key={i}>{err}</li>
+                    {importResult.errors.map((err) => (
+                      <li key={err}>{err}</li>
                    ))}
                  </ul>
                </div>
              )}
-              <Button className="w-full" onClick={() => setImportDialogOpen(false)}>
+              <Button
+                className="w-full"
+                onClick={() => setImportDialogOpen(false)}
+              >
                Cerrar
              </Button>
            </div>
@@ -205,8 +228,15 @@ export function PeriodicExpensesTabContent() {
                    const result = await importPeriodicExpenses(file);
                    setImportResult(result);
                  } catch (err) {
-                    const message = err instanceof Error ? err.message : String(err);
-                    setImportResult({ imported: 0, skipped: 0, skippedNoPeriods: 0, skippedDuplicate: 0, errors: [message] });
+                    const message =
+                      err instanceof Error ? err.message : String(err);
+                    setImportResult({
+                      imported: 0,
+                      skipped: 0,
+                      skippedNoPeriods: 0,
+                      skippedDuplicate: 0,
+                      errors: [message],
+                    });
                  } finally {
                    setImporting(false);
                  }
--- a/apps/frontend/src/features/expenses/components/PeriodicExpensesTable.tsx
+++ b/apps/frontend/src/features/expenses/components/PeriodicExpensesTable.tsx
@@ -1,17 +1,28 @@
-import { useMemo } from "react";
 import {
+  type ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
-  type ColumnDef,
 } from "@tanstack/react-table";
-import type { PeriodicExpense } from "@/lib/api";
-import { Button } from "@/components/ui/button";
 import { Pencil, Trash2 } from "lucide-react";
+import { useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import type { PeriodicExpense } from "@/lib/api";

 const monthLabels = [
-  "", "Ene", "Feb", "Mar", "Abr", "May", "Jun",
-  "Jul", "Ago", "Sep", "Oct", "Nov", "Dic",
+  "",
+  "Ene",
+  "Feb",
+  "Mar",
+  "Abr",
+  "May",
+  "Jun",
+  "Jul",
+  "Ago",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dic",
 ];

 function formatPeriods(periods: number[]): string {
@@ -28,7 +39,11 @@ function formatPeriods(periods: number[]): string {
    if (curr === prev + 1) {
      prev = curr;
    } else {
-      ranges.push(start === prev ? monthLabels[start] : `${monthLabels[start]}-${monthLabels[prev]}`);
+      ranges.push(
+        start === prev
+          ? monthLabels[start]
+          : `${monthLabels[start]}-${monthLabels[prev]}`,
+      );
      start = curr;
      prev = curr;
    }
@@ -43,7 +58,11 @@ interface PeriodicExpensesTableProps {
  onDelete: (id: number) => void;
 }

-export function PeriodicExpensesTable({ data, onEdit, onDelete }: PeriodicExpensesTableProps) {
+export function PeriodicExpensesTable({
+  data,
+  onEdit,
+  onDelete,
+}: PeriodicExpensesTableProps) {
  const columns = useMemo<ColumnDef<PeriodicExpense>[]>(
    () => [
      {
@@ -122,7 +141,10 @@ export function PeriodicExpensesTable({ data, onEdit, onDelete }: PeriodicExpens
              <div className="min-w-0">
                <p className="truncate font-medium">{item.description}</p>
                <p className="mt-1 text-lg font-semibold tabular-nums">
-                  ${Number(item.defaultAmount).toLocaleString("es-AR", { minimumFractionDigits: 2 })}
+                  $
+                  {Number(item.defaultAmount).toLocaleString("es-AR", {
+                    minimumFractionDigits: 2,
+                  })}
                </p>
              </div>
              <div className="flex shrink-0 gap-1">
@@ -148,11 +170,15 @@ export function PeriodicExpensesTable({ data, onEdit, onDelete }: PeriodicExpens
            <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground">
              <div className="rounded-md bg-muted/40 px-2 py-1.5">
                <span className="block">Vence</span>
-                <span className="font-medium text-foreground">Día {item.defaultDueDay}</span>
+                <span className="font-medium text-foreground">
+                  Día {item.defaultDueDay}
+                </span>
              </div>
              <div className="min-w-0 rounded-md bg-muted/40 px-2 py-1.5">
                <span className="block">Meses</span>
-                <span className="block truncate font-medium text-foreground">{formatPeriods(item.periods)}</span>
+                <span className="block truncate font-medium text-foreground">
+                  {formatPeriods(item.periods)}
+                </span>
              </div>
            </div>
          </div>
@@ -174,7 +200,10 @@ export function PeriodicExpensesTable({ data, onEdit, onDelete }: PeriodicExpens
                    key={header.id}
                    className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
                  >
-                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
                  </th>
                ))}
              </tr>
@@ -182,7 +211,10 @@ export function PeriodicExpensesTable({ data, onEdit, onDelete }: PeriodicExpens
          </thead>
          <tbody>
            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className="border-b last:border-0 hover:bg-muted/30">
+              <tr
+                key={row.id}
+                className="border-b last:border-0 hover:bg-muted/30"
+              >
                {row.getVisibleCells().map((cell) => (
                  <td key={cell.id} className="px-3 py-2.5">
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -192,7 +224,10 @@ export function PeriodicExpensesTable({ data, onEdit, onDelete }: PeriodicExpens
            ))}
            {table.getRowModel().rows.length === 0 && (
              <tr>
-                <td colSpan={columns.length} className="px-3 py-8 text-center text-sm text-muted-foreground">
+                <td
+                  colSpan={columns.length}
+                  className="px-3 py-8 text-center text-sm text-muted-foreground"
+                >
                  No hay gastos periódicos todavía.
                </td>
              </tr>