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