feat: add match rules

This adds support for basic match rule editing. Comfort features like re-parsing transactions during the import and adding match rules from a running import will be added at a later date.

cypress/e2e/matchRules.cy.ts

@@ -0,0 +1,62 @@
+import { createAccount, createBudget } from '../support/setup'
+
+describe('Account: Creation', () => {
+  beforeEach(() => {
+    // prepare & select a budget
+    cy.wrap(createBudget({ name: 'Match Rule Test' })).then(budget => {
+      cy.wrap(budget).as('budget')
+      cy.visit('/').get('li').contains('Open').click()
+    })
+  })
+
+  it('can edit match rules', function () {
+    cy.wrap(
+      Cypress.Promise.all([
+        createAccount(
+          { name: 'The Grocery Store', external: true },
+          this.budget
+        ),
+        createAccount(
+          { name: 'My Favorite Restaurant', external: true },
+          this.budget
+        ),
+      ])
+    )
+
+    cy.contains('Settings').click()
+    cy.getByTitle('Edit match rules').first().click()
+    cy.awaitLoading()
+
+    cy.getByTitle('Add match rule').first().click()
+    cy.getInputFor('Match').first().type('Restaurant*')
+    cy.getAutocompleteFor('Account').first().type('My Favorite')
+    cy.contains('My Favorite Rest').click()
+
+    cy.getByTitle('Add match rule').first().click()
+    cy.getInputFor('Match').first().type('Groceries*')
+    cy.getAutocompleteFor('Account').first().type('Grocery')
+    cy.contains('The Grocery').click()
+
+    cy.getByTitle('Save').click()
+    cy.contains('Changes saved successfully')
+
+    // FIXME: Does not click/delete yet
+    cy.contains('Delete').first().click({ force: true })
+    cy.contains('Groceries*').should('not.exist')
+
+    cy.getByTitle('Save').click()
+    cy.contains('Changes saved successfully')
+
+    cy.reload()
+    // We need to wait for a second so that the awaitLoading can actually
+    // see the loading spinner and wait for it to disappear
+    cy.wait(1000)
+    cy.awaitLoading()
+
+    // Verify that only one match rule exists
+    cy.getInputFor('Match').should('have.length', 1)
+
+    // Verify that correct match rule still exists
+    cy.getInputFor('Match').first().should('have.value', 'Restaurant*')
+  })
+})

package.json

@@ -12,6 +12,7 @@
     "@types/node": "22.13.1",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
+    "@types/sortablejs": "^1.15.8",
     "@typescript-eslint/eslint-plugin": "8.23.0",
     "@typescript-eslint/parser": "8.23.0",
     "@vitejs/plugin-react": "4.3.4",
@@ -36,7 +37,9 @@
     "react-dom": "18.3.1",
     "react-i18next": "15.3.0",
     "react-router-dom": "6.28.2",
+    "react-sortablejs": "^6.1.4",
     "sass": "1.84.0",
+    "sortablejs": "^1.15.6",
     "stream-browserify": "3.0.0",
     "tailwindcss": "3.4.17",
     "typescript": "5.7.3",

src/App.tsx

@@ -13,6 +13,7 @@ import BudgetForm from './components/BudgetForm'
 import OwnAccountsList from './components/OwnAccountsList'
 import ExternalAccountsList from './components/ExternalAccountsList'
 import AccountForm from './components/AccountForm'
+import MatchRuleList from './components/MatchRuleList'
 import TransactionsList from './components/TransactionsList'
 import TransactionForm from './components/TransactionForm'
 import EnvelopesList from './components/EnvelopesList'
@@ -195,6 +196,16 @@ const App = () => {
                   />
                 }
               />
+
+              <Route
+                path="/settings/match-rules"
+                element={
+                  <MatchRuleList
+                    budget={budget}
+                    setNotification={setNotification}
+                  />
+                }
+              />
             </>
           )}
           <Route path="*" element={<Navigate to="/" replace />} />

src/components/Autocomplete.tsx

@@ -4,6 +4,7 @@ import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
 import { Combobox } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import { ArchiveBoxIcon } from '@heroicons/react/24/outline'
+import { valueOrDefault } from '../lib/prop-helper'
 
 function classNames(...classes: (string | boolean)[]) {
   return classes.filter(Boolean).join(' ')
@@ -24,13 +25,6 @@ type Props<T> = {
   inputWrapperClass?: string
 }
 
-const valueOrDefault = (customValue: any, defaultValue: any) => {
-  if (typeof customValue === 'undefined') {
-    return defaultValue
-  }
-  return customValue
-}
-
 const Autocomplete = <T extends ArchivableResource>({
   groups,
   label,

src/components/FormField.tsx

@@ -1,5 +1,6 @@
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import { Tooltip } from 'flowbite-react'
+import { valueOrDefault } from '../lib/prop-helper'
 
 type Props = {
   type: string
@@ -13,6 +14,8 @@ type Props = {
   note?: string
   tooltip?: string
   className?: string
+  inputWrapperClass?: string
+  labelClass?: string
 }
 
 const FormField = ({
@@ -27,14 +30,19 @@ const FormField = ({
   note,
   tooltip,
   className,
+  inputWrapperClass,
+  labelClass,
 }: Props) => {
   if (type === 'number' && typeof options?.step === 'undefined') {
     options = { ...options, step: 'any' }
   }
 
   return (
     <div className={className || ''}>
-      <label htmlFor={name} className="form-field--label">
+      <label
+        htmlFor={name}
+        className={`${valueOrDefault(labelClass, 'form-field--label')}`}
+      >
         <span className="flex items-center">
           {label}
           {typeof tooltip !== 'undefined' ? (
@@ -55,7 +63,12 @@ const FormField = ({
         </span>
       </label>
 
-      <div className={'input--outer sm:col-span-2'}>
+      <div
+        className={`${valueOrDefault(
+          inputWrapperClass,
+          'input--outer sm:col-span-2'
+        )}`}
+      >
         <input
           className="input"
           type={type}