From 59d6192229b85e3ba386d8288649353f831f653f Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Tue, 5 Jul 2022 11:50:55 -0400
Subject: [PATCH] ran typescript migrate and fixed some issues w/ burnettk

---
 .eslintrc.js                                  |  31 +-
 craco.config.js                               |   4 +-
 package-lock.json                             | 575 +++++++++++++++++-
 package.json                                  |   2 +
 src/{App.js => App.tsx}                       |   3 +
 .../{ErrorBoundary.js => ErrorBoundary.tsx}   |  19 +-
 .../{FileInput.js => FileInput.tsx}           |  23 +-
 src/components/NavigationBar.js               |  35 --
 src/components/NavigationBar.tsx              |  44 ++
 ...tionForTable.js => PaginationForTable.tsx} |  33 +-
 src/components/ProcessBreadcrumb.js           |  69 ---
 ...umb.test.js => ProcessBreadcrumb.test.tsx} |   6 +
 src/components/ProcessBreadcrumb.tsx          |  73 +++
 ...iagramEditor.js => ReactDiagramEditor.tsx} |  68 ++-
 src/{config.js => config.tsx}                 |   0
 .../{ErrorContext.js => ErrorContext.tsx}     |   1 +
 src/{helpers.test.js => helpers.test.tsx}     |   0
 src/{helpers.js => helpers.tsx}               |   6 +-
 src/{index.js => index.tsx}                   |   2 +
 ...reportWebVitals.js => reportWebVitals.tsx} |   2 +-
 src/routes/AdminRoutes.js                     |  65 --
 src/routes/AdminRoutes.tsx                    |  89 +++
 ...ocessGroupEdit.js => ProcessGroupEdit.tsx} |  14 +-
 ...ProcessGroupNew.js => ProcessGroupNew.tsx} |   4 +-
 ...ocessGroupShow.js => ProcessGroupShow.tsx} |  29 +-
 .../{ProcessGroups.js => ProcessGroups.tsx}   |  17 +-
 ...nstanceList.js => ProcessInstanceList.tsx} |  50 +-
 ...nceReport.js => ProcessInstanceReport.tsx} |  21 +-
 ...nstanceShow.js => ProcessInstanceShow.tsx} |   7 +-
 ...ocessModelEdit.js => ProcessModelEdit.tsx} |  20 +-
 ...Diagram.js => ProcessModelEditDiagram.tsx} |  33 +-
 ...ProcessModelNew.js => ProcessModelNew.tsx} |   5 +-
 ...ocessModelShow.js => ProcessModelShow.tsx} |  73 ++-
 src/routes/{TaskList.js => TaskList.tsx}      |  15 +-
 src/routes/{TaskShow.js => TaskShow.tsx}      |  14 +-
 src/routes/expenses.jsx                       |   7 -
 src/routes/expenses.tsx                       |   9 +
 src/{setupTests.js => setupTests.tsx}         |   0
 tsfixme.d.ts                                  |   4 +
 39 files changed, 1091 insertions(+), 381 deletions(-)
 rename src/{App.js => App.tsx} (83%)
 rename src/components/{ErrorBoundary.js => ErrorBoundary.tsx} (69%)
 rename src/components/{FileInput.js => FileInput.tsx} (85%)
 delete mode 100644 src/components/NavigationBar.js
 create mode 100644 src/components/NavigationBar.tsx
 rename src/components/{PaginationForTable.js => PaginationForTable.tsx} (87%)
 delete mode 100644 src/components/ProcessBreadcrumb.js
 rename src/components/{ProcessBreadcrumb.test.js => ProcessBreadcrumb.test.tsx} (65%)
 create mode 100644 src/components/ProcessBreadcrumb.tsx
 rename src/components/{ReactDiagramEditor.js => ReactDiagramEditor.tsx} (77%)
 rename src/{config.js => config.tsx} (100%)
 rename src/contexts/{ErrorContext.js => ErrorContext.tsx} (62%)
 rename src/{helpers.test.js => helpers.test.tsx} (100%)
 rename src/{helpers.js => helpers.tsx} (78%)
 rename src/{index.js => index.tsx} (75%)
 rename src/{reportWebVitals.js => reportWebVitals.tsx} (86%)
 delete mode 100644 src/routes/AdminRoutes.js
 create mode 100644 src/routes/AdminRoutes.tsx
 rename src/routes/{ProcessGroupEdit.js => ProcessGroupEdit.tsx} (83%)
 rename src/routes/{ProcessGroupNew.js => ProcessGroupNew.tsx} (95%)
 rename src/routes/{ProcessGroupShow.js => ProcessGroupShow.tsx} (69%)
 rename src/routes/{ProcessGroups.js => ProcessGroups.tsx} (68%)
 rename src/routes/{ProcessInstanceList.js => ProcessInstanceList.tsx} (79%)
 rename src/routes/{ProcessInstanceReport.js => ProcessInstanceReport.tsx} (72%)
 rename src/routes/{ProcessInstanceShow.js => ProcessInstanceShow.tsx} (79%)
 rename src/routes/{ProcessModelEdit.js => ProcessModelEdit.tsx} (77%)
 rename src/routes/{ProcessModelEditDiagram.js => ProcessModelEditDiagram.tsx} (72%)
 rename src/routes/{ProcessModelNew.js => ProcessModelNew.tsx} (92%)
 rename src/routes/{ProcessModelShow.js => ProcessModelShow.tsx} (58%)
 rename src/routes/{TaskList.js => TaskList.tsx} (69%)
 rename src/routes/{TaskShow.js => TaskShow.tsx} (73%)
 delete mode 100644 src/routes/expenses.jsx
 create mode 100644 src/routes/expenses.tsx
 rename src/{setupTests.js => setupTests.tsx} (100%)
 create mode 100644 tsfixme.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index d7f0d64..ebec84e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,7 +11,11 @@ module.exports = {
     'plugin:jest/recommended',
     'plugin:prettier/recommended',
     'plugin:sonarjs/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
   ],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
@@ -19,15 +23,36 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', 'sonarjs'],
+  plugins: ['react', 'sonarjs', '@typescript-eslint'],
   rules: {
     'jest/expect-expect': 'off',
     'react/jsx-no-bind': 'off',
     'jsx-a11y/no-autofocus': 'off',
     'jsx-a11y/label-has-associated-control': 'off',
     'no-console': 'off',
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/jsx-filename-extension': [
+      1,
+      { extensions: ['.js', '.jsx', '.tsx', '.ts'] },
+    ],
     'react/react-in-jsx-scope': 'off',
-    'no-unused-vars': ['error', { destructuredArrayIgnorePattern: '^_' }],
+    'react/require-default-props': 'off',
+    'no-unused-vars': [
+      'error',
+      {
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '_',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
   },
 };
diff --git a/craco.config.js b/craco.config.js
index 9b57cd7..d0a928e 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -2,7 +2,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.m?js$/,
+        test: /\.m?[jt]sx?$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
@@ -16,6 +16,7 @@ module.exports = {
                 },
               ],
               '@babel/preset-react',
+              '@babel/plugin-transform-typescript',
             ],
           },
         },
@@ -42,6 +43,7 @@ module.exports = {
     presets: [
       '@babel/preset-env',
       ['@babel/preset-react', { runtime: 'automatic' }],
+      '@babel/preset-typescript',
     ],
     // plugins: [],
     loaderOptions: (babelLoaderOptions) => {
diff --git a/package-lock.json b/package-lock.json
index 57b7ae2..3010163 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,8 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.30.5",
+        "@typescript-eslint/parser": "^5.30.5",
         "cypress": "^10.3.0",
         "eslint": "^8.19.0",
         "eslint_d": "^12.2.0",
@@ -4643,13 +4645,13 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.27.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.1.tgz",
-      "integrity": "sha512-6dM5NKT57ZduNnJfpY81Phe9nc9wolnMCnknb1im6brWi1RYv84nbMS3olJa27B6+irUVV1X/Wb+Am0FjJdGFw==",
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.5.tgz",
+      "integrity": "sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.27.1",
-        "@typescript-eslint/type-utils": "5.27.1",
-        "@typescript-eslint/utils": "5.27.1",
+        "@typescript-eslint/scope-manager": "5.30.5",
+        "@typescript-eslint/type-utils": "5.30.5",
+        "@typescript-eslint/utils": "5.30.5",
         "debug": "^4.3.4",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
@@ -4674,6 +4676,119 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
+      "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/visitor-keys": "5.30.5"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
+      "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
+      "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/visitor-keys": "5.30.5",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
+      "integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.30.5",
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/typescript-estree": "5.30.5",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
+      "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
@@ -4707,13 +4822,13 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.27.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.1.tgz",
-      "integrity": "sha512-7Va2ZOkHi5NP+AZwb5ReLgNF6nWLGTeUJfxdkVUAPPSaAdbWNnFZzLZ4EGGmmiCTg+AwlbE1KyUYTBglosSLHQ==",
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.5.tgz",
+      "integrity": "sha512-zj251pcPXI8GO9NDKWWmygP6+UjwWmrdf9qMW/L/uQJBM/0XbU2inxe5io/234y/RCvwpKEYjZ6c1YrXERkK4Q==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.27.1",
-        "@typescript-eslint/types": "5.27.1",
-        "@typescript-eslint/typescript-estree": "5.27.1",
+        "@typescript-eslint/scope-manager": "5.30.5",
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/typescript-estree": "5.30.5",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4732,6 +4847,90 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
+      "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/visitor-keys": "5.30.5"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
+      "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
+      "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/visitor-keys": "5.30.5",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
+      "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@typescript-eslint/scope-manager": {
       "version": "5.27.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz",
@@ -4749,11 +4948,11 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.27.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.27.1.tgz",
-      "integrity": "sha512-+UC1vVUWaDHRnC2cQrCJ4QtVjpjjCgjNFpg8b03nERmkHv9JV9X5M19D7UFMd+/G7T/sgFwX2pGmWK38rqyvXw==",
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.5.tgz",
+      "integrity": "sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==",
       "dependencies": {
-        "@typescript-eslint/utils": "5.27.1",
+        "@typescript-eslint/utils": "5.30.5",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -4773,6 +4972,133 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
+      "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/visitor-keys": "5.30.5"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
+      "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
+      "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/visitor-keys": "5.30.5",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
+      "integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.30.5",
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/typescript-estree": "5.30.5",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
+      "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.5",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@typescript-eslint/types": {
       "version": "5.27.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.1.tgz",
@@ -29112,13 +29438,13 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.27.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.1.tgz",
-      "integrity": "sha512-6dM5NKT57ZduNnJfpY81Phe9nc9wolnMCnknb1im6brWi1RYv84nbMS3olJa27B6+irUVV1X/Wb+Am0FjJdGFw==",
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.5.tgz",
+      "integrity": "sha512-lftkqRoBvc28VFXEoRgyZuztyVUQ04JvUnATSPtIRFAccbXTWL6DEtXGYMcbg998kXw1NLUJm7rTQ9eUt+q6Ig==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.27.1",
-        "@typescript-eslint/type-utils": "5.27.1",
-        "@typescript-eslint/utils": "5.27.1",
+        "@typescript-eslint/scope-manager": "5.30.5",
+        "@typescript-eslint/type-utils": "5.30.5",
+        "@typescript-eslint/utils": "5.30.5",
         "debug": "^4.3.4",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.2.0",
@@ -29127,6 +29453,70 @@
         "tsutils": "^3.21.0"
       },
       "dependencies": {
+        "@typescript-eslint/scope-manager": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
+          "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/visitor-keys": "5.30.5"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
+          "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw=="
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
+          "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/visitor-keys": "5.30.5",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.7",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/utils": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
+          "integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "@typescript-eslint/scope-manager": "5.30.5",
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/typescript-estree": "5.30.5",
+            "eslint-scope": "^5.1.1",
+            "eslint-utils": "^3.0.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
+          "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        },
         "semver": {
           "version": "7.3.7",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
@@ -29146,14 +29536,61 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.27.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.1.tgz",
-      "integrity": "sha512-7Va2ZOkHi5NP+AZwb5ReLgNF6nWLGTeUJfxdkVUAPPSaAdbWNnFZzLZ4EGGmmiCTg+AwlbE1KyUYTBglosSLHQ==",
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.5.tgz",
+      "integrity": "sha512-zj251pcPXI8GO9NDKWWmygP6+UjwWmrdf9qMW/L/uQJBM/0XbU2inxe5io/234y/RCvwpKEYjZ6c1YrXERkK4Q==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.27.1",
-        "@typescript-eslint/types": "5.27.1",
-        "@typescript-eslint/typescript-estree": "5.27.1",
+        "@typescript-eslint/scope-manager": "5.30.5",
+        "@typescript-eslint/types": "5.30.5",
+        "@typescript-eslint/typescript-estree": "5.30.5",
         "debug": "^4.3.4"
+      },
+      "dependencies": {
+        "@typescript-eslint/scope-manager": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
+          "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/visitor-keys": "5.30.5"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
+          "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw=="
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
+          "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/visitor-keys": "5.30.5",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.7",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
+          "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
       }
     },
     "@typescript-eslint/scope-manager": {
@@ -29166,13 +29603,87 @@
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.27.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.27.1.tgz",
-      "integrity": "sha512-+UC1vVUWaDHRnC2cQrCJ4QtVjpjjCgjNFpg8b03nERmkHv9JV9X5M19D7UFMd+/G7T/sgFwX2pGmWK38rqyvXw==",
+      "version": "5.30.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.5.tgz",
+      "integrity": "sha512-k9+ejlv1GgwN1nN7XjVtyCgE0BTzhzT1YsQF0rv4Vfj2U9xnslBgMYYvcEYAFVdvhuEscELJsB7lDkN7WusErw==",
       "requires": {
-        "@typescript-eslint/utils": "5.27.1",
+        "@typescript-eslint/utils": "5.30.5",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "@typescript-eslint/scope-manager": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz",
+          "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/visitor-keys": "5.30.5"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz",
+          "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw=="
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz",
+          "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/visitor-keys": "5.30.5",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.7",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/utils": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz",
+          "integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==",
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "@typescript-eslint/scope-manager": "5.30.5",
+            "@typescript-eslint/types": "5.30.5",
+            "@typescript-eslint/typescript-estree": "5.30.5",
+            "eslint-scope": "^5.1.1",
+            "eslint-utils": "^3.0.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.30.5",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz",
+          "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==",
+          "requires": {
+            "@typescript-eslint/types": "5.30.5",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        },
+        "semver": {
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
       }
     },
     "@typescript-eslint/types": {
diff --git a/package.json b/package.json
index cf42c27..c3455af 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,8 @@
     ]
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
     "cypress": "^10.3.0",
     "eslint": "^8.19.0",
     "eslint_d": "^12.2.0",
diff --git a/src/App.js b/src/App.tsx
similarity index 83%
rename from src/App.js
rename to src/App.tsx
index 3314a20..e446eb0 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ export default function App() {
 
   let errorTag = '';
   if (errorMessage !== '') {
+    // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
     errorTag = (
       <div id="filter-errors" className="mt-4 alert alert-danger" role="alert">
         {errorMessage}
@@ -37,7 +38,9 @@ export default function App() {
             <Routes>
               <Route path="/" element={<AdminRoutes />} />
               <Route path="/admin/*" element={<AdminRoutes />} />
+              {/* @ts-expect-error TS(2786): 'TaskList' cannot be used as a JSX component. */}
               <Route path="/tasks" element={<TaskList />} />
+              {/* @ts-expect-error TS(2786): 'TaskShow' cannot be used as a JSX component. */}
               <Route path="/tasks/:task_id" element={<TaskShow />} />
             </Routes>
           </BrowserRouter>
diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.tsx
similarity index 69%
rename from src/components/ErrorBoundary.js
rename to src/components/ErrorBoundary.tsx
index 4dd5014..10e8150 100644
--- a/src/components/ErrorBoundary.js
+++ b/src/components/ErrorBoundary.tsx
@@ -1,18 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-class ErrorBoundary extends React.Component {
-  constructor(props) {
+type Props = {
+  children?: React.ReactNode;
+};
+
+type State = any;
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(error: any) {
     // Update state so the next render will show the fallback UI.
     return { hasError: true, error };
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error: any, errorInfo: any) {
     // You can also log the error to an error reporting service
     console.log('HELLO: ', error, errorInfo);
   }
@@ -31,7 +36,3 @@ class ErrorBoundary extends React.Component {
 }
 
 export default ErrorBoundary;
-
-ErrorBoundary.propTypes = {
-  children: PropTypes.string.isRequired,
-};
diff --git a/src/components/FileInput.js b/src/components/FileInput.tsx
similarity index 85%
rename from src/components/FileInput.js
rename to src/components/FileInput.tsx
index fb7dd63..6ae0caf 100644
--- a/src/components/FileInput.js
+++ b/src/components/FileInput.tsx
@@ -1,10 +1,20 @@
 import React from 'react';
 import axios from 'axios';
-import PropTypes from 'prop-types';
 import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
 
-export default class FileInput extends React.Component {
-  constructor({ processGroupId, processModelId }) {
+type Props = {
+  processGroupId: string;
+  processModelId: string;
+};
+
+export default class FileInput extends React.Component<Props> {
+  fileInput: any;
+
+  processGroupId: any;
+
+  processModelId: any;
+
+  constructor({ processGroupId, processModelId }: Props) {
     super({ processGroupId, processModelId });
     this.handleSubmit = this.handleSubmit.bind(this);
     this.fileInput = React.createRef();
@@ -12,7 +22,7 @@ export default class FileInput extends React.Component {
     this.processModelId = processModelId;
   }
 
-  handleSubmit(event) {
+  handleSubmit(event: any) {
     event.preventDefault();
     const url = `${BACKEND_BASE_URL}/process-models/${this.processGroupId}/${this.processModelId}/file`;
     const formData = new FormData();
@@ -60,8 +70,3 @@ export default class FileInput extends React.Component {
     );
   }
 }
-
-FileInput.propTypes = {
-  processGroupId: PropTypes.string.isRequired,
-  processModelId: PropTypes.string.isRequired,
-};
diff --git a/src/components/NavigationBar.js b/src/components/NavigationBar.js
deleted file mode 100644
index d2a8fb2..0000000
--- a/src/components/NavigationBar.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Navbar, Nav, Container } from 'react-bootstrap';
-import { capitalizeFirstLetter } from '../helpers';
-import logo from '../logo.svg';
-
-// for ref: https://react-bootstrap.github.io/components/navbar/
-export default function NavigationBar() {
-  const navItems = ['/admin', '/tasks'];
-
-  const navElements = navItems.map((navItem) => {
-    let className = '';
-    if (window.location.pathname.startsWith(navItem)) {
-      className = 'active';
-    }
-    const title = capitalizeFirstLetter(navItem.replace(/\/*/, ''));
-    return (
-      <Nav.Link href={navItem} className={className}>
-        {title}
-      </Nav.Link>
-    );
-  });
-
-  return (
-    <Navbar bg="dark" expand="lg" variant="dark">
-      <Container>
-        <Navbar.Brand href="/admin">
-          <img src={logo} className="app-logo" alt="logo" />
-        </Navbar.Brand>
-        <Navbar.Toggle aria-controls="basic-navbar-nav" />
-        <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">{navElements}</Nav>
-        </Navbar.Collapse>
-      </Container>
-    </Navbar>
-  );
-}
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..59d3155
--- /dev/null
+++ b/src/components/NavigationBar.tsx
@@ -0,0 +1,44 @@
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import { capitalizeFirstLetter } from '../helpers';
+// @ts-expect-error TS(2307): Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message
+import logo from '../logo.svg';
+
+// for ref: https://react-bootstrap.github.io/components/navbar/
+export default function NavigationBar() {
+  const navItems = ['/admin', '/tasks'];
+
+  const navElements = navItems.map((navItem) => {
+    let className = '';
+    if (window.location.pathname.startsWith(navItem)) {
+      className = 'active';
+    }
+    const title = capitalizeFirstLetter(navItem.replace(/\/*/, ''));
+    return (
+      // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+      <Nav.Link href={navItem} className={className}>
+        {title}
+      </Nav.Link>
+    );
+  });
+
+  return (
+    // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+    <Navbar bg="dark" expand="lg" variant="dark">
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Container>
+        {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+        <Navbar.Brand href="/admin">
+          {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+          <img src={logo} className="app-logo" alt="logo" />
+        </Navbar.Brand>
+        {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+        <Navbar.Collapse id="basic-navbar-nav">
+          {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+          <Nav className="me-auto">{navElements}</Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
diff --git a/src/components/PaginationForTable.js b/src/components/PaginationForTable.tsx
similarity index 87%
rename from src/components/PaginationForTable.js
rename to src/components/PaginationForTable.tsx
index 4874aaf..069d385 100644
--- a/src/components/PaginationForTable.js
+++ b/src/components/PaginationForTable.tsx
@@ -2,19 +2,29 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Dropdown, Stack } from 'react-bootstrap';
-import PropTypes from 'prop-types';
 
 export const DEFAULT_PER_PAGE = 50;
 export const DEFAULT_PAGE = 1;
 
+type OwnProps = {
+  page: number;
+  perPage: number;
+  pagination: {
+    [key: string]: number;
+  };
+  tableToDisplay: string;
+  queryParamString?: string;
+  path: string;
+};
+
 export default function PaginationForTable({
   page,
   perPage,
   pagination,
   tableToDisplay,
-  queryParamString,
+  queryParamString = '',
   path,
-}) {
+}: OwnProps) {
   const PER_PAGE_OPTIONS = [2, 10, 50, 100];
 
   const buildPerPageDropdown = () => {
@@ -58,6 +68,7 @@ export default function PaginationForTable({
   const buildPaginationNav = () => {
     let previousPageTag = '';
     if (page === 1) {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
       previousPageTag = (
         <li
           data-qa="pagination-previous-button-inactive"
@@ -70,6 +81,7 @@ export default function PaginationForTable({
         </li>
       );
     } else {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
       previousPageTag = (
         <li className="page-item" key="previous">
           <Link
@@ -88,6 +100,7 @@ export default function PaginationForTable({
 
     let nextPageTag = '';
     if (page >= pagination.pages) {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
       nextPageTag = (
         <li
           data-qa="pagination-next-button-inactive"
@@ -100,6 +113,7 @@ export default function PaginationForTable({
         </li>
       );
     } else {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
       nextPageTag = (
         <li className="page-item" key="next">
           <Link
@@ -151,16 +165,3 @@ export default function PaginationForTable({
     </main>
   );
 }
-
-PaginationForTable.propTypes = {
-  page: PropTypes.number.isRequired,
-  perPage: PropTypes.number.isRequired,
-  pagination: PropTypes.objectOf(PropTypes.number).isRequired,
-  tableToDisplay: PropTypes.string.isRequired,
-  queryParamString: PropTypes.string,
-  path: PropTypes.string.isRequired,
-};
-
-PaginationForTable.defaultProps = {
-  queryParamString: '',
-};
diff --git a/src/components/ProcessBreadcrumb.js b/src/components/ProcessBreadcrumb.js
deleted file mode 100644
index cb1ae5e..0000000
--- a/src/components/ProcessBreadcrumb.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Link } from 'react-router-dom';
-import Breadcrumb from 'react-bootstrap/Breadcrumb';
-import PropTypes from 'prop-types';
-
-export default function ProcessBreadcrumb({
-  processModelId,
-  processGroupId,
-  linkProcessModel,
-}) {
-  let processGroupBreadcrumb = '';
-  let processModelBreadcrumb = '';
-
-  if (processModelId) {
-    if (linkProcessModel) {
-      processModelBreadcrumb = (
-        <Breadcrumb.Item
-          linkAs={Link}
-          linkProps={{
-            to: `/admin/process-models/${processGroupId}/${processModelId}`,
-          }}
-        >
-          Process Model: {processModelId}
-        </Breadcrumb.Item>
-      );
-    } else {
-      processModelBreadcrumb = (
-        <Breadcrumb.Item active>
-          Process Model: {processModelId}
-        </Breadcrumb.Item>
-      );
-    }
-    processGroupBreadcrumb = (
-      <Breadcrumb.Item
-        linkAs={Link}
-        linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
-      >
-        Process Group: {processGroupId}
-      </Breadcrumb.Item>
-    );
-  } else if (processGroupId) {
-    processGroupBreadcrumb = (
-      <Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
-    );
-  }
-
-  return (
-    <main style={{ padding: '1rem 0' }}>
-      <Breadcrumb>
-        <Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
-          Home
-        </Breadcrumb.Item>
-        {processGroupBreadcrumb}
-        {processModelBreadcrumb}
-      </Breadcrumb>
-    </main>
-  );
-}
-
-ProcessBreadcrumb.propTypes = {
-  processModelId: PropTypes.string,
-  processGroupId: PropTypes.string,
-  linkProcessModel: PropTypes.bool,
-};
-
-ProcessBreadcrumb.defaultProps = {
-  processGroupId: null,
-  processModelId: null,
-  linkProcessModel: false,
-};
diff --git a/src/components/ProcessBreadcrumb.test.js b/src/components/ProcessBreadcrumb.test.tsx
similarity index 65%
rename from src/components/ProcessBreadcrumb.test.js
rename to src/components/ProcessBreadcrumb.test.tsx
index 0e6ffc7..47b3ba2 100644
--- a/src/components/ProcessBreadcrumb.test.js
+++ b/src/components/ProcessBreadcrumb.test.tsx
@@ -4,7 +4,9 @@ import ProcessBreadcrumb from './ProcessBreadcrumb';
 
 test('renders home link', () => {
   render(
+    // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
     <BrowserRouter>
+      {/* @ts-expect-error TS(2322): Type '{}' is not assignable to type 'never'. */}
       <ProcessBreadcrumb />
     </BrowserRouter>
   );
@@ -14,7 +16,9 @@ test('renders home link', () => {
 
 test('renders process group when given processGroupId', async () => {
   render(
+    // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
     <BrowserRouter>
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
       <ProcessBreadcrumb processGroupId="group-a" />
     </BrowserRouter>
   );
@@ -28,7 +32,9 @@ test('renders process group when given processGroupId', async () => {
 
 test('renders process model when given processModelId', async () => {
   render(
+    // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
     <BrowserRouter>
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
       <ProcessBreadcrumb processGroupId="group-b" processModelId="model-c" />
     </BrowserRouter>
   );
diff --git a/src/components/ProcessBreadcrumb.tsx b/src/components/ProcessBreadcrumb.tsx
new file mode 100644
index 0000000..be3d5e7
--- /dev/null
+++ b/src/components/ProcessBreadcrumb.tsx
@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom';
+import Breadcrumb from 'react-bootstrap/Breadcrumb';
+
+type OwnProps = {
+  processModelId?: string;
+  processGroupId?: string;
+  linkProcessModel?: boolean;
+};
+
+export default function ProcessBreadcrumb({
+  processModelId,
+  processGroupId,
+  linkProcessModel = false,
+}: OwnProps) {
+  let processGroupBreadcrumb = '';
+  let processModelBreadcrumb = '';
+
+  if (processModelId) {
+    if (linkProcessModel) {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
+      processModelBreadcrumb = (
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        <Breadcrumb.Item
+          linkAs={Link}
+          linkProps={{
+            to: `/admin/process-models/${processGroupId}/${processModelId}`,
+          }}
+        >
+          Process Model: {processModelId}
+        </Breadcrumb.Item>
+      );
+    } else {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
+      processModelBreadcrumb = (
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        <Breadcrumb.Item active>
+          Process Model: {processModelId}
+        </Breadcrumb.Item>
+      );
+    }
+    // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
+    processGroupBreadcrumb = (
+      // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+      <Breadcrumb.Item
+        linkAs={Link}
+        linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
+      >
+        Process Group: {processGroupId}
+      </Breadcrumb.Item>
+    );
+  } else if (processGroupId) {
+    // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
+    processGroupBreadcrumb = (
+      // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+      <Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
+    );
+  }
+
+  return (
+    // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+    <main style={{ padding: '1rem 0' }}>
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Breadcrumb>
+        {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+        <Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
+          Home
+        </Breadcrumb.Item>
+        {processGroupBreadcrumb}
+        {processModelBreadcrumb}
+      </Breadcrumb>
+    </main>
+  );
+}
diff --git a/src/components/ReactDiagramEditor.js b/src/components/ReactDiagramEditor.tsx
similarity index 77%
rename from src/components/ReactDiagramEditor.js
rename to src/components/ReactDiagramEditor.tsx
index b0d86de..446568b 100644
--- a/src/components/ReactDiagramEditor.js
+++ b/src/components/ReactDiagramEditor.tsx
@@ -1,22 +1,27 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+// @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
 import BpmnModeler from 'bpmn-js/lib/Modeler';
 import {
   BpmnPropertiesPanelModule,
   BpmnPropertiesProviderModule,
+  // @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
 } from 'bpmn-js-properties-panel';
 
+// @ts-expect-error TS(7016): Could not find a declaration file for module 'dmn-... Remove this comment to see the full error message
 import DmnModeler from 'dmn-js/lib/Modeler';
 import {
   DmnPropertiesPanelModule,
   DmnPropertiesProviderModule,
+  // @ts-expect-error TS(7016): Could not find a declaration file for module 'dmn-... Remove this comment to see the full error message
 } from 'dmn-js-properties-panel';
 
 import React, { useRef, useEffect, useState } from 'react';
+// @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
 import spiffworkflowIO from 'bpmn-js-spiffworkflow/app/spiffworkflow/InputOutput';
+// @ts-expect-error TS(7016): Could not find a declaration file for module 'bpmn... Remove this comment to see the full error message
 import spiffworkflowPanel from 'bpmn-js-spiffworkflow/app/spiffworkflow/PropertiesPanel';
 
 import Button from 'react-bootstrap/Button';
-import PropTypes from 'prop-types';
 import { HOT_AUTH_TOKEN, BACKEND_BASE_URL } from '../config';
 
 import 'bpmn-js/dist/assets/diagram-js.css';
@@ -36,6 +41,17 @@ import 'dmn-js-properties-panel/dist/assets/properties-panel.css';
 
 import 'bpmn-js-spiffworkflow/app/css/app.css';
 
+type OwnProps = {
+  processModelId: string;
+  processGroupId: string;
+  saveDiagram: (..._args: any[]) => any;
+  diagramType: string;
+  diagramXML?: string;
+  fileName?: string;
+  onLaunchScriptEditor?: (..._args: any[]) => any;
+  url?: string;
+};
+
 // https://codesandbox.io/s/quizzical-lake-szfyo?file=/src/App.js was a handy reference
 export default function ReactDiagramEditor({
   processModelId,
@@ -46,7 +62,7 @@ export default function ReactDiagramEditor({
   fileName,
   onLaunchScriptEditor,
   url,
-}) {
+}: OwnProps) {
   const [diagramXMLString, setDiagramXMLString] = useState('');
   const [diagramModelerState, setDiagramModelerState] = useState(null);
   const [performingXmlUpdates, setPerformingXmlUpdates] = useState(false);
@@ -58,6 +74,7 @@ export default function ReactDiagramEditor({
       return;
     }
 
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
     document.getElementById('diagram-container').innerHTML = '';
     const temp = document.createElement('template');
 
@@ -70,9 +87,10 @@ export default function ReactDiagramEditor({
     `;
 
     const frag = temp.content;
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
     document.getElementById('diagram-container').appendChild(frag);
 
-    let diagramModeler = null;
+    let diagramModeler: any = null;
 
     if (diagramType === 'bpmn') {
       diagramModeler = new BpmnModeler({
@@ -108,7 +126,7 @@ export default function ReactDiagramEditor({
       });
     }
 
-    function handleLaunchScriptEditor(element) {
+    function handleLaunchScriptEditor(element: any) {
       if (onLaunchScriptEditor) {
         setPerformingXmlUpdates(true);
         const modeling = diagramModeler.get('modeling');
@@ -118,7 +136,7 @@ export default function ReactDiagramEditor({
 
     setDiagramModelerState(diagramModeler);
 
-    diagramModeler.on('launch.script.editor', (event) => {
+    diagramModeler.on('launch.script.editor', (event: any) => {
       const { error, element } = event;
       if (error) {
         console.log(error);
@@ -135,11 +153,11 @@ export default function ReactDiagramEditor({
       return undefined;
     }
 
-    function handleError(err) {
+    function handleError(err: any) {
       console.log('ERROR:', err);
     }
 
-    function onImportDone(event) {
+    function onImportDone(event: any) {
       const { error } = event;
 
       if (error) {
@@ -149,20 +167,26 @@ export default function ReactDiagramEditor({
 
       let modeler = diagramModelerState;
       if (diagramType === 'dmn') {
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         modeler = diagramModelerState.getActiveViewer();
       }
 
       // only get the canvas if the dmn active viewer is actually
       // a Modeler and not an Editor which is what it will when we are
       // actively editing a decision table
+      // @ts-expect-error TS(2531): Object is possibly 'null'.
       if (modeler.constructor.name === 'Modeler') {
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         modeler.get('canvas').zoom('fit-viewport');
       }
     }
 
-    diagramModelerState.on('import.done', onImportDone);
+    (diagramModelerState as any).on('import.done', onImportDone);
 
-    function displayDiagram(diagramModelerToUse, diagramXMLToDisplay) {
+    function displayDiagram(
+      diagramModelerToUse: any,
+      diagramXMLToDisplay: any
+    ) {
       if (alreadyImportedXmlRef.current) {
         return;
       }
@@ -170,7 +194,7 @@ export default function ReactDiagramEditor({
       alreadyImportedXmlRef.current = true;
     }
 
-    function fetchDiagramFromURL(urlToUse) {
+    function fetchDiagramFromURL(urlToUse: any) {
       fetch(urlToUse)
         .then((response) => response.text())
         .then((text) => setDiagramXMLString(text))
@@ -218,7 +242,7 @@ export default function ReactDiagramEditor({
     }
 
     return () => {
-      diagramModelerState.destroy();
+      (diagramModelerState as any).destroy();
     };
   }, [
     diagramModelerState,
@@ -233,7 +257,8 @@ export default function ReactDiagramEditor({
   ]);
 
   function handleSave() {
-    diagramModelerState.saveXML({ format: true }).then((xmlObject) => {
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
+    diagramModelerState.saveXML({ format: true }).then((xmlObject: any) => {
       saveDiagram(xmlObject.xml);
     });
   }
@@ -246,22 +271,3 @@ export default function ReactDiagramEditor({
     </div>
   );
 }
-
-ReactDiagramEditor.propTypes = {
-  processModelId: PropTypes.string.isRequired,
-  processGroupId: PropTypes.string.isRequired,
-  saveDiagram: PropTypes.func.isRequired,
-  diagramType: PropTypes.string.isRequired,
-
-  diagramXML: PropTypes.string,
-  fileName: PropTypes.string,
-  onLaunchScriptEditor: PropTypes.func,
-  url: PropTypes.string,
-};
-
-ReactDiagramEditor.defaultProps = {
-  diagramXML: null,
-  fileName: null,
-  onLaunchScriptEditor: null,
-  url: null,
-};
diff --git a/src/config.js b/src/config.tsx
similarity index 100%
rename from src/config.js
rename to src/config.tsx
diff --git a/src/contexts/ErrorContext.js b/src/contexts/ErrorContext.tsx
similarity index 62%
rename from src/contexts/ErrorContext.js
rename to src/contexts/ErrorContext.tsx
index e70bc15..50b362b 100644
--- a/src/contexts/ErrorContext.js
+++ b/src/contexts/ErrorContext.tsx
@@ -1,4 +1,5 @@
 import { createContext } from 'react';
 
+// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
 const ErrorContext = createContext();
 export default ErrorContext;
diff --git a/src/helpers.test.js b/src/helpers.test.tsx
similarity index 100%
rename from src/helpers.test.js
rename to src/helpers.test.tsx
diff --git a/src/helpers.js b/src/helpers.tsx
similarity index 78%
rename from src/helpers.js
rename to src/helpers.tsx
index 5eb9688..3d3bc5f 100644
--- a/src/helpers.js
+++ b/src/helpers.tsx
@@ -1,5 +1,5 @@
 // https://www.30secondsofcode.org/js/s/slugify
-export const slugifyString = (str) => {
+export const slugifyString = (str: any) => {
   return str
     .toLowerCase()
     .trim()
@@ -9,11 +9,11 @@ export const slugifyString = (str) => {
     .replace(/-+$/g, '');
 };
 
-export const capitalizeFirstLetter = (string) => {
+export const capitalizeFirstLetter = (string: any) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
-export const convertDateToSeconds = (date, onChangeFunction) => {
+export const convertDateToSeconds = (date: any, onChangeFunction: any) => {
   let dateInSeconds = date;
   if (date !== null) {
     let dateInMilliseconds = date;
diff --git a/src/index.js b/src/index.tsx
similarity index 75%
rename from src/index.js
rename to src/index.tsx
index 02f826b..61aa0cb 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -7,6 +7,7 @@ import './index.css';
 
 import reportWebVitals from './reportWebVitals';
 
+// @ts-expect-error TS(2345): Argument of type 'HTMLElement | null' is not assig... Remove this comment to see the full error message
 const root = ReactDOMClient.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
@@ -17,4 +18,5 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
 reportWebVitals();
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.tsx
similarity index 86%
rename from src/reportWebVitals.js
rename to src/reportWebVitals.tsx
index 532f29b..f00fe6c 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.tsx
@@ -1,4 +1,4 @@
-const reportWebVitals = (onPerfEntry) => {
+const reportWebVitals = (onPerfEntry: any) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
diff --git a/src/routes/AdminRoutes.js b/src/routes/AdminRoutes.js
deleted file mode 100644
index 443b217..0000000
--- a/src/routes/AdminRoutes.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Routes, Route } from 'react-router-dom';
-
-import ProcessGroups from './ProcessGroups';
-import ProcessGroupShow from './ProcessGroupShow';
-import ProcessGroupNew from './ProcessGroupNew';
-import ProcessGroupEdit from './ProcessGroupEdit';
-import ProcessModelShow from './ProcessModelShow';
-import ProcessModelEditDiagram from './ProcessModelEditDiagram';
-import ProcessInstanceList from './ProcessInstanceList';
-import ProcessInstanceReport from './ProcessInstanceReport';
-import ProcessModelNew from './ProcessModelNew';
-import ProcessModelEdit from './ProcessModelEdit';
-import ProcessInstanceShow from './ProcessInstanceShow';
-
-export default function AdminRoutes() {
-  return (
-    <Routes>
-      <Route path="/" element={<ProcessGroups />} />
-
-      <Route path="process-groups" element={<ProcessGroups />} />
-      <Route
-        path="process-groups/:process_group_id"
-        element={<ProcessGroupShow />}
-      />
-      <Route path="process-groups/new" element={<ProcessGroupNew />} />
-      <Route
-        path="process-groups/:process_group_id/edit"
-        element={<ProcessGroupEdit />}
-      />
-
-      <Route
-        path="process-models/:process_group_id/new"
-        element={<ProcessModelNew />}
-      />
-      <Route
-        path="process-models/:process_group_id/:process_model_id"
-        element={<ProcessModelShow />}
-      />
-      <Route
-        path="process-models/:process_group_id/:process_model_id/file"
-        element={<ProcessModelEditDiagram />}
-      />
-      <Route
-        path="process-models/:process_group_id/:process_model_id/file/:file_name"
-        element={<ProcessModelEditDiagram />}
-      />
-      <Route
-        path="process-models/:process_group_id/:process_model_id/process-instances"
-        element={<ProcessInstanceList />}
-      />
-      <Route
-        path="process-models/:process_group_id/:process_model_id/process-instances/report"
-        element={<ProcessInstanceReport />}
-      />
-      <Route
-        path="process-models/:process_group_id/:process_model_id/edit"
-        element={<ProcessModelEdit />}
-      />
-      <Route
-        path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
-        element={<ProcessInstanceShow />}
-      />
-    </Routes>
-  );
-}
diff --git a/src/routes/AdminRoutes.tsx b/src/routes/AdminRoutes.tsx
new file mode 100644
index 0000000..3290d6a
--- /dev/null
+++ b/src/routes/AdminRoutes.tsx
@@ -0,0 +1,89 @@
+import { Routes, Route } from 'react-router-dom';
+
+import ProcessGroups from './ProcessGroups';
+import ProcessGroupShow from './ProcessGroupShow';
+import ProcessGroupNew from './ProcessGroupNew';
+import ProcessGroupEdit from './ProcessGroupEdit';
+import ProcessModelShow from './ProcessModelShow';
+import ProcessModelEditDiagram from './ProcessModelEditDiagram';
+import ProcessInstanceList from './ProcessInstanceList';
+import ProcessInstanceReport from './ProcessInstanceReport';
+import ProcessModelNew from './ProcessModelNew';
+import ProcessModelEdit from './ProcessModelEdit';
+import ProcessInstanceShow from './ProcessInstanceShow';
+
+export default function AdminRoutes() {
+  return (
+    // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+    <Routes>
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route path="/" element={<ProcessGroups />} />
+
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route path="process-groups" element={<ProcessGroups />} />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-groups/:process_group_id"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessGroupShow />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route path="process-groups/new" element={<ProcessGroupNew />} />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-groups/:process_group_id/edit"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessGroupEdit />}
+      />
+
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/new"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessModelNew />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/:process_model_id"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessModelShow />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/:process_model_id/file"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessModelEditDiagram />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/:process_model_id/file/:file_name"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessModelEditDiagram />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/:process_model_id/process-instances"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessInstanceList />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/:process_model_id/process-instances/report"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessInstanceReport />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/:process_model_id/edit"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessModelEdit />}
+      />
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <Route
+        path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
+        // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+        element={<ProcessInstanceShow />}
+      />
+    </Routes>
+  );
+}
diff --git a/src/routes/ProcessGroupEdit.js b/src/routes/ProcessGroupEdit.tsx
similarity index 83%
rename from src/routes/ProcessGroupEdit.js
rename to src/routes/ProcessGroupEdit.tsx
index 8a01f5a..80cff9c 100644
--- a/src/routes/ProcessGroupEdit.js
+++ b/src/routes/ProcessGroupEdit.tsx
@@ -27,9 +27,10 @@ export default function ProcessGroupEdit() {
       );
   }, [params]);
 
-  const updateProcessGroup = (event) => {
+  const updateProcessGroup = (event: any) => {
     event.preventDefault();
 
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
     fetch(`${BACKEND_BASE_URL}/process-groups/${processGroup.id}`, {
       headers: new Headers({
         'Content-Type': 'application/json',
@@ -38,10 +39,12 @@ export default function ProcessGroupEdit() {
       method: 'PUT',
       body: JSON.stringify({
         display_name: displayName,
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         id: processGroup.id,
       }),
     }).then(
       () => {
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         navigate(`/admin/process-groups/${processGroup.id}`);
       },
       // Note: it's important to handle errors here
@@ -54,6 +57,7 @@ export default function ProcessGroupEdit() {
   };
 
   const deleteProcessGroup = () => {
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
     fetch(`${BACKEND_BASE_URL}/process-groups/${processGroup.id}`, {
       headers: new Headers({
         Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
@@ -69,15 +73,15 @@ export default function ProcessGroupEdit() {
     );
   };
 
-  const onDisplayNameChanged = (newDisplayName) => {
+  const onDisplayNameChanged = (newDisplayName: any) => {
     setDisplayName(newDisplayName);
   };
 
   if (processGroup) {
     return (
       <main style={{ padding: '1rem 0' }}>
-        <ProcessBreadcrumb processGroupId={processGroup.id} />
-        <h2>Edit Process Group: {processGroup.id}</h2>
+        <ProcessBreadcrumb processGroupId={(processGroup as any).id} />
+        <h2>Edit Process Group: {(processGroup as any).id}</h2>
         <form onSubmit={updateProcessGroup}>
           <label>Display Name:</label>
           <input
@@ -92,7 +96,7 @@ export default function ProcessGroupEdit() {
             <Button type="submit">Submit</Button>
             <Button
               variant="secondary"
-              href={`/admin/process-groups/${processGroup.id}`}
+              href={`/admin/process-groups/${(processGroup as any).id}`}
             >
               Cancel
             </Button>
diff --git a/src/routes/ProcessGroupNew.js b/src/routes/ProcessGroupNew.tsx
similarity index 95%
rename from src/routes/ProcessGroupNew.js
rename to src/routes/ProcessGroupNew.tsx
index 7f129ca..b93495a 100644
--- a/src/routes/ProcessGroupNew.js
+++ b/src/routes/ProcessGroupNew.tsx
@@ -10,7 +10,7 @@ export default function ProcessGroupNew() {
   const [displayName, setDisplayName] = useState('');
   const navigate = useNavigate();
 
-  const addProcessGroup = (event) => {
+  const addProcessGroup = (event: any) => {
     event.preventDefault();
 
     fetch(`${BACKEND_BASE_URL}/process-groups`, {
@@ -36,7 +36,7 @@ export default function ProcessGroupNew() {
     );
   };
 
-  const onDisplayNameChanged = (newDisplayName) => {
+  const onDisplayNameChanged = (newDisplayName: any) => {
     setDisplayName(newDisplayName);
     if (!idHasBeenUpdatedByUser) {
       setIdentifier(slugifyString(newDisplayName));
diff --git a/src/routes/ProcessGroupShow.js b/src/routes/ProcessGroupShow.tsx
similarity index 69%
rename from src/routes/ProcessGroupShow.js
rename to src/routes/ProcessGroupShow.tsx
index ed28541..d85a588 100644
--- a/src/routes/ProcessGroupShow.js
+++ b/src/routes/ProcessGroupShow.tsx
@@ -17,8 +17,10 @@ export default function ProcessGroupShow() {
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
@@ -59,13 +61,16 @@ export default function ProcessGroupShow() {
   const buildTable = () => {
     const rows = processModels.map((row) => {
       return (
-        <tr key={row.id}>
+        <tr key={(row as any).id}>
           <td>
-            <Link to={`/admin/process-models/${processGroup.id}/${row.id}`}>
-              {row.id}
+            <Link
+              // @ts-expect-error TS(2531): Object is possibly 'null'.
+              to={`/admin/process-models/${processGroup.id}/${(row as any).id}`}
+            >
+              {(row as any).id}
             </Link>
           </td>
-          <td>{row.display_name}</td>
+          <td>{(row as any).display_name}</td>
         </tr>
       );
     });
@@ -87,21 +92,26 @@ export default function ProcessGroupShow() {
 
   if (processGroup && pagination) {
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     return (
       <main style={{ padding: '1rem 0' }}>
-        <ProcessBreadcrumb processGroupId={processGroup.id} />
-        <h2>Process Group: {processGroup.id}</h2>
+        {/* @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'. */}
+        <ProcessBreadcrumb processGroupId={(processGroup as any).id} />
+        <h2>Process Group: {(processGroup as any).id}</h2>
         <ul>
           <Stack direction="horizontal" gap={3}>
-            <Button href={`/admin/process-models/${processGroup.id}/new`}>
+            <Button
+              href={`/admin/process-models/${(processGroup as any).id}/new`}
+            >
               Add a process model
             </Button>
             <Button
-              href={`/admin/process-groups/${processGroup.id}/edit`}
+              href={`/admin/process-groups/${(processGroup as any).id}/edit`}
               variant="secondary"
             >
               Edit process group
@@ -113,8 +123,9 @@ export default function ProcessGroupShow() {
             page={page}
             perPage={perPage}
             pagination={pagination}
+            // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
             tableToDisplay={buildTable()}
-            path={`/admin/process-groups/${processGroup.id}`}
+            path={`/admin/process-groups/${(processGroup as any).id}`}
           />
         </ul>
       </main>
diff --git a/src/routes/ProcessGroups.js b/src/routes/ProcessGroups.tsx
similarity index 68%
rename from src/routes/ProcessGroups.js
rename to src/routes/ProcessGroups.tsx
index f73e8ae..0721477 100644
--- a/src/routes/ProcessGroups.js
+++ b/src/routes/ProcessGroups.tsx
@@ -17,8 +17,10 @@ export default function ProcessGroups() {
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
@@ -45,11 +47,13 @@ export default function ProcessGroups() {
   const buildTable = () => {
     const rows = processGroups.map((row) => {
       return (
-        <tr key={row.id}>
+        <tr key={(row as any).id}>
           <td>
-            <Link to={`/admin/process-groups/${row.id}`}>{row.id}</Link>
+            <Link to={`/admin/process-groups/${(row as any).id}`}>
+              {(row as any).id}
+            </Link>
           </td>
-          <td>{row.display_name}</td>
+          <td>{(row as any).display_name}</td>
         </tr>
       );
     });
@@ -68,22 +72,28 @@ export default function ProcessGroups() {
 
   const processGroupsDisplayArea = () => {
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     let displayText = '';
     if (processGroups?.length > 0) {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
       displayText = (
         <PaginationForTable
           page={page}
           perPage={perPage}
+          // @ts-expect-error TS(2322): Type 'null' is not assignable to type '{ [key: str... Remove this comment to see the full error message
           pagination={pagination}
+          // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
           tableToDisplay={buildTable()}
           path="/admin/process-groups"
         />
       );
     } else {
+      // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
       displayText = <p>No Groups To Display</p>;
     }
     return displayText;
@@ -92,6 +102,7 @@ export default function ProcessGroups() {
   if (pagination) {
     return (
       <main style={{ padding: '1rem 0' }}>
+        {/* @ts-expect-error TS(2322): Type '{}' is not assignable to type 'never'. */}
         <ProcessBreadcrumb />
         <h2>Process Groups</h2>
         <Button href="/admin/process-groups/new">Add a process group</Button>
diff --git a/src/routes/ProcessInstanceList.js b/src/routes/ProcessInstanceList.tsx
similarity index 79%
rename from src/routes/ProcessInstanceList.js
rename to src/routes/ProcessInstanceList.tsx
index 94e6927..16b53fc 100644
--- a/src/routes/ProcessInstanceList.js
+++ b/src/routes/ProcessInstanceList.tsx
@@ -7,6 +7,7 @@ import {
 } from 'react-router-dom';
 
 import { Button, Table, Stack, Dropdown } from 'react-bootstrap';
+// @ts-expect-error TS(7016): Could not find a declaration file for module 'reac... Remove this comment to see the full error message
 import DatePicker from 'react-datepicker';
 import { format } from 'date-fns';
 import {
@@ -41,7 +42,7 @@ export default function ProcessInstanceList() {
   const [endFrom, setEndFrom] = useState(null);
   const [endTill, setEndTill] = useState(null);
 
-  const setErrorMessage = useContext(ErrorContext)[1];
+  const setErrorMessage = (useContext as any)(ErrorContext)[1];
 
   const [processStatus, setProcessStatus] = useState(PROCESS_STATUSES[0]);
   const parametersToAlwaysFilterBy = useMemo(() => {
@@ -57,12 +58,14 @@ export default function ProcessInstanceList() {
     function getProcessInstances() {
       const page = searchParams.get('page') || DEFAULT_PAGE;
       const perPage = parseInt(
+        // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
         searchParams.get('per_page') || DEFAULT_PER_PAGE,
         10
       );
       let queryParamString = `per_page=${perPage}&page=${page}`;
 
       Object.keys(parametersToAlwaysFilterBy).forEach((paramName) => {
+        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
         const functionToCall = parametersToAlwaysFilterBy[paramName];
         const searchParamValue = searchParams.get(paramName);
         if (searchParamValue) {
@@ -75,6 +78,7 @@ export default function ProcessInstanceList() {
         queryParamString += `&process_status=${searchParams.get(
           'process_status'
         )}`;
+        // @ts-expect-error TS(2345): Argument of type 'string | null' is not assignable... Remove this comment to see the full error message
         setProcessStatus(searchParams.get('process_status'));
       }
 
@@ -110,7 +114,7 @@ export default function ProcessInstanceList() {
 
   // does the comparison, but also returns false if either argument
   // is not truthy and therefore not comparable.
-  const isTrueComparison = (param1, operation, param2) => {
+  const isTrueComparison = (param1: any, operation: any, param2: any) => {
     if (param1 && param2) {
       switch (operation) {
         case '<':
@@ -125,10 +129,11 @@ export default function ProcessInstanceList() {
     }
   };
 
-  const handleFilter = (event) => {
+  const handleFilter = (event: any) => {
     event.preventDefault();
     const page = searchParams.get('page') || DEFAULT_PAGE;
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
@@ -173,7 +178,12 @@ export default function ProcessInstanceList() {
     );
   };
 
-  const dateComponent = (labelString, name, initialDate, onChangeFunction) => {
+  const dateComponent = (
+    labelString: any,
+    name: any,
+    initialDate: any,
+    onChangeFunction: any
+  ) => {
     let selectedDate = null;
     if (initialDate) {
       selectedDate = new Date(initialDate * 1000);
@@ -184,7 +194,7 @@ export default function ProcessInstanceList() {
         <DatePicker
           id={`date-picker-${name}`}
           selected={selectedDate}
-          onChange={(date) => convertDateToSeconds(date, onChangeFunction)}
+          onChange={(date: any) => convertDateToSeconds(date, onChangeFunction)}
           showTimeSelect
           dateFormat={DATE_FORMAT}
         />
@@ -270,32 +280,34 @@ export default function ProcessInstanceList() {
   const buildTable = () => {
     const rows = processInstances.map((row) => {
       let formattedStartDate = '-';
-      if (row.start_in_seconds) {
-        const startDate = new Date(row.start_in_seconds * 1000);
+      if ((row as any).start_in_seconds) {
+        const startDate = new Date((row as any).start_in_seconds * 1000);
         formattedStartDate = format(startDate, DATE_FORMAT);
       }
       let formattedEndDate = '-';
-      if (row.end_in_seconds) {
-        const endDate = new Date(row.end_in_seconds * 1000);
+      if ((row as any).end_in_seconds) {
+        const endDate = new Date((row as any).end_in_seconds * 1000);
         formattedEndDate = format(endDate, DATE_FORMAT);
       }
 
       return (
-        <tr key={row.id}>
+        <tr key={(row as any).id}>
           <td>
             <Link
               data-qa="process-instance-show-link"
-              to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${row.id}`}
+              to={`/admin/process-models/${params.process_group_id}/${
+                params.process_model_id
+              }/process-instances/${(row as any).id}`}
             >
-              {row.id}
+              {(row as any).id}
             </Link>
           </td>
-          <td>{row.process_model_identifier}</td>
-          <td>{row.process_group_identifier}</td>
+          <td>{(row as any).process_model_identifier}</td>
+          <td>{(row as any).process_group_identifier}</td>
           <td>{formattedStartDate}</td>
           <td>{formattedEndDate}</td>
-          <td data-qa={`process-instance-status-${row.status}`}>
-            {row.status}
+          <td data-qa={`process-instance-status-${(row as any).status}`}>
+            {(row as any).status}
           </td>
         </tr>
       );
@@ -319,15 +331,20 @@ export default function ProcessInstanceList() {
 
   if (pagination) {
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     return (
       <main>
         <ProcessBreadcrumb
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           processModelId={params.process_model_id}
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           processGroupId={params.process_group_id}
+          // @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
           linkProcessModel="true"
         />
         <h2>Process Instances for {params.process_model_id}</h2>
@@ -336,6 +353,7 @@ export default function ProcessInstanceList() {
           page={page}
           perPage={perPage}
           pagination={pagination}
+          // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
           tableToDisplay={buildTable()}
           queryParamString={getSearchParamsAsQueryString()}
           path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`}
diff --git a/src/routes/ProcessInstanceReport.js b/src/routes/ProcessInstanceReport.tsx
similarity index 72%
rename from src/routes/ProcessInstanceReport.js
rename to src/routes/ProcessInstanceReport.tsx
index e25a560..c243ab5 100644
--- a/src/routes/ProcessInstanceReport.js
+++ b/src/routes/ProcessInstanceReport.tsx
@@ -22,6 +22,7 @@ export default function ProcessInstanceReport() {
     function getProcessInstances() {
       const page = searchParams.get('page') || DEFAULT_PAGE;
       const perPage = parseInt(
+        // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
         searchParams.get('per_page') || DEFAULT_PER_PAGE,
         10
       );
@@ -55,13 +56,13 @@ export default function ProcessInstanceReport() {
   const buildTable = () => {
     const rows = processInstances.map((row) => {
       return (
-        <tr key={row.id}>
-          <td>{row.id}</td>
-          <td>{row.data.month}</td>
-          <td>{row.data.milestone}</td>
-          <td>{row.data.req_id}</td>
-          <td>{row.data.feature}</td>
-          <td>{row.data.priority}</td>
+        <tr key={(row as any).id}>
+          <td>{(row as any).id}</td>
+          <td>{(row as any).data.month}</td>
+          <td>{(row as any).data.milestone}</td>
+          <td>{(row as any).data.req_id}</td>
+          <td>{(row as any).data.feature}</td>
+          <td>{(row as any).data.priority}</td>
         </tr>
       );
     });
@@ -84,15 +85,20 @@ export default function ProcessInstanceReport() {
 
   if (pagination) {
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     return (
       <main>
         <ProcessBreadcrumb
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           processModelId={params.process_model_id}
+          // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'never'.
           processGroupId={processGroupId}
+          // @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
           linkProcessModel="true"
         />
         <h2>Process Instances for {params.process_model_id}</h2>
@@ -100,6 +106,7 @@ export default function ProcessInstanceReport() {
           page={page}
           perPage={perPage}
           pagination={pagination}
+          // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
           tableToDisplay={buildTable()}
           path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report`}
         />
diff --git a/src/routes/ProcessInstanceShow.js b/src/routes/ProcessInstanceShow.tsx
similarity index 79%
rename from src/routes/ProcessInstanceShow.js
rename to src/routes/ProcessInstanceShow.tsx
index 9981135..adb8087 100644
--- a/src/routes/ProcessInstanceShow.js
+++ b/src/routes/ProcessInstanceShow.tsx
@@ -55,14 +55,17 @@ export default function ProcessInstanceShow() {
     return (
       <main style={{ padding: '1rem 0' }}>
         <ProcessBreadcrumb
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           processModelId={params.process_model_id}
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           processGroupId={params.process_group_id}
+          // @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
           linkProcessModel="true"
         />
-        <h2>Process Instance Id: {processInstance.id}</h2>
+        <h2>Process Instance Id: {(processInstance as any).id}</h2>
         <h2>Data</h2>
         <div>
-          <pre>{JSON.stringify(processInstance.data, null, 2)}</pre>
+          <pre>{JSON.stringify((processInstance as any).data, null, 2)}</pre>
         </div>
         <Button onClick={deleteProcessInstance} variant="danger">
           Delete process instance
diff --git a/src/routes/ProcessModelEdit.js b/src/routes/ProcessModelEdit.tsx
similarity index 77%
rename from src/routes/ProcessModelEdit.js
rename to src/routes/ProcessModelEdit.tsx
index 8c2fbe9..9522667 100644
--- a/src/routes/ProcessModelEdit.js
+++ b/src/routes/ProcessModelEdit.tsx
@@ -26,7 +26,7 @@ export default function ProcessModelEdit() {
       );
   }, [processModelPath]);
 
-  const updateProcessModel = (event) => {
+  const updateProcessModel = (event: any) => {
     event.preventDefault();
 
     fetch(`${BACKEND_BASE_URL}/${processModelPath}`, {
@@ -36,12 +36,18 @@ export default function ProcessModelEdit() {
       }),
       method: 'PUT',
       body: JSON.stringify({
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         id: processModel.id,
         display_name: displayName,
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         description: processModel.description,
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         process_group_id: processModel.process_group_id,
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         is_master_spec: processModel.is_master_spec,
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         standalone: processModel.standalone,
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
         library: processModel.library,
       }),
     }).then(
@@ -59,7 +65,10 @@ export default function ProcessModelEdit() {
 
   const deleteProcessModel = () => {
     fetch(
-      `${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`,
+      `${BACKEND_BASE_URL}/process-models/${
+        // @ts-expect-error TS(2531): Object is possibly 'null'.
+        processModel.process_group_id
+      }/${processModel.id}`,
       {
         headers: new Headers({
           Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
@@ -76,15 +85,16 @@ export default function ProcessModelEdit() {
     );
   };
 
-  const onDisplayNameChanged = (newDisplayName) => {
+  const onDisplayNameChanged = (newDisplayName: any) => {
     setDisplayName(newDisplayName);
   };
 
   if (processModel) {
     return (
       <main style={{ padding: '1rem 0' }}>
-        <ProcessBreadcrumb processGroupId={processModel.id} />
-        <h2>Edit Process Group: {processModel.id}</h2>
+        {/* @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'. */}
+        <ProcessBreadcrumb processGroupId={(processModel as any).id} />
+        <h2>Edit Process Group: {(processModel as any).id}</h2>
         <form onSubmit={updateProcessModel}>
           <label>Display Name:</label>
           <input
diff --git a/src/routes/ProcessModelEditDiagram.js b/src/routes/ProcessModelEditDiagram.tsx
similarity index 72%
rename from src/routes/ProcessModelEditDiagram.js
rename to src/routes/ProcessModelEditDiagram.tsx
index 394f22d..4a3e6cd 100644
--- a/src/routes/ProcessModelEditDiagram.js
+++ b/src/routes/ProcessModelEditDiagram.tsx
@@ -54,7 +54,7 @@ export default function ProcessModelEditDiagram() {
     setNewFileName('');
   };
 
-  const saveDiagram = (bpmnXML, fileName = params.file_name) => {
+  const saveDiagram = (bpmnXML: any, fileName = params.file_name) => {
     setBpmnXmlForDiagramRendering(bpmnXML);
 
     let url = `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/file`;
@@ -96,7 +96,7 @@ export default function ProcessModelEditDiagram() {
     );
   };
 
-  const handleFileNameSave = (event) => {
+  const handleFileNameSave = (event: any) => {
     event.preventDefault();
     setShowFileNameEditor(false);
     saveDiagram(bpmnXmlForDiagramRendering);
@@ -134,7 +134,7 @@ export default function ProcessModelEditDiagram() {
     );
   };
 
-  const onLaunchScriptEditor = (element, modeling) => {
+  const onLaunchScriptEditor = (element: any, modeling: any) => {
     setScriptText(element.businessObject.script || '');
     setScriptModeling(modeling);
     setScriptElement(element);
@@ -143,8 +143,9 @@ export default function ProcessModelEditDiagram() {
   const handleScriptEditorClose = () => {
     setShowScriptEditor(false);
   };
-  const handleEditorChange = (value) => {
+  const handleEditorChange = (value: any) => {
     setScriptText(value);
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
     scriptModeling.updateProperties(scriptElement, {
       scriptFormat: 'python',
       script: value,
@@ -153,7 +154,7 @@ export default function ProcessModelEditDiagram() {
   const scriptEditor = () => {
     let scriptName = '';
     if (scriptElement) {
-      scriptName = scriptElement.di.bpmnElement.name;
+      scriptName = (scriptElement as any).di.bpmnElement.name;
     }
     return (
       <Modal size="xl" show={showScriptEditor} onHide={handleScriptEditorClose}>
@@ -185,23 +186,36 @@ export default function ProcessModelEditDiagram() {
     if (isDmn()) {
       return (
         <ReactDiagramEditor
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           process_model_id={params.process_model_id}
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           process_group_id={params.process_group_id}
+          // @ts-expect-error TS(2322): Type '(bpmnXML: any, fileName?: string | undefined... Remove this comment to see the full error message
           saveDiagram={saveDiagram}
+          // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'never'.
           diagramXML={bpmnXmlForDiagramRendering}
-          fileName={processModelFile ? processModelFile.name : null}
+          // @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'.
+          fileName={processModelFile ? (processModelFile as any).name : null}
+          // @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
           diagramType="dmn"
         />
       );
     }
     return (
       <ReactDiagramEditor
+        // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
         process_model_id={params.process_model_id}
+        // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
         process_group_id={params.process_group_id}
+        // @ts-expect-error TS(2322): Type '(bpmnXML: any, fileName?: string | undefined... Remove this comment to see the full error message
         saveDiagram={saveDiagram}
+        // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'never'.
         diagramXML={bpmnXmlForDiagramRendering}
-        fileName={processModelFile ? processModelFile.name : null}
+        // @ts-expect-error TS(2322): Type 'any' is not assignable to type 'never'.
+        fileName={processModelFile ? (processModelFile as any).name : null}
+        // @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
         diagramType="bpmn"
+        // @ts-expect-error TS(2322): Type '(element: any, modeling: any) => void' is no... Remove this comment to see the full error message
         onLaunchScriptEditor={onLaunchScriptEditor}
       />
     );
@@ -212,13 +226,16 @@ export default function ProcessModelEditDiagram() {
     return (
       <main style={{ padding: '1rem 0' }}>
         <ProcessBreadcrumb
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           processGroupId={params.process_group_id}
+          // @ts-expect-error TS(2322): Type 'string | undefined' is not assignable to typ... Remove this comment to see the full error message
           processModelId={params.process_model_id}
+          // @ts-expect-error TS(2322): Type 'string' is not assignable to type 'never'.
           linkProcessModel="true"
         />
         <h2>
           Process Model File
-          {processModelFile ? `: ${processModelFile.name}` : ''}
+          {processModelFile ? `: ${(processModelFile as any).name}` : ''}
         </h2>
         {appropriateEditor()}
         {newFileNameBox()}
diff --git a/src/routes/ProcessModelNew.js b/src/routes/ProcessModelNew.tsx
similarity index 92%
rename from src/routes/ProcessModelNew.js
rename to src/routes/ProcessModelNew.tsx
index 57b6b6f..8ff06fd 100644
--- a/src/routes/ProcessModelNew.js
+++ b/src/routes/ProcessModelNew.tsx
@@ -12,7 +12,7 @@ export default function ProcessModelNew() {
   const [displayName, setDisplayName] = useState('');
   const navigate = useNavigate();
 
-  const addProcessModel = (event) => {
+  const addProcessModel = (event: any) => {
     event.preventDefault();
 
     fetch(`${BACKEND_BASE_URL}/process-models`, {
@@ -45,7 +45,7 @@ export default function ProcessModelNew() {
     );
   };
 
-  const onDisplayNameChanged = (newDisplayName) => {
+  const onDisplayNameChanged = (newDisplayName: any) => {
     setDisplayName(newDisplayName);
     if (!idHasBeenUpdatedByUser) {
       setIdentifier(slugifyString(newDisplayName));
@@ -54,6 +54,7 @@ export default function ProcessModelNew() {
 
   return (
     <main style={{ padding: '1rem 0' }}>
+      {/* @ts-expect-error TS(2322): Type '{}' is not assignable to type 'never'. */}
       <ProcessBreadcrumb />
       <h2>Add Process Model</h2>
       <form onSubmit={addProcessModel}>
diff --git a/src/routes/ProcessModelShow.js b/src/routes/ProcessModelShow.tsx
similarity index 58%
rename from src/routes/ProcessModelShow.js
rename to src/routes/ProcessModelShow.tsx
index 3213cd5..d17032e 100644
--- a/src/routes/ProcessModelShow.js
+++ b/src/routes/ProcessModelShow.tsx
@@ -31,8 +31,9 @@ export default function ProcessModelShow() {
       );
   }, [params]);
 
-  const processModelRun = (processInstance) => {
+  const processModelRun = (processInstance: any) => {
     fetch(
+      // @ts-expect-error TS(2531): Object is possibly 'null'.
       `${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/${processInstance.id}/run`,
       {
         headers: new Headers({
@@ -54,6 +55,7 @@ export default function ProcessModelShow() {
 
   const processInstanceCreateAndRun = () => {
     fetch(
+      // @ts-expect-error TS(2531): Object is possibly 'null'.
       `${BACKEND_BASE_URL}/process-models/${processModel.process_group_id}/${processModel.id}`,
       {
         headers: new Headers({
@@ -75,47 +77,50 @@ export default function ProcessModelShow() {
 
   let processInstanceResultTag = '';
   if (processInstanceResult) {
+    // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
     processInstanceResultTag = (
       <pre>
-        {processInstanceResult.status}:{' '}
-        {JSON.stringify(processInstanceResult.data)}
+        {(processInstanceResult as any).status}:{' '}
+        {JSON.stringify((processInstanceResult as any).data)}
       </pre>
     );
   }
 
   if (processModel) {
-    let processModelFilesTag = '';
-    processModelFilesTag = processModel.files.map((fileBpmn) => {
-      if (fileBpmn.name.match(/\.(dmn|bpmn)$/)) {
-        let primarySuffix = '';
-        if (fileBpmn.name === processModel.primary_file_name) {
-          primarySuffix = '- Primary File';
+    const processModelFilesTag = (processModel as any).files.map(
+      (fileBpmn: any) => {
+        if (fileBpmn.name.match(/\.(dmn|bpmn)$/)) {
+          let primarySuffix = '';
+          // @ts-expect-error TS(2339): Property 'primary_file_name' does not exist on typ... Remove this comment to see the full error message
+          if (fileBpmn.name === processModel.primary_file_name) {
+            primarySuffix = '- Primary File';
+          }
+          return (
+            <li key={fileBpmn.name}>
+              <Link
+                to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file/${fileBpmn.name}`}
+              >
+                {fileBpmn.name}
+              </Link>
+              {primarySuffix}
+            </li>
+          );
         }
-        return (
-          <li key={fileBpmn.name}>
-            <Link
-              to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file/${fileBpmn.name}`}
-            >
-              {fileBpmn.name}
-            </Link>
-            {primarySuffix}
-          </li>
-        );
+        return <li key={fileBpmn.name}>{fileBpmn.name}</li>;
       }
-      return <li key={fileBpmn.name}>{fileBpmn.name}</li>;
-    });
+    );
 
     return (
       <main style={{ padding: '1rem 0' }}>
         <ProcessBreadcrumb
-          processGroupId={processModel.process_group_id}
-          processModelId={processModel.id}
+          processGroupId={(processModel as any).process_group_id}
+          processModelId={(processModel as any).id}
         />
-        <h2>Process Model: {processModel.id}</h2>
+        <h2>Process Model: {(processModel as any).id}</h2>
         {processInstanceResultTag}
         <FileInput
-          processModelId={processModel.id}
-          processGroupId={processModel.process_group_id}
+          processModelId={(processModel as any).id}
+          processGroupId={(processModel as any).process_group_id}
         />
         <br />
         <Stack direction="horizontal" gap={3}>
@@ -123,19 +128,25 @@ export default function ProcessModelShow() {
             Run
           </Button>
           <Button
-            href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/edit`}
+            href={`/admin/process-models/${
+              (processModel as any).process_group_id
+            }/${(processModel as any).id}/edit`}
             variant="secondary"
           >
             Edit process model
           </Button>
           <Button
-            href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=bpmn`}
+            href={`/admin/process-models/${
+              (processModel as any).process_group_id
+            }/${(processModel as any).id}/file?file_type=bpmn`}
             variant="warning"
           >
             Add New BPMN File
           </Button>
           <Button
-            href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=dmn`}
+            href={`/admin/process-models/${
+              (processModel as any).process_group_id
+            }/${(processModel as any).id}/file?file_type=dmn`}
             variant="success"
           >
             Add New DMN File
@@ -144,7 +155,9 @@ export default function ProcessModelShow() {
         <br />
         <br />
         <Link
-          to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/process-instances`}
+          to={`/admin/process-models/${
+            (processModel as any).process_group_id
+          }/${(processModel as any).id}/process-instances`}
         >
           Process Instances
         </Link>
diff --git a/src/routes/TaskList.js b/src/routes/TaskList.tsx
similarity index 69%
rename from src/routes/TaskList.js
rename to src/routes/TaskList.tsx
index 58b9e57..c2825ea 100644
--- a/src/routes/TaskList.js
+++ b/src/routes/TaskList.tsx
@@ -13,8 +13,10 @@ export default function TaskList() {
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
@@ -41,14 +43,14 @@ export default function TaskList() {
   const buildTable = () => {
     const rows = tasks.map((row) => {
       return (
-        <tr key={row.id}>
+        <tr key={(row as any).id}>
           <td>
-            <Link to={`/tasks/${row.id}`}>{row.id}</Link>
+            <Link to={`/tasks/${(row as any).id}`}>{(row as any).id}</Link>
           </td>
-          <td>{row.process_instance_id}</td>
-          <td>{row.status}</td>
+          <td>{(row as any).process_instance_id}</td>
+          <td>{(row as any).status}</td>
           <td>
-            <Button variant="primary" href={`/tasks/${row.id}`}>
+            <Button variant="primary" href={`/tasks/${(row as any).id}`}>
               Start
             </Button>
           </td>
@@ -72,9 +74,11 @@ export default function TaskList() {
 
   if (pagination) {
     const perPage = parseInt(
+      // @ts-expect-error TS(2345): Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
+    // @ts-expect-error TS(2345): Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     return (
       <main>
@@ -83,6 +87,7 @@ export default function TaskList() {
           page={page}
           perPage={perPage}
           pagination={pagination}
+          // @ts-expect-error TS(2322): Type 'Element' is not assignable to type 'string'.
           tableToDisplay={buildTable()}
           path="/tasks"
         />
diff --git a/src/routes/TaskShow.js b/src/routes/TaskShow.tsx
similarity index 73%
rename from src/routes/TaskShow.js
rename to src/routes/TaskShow.tsx
index 0725d45..b1dc6db 100644
--- a/src/routes/TaskShow.js
+++ b/src/routes/TaskShow.tsx
@@ -11,6 +11,7 @@ export default function TaskShow() {
   const navigate = useNavigate();
 
   useEffect(() => {
+    // @ts-expect-error TS(2345): Argument of type 'string | undefined' is not assig... Remove this comment to see the full error message
     const taskId = parseInt(params.task_id, 10);
     fetch(`${BACKEND_BASE_URL}/tasks/${taskId}`, {
       headers: new Headers({
@@ -28,7 +29,8 @@ export default function TaskShow() {
       );
   }, [params.task_id]);
 
-  const handleFormSubmit = (event) => {
+  const handleFormSubmit = (event: any) => {
+    // @ts-expect-error TS(2531): Object is possibly 'null'.
     fetch(`${BACKEND_BASE_URL}/tasks/${task.id}/submit`, {
       headers: new Headers({
         Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
@@ -51,13 +53,13 @@ export default function TaskShow() {
     return (
       <main>
         <Button href="/tasks">Go Back</Button>
-        <h1>Task ID: {task.id}</h1>
-        <h3>process_instance_id: {task.process_instance_id}</h3>
-        <h3>status: {task.status}</h3>
+        <h1>Task ID: {(task as any).id}</h1>
+        <h3>process_instance_id: {(task as any).process_instance_id}</h3>
+        <h3>status: {(task as any).status}</h3>
         <Form
-          formData={JSON.parse(task.spiffworkflow_task_data)}
+          formData={JSON.parse((task as any).spiffworkflow_task_data)}
           onSubmit={handleFormSubmit}
-          schema={JSON.parse(task.form_json)}
+          schema={JSON.parse((task as any).form_json)}
         />
       </main>
     );
diff --git a/src/routes/expenses.jsx b/src/routes/expenses.jsx
deleted file mode 100644
index d30204e..0000000
--- a/src/routes/expenses.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Expenses() {
-  return (
-    <main style={{ padding: '1rem 0' }}>
-      <h2>Expenses</h2>
-    </main>
-  );
-}
diff --git a/src/routes/expenses.tsx b/src/routes/expenses.tsx
new file mode 100644
index 0000000..ca576bc
--- /dev/null
+++ b/src/routes/expenses.tsx
@@ -0,0 +1,9 @@
+export default function Expenses() {
+  return (
+    // @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message
+    <main style={{ padding: '1rem 0' }}>
+      {/* @ts-expect-error TS(2686): 'React' refers to a UMD global, but the current fi... Remove this comment to see the full error message */}
+      <h2>Expenses</h2>
+    </main>
+  );
+}
diff --git a/src/setupTests.js b/src/setupTests.tsx
similarity index 100%
rename from src/setupTests.js
rename to src/setupTests.tsx
diff --git a/tsfixme.d.ts b/tsfixme.d.ts
new file mode 100644
index 0000000..33cb660
--- /dev/null
+++ b/tsfixme.d.ts
@@ -0,0 +1,4 @@
+// declare global {
+  type $TSFixMe = any;
+  type $TSFixMeFunction = (...args: any[]) => any;
+// }