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

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

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>

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>

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

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

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

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

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>