From 5339b98560fa9333500c9cc0cda96f238f69db30 Mon Sep 17 00:00:00 2001
From: Morre <morre@mor.re>
Date: Fri, 7 Feb 2025 22:24:17 +0100
Subject: [PATCH] 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          |  62 +++++++
 package-lock.json                     |  43 +++++
 package.json                          |   3 +
 src/App.tsx                           |  11 ++
 src/components/Autocomplete.tsx       |   8 +-
 src/components/FormField.tsx          |  17 +-
 src/components/MatchRuleList.tsx      | 255 ++++++++++++++++++++++++++
 src/components/Settings.tsx           |  18 ++
 src/components/TransactionFilters.tsx |   1 +
 src/lib/prop-helper.ts                |   9 +
 src/translations/en.json              |  11 ++
 src/types.d.ts                        |   9 +
 12 files changed, 438 insertions(+), 9 deletions(-)
 create mode 100644 cypress/e2e/matchRules.cy.ts
 create mode 100644 src/components/MatchRuleList.tsx
 create mode 100644 src/lib/prop-helper.ts

diff --git a/cypress/e2e/matchRules.cy.ts b/cypress/e2e/matchRules.cy.ts
new file mode 100644
index 00000000..0dbeca84
--- /dev/null
+++ b/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*')
+  })
+})
diff --git a/package-lock.json b/package-lock.json
index 3d319e35..d64f337b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,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",
@@ -41,7 +42,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",
@@ -3923,6 +3926,12 @@
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
       "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+      "license": "MIT"
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -9839,6 +9848,28 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-sortablejs": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/react-sortablejs/-/react-sortablejs-6.1.4.tgz",
+      "integrity": "sha512-fc7cBosfhnbh53Mbm6a45W+F735jwZ1UFIYSrIqcO/gRIFoDyZeMtgKlpV4DdyQfbCzdh5LoALLTDRxhMpTyXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "2.3.1",
+        "tiny-invariant": "1.2.0"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "1",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0",
+        "sortablejs": "1"
+      }
+    },
+    "node_modules/react-sortablejs/node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==",
+      "license": "MIT"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10465,6 +10496,12 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
+      "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -10930,6 +10967,12 @@
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
+      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==",
+      "license": "MIT"
+    },
     "node_modules/tldts": {
       "version": "6.1.64",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.64.tgz",
diff --git a/package.json b/package.json
index 562c2de7..bdea7399 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index f7645b34..ffa063bf 100644
--- a/src/App.tsx
+++ b/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 />} />
diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx
index 3ac34f5c..199a0833 100644
--- a/src/components/Autocomplete.tsx
+++ b/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,
diff --git a/src/components/FormField.tsx b/src/components/FormField.tsx
index 9c6c4194..0b2b415a 100644
--- a/src/components/FormField.tsx
+++ b/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,6 +30,8 @@ const FormField = ({
   note,
   tooltip,
   className,
+  inputWrapperClass,
+  labelClass,
 }: Props) => {
   if (type === 'number' && typeof options?.step === 'undefined') {
     options = { ...options, step: 'any' }
@@ -34,7 +39,10 @@ const FormField = ({
 
   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}
diff --git a/src/components/MatchRuleList.tsx b/src/components/MatchRuleList.tsx
new file mode 100644
index 00000000..f69338ea
--- /dev/null
+++ b/src/components/MatchRuleList.tsx
@@ -0,0 +1,255 @@
+import { useTranslation } from 'react-i18next'
+import { Translation, Budget, Theme } from '../types'
+import { useEffect, useState } from 'react'
+import {
+  ArrowLongDownIcon,
+  ArrowLongRightIcon,
+  CloudArrowUpIcon,
+  PlusIcon,
+  QuestionMarkCircleIcon,
+  TrashIcon,
+} from '@heroicons/react/24/outline'
+import { Bars2Icon } from '@heroicons/react/24/solid'
+import Error from './Error'
+import FormField from './FormField'
+import { api } from '../lib/api/base'
+import { MatchRule, Account } from '../types'
+import { ReactSortable } from 'react-sortablejs'
+import Autocomplete from './Autocomplete'
+import { safeName } from '../lib/name-helper'
+import LoadingSpinner from './LoadingSpinner'
+
+const matchRuleApi = api('matchRules')
+const accountApi = api('accounts')
+
+type Props = {
+  budget: Budget
+  setNotification: (notification: string) => void
+}
+
+const MatchRuleList = ({ budget, setNotification }: Props) => {
+  const { t }: Translation = useTranslation()
+
+  const [error, setError] = useState('')
+  const [isLoading, setIsLoading] = useState(true)
+  const [hideHelp, setHideHelp] = useState(true)
+
+  const [matchRules, setMatchRules] = useState<MatchRule[]>([])
+  const [accounts, setAccounts] = useState<Account[]>([])
+  const accountGroups = [
+    {
+      title: t('accounts.internalAccounts'),
+      items: accounts.filter(account => !account.external),
+    },
+    {
+      title: t('accounts.externalAccounts'),
+      items: accounts.filter(account => account.external),
+    },
+  ]
+
+  const addMatchRule = () => {
+    // The ID we set here is needed for uniqueness in the sortable list, but ignored later on when we actually send the data to the backend.
+    // The priority is in order from top to bottom and can be 0, so we can just use the length of the matchRules.
+    //
+    // We also set the links to a dummy value since we only need them for match rules loaded from the backend
+    setMatchRules([
+      { id: matchRules.length.toString(), links: {} },
+      ...matchRules,
+    ])
+  }
+
+  const deleteMatchRule = (id: string) => {
+    console.log(id)
+    let newMatchRules = [...matchRules]
+    const ruleIndex = matchRules.findIndex(rule => rule.id === id)
+
+    newMatchRules[ruleIndex].toDelete = true
+    console.log(newMatchRules)
+    setMatchRules(newMatchRules)
+  }
+
+  const saveMatchRules = async () => {
+    let updatedMatchRules: MatchRule[] = []
+
+    const requests = matchRules.map((rule, index) => {
+      // If the rule should be deleted, we delete it. This is done before checking validity, because
+      // a rule might have been edited to be invalid and then deleted
+      //
+      // Rules that have not been created yet are also skipped, since they will be gone with the re-render
+      if (rule.toDelete && rule.createdAt) {
+        return matchRuleApi.delete(rule).catch(err => setError(err.message))
+      }
+
+      // If the rule is missing an account ID or a match, it is invalid, so we discard it
+      if (!rule.accountId || !rule.match) {
+        return true
+      }
+
+      if (rule.createdAt) {
+        // createdAt is set by the backend, so this is an existing rule that needs to be updated
+        rule.priority = index
+
+        return matchRuleApi
+          .update(rule)
+          .then(updatedRule => {
+            updatedMatchRules.push(updatedRule)
+          })
+          .catch(err => setError(err.message))
+      } else {
+        // This is a new rule, it needs to be created
+        rule.priority = index
+        return matchRuleApi
+          .create(rule, budget)
+          .then(newRule => {
+            updatedMatchRules.push(newRule)
+          })
+          .catch(err => setError(err.message))
+      }
+    })
+
+    await Promise.all(requests)
+
+    setMatchRules(updatedMatchRules.sort((a, b) => a.priority - b.priority))
+    setNotification(t('changesSaved'))
+  }
+
+  useEffect(() => {
+    if (!isLoading) {
+      setIsLoading(true)
+    }
+
+    const promises = [
+      matchRuleApi.getAll(budget).then(setMatchRules),
+      accountApi.getAll(budget).then(setAccounts),
+    ]
+
+    Promise.all(promises)
+      .then(() => setError(''))
+      .catch(err => {
+        setError(err.message)
+      })
+      .then(() => setIsLoading(false))
+  }, [budget])
+
+  return (
+    <>
+      <div className="header mb-4">
+        <h1>{t('matchRules.matchRules')}</h1>
+
+        <div className="header--action full-centered">
+          <button onClick={() => setHideHelp(!hideHelp)} title={t('help')}>
+            <QuestionMarkCircleIcon className="icon-sm" />
+          </button>
+
+          <button onClick={() => addMatchRule()} title={t('matchRules.add')}>
+            <PlusIcon className="icon-sm" />
+          </button>
+
+          <button onClick={() => saveMatchRules()} title={t('save')}>
+            <CloudArrowUpIcon className="icon-sm" />
+          </button>
+        </div>
+      </div>
+
+      <Error error={error} />
+
+      <div className={`card p-4 md:my-4 ${hideHelp && 'hidden'}`}>
+        <p className="whitespace-pre-line dark:text-gray-400">
+          {t('matchRules.help')}
+          <button
+            onClick={() => setHideHelp(!hideHelp)}
+            title={t('hide')}
+            className="btn-secondary mt-4 md:hidden"
+          >
+            {t('hide')}
+          </button>
+        </p>
+      </div>
+
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : matchRules.filter(r => !r.toDelete).length ? (
+        <ReactSortable
+          list={matchRules}
+          setList={setMatchRules}
+          className="card w-full divide-y divide-dashed divide-gray-600 overflow-visible text-left sm:space-y-1 sm:divide-none"
+          handle=".handler"
+        >
+          {matchRules.map(matchRule => (
+            <div
+              className={`group flex w-full flex-wrap items-center gap-x-1 gap-y-4 py-4 sm:gap-x-3 sm:gap-y-2 sm:py-2 ${
+                (matchRule.toDelete && 'hidden') || ''
+              }`}
+              key={matchRule.id}
+            >
+              <div>
+                <Bars2Icon className="icon-sm handler cursor-grab" />
+              </div>
+              <div className="flex flex-grow flex-col items-center space-y-1 sm:flex-row sm:gap-x-2">
+                <div className="flex-grow">
+                  <FormField
+                    inputWrapperClass="mt-0"
+                    name="match"
+                    label={t('matchRules.match')}
+                    labelClass="sr-only"
+                    type="text"
+                    value={matchRule.match ?? ''}
+                    onChange={match => {
+                      let newMatchRules = [...matchRules]
+                      const ruleIndex = matchRules.findIndex(
+                        rule => rule.id === matchRule.id
+                      )
+                      newMatchRules[ruleIndex].match = match.target.value
+                      setMatchRules(newMatchRules)
+                    }}
+                  />
+                </div>
+                <div className="hidden sm:block">
+                  <ArrowLongRightIcon className="icon-sm" />
+                </div>
+                <div className="sm:hidden">
+                  <ArrowLongDownIcon className="icon-sm" />
+                </div>
+                <div className="flex-grow">
+                  <Autocomplete<Account>
+                    inputWrapperClass="relative mt-0"
+                    groups={accountGroups}
+                    allowNewCreation={false}
+                    itemLabel={account => safeName(account, 'account')}
+                    itemId={account => account.id}
+                    label={t('accounts.account')}
+                    labelClass="sr-only"
+                    onChange={account => {
+                      let newMatchRules = [...matchRules]
+                      const ruleIndex = matchRules.findIndex(
+                        rule => rule.id === matchRule.id
+                      )
+                      newMatchRules[ruleIndex].accountId = account.id
+                      setMatchRules(newMatchRules)
+                    }}
+                    value={
+                      (accounts.find(
+                        account =>
+                          account.id === matchRule.accountId &&
+                          !account.archived
+                      ) as Account) || ''
+                    }
+                  />
+                </div>
+              </div>
+              <TrashIcon
+                title={t('delete')}
+                onClick={() => deleteMatchRule(matchRule.id)}
+                className="icon-sm icon-red cursor-auto sm:invisible group-hover:visible"
+              />
+            </div>
+          ))}
+        </ReactSortable>
+      ) : (
+        <div>{t('matchRules.emptyList')}</div>
+      )}
+    </>
+  )
+}
+
+export default MatchRuleList
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index b66f1681..3a78e5fb 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -47,6 +47,24 @@ const Settings = ({
       <Error error={error} />
 
       <div className="space-y-10 divide-y divide-gray-900/10 dark:divide-gray-200/10">
+        <div className="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
+          <div className="px-4 sm:px-0">
+            <h2 className="text-base font-semibold leading-7 text-gray-900">
+              {t('settings.matchRules')}
+            </h2>
+          </div>
+
+          <div className="md:col-span-2">
+            <Link
+              to={'match-rules'}
+              title={t('matchRules.edit')}
+              className="btn-primary"
+            >
+              {t('matchRules.edit')}
+            </Link>
+          </div>
+        </div>
+
         <div className="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
           <div className="px-4 sm:px-0">
             <h2 className="text-base font-semibold leading-7 text-gray-900">
diff --git a/src/components/TransactionFilters.tsx b/src/components/TransactionFilters.tsx
index fd160d32..1ad75125 100644
--- a/src/components/TransactionFilters.tsx
+++ b/src/components/TransactionFilters.tsx
@@ -12,6 +12,7 @@ import {
 import Autocomplete from './Autocomplete'
 import InputCurrency from './InputCurrency'
 import FormField from './FormField'
+import { groupAccounts } from '../lib/prop-helper'
 
 type Props = {
   budget: Budget
diff --git a/src/lib/prop-helper.ts b/src/lib/prop-helper.ts
new file mode 100644
index 00000000..36affeeb
--- /dev/null
+++ b/src/lib/prop-helper.ts
@@ -0,0 +1,9 @@
+import { Account } from '../types'
+import { Translation } from '../types'
+
+export const valueOrDefault = (customValue: any, defaultValue: any) => {
+  if (typeof customValue === 'undefined') {
+    return defaultValue
+  }
+  return customValue
+}
diff --git a/src/translations/en.json b/src/translations/en.json
index e11a7443..e9ad5f01 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -17,6 +17,8 @@
   "version": "Version",
   "seeAll": "See All",
   "or": "or",
+  "help": "Help",
+  "hide": "Hide",
   "discardUnsavedChanges": "Discard unsaved changes?",
   "changesSaved": "Changes saved successfully",
   "archived": "Archived",
@@ -191,6 +193,7 @@
   "settings": {
     "settings": "Settings",
     "budget": "Budget Settings",
+    "matchRules": "Match Rules",
     "app": "App Settings",
     "theme": "Theme",
     "themes": {
@@ -198,5 +201,13 @@
       "light": "Light",
       "default": "System Default"
     }
+  },
+  "matchRules": {
+    "match": "Match",
+    "matchRules": "Match Rules",
+    "edit": "Edit match rules",
+    "emptyList": "No match rules found. Create a new one now!",
+    "add": "Add match rule",
+    "help": "Match rules can automatically set the source and destination accounts for imported transactions. When transactions are imported, both the parsed source and destination account name are matched against these rules.\n\nMatching is case sensitive and you can use the \"*\" character as a wildcard that matches anything.\n\nMatch rules are checked in the order they are shown here. Only the first matching rule is applied. Drag them in the order you want!\n\nWhen done, save your changes. If you accidentally deleted a rule, just reload the page without saving."
   }
 }
diff --git a/src/types.d.ts b/src/types.d.ts
index 39bdf67a..4ebe4d97 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -185,3 +185,12 @@ export type RecentEnvelope = {
   name: string
   id: UUID | null
 }
+
+export type MatchRule = ApiObject & {
+  id: UUID
+  match?: string
+  accountId?: UUID
+  priority?: uint
+  createdAt?: string // This is set by the backend on creation
+  toDelete?: boolean // Set when the match rule should be deleted from the backend
+}