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