feat: add transferences to ui

Author: richardhapb

src/api/server.py

@@ -27,6 +27,8 @@
     CategoryRead,
     Expense as DBExpense,
     ExpenseRead,
+    Transference as DBTransference,
+    TransferenceRead,
 )
 from db.models import (
     ExpenseCreate,
@@ -133,6 +135,21 @@ def serialize_expense(expense: DBExpense, category: Category) -> ExpenseRead:
     )
 
 
+def serialize_transference(transference: DBTransference) -> TransferenceRead:
+    return TransferenceRead(
+        id=transference.id,
+        user_id=transference.user_id,
+        recipient=transference.recipient,
+        amount=transference.amount,
+        currency=transference.currency,
+        category=transference.category,
+        category_slug=transference.category.value,
+        category_name=transference.category.value.replace("_", " ").title(),
+        date=transference.date,
+        description=transference.description,
+    )
+
+
 def require_user_id(user: User) -> int:
     if user.id is None:
         raise HTTPException(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail="Authenticated user is invalid")
@@ -396,6 +413,32 @@ def delete_expense(
     return JSONResponse(content={"msg": "OK"})
 
 
+@app.get("/transferences", response_model=list[TransferenceRead])
+def get_transferences(
+    current_user: User = Depends(get_current_user), session: Session = Depends(get_session)
+) -> list[TransferenceRead]:
+    """Get all transferences for the current user."""
+    user_id = require_user_id(current_user)
+    transferences = session.exec(select(DBTransference).where(DBTransference.user_id == user_id)).all()
+    return [serialize_transference(t) for t in transferences]
+
+
+@app.delete("/transferences/{id}")
+def delete_transference(
+    id: int, current_user: User = Depends(get_current_user), session: Session = Depends(get_session)
+) -> JSONResponse:
+    """Delete a transference for the current user."""
+    user_id = require_user_id(current_user)
+    transference = session.exec(
+        select(DBTransference).where(DBTransference.user_id == user_id, DBTransference.id == id)
+    ).first()
+    if not transference:
+        raise HTTPException(detail=f"Transference not found: {id}", status_code=status.HTTP_404_NOT_FOUND)
+    session.delete(transference)
+    session.commit()
+    return JSONResponse(content={"msg": "OK"})
+
+
 @app.post("/email/scan", status_code=status.HTTP_202_ACCEPTED)
 def trigger_manual_email_scan(current_user: User = Depends(get_current_user)) -> JSONResponse:
     """

src/db/models.py

@@ -172,6 +172,19 @@ class ExpenseRead(SQLModel):
     description: str | None = None
 
 
+class TransferenceRead(SQLModel):
+    id: int
+    user_id: int
+    recipient: str
+    amount: float
+    currency: Currency
+    category: ExpenseCategory
+    category_slug: str
+    category_name: str
+    date: datetime
+    description: str | None = None
+
+
 class UserCreate(SQLModel):
     username: str
     email: EmailStr

src/parsers/regex.json

@@ -33,7 +33,7 @@
             "amountWithdrawal": "Monto\\s+>\\s+\\$([\\d.]+)",
             "date": "\\d{1,2}[-/]\\d{1,2}[-/]\\d{4}",
             "commerce": "Compa[^>]+>\\s*([A-Za-z0-9\\s]+?)\\s*=09",
-            "transferenceRecipient": "Datos de destino[\\s\\S]*?Nombre\\s+([A-Za-z\\s]+?)\\s+RUT",
+            "transferenceRecipient": "Datos de destino[\\s\\S]*?Nombre\\s+([A-Za-zÁÉÍÓÚáéíóúÑñ\\s]+?)\\s+RUT",
             "transferenceMatches": ""
         }
     }

web/app/components/expenses/ExpenseList.tsx

@@ -1,10 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import { expensesApi } from '../../lib/api';
+import { expensesApi, transferencesApi } from '../../lib/api';
 import { DEFAULT_LOCALE, getExpenseCategoryName } from '../../lib/categories';
-import type { Expense } from '../../types/models';
+import type { Expense, Transference } from '../../types/models';
 import { useMemo } from 'react';
 import { queryClient } from '../../lib/queryClient';
 
+type Transaction =
+  | (Expense & { type: 'expense' })
+  | (Transference & { type: 'transference' });
+
 const CATEGORY_COLORS: Record<string, string> = {
   FOOD: 'bg-orange-500/20 text-orange-400',
   EXTERNAL_FOOD: 'bg-orange-500/20 text-orange-400',
@@ -22,31 +26,54 @@ const CATEGORY_COLORS: Record<string, string> = {
   ONLINE: 'bg-indigo-500/20 text-indigo-400',
   TRAVEL: 'bg-teal-500/20 text-teal-400',
   SPORTS: 'bg-lime-500/20 text-lime-400',
+  LOAN: 'bg-yellow-500/20 text-yellow-400',
+  FAMILY: 'bg-rose-500/20 text-rose-400',
   GENERAL: 'bg-slate-500/20 text-slate-400',
 };
 
-async function handleDelete(expenseId: number) {
+async function handleDeleteExpense(expenseId: number) {
   if (!window.confirm('Quieres eliminar este gasto?')) return;
   try {
-    await expensesApi.delete(expenseId); 
+    await expensesApi.delete(expenseId);
     queryClient.invalidateQueries({ queryKey: ['expenses'] });
   } catch (error) {
     console.error('Failed to delete expense:', error);
     alert('No se pudo eliminar el gasto. Intentalo de nuevo.');
   }
 }
 
+async function handleDeleteTransference(transferenceId: number) {
+  if (!window.confirm('Quieres eliminar esta transferencia?')) return;
+  try {
+    await transferencesApi.delete(transferenceId);
+    queryClient.invalidateQueries({ queryKey: ['transferences'] });
+  } catch (error) {
+    console.error('Failed to delete transference:', error);
+    alert('No se pudo eliminar la transferencia. Intentalo de nuevo.');
+  }
+}
+
 export function ExpenseList() {
-  const { data: expenses = [], isLoading, error } = useQuery({
+  const { data: expenses = [], isLoading: loadingExpenses, error: expensesError } = useQuery({
     queryKey: ['expenses'],
     queryFn: expensesApi.getAll,
   });
 
-  // Derived + memoized sorted list (newest first)
-  const sortedExpenses = useMemo(() => {
-    if (!expenses.length) return [];
-    return [...expenses].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-  }, [expenses]);
+  const { data: transferences = [], isLoading: loadingTransferences, error: transferencesError } = useQuery({
+    queryKey: ['transferences'],
+    queryFn: transferencesApi.getAll,
+  });
+
+  const isLoading = loadingExpenses || loadingTransferences;
+  const error = expensesError || transferencesError;
+
+  // Combine and sort all transactions (newest first)
+  const sortedTransactions = useMemo(() => {
+    const expensesWithType: Transaction[] = expenses.map((e) => ({ ...e, type: 'expense' as const }));
+    const transferencesWithType: Transaction[] = transferences.map((t) => ({ ...t, type: 'transference' as const }));
+    const all = [...expensesWithType, ...transferencesWithType];
+    return all.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  }, [expenses, transferences]);
 
   const formatCurrency = (amount: number, currency: string) => {
     const normalizedCurrency = currency.toUpperCase();
@@ -91,56 +118,81 @@ export function ExpenseList() {
     );
   }
 
-  if (sortedExpenses.length === 0) {
+  if (sortedTransactions.length === 0) {
     return (
       <div className="bg-gray-800 rounded-lg border border-gray-700 p-8">
         <div className="text-center text-gray-500">
-          Aun no hay gastos. Agrega el primero o conecta Gmail para importarlos automaticamente.
+          Aun no hay transacciones. Agrega la primera o conecta Gmail para importarlas automaticamente.
         </div>
       </div>
     );
   }
 
+  const getTransactionTitle = (transaction: Transaction) => {
+    if (transaction.type === 'expense') {
+      return transaction.commerce;
+    }
+    return transaction.recipient || 'Transferencia';
+  };
+
+  const getTransactionCategoryName = (transaction: Transaction) => {
+    if (transaction.type === 'expense') {
+      return getExpenseCategoryName(transaction);
+    }
+    return transaction.category_name;
+  };
+
   return (
     <div className="bg-gray-800 rounded-lg border border-gray-700">
       <div className="p-4 border-b border-gray-700">
         <h2 className="text-lg font-semibold text-white">Transacciones recientes</h2>
-        <p className="text-sm text-gray-400">{sortedExpenses.length} total</p>
+        <p className="text-sm text-gray-400">{sortedTransactions.length} total</p>
       </div>
 
-      <div className="divide-y divide-gray-700 max-h-125 overflow-y-auto"> {/* ← fixed height example */}
-        {sortedExpenses.map((expense: Expense) => (
+      <div className="divide-y divide-gray-700 max-h-125 overflow-y-auto">
+        {sortedTransactions.map((transaction: Transaction) => (
           <div
-            key={expense.id}
+            key={`${transaction.type}-${transaction.id}`}
             className="p-4 hover:bg-gray-750 transition-colors"
           >
             <div className="flex justify-between items-start gap-3">
               <div className="min-w-0 flex-1">
-                <h3 className="font-medium text-white truncate">{expense.commerce}</h3>
+                <div className="flex items-center gap-2">
+                  <h3 className="font-medium text-white truncate">{getTransactionTitle(transaction)}</h3>
+                  {transaction.type === 'transference' && (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400">
+                      Transferencia
+                    </span>
+                  )}
+                </div>
                 <div className="flex items-center gap-2 mt-1">
                   <span
-                    className={`text-xs px-2 py-0.5 rounded-full ${getCategoryStyle(expense.category_slug)}`}
+                    className={`text-xs px-2 py-0.5 rounded-full ${getCategoryStyle(transaction.category_slug)}`}
                   >
-                    {getExpenseCategoryName(expense)}
+                    {getTransactionCategoryName(transaction)}
                   </span>
-                  <span className="text-xs text-gray-500">{formatDate(expense.date)}</span>
+                  <span className="text-xs text-gray-500">{formatDate(transaction.date)}</span>
                 </div>
-                {expense.description && (
-                  <p className="text-sm text-gray-500 mt-1 truncate">{expense.description}</p>
+                {transaction.description && (
+                  <p className="text-sm text-gray-500 mt-1 truncate">{transaction.description}</p>
                 )}
               </div>
 
               <div className="text-right shrink-0">
                 <p className="font-semibold text-white">
-                  {formatCurrency(expense.amount, expense.currency)}
+                  {formatCurrency(transaction.amount, transaction.currency)}
                 </p>
-                <p className="text-xs text-gray-500">{expense.currency.toUpperCase()}</p>
+                <p className="text-xs text-gray-500">{transaction.currency.toUpperCase()}</p>
               </div>
 
               <button
-                onClick={() => handleDelete(expense.id)}
+                onClick={() =>
+                  transaction.type === 'expense'
+                    ? handleDeleteExpense(transaction.id)
+                    : handleDeleteTransference(transaction.id)
+                }
                 className="text-red-400 hover:text-red-300 transition-colors"
-                title="Eliminar gasto"
+                title={transaction.type === 'expense' ? 'Eliminar gasto' : 'Eliminar transferencia'}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

web/app/lib/api.ts

@@ -6,6 +6,7 @@ import type {
   EmailScanResponse,
   Expense,
   GenericResponse,
+  Transference,
   User,
   UserLoginResponse,
   UserUpdate,
@@ -101,6 +102,19 @@ export const expensesApi = {
   },
 };
 
+// Transferences API
+export const transferencesApi = {
+  getAll: async (): Promise<Transference[]> => {
+    const response = await api.get<Transference[]>("/transferences");
+    return response.data;
+  },
+
+  delete: async (id: Number): Promise<GenericResponse> => {
+    const response = await api.delete<GenericResponse>(`/transferences/${id}`);
+    return response.data;
+  },
+};
+
 export const categoriesApi = {
   getAll: async (): Promise<Category[]> => {
     const response = await api.get<Category[]>("/categories");

web/app/types/models.ts

@@ -62,6 +62,20 @@ export interface CreateExpenseRequest {
   description?: string;
 }
 
+// Transference types
+export interface Transference {
+  id: number;
+  user_id: number;
+  recipient: string;
+  amount: number;
+  currency: string;
+  category: string;
+  category_slug: string;
+  category_name: string;
+  date: string;
+  description?: string;
+}
+
 export interface Category {
   id: number;
   slug: string;