feat(expenses): add edit amount and due date for pending expenses

apps/frontend/src/features/expenses/components/ExpensesTable.tsx

@@ -8,6 +8,7 @@ import {
   ChevronsLeftIcon,
   ChevronsRightIcon,
   CircleDollarSign,
+  Pencil,
   SkipBackIcon,
   SkipForwardIcon,
 } from "lucide-react";
@@ -26,6 +27,7 @@ import type { Expense } from "@/lib/api";
 interface ExpensesTableProps {
   data: Expense[];
   onPay: (expense: Expense) => void;
+  onEdit: (expense: Expense) => void;
   page: number;
   total: number;
   pageSize: number;
@@ -70,6 +72,7 @@ function ExpenseStatusBadge({ status }: { status: Expense["status"] }) {
 export function ExpensesTable({
   data,
   onPay,
+  onEdit,
   page,
   total,
   pageSize,
@@ -137,7 +140,15 @@ export function ExpensesTable({
           const expense = row.original;
           if (expense.status === "PAYED") return null;
           return (
-            <div className="flex justify-end">
+            <div className="flex justify-end gap-1">
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => onEdit(expense)}
+              >
+                <Pencil className="size-3.5" />
+                Editar
+              </Button>
               <Button
                 variant="outline"
                 size="xs"
@@ -151,7 +162,7 @@ export function ExpensesTable({
         },
       },
     ],
-    [onPay],
+    [onPay, onEdit],
   );
 
   const table = useReactTable({
@@ -227,15 +238,25 @@ export function ExpensesTable({
               </div>
 
               {expense.status !== "PAYED" && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="shrink-0"
-                  onClick={() => onPay(expense)}
-                >
-                  <CircleDollarSign className="size-3.5" />
-                  Pagar
-                </Button>
+                <div className="flex gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="shrink-0"
+                    onClick={() => onEdit(expense)}
+                  >
+                    <Pencil className="size-3.5" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="shrink-0"
+                    onClick={() => onPay(expense)}
+                  >
+                    <CircleDollarSign className="size-3.5" />
+                    Pagar
+                  </Button>
+                </div>
               )}
             </div>
           </div>