Add autocomplete to correction form

frontend/apps/finance/src/features/expense-autocomplete/__tests__/suggestionAutofill.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import type { Tag } from "@/types";
+import { createExpenseSuggestionPatch } from "../suggestionAutofill";
+import type { ExpenseSuggestion } from "../types";
+
+const tags: Tag[] = [
+  {
+    id: "tag-food",
+    name: "Food",
+    isDefault: true,
+    createdAt: "2026-01-01T00:00:00Z",
+    updatedAt: "2026-01-01T00:00:00Z",
+  },
+];
+
+const suggestion: ExpenseSuggestion = {
+  name: "Groceries",
+  amount: 1299,
+  currency: "USD",
+  expenseType: "essentials",
+  tagId: "tag-food",
+  frequency: 7,
+  lastUsedAt: "2026-05-28T19:02:11Z",
+  recencyBucket: "last_7_days",
+  frecencyScore: 42,
+};
+
+describe("createExpenseSuggestionPatch", () => {
+  it("formats suggestion fields for expense forms", () => {
+    expect(createExpenseSuggestionPatch(suggestion, tags)).toEqual({
+      name: "Groceries",
+      amountDollars: "12.99",
+      expenseType: "essentials",
+      tagId: "tag-food",
+    });
+  });
+
+  it("returns a null tagId when the suggestion tag is stale", () => {
+    expect(
+      createExpenseSuggestionPatch(
+        { ...suggestion, tagId: "deleted-tag" },
+        tags,
+      ),
+    ).toEqual({
+      name: "Groceries",
+      amountDollars: "12.99",
+      expenseType: "essentials",
+      tagId: null,
+    });
+  });
+});

frontend/apps/finance/src/features/new-expense/components/ExpenseNameCombobox.tsx → frontend/apps/finance/src/features/expense-autocomplete/components/ExpenseNameCombobox.tsx

@@ -14,17 +14,21 @@ import { useExpenseAutocomplete } from "../hooks/useExpenseAutocomplete";
 import type { ExpenseSuggestion } from "../types";
 
 export interface ExpenseNameComboboxProps {
+  id?: string;
   value: string;
   onValueChange: (value: string) => void;
   onSelectSuggestion: (suggestion: ExpenseSuggestion) => void;
   error?: string;
+  placeholder?: string;
 }
 
 export function ExpenseNameCombobox({
+  id = "expense-name",
   value,
   onValueChange,
   onSelectSuggestion,
   error,
+  placeholder = "e.g. Grocery shopping",
 }: ExpenseNameComboboxProps) {
   const { state, actions } = useExpenseAutocomplete();
   const { loadMore, setQuery } = actions;
@@ -51,10 +55,10 @@ export function ExpenseNameCombobox({
   return (
     <Combobox open={hasTypedInput && isOpen} onOpenChange={setIsOpen}>
       <ComboboxInput
-        id="expense-name"
+        id={id}
         type="text"
         autoComplete="off"
-        placeholder="e.g. Grocery shopping"
+        placeholder={placeholder}
         value={value}
         onChange={(event) => handleValueChange(event.target.value)}
         aria-invalid={!!error}

frontend/apps/finance/src/features/expense-autocomplete/index.ts

@@ -0,0 +1,10 @@
+export { ExpenseNameCombobox } from "./components/ExpenseNameCombobox";
+export { useExpenseAutocomplete } from "./hooks/useExpenseAutocomplete";
+export { createExpenseSuggestionPatch } from "./suggestionAutofill";
+export type {
+  ExpenseAutocompleteActions,
+  ExpenseAutocompleteState,
+  ExpenseSuggestion,
+  ExpenseSuggestionPatch,
+  ExpenseSuggestionsResponse,
+} from "./types";

frontend/apps/finance/src/features/expense-autocomplete/suggestionAutofill.ts

@@ -0,0 +1,20 @@
+import type { Tag } from "../../types";
+import type { ExpenseSuggestion, ExpenseSuggestionPatch } from "./types";
+
+function formatMinorUnits(amount: number): string {
+  return (amount / 100).toFixed(2);
+}
+
+export function createExpenseSuggestionPatch(
+  suggestion: ExpenseSuggestion,
+  tags: Tag[],
+): ExpenseSuggestionPatch {
+  const hasValidTag = tags.some((tag) => tag.id === suggestion.tagId);
+
+  return {
+    name: suggestion.name,
+    amountDollars: formatMinorUnits(suggestion.amount),
+    expenseType: suggestion.expenseType,
+    tagId: hasValidTag ? suggestion.tagId : null,
+  };
+}

frontend/apps/finance/src/features/new-expense/types.ts → frontend/apps/finance/src/features/expense-autocomplete/types.ts

@@ -1,5 +1,12 @@
 import type { ExpenseType } from "@gofin/core";
 
+export interface ExpenseSuggestionPatch {
+  name: string;
+  amountDollars: string;
+  expenseType: ExpenseType;
+  tagId: string | null;
+}
+
 export interface ExpenseSuggestion {
   name: string;
   amount: number;

frontend/apps/finance/src/features/expense-detail/ExpenseDetailModal.tsx

@@ -121,7 +121,7 @@ function CorrectionFormContainer({
   submitting: boolean;
   submitError: string | null;
 }) {
-  const { state, actions } = useCorrectionForm(expense, onSubmit);
+  const { state, actions } = useCorrectionForm(expense, onSubmit, tags);
 
   return (
     <CorrectionForm
@@ -134,6 +134,7 @@ function CorrectionFormContainer({
       onCancel={onCancel}
       onSubmit={actions.handleSubmit}
       onFieldChange={actions.setField}
+      onSelectSuggestion={actions.applySuggestion}
     />
   );
 }

frontend/apps/finance/src/features/expense-detail/__tests__/expense-detail-modal.test.tsx

@@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router";
 import { ExpenseDetailModal } from "@/features/expense-detail";
 import type { Expense, Tag } from "@/types";
+import type { ExpenseSuggestionsResponse } from "../../expense-autocomplete";
 
 const mockFetch = vi.fn();
 global.fetch = mockFetch;
@@ -92,6 +93,36 @@ function mockExpenseAndHistory(
   });
 }
 
+function mockExpenseSuggestions(
+  overrides: Partial<ExpenseSuggestionsResponse> = {},
+) {
+  mockFetch.mockResolvedValueOnce({
+    ok: true,
+    status: 200,
+    json: () =>
+      Promise.resolve({
+        data: [
+          {
+            name: "Train Pass",
+            amount: 1234,
+            currency: "USD",
+            expenseType: "desires",
+            tagId: "tag-transport",
+            frequency: 4,
+            lastUsedAt: "2026-05-28T19:02:11Z",
+            recencyBucket: "last_7_days",
+            frecencyScore: 22,
+          },
+        ],
+        total: 1,
+        page: 1,
+        pageSize: 50,
+        hasMore: false,
+        ...overrides,
+      }),
+  });
+}
+
 function mockCorrectionSuccess() {
   mockFetch.mockResolvedValueOnce({
     ok: true,
@@ -284,6 +315,8 @@ describe("ExpenseDetailModal", () => {
         ).toBeInTheDocument();
       });
 
+      mockExpenseSuggestions();
+
       await user.click(screen.getByText("Correct This Expense"));
 
       expect(screen.getByText("Correct Expense")).toBeInTheDocument();
@@ -301,6 +334,8 @@ describe("ExpenseDetailModal", () => {
         ).toBeInTheDocument();
       });
 
+      mockExpenseSuggestions();
+
       await user.click(screen.getByText("Correct This Expense"));
 
       const nameInput = screen.getByLabelText("Name") as HTMLInputElement;
@@ -312,6 +347,44 @@ describe("ExpenseDetailModal", () => {
       expect(dateInput.value).toBe("2026-05-02");
     });
 
+    it("autofills correction fields from an explicit expense suggestion selection", async () => {
+      mockExpenseAndHistory(activeExpense);
+      const user = userEvent.setup();
+      renderModal();
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Correct This Expense"),
+        ).toBeInTheDocument();
+      });
+
+      mockExpenseSuggestions();
+
+      await user.click(screen.getByText("Correct This Expense"));
+
+      const nameInput = screen.getByLabelText("Name") as HTMLInputElement;
+      await user.clear(nameInput);
+      await user.type(nameInput, "tra");
+
+      await waitFor(() => {
+        expect(screen.getByText("Train Pass")).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText("Train Pass"));
+
+      expect(nameInput.value).toBe("Train Pass");
+      expect((screen.getByLabelText("Amount") as HTMLInputElement).value).toBe(
+        "12.34",
+      );
+      expect(screen.getByLabelText("desires")).toBeChecked();
+      expect((screen.getByLabelText("Tag") as HTMLSelectElement).value).toBe(
+        "tag-transport",
+      );
+      expect((screen.getByLabelText("Date") as HTMLInputElement).value).toBe(
+        "2026-05-02",
+      );
+    });
+
     it("submits correction and calls onCorrected", async () => {
       mockExpenseAndHistory(activeExpense);
       const user = userEvent.setup();
@@ -323,6 +396,8 @@ describe("ExpenseDetailModal", () => {
         ).toBeInTheDocument();
       });
 
+      mockExpenseSuggestions();
+
       await user.click(screen.getByText("Correct This Expense"));
 
       // Modify the name
@@ -353,6 +428,8 @@ describe("ExpenseDetailModal", () => {
         ).toBeInTheDocument();
       });
 
+      mockExpenseSuggestions();
+
       await user.click(screen.getByText("Correct This Expense"));
       expect(screen.getByText("Correct Expense")).toBeInTheDocument();
 
@@ -371,6 +448,8 @@ describe("ExpenseDetailModal", () => {
         ).toBeInTheDocument();
       });
 
+      mockExpenseSuggestions();
+
       await user.click(screen.getByText("Correct This Expense"));
 
       // Clear the name field
@@ -393,6 +472,8 @@ describe("ExpenseDetailModal", () => {
         ).toBeInTheDocument();
       });
 
+      mockExpenseSuggestions();
+
       await user.click(screen.getByText("Correct This Expense"));
 
       // Mock a 409 response
@@ -426,6 +507,8 @@ describe("ExpenseDetailModal", () => {
         ).toBeInTheDocument();
       });
 
+      mockExpenseSuggestions();
+
       await user.click(screen.getByText("Correct This Expense"));
 
       // Mock a 403 response

frontend/apps/finance/src/features/expense-detail/__tests__/useCorrectionForm.test.ts

@@ -1,7 +1,37 @@
 import { describe, it, expect, vi } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 import { useCorrectionForm } from "../hooks/useCorrectionForm";
-import type { Expense } from "@/types";
+import type { Expense, Tag } from "@/types";
+import type { ExpenseSuggestion } from "../../expense-autocomplete";
+
+const mockTags: Tag[] = [
+  {
+    id: "tag-food",
+    name: "Food",
+    isDefault: true,
+    createdAt: "2026-01-01T00:00:00Z",
+    updatedAt: "2026-01-01T00:00:00Z",
+  },
+  {
+    id: "tag-transport",
+    name: "Transport",
+    isDefault: true,
+    createdAt: "2026-01-01T00:00:00Z",
+    updatedAt: "2026-01-01T00:00:00Z",
+  },
+];
+
+const mockSuggestion: ExpenseSuggestion = {
+  name: "Train Pass",
+  amount: 1234,
+  currency: "USD",
+  expenseType: "desires",
+  tagId: "tag-transport",
+  frequency: 4,
+  lastUsedAt: "2026-05-28T19:02:11Z",
+  recencyBucket: "last_7_days",
+  frecencyScore: 22,
+};
 
 const mockExpense: Expense = {
   id: "exp-1",
@@ -127,6 +157,46 @@ describe("useCorrectionForm", () => {
     });
   });
 
+  describe("applySuggestion", () => {
+    it("updates name, amount, type, and valid tag from a selected suggestion", () => {
+      const onSubmit = vi.fn();
+      const { result } = renderHook(() =>
+        useCorrectionForm(mockExpense, onSubmit, mockTags),
+      );
+
+      act(() => {
+        result.current.actions.applySuggestion(mockSuggestion);
+      });
+
+      expect(result.current.state.fields).toEqual({
+        name: "Train Pass",
+        amountDollars: "12.34",
+        expenseType: "desires",
+        tagId: "tag-transport",
+        expenseDate: "2026-05-02",
+      });
+    });
+
+    it("keeps the current tag when the selected suggestion tag is stale", () => {
+      const onSubmit = vi.fn();
+      const { result } = renderHook(() =>
+        useCorrectionForm(mockExpense, onSubmit, mockTags),
+      );
+
+      act(() => {
+        result.current.actions.applySuggestion({
+          ...mockSuggestion,
+          tagId: "deleted-tag",
+        });
+      });
+
+      expect(result.current.state.fields.tagId).toBe("tag-food");
+      expect(result.current.state.fields.name).toBe("Train Pass");
+      expect(result.current.state.fields.amountDollars).toBe("12.34");
+      expect(result.current.state.fields.expenseType).toBe("desires");
+    });
+  });
+
   describe("handleSubmit", () => {
     it("prevents default form event", () => {
       const onSubmit = vi.fn();