From eb89af53dd95b37065b847eef4f8c6a112bb1660 Mon Sep 17 00:00:00 2001
From: Melle Dijkstra <melle.dijkstra@adidas.com>
Date: Thu, 7 Nov 2024 23:27:40 +0100
Subject: [PATCH 1/6] [WIP] remove material-react-table and use
 tabulator-tables instead + remove @mui/icons-material package which was
 slowing down bundling a lot. It is now super fast

---
 package-lock.json                             | 347 +-----------------
 package.json                                  |   6 +-
 src/client/import-dialog/Dialog.tsx           |   4 +-
 .../import-dialog/components/PreviewTable.tsx |  92 +++--
 src/client/import-dialog/index.html           |   9 +
 vite.config.ts                                |   2 +
 6 files changed, 86 insertions(+), 374 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2b9ac5b..e16e250 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,10 @@
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^5.15.16",
         "@mui/material": "^5.15.16",
-        "material-react-table": "^2.0.5",
         "papaparse": "^5.4.1",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "tabulator-tables": "^6.3.0"
       },
       "devDependencies": {
         "@babel/core": "^7.25.9",
@@ -37,6 +37,7 @@
         "@types/papaparse": "^5.3.15",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@types/tabulator-tables": "^6.2.3",
         "@vitejs/plugin-react-swc": "^3.7.1",
         "@vitest/coverage-v8": "^2.1.3",
         "babel-loader": "^9.2.1",
@@ -2992,107 +2993,6 @@
         }
       }
     },
-    "node_modules/@mui/private-theming": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.5.tgz",
-      "integrity": "sha512-FJqweqEXk0KdtTho9C2h6JEKXsOT7MAVH2Uj3N5oIqs6YKxnwBn2/zL2QuYYEtj5OJ87rEUnCfFic6ldClvzJw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/utils": "^6.1.5",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/styled-engine": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.5.tgz",
-      "integrity": "sha512-tiyWzMkHeWlOoE6AqomWvYvdml8Nv5k5T+LDwOiwHEawx8P9Lyja6ZwWPU6xljwPXYYPT2KBp1XvMly7dsK46A==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@emotion/cache": "^11.13.1",
-        "@emotion/serialize": "^1.3.2",
-        "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/system": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.5.tgz",
-      "integrity": "sha512-vPM9ocQ8qquRDByTG3XF/wfYTL7IWL/20EiiKqByLDps8wOmbrDG9rVznSE3ZbcjFCFfMRMhtxvN92bwe/63SA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/private-theming": "^6.1.5",
-        "@mui/styled-engine": "^6.1.5",
-        "@mui/types": "^7.2.18",
-        "@mui/utils": "^6.1.5",
-        "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/types": {
       "version": "7.2.18",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz",
@@ -3107,122 +3007,6 @@
         }
       }
     },
-    "node_modules/@mui/utils": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.5.tgz",
-      "integrity": "sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/types": "^7.2.18",
-        "@types/prop-types": "^15.7.13",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-date-pickers": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.22.0.tgz",
-      "integrity": "sha512-hopYo3ORP7ddYKnyBsqAtO2txEe2Zf6cehdikS5b1cqMTGOSL+18b11jfGVod9oipjb9L2JcT/WWkjoifs9Iww==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/utils": "^5.16.6 || ^6.0.0",
-        "@mui/x-internals": "7.21.0",
-        "@types/react-transition-group": "^4.4.11",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.15.14 || ^6.0.0",
-        "@mui/system": "^5.15.14 || ^6.0.0",
-        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
-        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
-        "dayjs": "^1.10.7",
-        "luxon": "^3.0.2",
-        "moment": "^2.29.4",
-        "moment-hijri": "^2.1.2",
-        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "date-fns": {
-          "optional": true
-        },
-        "date-fns-jalali": {
-          "optional": true
-        },
-        "dayjs": {
-          "optional": true
-        },
-        "luxon": {
-          "optional": true
-        },
-        "moment": {
-          "optional": true
-        },
-        "moment-hijri": {
-          "optional": true
-        },
-        "moment-jalaali": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-internals": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.21.0.tgz",
-      "integrity": "sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/utils": "^5.16.6 || ^6.0.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4483,77 +4267,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@tanstack/match-sorter-utils": {
-      "version": "8.19.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
-      "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
-      "dependencies": {
-        "remove-accents": "0.5.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-table": {
-      "version": "8.20.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
-      "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
-      "dependencies": {
-        "@tanstack/table-core": "8.20.5"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
-    "node_modules/@tanstack/react-virtual": {
-      "version": "3.10.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.6.tgz",
-      "integrity": "sha512-xaSy6uUxB92O8mngHZ6CvbhGuqxQ5lIZWCBy+FjhrbHmOwc6BnOnKkYm2FsB1/BpKw/+FVctlMbEtI+F6I1aJg==",
-      "dependencies": {
-        "@tanstack/virtual-core": "3.10.6"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@tanstack/table-core": {
-      "version": "8.20.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
-      "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/virtual-core": {
-      "version": "3.10.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.6.tgz",
-      "integrity": "sha512-1giLc4dzgEKLMx5pgKjL6HlG5fjZMgCjzlKAlpr7yoUtetVPELgER1NtephAI910nMwfPTHNyWKSFmJdHkz2Cw==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -4977,6 +4690,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/tabulator-tables": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@types/tabulator-tables/-/tabulator-tables-6.2.3.tgz",
+      "integrity": "sha512-ZeRF/WvtwFXml/4aT7kzfkHEiwbjHZdlIsjrgqcfdmpkl9GQ9XBHY6u9BblUaHX4NUiOlBeHrQKjvai6/bQH0g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -7746,15 +7466,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/highlight-words": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/highlight-words/-/highlight-words-1.2.2.tgz",
-      "integrity": "sha512-Mf4xfPXYm8Ay1wTibCrHpNWeR2nUMynMVFkXCi4mbl+TEgmNOe+I4hV7W3OCZcSvzGL6kupaqpfHOemliMTGxQ==",
-      "engines": {
-        "node": ">= 16",
-        "npm": ">= 8"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -8825,33 +8536,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/material-react-table": {
-      "version": "2.13.3",
-      "resolved": "https://registry.npmjs.org/material-react-table/-/material-react-table-2.13.3.tgz",
-      "integrity": "sha512-xeyAEG6UYG3qgBIo17epAP5zsWT1pH0uCEkaUxvhki9sGcP35OqfOMSZJNhISvmqEqXKYHdqKbZI6iOwsg1sYA==",
-      "dependencies": {
-        "@tanstack/match-sorter-utils": "8.19.4",
-        "@tanstack/react-table": "8.20.5",
-        "@tanstack/react-virtual": "3.10.6",
-        "highlight-words": "1.2.2"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kevinvandy"
-      },
-      "peerDependencies": {
-        "@emotion/react": ">=11.11",
-        "@emotion/styled": ">=11.11",
-        "@mui/icons-material": ">=5.11",
-        "@mui/material": ">=5.13",
-        "@mui/x-date-pickers": ">=6.15.0",
-        "react": ">=17.0",
-        "react-dom": ">=17.0"
-      }
-    },
     "node_modules/memoizerific": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -10137,11 +9821,6 @@
         "regjsparser": "bin/parser"
       }
     },
-    "node_modules/remove-accents": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
-    },
     "node_modules/replace-buffer": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/replace-buffer/-/replace-buffer-1.2.1.tgz",
@@ -10798,6 +10477,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabulator-tables": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-6.3.0.tgz",
+      "integrity": "sha512-gFiivoa03+NCDJ28Na3UU45nJT7sFXBsFCBtMqXz5OpsNTWrmL5ZJYA4oZtDFaVfarPqUHNgwm2PhL6DR7CQxg==",
+      "license": "MIT"
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index 9b19353..49e68fb 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,11 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.16",
-    "material-react-table": "^2.0.5",
     "papaparse": "^5.4.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "tabulator-tables": "^6.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.9",
@@ -53,6 +52,7 @@
     "@types/papaparse": "^5.3.15",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/tabulator-tables": "^6.2.3",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/coverage-v8": "^2.1.3",
     "babel-loader": "^9.2.1",
diff --git a/src/client/import-dialog/Dialog.tsx b/src/client/import-dialog/Dialog.tsx
index 81492c5..17abd52 100644
--- a/src/client/import-dialog/Dialog.tsx
+++ b/src/client/import-dialog/Dialog.tsx
@@ -12,8 +12,8 @@ import {
   Typography,
   NativeSelect,
   Stack,
+  Icon,
 } from '@mui/material';
-import { UploadFile } from '@mui/icons-material';
 
 export const Dialog = () => {
   const [strategyOptions, setStrategyOptions] =
@@ -124,7 +124,7 @@ export const Dialog = () => {
               <Button
                 component="label"
                 variant="outlined"
-                startIcon={<UploadFile />}
+                startIcon={<Icon>upload_file</Icon>}
                 sx={{ marginRight: '1rem' }}
               >
                 {importFile ? importFile.name : 'Upload CSV'}
diff --git a/src/client/import-dialog/components/PreviewTable.tsx b/src/client/import-dialog/components/PreviewTable.tsx
index 2d21c6e..b49917e 100644
--- a/src/client/import-dialog/components/PreviewTable.tsx
+++ b/src/client/import-dialog/components/PreviewTable.tsx
@@ -1,25 +1,13 @@
 import { Table } from '../../../common/types';
 import { Stack, Typography } from '@mui/material';
-import {
-  MaterialReactTable,
-  useMaterialReactTable,
-  type MRT_ColumnDef,
-  MRT_RowData,
-} from 'material-react-table';
-import { useMemo } from 'react';
+import { Tabulator } from 'tabulator-tables';
+import { useEffect, useRef } from 'react';
+import 'tabulator-tables/dist/css/tabulator.min.css';
 
 type ImportPreviewProps = {
   tableData: Table;
 };
 
-const prepareTableColumn = (
-  field: string,
-  columnName?: string
-): MRT_ColumnDef<Record<string, unknown>> => ({
-  accessorKey: field,
-  header: columnName ?? field,
-});
-
 const prepareTableData = (
   inputTable: Table
 ): {
@@ -49,35 +37,63 @@ const prepareTableData = (
   return { columns, rows };
 };
 
+const DataTable = ({ table }: { table: Table }) => {
+  const elemRef = useRef<HTMLDivElement>(null);
+
+  let tabulator = null;
+
+  useEffect(() => {
+    // instantiate Tabulator when element is mounted
+    if (elemRef.current) {
+      tabulator = new Tabulator(elemRef.current, {
+        data: [['data1', 'data2']],
+        reactiveData: true, //enable data reactivity
+        columns: [
+          {
+            title: 'col1',
+          },
+          {
+            title: 'col2',
+          },
+        ],
+      });
+    }
+  }, []);
+
+  return <div id="tabulator" ref={elemRef} />;
+};
+
 export const PreviewTable = ({ tableData }: ImportPreviewProps) => {
-  const { rows, columns } = useMemo(() => prepareTableData(tableData), []);
+  // const { rows, columns } = useMemo(() => prepareTableData(tableData), []);
 
-  const table = useMaterialReactTable({
-    columns,
-    data: rows,
-    enableRowSelection: true,
-    enableSelectAll: true,
-    enableTopToolbar: false,
-    enableBottomToolbar: false,
-    enableColumnActions: false,
-    enableColumnFilters: false,
-    enablePagination: false,
-    enableSorting: false,
-    enableTableFooter: false,
-    enableColumnResizing: true,
-    defaultColumn: {
-      minSize: 50,
-      size: 100,
-    },
-    initialState: {
-      density: 'compact',
-    },
-  });
+  // const table = useMaterialReactTable({
+  //   columns,
+  //   data: rows,
+  //   enableRowSelection: true,
+  //   enableSelectAll: true,
+  //   enableTopToolbar: false,
+  //   enableBottomToolbar: false,
+  //   enableColumnActions: false,
+  //   enableColumnFilters: false,
+  //   enablePagination: false,
+  //   enableSorting: false,
+  //   enableTableFooter: false,
+  //   enableColumnResizing: true,
+  //   defaultColumn: {
+  //     minSize: 50,
+  //     size: 100,
+  //   },
+  //   initialState: {
+  //     density: 'compact',
+  //   },
+  // });
+
+  const table = [[]];
 
   return (
     <Stack spacing={2}>
       <Typography component="h3">Preview data</Typography>
-      {tableData && <MaterialReactTable table={table}></MaterialReactTable>}
+      {tableData && <DataTable table={table}></DataTable>}
     </Stack>
   );
 };
diff --git a/src/client/import-dialog/index.html b/src/client/import-dialog/index.html
index f9101b6..6f6cd55 100644
--- a/src/client/import-dialog/index.html
+++ b/src/client/import-dialog/index.html
@@ -3,6 +3,10 @@
   <head>
     <base target="_top" />
     <!-- Add any external scripts and stylesheets here -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
     <script
       crossorigin
       integrity="sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z"
@@ -18,6 +22,11 @@
       integrity="sha384-dc898Pnn/07F3uPBKWZvtmIhMsNkYvAoa4sRvaTKg+zeX9EzVcFHIIBXTeZAoZgw"
       src="https://unpkg.com/@mui/material@5.15.16/umd/material-ui.production.min.js"
     ></script>
+    <script
+      crossorigin
+      integrity="sha384-gb+8dgIcSEcX2zwyEPEEKZiwD8km3OTz47IVU3CXdP/pYz4fRAdb9pJdlHW8VvM0"
+      src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"
+    ></script>
     <script
       crossorigin
       integrity="sha384-hHBe/rTA8LUANKtzP9Rfc6PqUFtkuKA6EtOpU4QluiRes1bEgq2hHIN8cFqMzeMI"
diff --git a/vite.config.ts b/vite.config.ts
index 82c04b3..f7c92a2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -86,6 +86,7 @@ const clientBuildConfig = ({ filename, template }: DialogEntry) =>
           '@mui/material',
           '@emotion/react',
           '@emotion/styled',
+          'tabulator-tables',
           'gas-client',
           '@types/react',
         ],
@@ -95,6 +96,7 @@ const clientBuildConfig = ({ filename, template }: DialogEntry) =>
           globals: {
             react: 'React',
             'react-dom': 'ReactDOM',
+            'tabulator-tables': 'Tabulator',
             '@mui/material': 'MaterialUI',
             '@emotion/react': 'emotionReact',
             '@emotion/styled': 'emotionStyled',

From f04b1bc3cfef0e8d38c098878e5e89cfcc965504 Mon Sep 17 00:00:00 2001
From: Melle Dijkstra <melle.dijkstra@adidas.com>
Date: Sat, 9 Nov 2024 12:11:29 +0100
Subject: [PATCH 2/6] setup of custom table with material UI + excluding
 specific rows from importing now working (more testing needed)

---
 package-lock.json                             | 493 ++++++++++++++++--
 package.json                                  |   4 +-
 src/client/import-dialog/Dialog.tsx           | 241 +++------
 .../import-dialog/components/DataTable.tsx    |  86 +++
 .../import-dialog/components/ImportForm.tsx   | 160 ++++++
 .../import-dialog/components/PreviewTable.tsx | 141 ++---
 .../components/TableStyleOverrides.tsx        |  41 ++
 .../import-dialog/context/import-context.tsx  |  81 +++
 src/client/import-dialog/index.html           |   5 -
 src/client/import-dialog/utils.ts             |  16 +-
 src/{server => common}/logger.test.ts         |   2 +-
 src/{server => common}/logger.ts              |   0
 src/server/category-detection/index.ts        |   4 +-
 src/server/table-utils.ts                     |   2 +-
 src/server/tsconfig.json                      |   6 +
 tsconfig.json                                 |  11 +-
 vite.config.ts                                |  18 +-
 17 files changed, 978 insertions(+), 333 deletions(-)
 create mode 100644 src/client/import-dialog/components/DataTable.tsx
 create mode 100644 src/client/import-dialog/components/ImportForm.tsx
 create mode 100644 src/client/import-dialog/components/TableStyleOverrides.tsx
 create mode 100644 src/client/import-dialog/context/import-context.tsx
 rename src/{server => common}/logger.test.ts (97%)
 rename src/{server => common}/logger.ts (100%)
 create mode 100644 src/server/tsconfig.json

diff --git a/package-lock.json b/package-lock.json
index e16e250..63c6a77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,12 +11,10 @@
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
-        "@mui/icons-material": "^5.15.16",
         "@mui/material": "^5.15.16",
         "papaparse": "^5.4.1",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "tabulator-tables": "^6.3.0"
+        "react-dom": "^18.3.1"
       },
       "devDependencies": {
         "@babel/core": "^7.25.9",
@@ -37,7 +35,6 @@
         "@types/papaparse": "^5.3.15",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
-        "@types/tabulator-tables": "^6.2.3",
         "@vitejs/plugin-react-swc": "^3.7.1",
         "@vitest/coverage-v8": "^2.1.3",
         "babel-loader": "^9.2.1",
@@ -1743,6 +1740,15 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.0.tgz",
+      "integrity": "sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==",
+      "dev": true,
+      "license": "(Apache-2.0 AND BSD-3-Clause)",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
@@ -2799,31 +2805,6 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@mui/icons-material": {
-      "version": "5.16.7",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
-      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^5.0.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/material": {
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
@@ -4690,13 +4671,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/tabulator-tables": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/@types/tabulator-tables/-/tabulator-tables-6.2.3.tgz",
-      "integrity": "sha512-ZeRF/WvtwFXml/4aT7kzfkHEiwbjHZdlIsjrgqcfdmpkl9GQ9XBHY6u9BblUaHX4NUiOlBeHrQKjvai6/bQH0g==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -5556,6 +5530,15 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+      "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+      "dev": true,
+      "license": "MIT/X11",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@@ -7562,6 +7545,15 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10026,6 +10018,420 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass-embedded": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.77.5.tgz",
+      "integrity": "sha512-JQI8aprHDRSNK5exXsbusswTENQPJxW1QWUcLdwuyESoJClT1zo8e+4cmaV5OAU4abcRC6Av4/RmLocPdjcR3A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@bufbuild/protobuf": "^1.0.0",
+        "buffer-builder": "^0.2.0",
+        "immutable": "^4.0.0",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "varint": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-android-arm": "1.77.5",
+        "sass-embedded-android-arm64": "1.77.5",
+        "sass-embedded-android-ia32": "1.77.5",
+        "sass-embedded-android-x64": "1.77.5",
+        "sass-embedded-darwin-arm64": "1.77.5",
+        "sass-embedded-darwin-x64": "1.77.5",
+        "sass-embedded-linux-arm": "1.77.5",
+        "sass-embedded-linux-arm64": "1.77.5",
+        "sass-embedded-linux-ia32": "1.77.5",
+        "sass-embedded-linux-musl-arm": "1.77.5",
+        "sass-embedded-linux-musl-arm64": "1.77.5",
+        "sass-embedded-linux-musl-ia32": "1.77.5",
+        "sass-embedded-linux-musl-x64": "1.77.5",
+        "sass-embedded-linux-x64": "1.77.5",
+        "sass-embedded-win32-arm64": "1.77.5",
+        "sass-embedded-win32-ia32": "1.77.5",
+        "sass-embedded-win32-x64": "1.77.5"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.77.5.tgz",
+      "integrity": "sha512-/DfNYoykqwMFduecqa8n0NH+cS6oLdCPFjwhe92efsOOt5WDYEOlolnhoOENZxqdzvSV+8axL+mHQ1Ypl4MLtg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.77.5.tgz",
+      "integrity": "sha512-t4yIhK5OUpg1coZxFpDo3BhI2YVj21JxEd5SVI6FfcWD2ESroQWsC4cbq3ejw5aun8R1Kx6xH1EKxO8bSMvn1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-ia32": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.77.5.tgz",
+      "integrity": "sha512-92dWhEbR0Z2kpjbpfOx4LM9wlNBSnDsRtwpkMUK8udQIE7uF3E4/Fsf/88IJk0MrRkk4iwrsxxiCb1bz2tWnHQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.77.5.tgz",
+      "integrity": "sha512-lFnXz9lRnjRLJ8Y28ONJViID3rDq4p6LJ/9ByPk2ZnSpx5ouUjsu4AfrXKJ0jgHWBaDvSKSxq2fPpt5aMQAEZA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.77.5.tgz",
+      "integrity": "sha512-J3yP6w+xqPrGQE0+sO4Gam6kBDJL5ivgkFNxR0fVlvKeN5qVFYhymp/xGRRMxBrKjohEQtBGP431EzrtvUMFow==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.77.5.tgz",
+      "integrity": "sha512-A9fh5tg4s0FidMTG31Vs8TzYZ3Mam/I/tfqvN0g512OhBajp/p2DJvBY+0Br2r+TNH1yGUXf2ZfULuTBFj5u8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.77.5.tgz",
+      "integrity": "sha512-O7gbOWJloxITBZNkpwChFltxofsnDUf+3pz7+q2ETQKvZQ3kUfFENAF37slo0bsHJ7IEpwJK3ZJlnhZvIgfhgw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.77.5.tgz",
+      "integrity": "sha512-LoN804X7QsyvT/h8UGcgBMfV1SdT4JRRNV+slBICxoXPKBLXbZm9KyLRCBQcMLLdlXSZdOfZilxUN1Bd2az6OA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-ia32": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.77.5.tgz",
+      "integrity": "sha512-KHNJymlEmjyJbhGfB34zowohjgMvv/qKVsDX5hPlar+qMh+cxJwfgPln1Zl9bfe9qLObmEV2zFA1rpVBWy4xGQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.77.5.tgz",
+      "integrity": "sha512-TLhJzd1TJ0oX1oULobkWLMDLeErD27WbhdZqxtFvIqzyO+1TZPMwojhRX4YNWmHdmmYhIuXTR9foWxwL3Xjgsg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.77.5.tgz",
+      "integrity": "sha512-ZWl8K8rCL4/phm3IPWDADwjnYAiohoaKg7BKjGo+36zv8P0ocoA0A3j4xx7/kjUJWagOmmoTyYxoOu+lo1NaKw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-ia32": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.77.5.tgz",
+      "integrity": "sha512-83zNSgsIIc+tYQFKepFIlvAvAHnbWSpZ824MjqXJLeCbfzcMO8SZ/q6OA0Zd2SIrf79lCWI4OfPHqp1PI6M7HQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.77.5.tgz",
+      "integrity": "sha512-/SW9ggXZJilbRbKvRHAxEuQM6Yr9piEpvK7/aDevFL2XFvBW9x+dTzpH5jPVEmM0qWdJisS1r5mEv8AXUUdQZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.77.5.tgz",
+      "integrity": "sha512-3EmYeY+K8nMwIy1El9C+mPuONMQyXSCD6Yyztn3G7moPdZTqXrTL7kTJIl+SRq1tCcnOMMGXnBRE7Kpou1wd+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.77.5.tgz",
+      "integrity": "sha512-dwVFOqkyfCRQgQB8CByH+MG93fp7IsfFaPDDCQVzVFAT00+HXk/dWFPMnv65XDDndGwsUE1KlZnjg8iOBDlRdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass.bat"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-ia32": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.77.5.tgz",
+      "integrity": "sha512-1ij/K5d2sHPJkytWiPJLoUOVHJOB6cSWXq7jmedeuGooWnBmqnWycmGkhBAEK/t6t1XgzMPsiJMGiHKh7fnBuA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass.bat"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.77.5.tgz",
+      "integrity": "sha512-Pn6j0jDGeEAhuuVY0CaZaBa7yNkqimEsbUDYYuQ9xh+XdGvZ86SZf6HXHUVIyQUjHORLwQ5f0XoKYYzKfC0y9w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "bin": {
+        "sass": "dart-sass/sass.bat"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -10477,12 +10883,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tabulator-tables": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-6.3.0.tgz",
-      "integrity": "sha512-gFiivoa03+NCDJ28Na3UU45nJT7sFXBsFCBtMqXz5OpsNTWrmL5ZJYA4oZtDFaVfarPqUHNgwm2PhL6DR7CQxg==",
-      "license": "MIT"
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -11016,6 +11416,15 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/vite": {
       "version": "5.4.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
diff --git a/package.json b/package.json
index 49e68fb..ed8dcb6 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,7 @@
     "@mui/material": "^5.15.16",
     "papaparse": "^5.4.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tabulator-tables": "^6.3.0"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.9",
@@ -52,7 +51,6 @@
     "@types/papaparse": "^5.3.15",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/tabulator-tables": "^6.2.3",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/coverage-v8": "^2.1.3",
     "babel-loader": "^9.2.1",
diff --git a/src/client/import-dialog/Dialog.tsx b/src/client/import-dialog/Dialog.tsx
index 17abd52..52afceb 100644
--- a/src/client/import-dialog/Dialog.tsx
+++ b/src/client/import-dialog/Dialog.tsx
@@ -1,192 +1,75 @@
-import React, { useEffect, useState } from 'react';
-import { serverFunctions } from '../utils/serverFunctions';
-import { StrategyOption, ServerResponse, Table } from '../../common/types';
-import { isAllowedFile, acceptedMimeTypes } from './utils';
-import Papa from 'papaparse';
+import { useState } from 'react';
 import { Application } from '../Application';
 import { PreviewTable } from './components/PreviewTable';
+import { Typography, Box, Tabs, Tab } from '@mui/material';
+import { ImportForm } from './components/ImportForm';
 import {
-  Button,
-  FormControl,
-  Grid,
-  Typography,
-  NativeSelect,
-  Stack,
-  Icon,
-} from '@mui/material';
-
-export const Dialog = () => {
-  const [strategyOptions, setStrategyOptions] =
-    useState<typeof StrategyOption>();
-  // The strategy currently selected by the user
-  const [selectedStrategy, setSelectedStrategy] = useState<StrategyOption>();
-  const [statusText, setStatusText] = useState<string>('-');
-
-  const [tableData, setTableData] = useState<Table>([]);
-
-  const [importFile, setImportFile] = useState<File>();
-
-  useEffect(() => {
-    // retrieve import strategy options when mounted
-    serverFunctions
-      .getStrategyOptions()
-      .then((serverStrategyOptions) => {
-        setStrategyOptions(serverStrategyOptions);
-      })
-      .catch((reason) => onFailure(reason));
-  }, []);
-
-  useEffect(() => {
-    if (!selectedStrategy || !importFile) {
-      setStatusText('File and strategy need to be set to generate preview!');
-      return;
-    }
-
-    // clear table data
-    setTableData([]);
-
-    setStatusText('Data is being processed...');
-    Papa.parse<string[]>(importFile, {
-      complete: (result) => generatePreview(result.data, selectedStrategy),
-      error: onParseError,
-    });
-  }, [selectedStrategy, importFile]);
-
-  const onSuccess = (response: ServerResponse) => {
-    setStatusText(`Action successful! ${response.message}`);
-    google.script.host.close();
-  };
-
-  const onFailure = (error: ServerResponse) => alert(`Action failed! ${error}`);
-
-  const submitDataToServer = (data: Table, importStrategy: StrategyOption) => {
-    serverFunctions
-      .processCSV(data, importStrategy)
-      .then((response) => onSuccess(response))
-      .catch(onFailure);
-  };
-
-  const onParseError = (error: ServerResponse) => {
-    console.error(error);
-    alert(`Parsing error: ${error}`);
-  };
-
-  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!importFile || !isAllowedFile(importFile.type) || !selectedStrategy) {
-      setStatusText(
-        `No import file or import strategy selected, or you selected a file type that is not supported (only: ${acceptedMimeTypes.join(
-          ', '
-        )})`
-      );
-      return;
+  ImportContextProvider,
+  useImportContext,
+} from './context/import-context';
+import { DataTable } from './components/DataTable';
+
+const RawTable = () => {
+  const { importData, addSelectedRow, removeSelectedRow } = useImportContext();
+
+  const onRowToggled = (index: number, on: boolean) => {
+    console.log('Row selected:', index);
+    if (on) {
+      addSelectedRow(index);
+    } else {
+      removeSelectedRow(index);
     }
-    Papa.parse<string[]>(importFile, {
-      complete: (result) => submitDataToServer(result.data, selectedStrategy),
-      error: onParseError,
-    });
-  };
-
-  const generatePreview = (data: Table, strategy: StrategyOption) => {
-    serverFunctions
-      .generatePreview(data, strategy)
-      .then(onGeneratePreviewSuccess)
-      .catch(onFailure);
-  };
-
-  const onGeneratePreviewSuccess = ({
-    result,
-    newBalance,
-  }: {
-    result: Table;
-    newBalance?: number;
-  }) => {
-    setStatusText(
-      `Import preview set${
-        newBalance ? `\nNew balance: ${newBalance.toFixed(2)}` : ''
-      }`
-    );
-    setPreview(result);
   };
 
-  const setPreview = (data: Table) => {
-    setTableData(data);
-  };
+  return (
+    importData && (
+      <DataTable
+        table={importData}
+        options={{ selectable: true }}
+        onRowToggled={onRowToggled}
+      />
+    )
+  );
+};
 
-  const canSubmit = importFile && selectedStrategy;
+export const Dialog = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [statusText, setStatusText] = useState<string>('-');
 
   return (
     <Application>
-      <form onSubmit={handleFormSubmit}>
-        <Stack spacing={5}>
-          <Grid container>
-            <Grid item xs={6}>
-              <Button
-                component="label"
-                variant="outlined"
-                startIcon={<Icon>upload_file</Icon>}
-                sx={{ marginRight: '1rem' }}
-              >
-                {importFile ? importFile.name : 'Upload CSV'}
-                <input
-                  required
-                  type="file"
-                  accept="text/csv"
-                  hidden
-                  onChange={(event) => {
-                    setImportFile(event.target.files?.[0]);
-                  }}
-                />
-              </Button>
-            </Grid>
-            <Grid item xs={6}>
-              <FormControl fullWidth>
-                <NativeSelect
-                  required
-                  id="import-strategy"
-                  inputProps={{
-                    id: 'strategy-import-native',
-                  }}
-                  onChange={(event) => {
-                    setSelectedStrategy(event.target.value as StrategyOption);
-                  }}
-                  defaultValue=""
-                >
-                  <option value="" disabled>
-                    Choose Bank
-                  </option>
-                  {strategyOptions
-                    ? Object.keys(strategyOptions).map((key) => (
-                        <option
-                          key={key}
-                          value={
-                            StrategyOption[key as keyof typeof StrategyOption]
-                          }
-                        >
-                          {key}
-                        </option>
-                      ))
-                    : []}
-                </NativeSelect>
-              </FormControl>
-            </Grid>
-          </Grid>
-          <Grid container justifyContent={'flex-end'}>
-            <Button
-              variant="contained"
-              color="primary"
-              type="submit"
-              disabled={!canSubmit}
-            >
-              IMPORT
-            </Button>
-          </Grid>
-          <Typography variant="body1">{statusText}</Typography>
-          {tableData && tableData.length > 0 && (
-            <PreviewTable tableData={tableData} />
-          )}
-        </Stack>
-      </form>
+      <ImportContextProvider
+        statusText={statusText}
+        setStatusText={setStatusText}
+      >
+        <ImportForm />
+        <Typography variant="body1" mb={2}>
+          {statusText}
+        </Typography>
+        <Tabs
+          value={activeTab}
+          onChange={(_event, newActiveTab) => setActiveTab(newActiveTab)}
+        >
+          <Tab label="Raw Data" />
+          <Tab label="Import Preview" />
+        </Tabs>
+        <Box
+          mt={2}
+          style={{ display: activeTab === 0 ? 'block' : 'none' }}
+          className="tab col s3"
+          id={`raw-input-table`}
+        >
+          <RawTable />
+        </Box>
+        <Box
+          mt={2}
+          style={{ display: activeTab === 1 ? 'block' : 'none' }}
+          className="tab col s3"
+          id={`import-preview-table`}
+        >
+          <PreviewTable />
+        </Box>
+      </ImportContextProvider>
     </Application>
   );
 };
diff --git a/src/client/import-dialog/components/DataTable.tsx b/src/client/import-dialog/components/DataTable.tsx
new file mode 100644
index 0000000..9fa3e19
--- /dev/null
+++ b/src/client/import-dialog/components/DataTable.tsx
@@ -0,0 +1,86 @@
+import { useCallback } from 'react';
+import { Table } from '@/common/types';
+import { TableBody, TableContainer, TableHead, Paper } from '@mui/material';
+import {
+  Table as MuiTable,
+  TableCell,
+  TableRow,
+  TableCheckbox,
+} from './TableStyleOverrides';
+import { useImportContext } from '../context/import-context';
+
+export type TableOptions = {
+  selectable: boolean;
+};
+
+const defaultOptions: TableOptions = {
+  selectable: false,
+};
+
+export const DataTable = ({
+  table,
+  onRowToggled,
+  options = defaultOptions,
+}: {
+  table: Table;
+  onRowToggled?: (index: number, on: boolean) => void;
+  options?: TableOptions;
+}) => {
+  const { selectable } = options;
+  const { selectedRows, removeSelectedRow, addSelectedRow } =
+    useImportContext();
+
+  const headers = table?.[0];
+  const rows = table?.slice(1);
+
+  // Toggle row selection
+  const handleRowSelect = useCallback(
+    (index: number) => {
+      if (selectedRows.has(index)) {
+        removeSelectedRow(index);
+      } else {
+        addSelectedRow(index);
+      }
+    },
+    [selectedRows]
+  );
+
+  // Determine if a row is selected
+  const isRowSelected = (index: number) => selectedRows.has(index);
+
+  return (
+    <TableContainer component={Paper}>
+      <MuiTable size="small" stickyHeader>
+        <TableHead>
+          <TableRow>
+            {selectable && <TableCell />} {/* <-- Checkbox column header */}
+            {headers?.map((header, idx) => (
+              <TableCell key={idx}>{header}</TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, rowIndex) => (
+            <TableRow
+              key={rowIndex}
+              selected={selectable && isRowSelected(rowIndex + 1)}
+            >
+              {selectable && (
+                <TableCell>
+                  <TableCheckbox
+                    size="small"
+                    checked={isRowSelected(rowIndex + 1)} // +1 to account for header row
+                    onChange={() => handleRowSelect(rowIndex + 1)} // +1 to account for header row
+                  />
+                </TableCell>
+              )}
+              {row.map((cell, cellIndex) => (
+                <TableCell key={cellIndex}>{cell}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </MuiTable>
+    </TableContainer>
+  );
+};
diff --git a/src/client/import-dialog/components/ImportForm.tsx b/src/client/import-dialog/components/ImportForm.tsx
new file mode 100644
index 0000000..00205bb
--- /dev/null
+++ b/src/client/import-dialog/components/ImportForm.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react';
+import { ServerResponse, StrategyOption, Table } from '../../../common/types';
+import {
+  Button,
+  FormControl,
+  Grid,
+  Icon,
+  NativeSelect,
+  Stack,
+} from '@mui/material';
+import { serverFunctions } from '@/client/utils/serverFunctions';
+import {
+  acceptedMimeTypes,
+  excludeRowsFromData,
+  isAllowedFile,
+} from '../utils';
+import Papa from 'papaparse';
+import { useImportContext } from '../context/import-context';
+
+export const ImportForm = () => {
+  const [strategyOptions, setStrategyOptions] =
+    useState<typeof StrategyOption>();
+  const [importFile, setImportFile] = useState<File>();
+
+  const {
+    setStatusText,
+    strategy,
+    setStrategy,
+    setImportData,
+    importData,
+    selectedRows,
+  } = useImportContext();
+
+  const onFailure = (error: ServerResponse) => alert(`Action failed! ${error}`);
+
+  const submitDataToServer = (data: Table, importStrategy: StrategyOption) => {
+    serverFunctions
+      .processCSV(data, importStrategy)
+      .then(() => google.script.host.close())
+      .catch(onFailure);
+  };
+
+  const onParseError = (error: ServerResponse) => {
+    console.error(error);
+    alert(`Parsing error: ${error}`);
+  };
+
+  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (
+      !importData ||
+      !importFile ||
+      !isAllowedFile(importFile.type) ||
+      !strategy
+    ) {
+      setStatusText(
+        `No import file or import strategy selected, or you selected a file type that is not supported (only: ${acceptedMimeTypes.join(
+          ', '
+        )})`
+      );
+      return;
+    }
+
+    const rowsToImport = excludeRowsFromData(importData, selectedRows);
+
+    submitDataToServer(rowsToImport, strategy);
+  };
+
+  useEffect(() => {
+    // retrieve import strategy options when mounted
+    serverFunctions
+      .getStrategyOptions()
+      .then((serverStrategyOptions) => {
+        setStrategyOptions(serverStrategyOptions);
+      })
+      .catch((reason) => onFailure(reason));
+  }, []);
+
+  useEffect(() => {
+    if (importFile) {
+      Papa.parse<string[]>(importFile, {
+        complete: (result) => setImportData(result.data),
+        error: onParseError,
+      });
+    } else {
+      setImportData();
+    }
+  }, [importFile]);
+
+  const canSubmit = importFile && strategy;
+
+  return (
+    <form onSubmit={handleFormSubmit}>
+      <Stack spacing={5}>
+        <Grid container>
+          <Grid item xs={6}>
+            <Button
+              component="label"
+              variant="outlined"
+              startIcon={<Icon>upload_file</Icon>}
+              sx={{ marginRight: '1rem' }}
+            >
+              {importFile ? importFile.name : 'Upload CSV'}
+              <input
+                required
+                type="file"
+                accept="text/csv"
+                hidden
+                onChange={(event) => {
+                  setImportFile(event.target.files?.[0]);
+                }}
+              />
+            </Button>
+          </Grid>
+          <Grid item xs={6}>
+            <FormControl fullWidth>
+              <NativeSelect
+                required
+                id="import-strategy"
+                inputProps={{
+                  id: 'strategy-import-native',
+                }}
+                onChange={(event) => {
+                  setStrategy(event.target.value as StrategyOption);
+                }}
+                defaultValue=""
+              >
+                <option value="" disabled>
+                  Choose Bank
+                </option>
+                {strategyOptions
+                  ? Object.keys(strategyOptions).map((key) => (
+                      <option
+                        key={key}
+                        value={
+                          StrategyOption[key as keyof typeof StrategyOption]
+                        }
+                      >
+                        {key}
+                      </option>
+                    ))
+                  : []}
+              </NativeSelect>
+            </FormControl>
+          </Grid>
+        </Grid>
+        <Grid container justifyContent={'flex-end'}>
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={!canSubmit}
+          >
+            IMPORT
+          </Button>
+        </Grid>
+      </Stack>
+    </form>
+  );
+};
diff --git a/src/client/import-dialog/components/PreviewTable.tsx b/src/client/import-dialog/components/PreviewTable.tsx
index b49917e..e0d238e 100644
--- a/src/client/import-dialog/components/PreviewTable.tsx
+++ b/src/client/import-dialog/components/PreviewTable.tsx
@@ -1,99 +1,66 @@
-import { Table } from '../../../common/types';
-import { Stack, Typography } from '@mui/material';
-import { Tabulator } from 'tabulator-tables';
-import { useEffect, useRef } from 'react';
-import 'tabulator-tables/dist/css/tabulator.min.css';
+import type { Table } from '@/common/types';
+import { useState } from 'react';
+import { useImportContext } from '../context/import-context';
+import { serverFunctions } from '@/client/utils/serverFunctions';
+import { DataTable } from './DataTable';
+import { Button } from '@mui/material';
+import { excludeRowsFromData } from '../utils';
 
-type ImportPreviewProps = {
-  tableData: Table;
+const getBrowserLocale = () => {
+  if (navigator.languages != undefined) return navigator.languages[0];
+  return navigator.language;
 };
 
-const prepareTableData = (
-  inputTable: Table
-): {
-  columns: MRT_ColumnDef<Record<string, unknown>>[];
-  rows: MRT_RowData[];
-} => {
-  const table = structuredClone(inputTable);
-  const headingRow = table?.shift();
+export const PreviewTable = () => {
+  const { setStatusText, importData, strategy, selectedRows } =
+    useImportContext();
+  const [previewData, setPreviewData] = useState<Table>();
 
-  if (!headingRow) {
-    throw Error('The data does not contain a heading row');
-  }
+  const canGeneratePreview = importData && strategy;
 
-  const columns = headingRow.map((heading, index) =>
-    prepareTableColumn(`col${index}`, heading)
-  );
-
-  const rows = table.map((row, index) => {
-    const dataGridRow: Record<string, unknown> = { id: index };
-    // fill the fields in the data grid table
-    row.forEach((cellValue, colIndex) => {
-      dataGridRow[`col${colIndex}`] = cellValue;
+  const onGeneratePreviewSuccess = ({
+    result,
+    newBalance,
+  }: {
+    result: Table;
+    newBalance?: number;
+  }) => {
+    const locale = getBrowserLocale();
+    const newBalanceFormatted = newBalance?.toLocaleString(locale, {
+      style: 'currency',
+      currency: 'EUR',
     });
-    return dataGridRow;
-  });
-
-  return { columns, rows };
-};
-
-const DataTable = ({ table }: { table: Table }) => {
-  const elemRef = useRef<HTMLDivElement>(null);
-
-  let tabulator = null;
+    setStatusText(
+      `Import preview set${
+        newBalanceFormatted ? ` - new balance: ${newBalanceFormatted}` : ''
+      }`
+    );
+    setPreviewData(result);
+  };
 
-  useEffect(() => {
-    // instantiate Tabulator when element is mounted
-    if (elemRef.current) {
-      tabulator = new Tabulator(elemRef.current, {
-        data: [['data1', 'data2']],
-        reactiveData: true, //enable data reactivity
-        columns: [
-          {
-            title: 'col1',
-          },
-          {
-            title: 'col2',
-          },
-        ],
-      });
+  const generatePreview = () => {
+    if (canGeneratePreview) {
+      const dataToProcess = excludeRowsFromData(importData, selectedRows);
+      setStatusText('Data is being processed...');
+      serverFunctions
+        .generatePreview(dataToProcess, strategy)
+        .then(onGeneratePreviewSuccess)
+        .catch((error) => setStatusText(`Failed to create preview: ${error}`));
     }
-  }, []);
-
-  return <div id="tabulator" ref={elemRef} />;
-};
-
-export const PreviewTable = ({ tableData }: ImportPreviewProps) => {
-  // const { rows, columns } = useMemo(() => prepareTableData(tableData), []);
-
-  // const table = useMaterialReactTable({
-  //   columns,
-  //   data: rows,
-  //   enableRowSelection: true,
-  //   enableSelectAll: true,
-  //   enableTopToolbar: false,
-  //   enableBottomToolbar: false,
-  //   enableColumnActions: false,
-  //   enableColumnFilters: false,
-  //   enablePagination: false,
-  //   enableSorting: false,
-  //   enableTableFooter: false,
-  //   enableColumnResizing: true,
-  //   defaultColumn: {
-  //     minSize: 50,
-  //     size: 100,
-  //   },
-  //   initialState: {
-  //     density: 'compact',
-  //   },
-  // });
-
-  const table = [[]];
+  };
 
   return (
-    <Stack spacing={2}>
-      <Typography component="h3">Preview data</Typography>
-      {tableData && <DataTable table={table}></DataTable>}
-    </Stack>
+    <>
+      {previewData && <DataTable table={previewData} />}
+      <Button
+        sx={{ marginTop: previewData ? 2 : 0 }}
+        disabled={!canGeneratePreview}
+        variant="contained"
+        color="primary"
+        onClick={generatePreview}
+      >
+        Generate Preview
+      </Button>
+    </>
   );
 };
diff --git a/src/client/import-dialog/components/TableStyleOverrides.tsx b/src/client/import-dialog/components/TableStyleOverrides.tsx
new file mode 100644
index 0000000..7a23bc2
--- /dev/null
+++ b/src/client/import-dialog/components/TableStyleOverrides.tsx
@@ -0,0 +1,41 @@
+import { styled } from '@mui/material/styles';
+import {
+  Checkbox,
+  Table as MuiTable,
+  TableCell as MuiTableCell,
+  TableRow as MuiTableRow,
+  tableCellClasses,
+} from '@mui/material';
+import { CSSProperties } from 'react';
+
+export const TableCheckbox = styled(Checkbox)({ padding: 0 });
+
+export const Table = styled(MuiTable)({
+  borderCollapse: 'collapse',
+  minWidth: 650,
+});
+
+const commonCellStyles: CSSProperties = {
+  fontSize: 12,
+  textWrap: 'nowrap',
+  padding: '5px 10px',
+};
+
+export const TableCell = styled(MuiTableCell)(
+  ({ theme }) =>
+    ({
+      [`&.${tableCellClasses.head}`]: {
+        ...commonCellStyles,
+        backgroundColor: theme.palette.primary.dark,
+        color: theme.palette.primary.contrastText,
+      },
+      [`&.${tableCellClasses.body}`]: commonCellStyles,
+    } as Record<string, CSSProperties>)
+);
+
+export const TableRow = styled(MuiTableRow)(({ theme }) => ({
+  // hide last border
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
diff --git a/src/client/import-dialog/context/import-context.tsx b/src/client/import-dialog/context/import-context.tsx
new file mode 100644
index 0000000..af16010
--- /dev/null
+++ b/src/client/import-dialog/context/import-context.tsx
@@ -0,0 +1,81 @@
+import { createContext, ReactNode, useContext, useState } from 'react';
+import { StrategyOption, Table } from '../../../common/types';
+
+type ImportContextProps = {
+  statusText?: string;
+  setStatusText: (value: string) => void;
+  importData?: Table;
+  setImportData: (table?: Table) => void;
+  strategy?: StrategyOption;
+  setStrategy: (strategy: StrategyOption) => void;
+  selectedRows: Set<number>;
+  addSelectedRow: (index: number) => void;
+  removeSelectedRow: (index: number) => void;
+  setSelectedRows: (rows: Set<number>) => void;
+};
+
+const ImportContext = createContext<ImportContextProps | undefined>(undefined);
+
+type ProviderProps = {
+  statusText?: string;
+  setStatusText: (value: string) => void;
+  children: ReactNode;
+};
+
+export const ImportContextProvider = ({
+  children,
+  statusText,
+  setStatusText,
+}: ProviderProps) => {
+  const [importData, _setImportData] = useState<Table | undefined>();
+  const [strategy, setStrategy] = useState<StrategyOption>();
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+
+  const setImportData = (table?: Table) => {
+    _setImportData(table);
+    setSelectedRows(new Set());
+  };
+
+  const addSelectedRow = (index: number) => {
+    setSelectedRows((prevSelectedRows) => {
+      const newSelectedRows = new Set(prevSelectedRows);
+      newSelectedRows.add(index);
+      return newSelectedRows;
+    });
+  };
+
+  const removeSelectedRow = (index: number) => {
+    setSelectedRows((prevSelectedRows) => {
+      const newSelectedRows = new Set(prevSelectedRows);
+      newSelectedRows.delete(index);
+      return newSelectedRows;
+    });
+  };
+
+  return (
+    <ImportContext.Provider
+      value={{
+        importData,
+        setImportData,
+        statusText,
+        setStatusText,
+        strategy,
+        setStrategy,
+        selectedRows,
+        addSelectedRow,
+        removeSelectedRow,
+        setSelectedRows,
+      }}
+    >
+      {children}
+    </ImportContext.Provider>
+  );
+};
+
+export const useImportContext = (): ImportContextProps => {
+  const context = useContext(ImportContext);
+  if (!context) {
+    throw new Error('useImportContext must be used within an ImportProvider');
+  }
+  return context;
+};
diff --git a/src/client/import-dialog/index.html b/src/client/import-dialog/index.html
index 6f6cd55..eb1c604 100644
--- a/src/client/import-dialog/index.html
+++ b/src/client/import-dialog/index.html
@@ -22,11 +22,6 @@
       integrity="sha384-dc898Pnn/07F3uPBKWZvtmIhMsNkYvAoa4sRvaTKg+zeX9EzVcFHIIBXTeZAoZgw"
       src="https://unpkg.com/@mui/material@5.15.16/umd/material-ui.production.min.js"
     ></script>
-    <script
-      crossorigin
-      integrity="sha384-gb+8dgIcSEcX2zwyEPEEKZiwD8km3OTz47IVU3CXdP/pYz4fRAdb9pJdlHW8VvM0"
-      src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"
-    ></script>
     <script
       crossorigin
       integrity="sha384-hHBe/rTA8LUANKtzP9Rfc6PqUFtkuKA6EtOpU4QluiRes1bEgq2hHIN8cFqMzeMI"
diff --git a/src/client/import-dialog/utils.ts b/src/client/import-dialog/utils.ts
index d76f6a6..174d7bb 100644
--- a/src/client/import-dialog/utils.ts
+++ b/src/client/import-dialog/utils.ts
@@ -4,15 +4,15 @@ export const acceptedMimeTypes = ['text/csv', 'application/vnd.ms-excel'];
 
 export const isAllowedFile = (mimeType: string) => {
   if (!acceptedMimeTypes.includes(mimeType)) {
-    alert(`Please upload a CSV file, "${mimeType}" is not accepted!`);
     return false;
   }
   return true;
 };
 
-export const csvToJson = (csvData: Table): Record<string, string>[] => {
-  const headers = csvData.shift();
-  return csvData.map((row) => {
+export const csvToJson = (_csvData: Table): Record<string, string>[] => {
+  const clonedTable = structuredClone(_csvData);
+  const headers = clonedTable.shift();
+  return clonedTable.map((row) => {
     let jsonRow: Record<string, string> = {};
     row.forEach((value, index) => {
       if (headers?.[index]) {
@@ -22,3 +22,11 @@ export const csvToJson = (csvData: Table): Record<string, string>[] => {
     return jsonRow;
   });
 };
+
+export const excludeRowsFromData = (
+  data: Table,
+  rowsToExclude: Set<number>
+): Table => {
+  console.log('Excluding rows:', rowsToExclude);
+  return data.filter((_, index) => !rowsToExclude.has(index));
+};
diff --git a/src/server/logger.test.ts b/src/common/logger.test.ts
similarity index 97%
rename from src/server/logger.test.ts
rename to src/common/logger.test.ts
index 8345f9a..6abff4d 100644
--- a/src/server/logger.test.ts
+++ b/src/common/logger.test.ts
@@ -1,7 +1,7 @@
 import { Logger } from './logger';
 
 describe('Logger', () => {
-  let originalEnv: string | undefined;
+  let originalEnv: boolean;
 
   const consoleSpy = vi.spyOn(console, 'log');
   consoleSpy.mockImplementation(() => {
diff --git a/src/server/logger.ts b/src/common/logger.ts
similarity index 100%
rename from src/server/logger.ts
rename to src/common/logger.ts
diff --git a/src/server/category-detection/index.ts b/src/server/category-detection/index.ts
index ab257ac..6d752c2 100644
--- a/src/server/category-detection/index.ts
+++ b/src/server/category-detection/index.ts
@@ -1,5 +1,5 @@
-import { PROP_AUTOMATIC_CATEGORIES_CONFIG } from '../../common/constants';
-import { Logger } from '../logger';
+import { PROP_AUTOMATIC_CATEGORIES_CONFIG } from '@/common/constants';
+import { Logger } from '@/common/logger';
 import { categoriesTermsMap } from './category-term-map';
 import { CategoryDetectionConfig } from './types';
 
diff --git a/src/server/table-utils.ts b/src/server/table-utils.ts
index 90af893..61d323f 100644
--- a/src/server/table-utils.ts
+++ b/src/server/table-utils.ts
@@ -2,7 +2,7 @@ import type { Table } from '../common/types';
 import { sourceSheet } from './globals';
 import { FIRE_COLUMNS } from '../common/constants';
 import { FireColumnRules, InputColumn } from './types';
-import { Logger } from './logger';
+import { Logger } from '@/common/logger';
 
 const EMPTY = '';
 
diff --git a/src/server/tsconfig.json b/src/server/tsconfig.json
new file mode 100644
index 0000000..d32bf41
--- /dev/null
+++ b/src/server/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["gas-types-detailed"]
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index a483316..cf3bd47 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,9 +4,9 @@
     // we just want to use it as a type checker
     "noEmit": true,
     "strict": true,
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true,
-    "module": "ES6",
+    "module": "ESNext",
     "esModuleInterop": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
@@ -15,8 +15,11 @@
     "strictNullChecks": true,
     "skipLibCheck": true,
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "types": ["gas-types-detailed", "vitest/globals"],
-    "jsx": "react-jsx"
+    "types": ["vitest/globals", "vite/client"],
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "exclude": ["node_modules/*"],
   "include": [
diff --git a/vite.config.ts b/vite.config.ts
index f7c92a2..728ccd8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -61,7 +61,16 @@ if (existsSync(keyPath) && existsSync(certPath)) {
   };
 }
 
+const sharedConfig = defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+});
+
 const clientServeConfig: UserConfig = {
+  ...sharedConfig,
   plugins: [react()],
   server: devServerOptions,
   root: clientRoot,
@@ -69,6 +78,7 @@ const clientServeConfig: UserConfig = {
 
 const clientBuildConfig = ({ filename, template }: DialogEntry) =>
   defineConfig({
+    ...sharedConfig,
     plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: true })],
     root: resolve(__dirname, clientRoot, filename),
     build: {
@@ -86,7 +96,6 @@ const clientBuildConfig = ({ filename, template }: DialogEntry) =>
           '@mui/material',
           '@emotion/react',
           '@emotion/styled',
-          'tabulator-tables',
           'gas-client',
           '@types/react',
         ],
@@ -96,7 +105,6 @@ const clientBuildConfig = ({ filename, template }: DialogEntry) =>
           globals: {
             react: 'React',
             'react-dom': 'ReactDOM',
-            'tabulator-tables': 'Tabulator',
             '@mui/material': 'MaterialUI',
             '@emotion/react': 'emotionReact',
             '@emotion/styled': 'emotionStyled',
@@ -174,8 +182,8 @@ const buildConfig = defineConfig(({ mode }) => {
   if (mode === 'development') {
     targets.push(...clientEntrypoints.map(buildIFrame));
   }
-
-  return defineConfig({
+  return {
+    ...sharedConfig,
     plugins: [
       viteStaticCopy({
         targets,
@@ -186,7 +194,7 @@ const buildConfig = defineConfig(({ mode }) => {
     esbuild: {
       keepNames: true,
     },
-  });
+  };
 });
 
 const testConfig: UserConfig = {

From 2facaac1d426eada809e69b48dc88596afbae080 Mon Sep 17 00:00:00 2001
From: Melle Dijkstra <melle.dijkstra@adidas.com>
Date: Sat, 9 Nov 2024 12:14:21 +0100
Subject: [PATCH 3/6] fix for vitest with custom import path

---
 vite.config.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 728ccd8..6957ee2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,6 +46,14 @@ const clientEntrypoints: Array<DialogEntry> = [
   },
 ];
 
+const sharedConfig = defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+});
+
 const keyPath = resolve(__dirname, './certs/key.pem');
 const certPath = resolve(__dirname, './certs/cert.pem');
 
@@ -61,14 +69,6 @@ if (existsSync(keyPath) && existsSync(certPath)) {
   };
 }
 
-const sharedConfig = defineConfig({
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-    },
-  },
-});
-
 const clientServeConfig: UserConfig = {
   ...sharedConfig,
   plugins: [react()],
@@ -198,6 +198,7 @@ const buildConfig = defineConfig(({ mode }) => {
 });
 
 const testConfig: UserConfig = {
+  ...sharedConfig,
   test: {
     globals: true,
     setupFiles: ['./test-setup.ts'],

From 09f8cca1bb38b30dfec1baba3a4a4e3149e3a708 Mon Sep 17 00:00:00 2001
From: Melle Dijkstra <melle.dijkstra@adidas.com>
Date: Sat, 9 Nov 2024 20:53:06 +0100
Subject: [PATCH 4/6] update import paths with alias

---
 src/client/about-dialog/Dialog.stories.ts                   | 2 +-
 src/client/import-dialog/Dialog.stories.ts                  | 2 +-
 src/client/import-dialog/components/DataTable.tsx           | 1 -
 src/client/import-dialog/components/ImportForm.tsx          | 2 +-
 src/client/import-dialog/components/PreviewTable.stories.ts | 2 +-
 src/client/import-dialog/components/TableStyleOverrides.tsx | 4 ++--
 src/client/import-dialog/context/import-context.tsx         | 2 +-
 src/client/import-dialog/utils.test.ts                      | 2 +-
 src/client/import-dialog/utils.ts                           | 2 +-
 src/client/settings-dialog/Dialog.stories.ts                | 2 +-
 .../components/AutomaticCategorizationForm.tsx              | 2 +-
 src/client/utils/serverFunctions.ts                         | 2 +-
 src/fixtures/n26.ts                                         | 2 +-
 src/fixtures/rabobank.ts                                    | 2 +-
 src/server/account-utils.test.ts                            | 4 ++--
 src/server/account-utils.ts                                 | 2 +-
 src/server/config.ts                                        | 2 +-
 src/server/globals.ts                                       | 2 +-
 src/server/helpers.ts                                       | 2 +-
 src/server/remote-call.test.ts                              | 6 +++---
 src/server/remote-calls.ts                                  | 2 +-
 src/server/table-utils.ts                                   | 4 ++--
 src/server/tsconfig.json                                    | 6 ------
 src/server/types.ts                                         | 2 +-
 src/server/ui.ts                                            | 2 +-
 tsconfig.json                                               | 2 +-
 26 files changed, 29 insertions(+), 36 deletions(-)
 delete mode 100644 src/server/tsconfig.json

diff --git a/src/client/about-dialog/Dialog.stories.ts b/src/client/about-dialog/Dialog.stories.ts
index 17a76d2..0cae640 100644
--- a/src/client/about-dialog/Dialog.stories.ts
+++ b/src/client/about-dialog/Dialog.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Dialog } from './Dialog';
-import { DIALOG_SIZES } from '../../common/constants';
+import { DIALOG_SIZES } from '@/common/constants';
 
 const meta: Meta<typeof Dialog> = {
   title: 'Dialogs/About',
diff --git a/src/client/import-dialog/Dialog.stories.ts b/src/client/import-dialog/Dialog.stories.ts
index 1680e34..0c03e0f 100644
--- a/src/client/import-dialog/Dialog.stories.ts
+++ b/src/client/import-dialog/Dialog.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Dialog } from './Dialog';
-import { DIALOG_SIZES } from '../../common/constants';
+import { DIALOG_SIZES } from '@/common/constants';
 
 const meta: Meta<typeof Dialog> = {
   title: 'Dialogs/Import',
diff --git a/src/client/import-dialog/components/DataTable.tsx b/src/client/import-dialog/components/DataTable.tsx
index 9fa3e19..722dc33 100644
--- a/src/client/import-dialog/components/DataTable.tsx
+++ b/src/client/import-dialog/components/DataTable.tsx
@@ -19,7 +19,6 @@ const defaultOptions: TableOptions = {
 
 export const DataTable = ({
   table,
-  onRowToggled,
   options = defaultOptions,
 }: {
   table: Table;
diff --git a/src/client/import-dialog/components/ImportForm.tsx b/src/client/import-dialog/components/ImportForm.tsx
index 00205bb..e33b23b 100644
--- a/src/client/import-dialog/components/ImportForm.tsx
+++ b/src/client/import-dialog/components/ImportForm.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ServerResponse, StrategyOption, Table } from '../../../common/types';
+import { ServerResponse, StrategyOption, Table } from '@/common/types';
 import {
   Button,
   FormControl,
diff --git a/src/client/import-dialog/components/PreviewTable.stories.ts b/src/client/import-dialog/components/PreviewTable.stories.ts
index 63f0855..06f2b19 100644
--- a/src/client/import-dialog/components/PreviewTable.stories.ts
+++ b/src/client/import-dialog/components/PreviewTable.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { PreviewTable } from './PreviewTable';
-import { n26ImportMock } from '../../../fixtures/n26';
+import { n26ImportMock } from '@/fixtures/n26';
 
 const meta: Meta<typeof PreviewTable> = {
   title: 'Dialogs/Import',
diff --git a/src/client/import-dialog/components/TableStyleOverrides.tsx b/src/client/import-dialog/components/TableStyleOverrides.tsx
index 7a23bc2..2b5bd31 100644
--- a/src/client/import-dialog/components/TableStyleOverrides.tsx
+++ b/src/client/import-dialog/components/TableStyleOverrides.tsx
@@ -33,9 +33,9 @@ export const TableCell = styled(MuiTableCell)(
     } as Record<string, CSSProperties>)
 );
 
-export const TableRow = styled(MuiTableRow)(({ theme }) => ({
+export const TableRow = styled(MuiTableRow)({
   // hide last border
   '&:last-child td, &:last-child th': {
     border: 0,
   },
-}));
+});
diff --git a/src/client/import-dialog/context/import-context.tsx b/src/client/import-dialog/context/import-context.tsx
index af16010..9e01403 100644
--- a/src/client/import-dialog/context/import-context.tsx
+++ b/src/client/import-dialog/context/import-context.tsx
@@ -1,5 +1,5 @@
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { StrategyOption, Table } from '../../../common/types';
+import { StrategyOption, Table } from '@/common/types';
 
 type ImportContextProps = {
   statusText?: string;
diff --git a/src/client/import-dialog/utils.test.ts b/src/client/import-dialog/utils.test.ts
index 165efed..6739457 100644
--- a/src/client/import-dialog/utils.test.ts
+++ b/src/client/import-dialog/utils.test.ts
@@ -1,5 +1,5 @@
 import { csvToJson } from './utils';
-import { Table } from '../../common/types';
+import { Table } from '@/common/types';
 
 describe('Utility Functions', () => {
   it('csvToJson', () => {
diff --git a/src/client/import-dialog/utils.ts b/src/client/import-dialog/utils.ts
index 174d7bb..5061166 100644
--- a/src/client/import-dialog/utils.ts
+++ b/src/client/import-dialog/utils.ts
@@ -1,4 +1,4 @@
-import { Table } from '../../common/types';
+import { Table } from '@/common/types';
 
 export const acceptedMimeTypes = ['text/csv', 'application/vnd.ms-excel'];
 
diff --git a/src/client/settings-dialog/Dialog.stories.ts b/src/client/settings-dialog/Dialog.stories.ts
index ff4dc12..e4ac477 100644
--- a/src/client/settings-dialog/Dialog.stories.ts
+++ b/src/client/settings-dialog/Dialog.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Dialog } from './Dialog';
-import { DIALOG_SIZES } from '../../common/constants';
+import { DIALOG_SIZES } from '@/common/constants';
 
 const meta: Meta<typeof Dialog> = {
   title: 'Dialogs/Settings',
diff --git a/src/client/settings-dialog/components/AutomaticCategorizationForm.tsx b/src/client/settings-dialog/components/AutomaticCategorizationForm.tsx
index 87d88e5..6d7cdf1 100644
--- a/src/client/settings-dialog/components/AutomaticCategorizationForm.tsx
+++ b/src/client/settings-dialog/components/AutomaticCategorizationForm.tsx
@@ -1,7 +1,7 @@
 import { Alert, Button, Divider, Grid, Stack, Typography } from '@mui/material';
 import { FormEvent, Fragment, useEffect, useState } from 'react';
 import { FormRule } from './FormRule';
-import { FireColumn } from '../../../common/constants';
+import { FireColumn } from '@/common/constants';
 
 export enum Condition {
   contains = 'contains',
diff --git a/src/client/utils/serverFunctions.ts b/src/client/utils/serverFunctions.ts
index 3961397..6aad667 100644
--- a/src/client/utils/serverFunctions.ts
+++ b/src/client/utils/serverFunctions.ts
@@ -1,5 +1,5 @@
 import { GASClient } from 'gas-client';
-import * as publicServerFunctions from '../../server/index';
+import * as publicServerFunctions from '@/server/index';
 
 const { serverFunctions } = new GASClient<typeof publicServerFunctions>({
   // this is necessary for local development but will be ignored in production
diff --git a/src/fixtures/n26.ts b/src/fixtures/n26.ts
index e3cca6c..3486d94 100644
--- a/src/fixtures/n26.ts
+++ b/src/fixtures/n26.ts
@@ -1,4 +1,4 @@
-import { Table } from '../common/types';
+import { Table } from '@/common/types';
 
 export const fakeN26ImportWithBalance: Table = [
   ['', '', '', '', '', '', '', '20', ''],
diff --git a/src/fixtures/rabobank.ts b/src/fixtures/rabobank.ts
index d60d6af..a971db7 100644
--- a/src/fixtures/rabobank.ts
+++ b/src/fixtures/rabobank.ts
@@ -1,4 +1,4 @@
-import { Table } from '../common/types';
+import { Table } from '@/common/types';
 
 // Iban, Munt, BIC, Volgnr, Datum, RenteDatum, Bedrag, Saldo, Tegenrekening, NaamTegenpartij, NaamUiteindelijkePartij, NaamInitierendePartij, BICTegenpartij, Code, BatchID, TransactieReferentie, MachtigingsKenmerk, IncassantID, BetalingsKenmerk, Omschrijving1, Omschrijving2, Omschrijving3
 // prettier-ignore
diff --git a/src/server/account-utils.test.ts b/src/server/account-utils.test.ts
index 1226a6e..ad3a925 100644
--- a/src/server/account-utils.test.ts
+++ b/src/server/account-utils.test.ts
@@ -1,8 +1,8 @@
 import { AccountUtils } from './account-utils';
 import { getSheetById } from './globals';
 import { RangeMock, SheetMock } from '../../test-setup';
-import { StrategyOption } from '../common/types';
-import { SOURCE_SHEET_ID } from '../common/constants';
+import { StrategyOption } from '@/common/types';
+import { SOURCE_SHEET_ID } from '@/common/constants';
 
 describe('Utility tests', () => {
   test('Transformers.transformMoney', () => {
diff --git a/src/server/account-utils.ts b/src/server/account-utils.ts
index 8afef7c..5a9a177 100644
--- a/src/server/account-utils.ts
+++ b/src/server/account-utils.ts
@@ -1,5 +1,5 @@
 import { FireSpreadsheet } from './globals';
-import { StrategyOption } from '../common/types';
+import { StrategyOption } from '@/common/types';
 
 const ACCOUNTS_NAMED_RANGE = 'accounts';
 
diff --git a/src/server/config.ts b/src/server/config.ts
index 69f516d..a1191bf 100644
--- a/src/server/config.ts
+++ b/src/server/config.ts
@@ -1,6 +1,6 @@
 import { TableUtils, buildColumn } from './table-utils';
 import { Transformers } from './transformers';
-import type { StrategyOption, Table } from '../common/types';
+import type { StrategyOption, Table } from '@/common/types';
 import type { Strategy } from './types';
 import { n26Cols, raboCols, openbankCols } from './types';
 import { AccountUtils } from './account-utils';
diff --git a/src/server/globals.ts b/src/server/globals.ts
index bd13907..6606cd5 100644
--- a/src/server/globals.ts
+++ b/src/server/globals.ts
@@ -1,4 +1,4 @@
-import { SOURCE_SHEET_ID } from '../common/constants';
+import { SOURCE_SHEET_ID } from '@/common/constants';
 
 export const FireSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 export const sheets = FireSpreadsheet.getSheets();
diff --git a/src/server/helpers.ts b/src/server/helpers.ts
index 1e7a5b1..ce36f5d 100644
--- a/src/server/helpers.ts
+++ b/src/server/helpers.ts
@@ -1,5 +1,5 @@
 import { CATEGORIES_SHEET_NAME } from './config';
-import { FireColumn, FIRE_COLUMNS } from '../common/constants';
+import { FireColumn, FIRE_COLUMNS } from '@/common/constants';
 
 export const getColumnIndexByName = (column: FireColumn): number =>
   FIRE_COLUMNS.findIndex((col) => col.toLowerCase() === column);
diff --git a/src/server/remote-call.test.ts b/src/server/remote-call.test.ts
index ec62fa7..7828ceb 100644
--- a/src/server/remote-call.test.ts
+++ b/src/server/remote-call.test.ts
@@ -1,9 +1,9 @@
 import { generatePreview, processCSV } from './remote-calls';
-import { StrategyOption, Table } from '../common/types';
+import { StrategyOption, Table } from '@/common/types';
 import { RangeMock } from '../../test-setup';
-import { fakeN26ImportWithBalance, n26ImportMock } from '../fixtures/n26';
+import { fakeN26ImportWithBalance, n26ImportMock } from '@/fixtures/n26';
 import { TableUtils } from './table-utils';
-import { raboImportMock } from '../fixtures/rabobank';
+import { raboImportMock } from '@/fixtures/rabobank';
 
 const importDataSpy = vi.spyOn(TableUtils, 'importData');
 
diff --git a/src/server/remote-calls.ts b/src/server/remote-calls.ts
index 5616347..969bc18 100644
--- a/src/server/remote-calls.ts
+++ b/src/server/remote-calls.ts
@@ -2,7 +2,7 @@ import { sourceSheet } from './globals';
 import { Config } from './config';
 import { TableUtils, processTableWithImportRules } from './table-utils';
 import { n26Cols, openbankCols, raboCols } from './types';
-import { ServerResponse, StrategyOption, Table } from '../common/types';
+import { ServerResponse, StrategyOption, Table } from '@/common/types';
 import { AccountUtils, isNumeric } from './account-utils';
 import { Transformers } from './transformers';
 import {
diff --git a/src/server/table-utils.ts b/src/server/table-utils.ts
index 61d323f..af7e810 100644
--- a/src/server/table-utils.ts
+++ b/src/server/table-utils.ts
@@ -1,6 +1,6 @@
-import type { Table } from '../common/types';
+import type { Table } from '@/common/types';
 import { sourceSheet } from './globals';
-import { FIRE_COLUMNS } from '../common/constants';
+import { FIRE_COLUMNS } from '@/common/constants';
 import { FireColumnRules, InputColumn } from './types';
 import { Logger } from '@/common/logger';
 
diff --git a/src/server/tsconfig.json b/src/server/tsconfig.json
deleted file mode 100644
index d32bf41..0000000
--- a/src/server/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "types": ["gas-types-detailed"]
-  }
-}
diff --git a/src/server/types.ts b/src/server/types.ts
index d788673..ce3002e 100644
--- a/src/server/types.ts
+++ b/src/server/types.ts
@@ -1,4 +1,4 @@
-import { Table } from '../common/types';
+import { Table } from '@/common/types';
 
 export enum n26Cols {
   BookingDate,
diff --git a/src/server/ui.ts b/src/server/ui.ts
index fa8a31b..c7f9d95 100644
--- a/src/server/ui.ts
+++ b/src/server/ui.ts
@@ -1,4 +1,4 @@
-import { DIALOG_SIZES } from '../common/constants';
+import { DIALOG_SIZES } from '@/common/constants';
 import { executeAutomaticCategorization } from './remote-calls';
 
 export function onOpen(): void {
diff --git a/tsconfig.json b/tsconfig.json
index cf3bd47..db97e9a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "strictNullChecks": true,
     "skipLibCheck": true,
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "types": ["vitest/globals", "vite/client"],
+    "types": ["gas-types-detailed", "vitest/globals", "vite/client"],
     "jsx": "react-jsx",
     "paths": {
       "@/*": ["./src/*"]

From 4c85d7cd98e4661e1eea663b9734b3f57376f17e Mon Sep 17 00:00:00 2001
From: Melle Dijkstra <melle.dijkstra@adidas.com>
Date: Sat, 9 Nov 2024 21:47:20 +0100
Subject: [PATCH 5/6] sonar smells cleanup

---
 src/client/import-dialog/Dialog.tsx             | 17 ++---------------
 .../import-dialog/components/DataTable.tsx      |  1 -
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/client/import-dialog/Dialog.tsx b/src/client/import-dialog/Dialog.tsx
index 52afceb..c000fe9 100644
--- a/src/client/import-dialog/Dialog.tsx
+++ b/src/client/import-dialog/Dialog.tsx
@@ -10,24 +10,11 @@ import {
 import { DataTable } from './components/DataTable';
 
 const RawTable = () => {
-  const { importData, addSelectedRow, removeSelectedRow } = useImportContext();
-
-  const onRowToggled = (index: number, on: boolean) => {
-    console.log('Row selected:', index);
-    if (on) {
-      addSelectedRow(index);
-    } else {
-      removeSelectedRow(index);
-    }
-  };
+  const { importData } = useImportContext();
 
   return (
     importData && (
-      <DataTable
-        table={importData}
-        options={{ selectable: true }}
-        onRowToggled={onRowToggled}
-      />
+      <DataTable table={importData} options={{ selectable: true }} />
     )
   );
 };
diff --git a/src/client/import-dialog/components/DataTable.tsx b/src/client/import-dialog/components/DataTable.tsx
index 722dc33..b683436 100644
--- a/src/client/import-dialog/components/DataTable.tsx
+++ b/src/client/import-dialog/components/DataTable.tsx
@@ -22,7 +22,6 @@ export const DataTable = ({
   options = defaultOptions,
 }: {
   table: Table;
-  onRowToggled?: (index: number, on: boolean) => void;
   options?: TableOptions;
 }) => {
   const { selectable } = options;

From 628d895557144c924d28e3c7fe0463ae7701e650 Mon Sep 17 00:00:00 2001
From: Melle Dijkstra <melle.dijkstra@adidas.com>
Date: Sat, 9 Nov 2024 22:12:14 +0100
Subject: [PATCH 6/6] added project version to about dialog

---
 CHANGELOG.md                       | 14 ++++++++++++++
 package-lock.json                  |  4 ++--
 package.json                       |  2 +-
 src/client/about-dialog/Dialog.tsx |  1 +
 src/client/declarations.d.ts       |  4 ++++
 vite.config.ts                     |  4 ++++
 6 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f134645..6026daa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## 3.1.0
+
+#### Users
+
+- Removed external table packages and using Mui components instead to build a custom table which seemed to be way easier.
+- Users can now see a nicer table when importing their data with checkboxes to choose which transactions should not be imported (feedback to user still pending).
+- A preview table is also placed inside another tab to preview the transactions before importing them
+- About dialog now shows current version of this project. This is helpful when distributing the Google Sheet in the future.
+
+#### Developer
+
+- Added '@' alias in vite to refer to the root of the project and can be used when importing e.g. `@/client/**` or `@/server/**`
+- Added `__APP_VERSION__` through vite define in order to receive the current version
+
 ## 3.0.0
 
 - **Breaking Change**: Migration from Webpack to Vite
diff --git a/package-lock.json b/package-lock.json
index 63c6a77..a99f71b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "gas-fire",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "gas-fire",
-      "version": "3.0.0",
+      "version": "3.1.0",
       "license": "MIT",
       "dependencies": {
         "@emotion/react": "^11.13.3",
diff --git a/package.json b/package.json
index ed8dcb6..da284f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gas-fire",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "Melle Dijkstra",
   "description": "Google App Script utilities to automate the FIRE google sheet",
   "license": "MIT",
diff --git a/src/client/about-dialog/Dialog.tsx b/src/client/about-dialog/Dialog.tsx
index b815239..7fa7437 100644
--- a/src/client/about-dialog/Dialog.tsx
+++ b/src/client/about-dialog/Dialog.tsx
@@ -8,6 +8,7 @@ export const Dialog = () => {
       <a target="_blank" href="https://github.com/melledijkstra/gas-fire">
         @melledijkstra/gas-fire
       </a>
+      <p>{`Version: ${__APP_VERSION__}`}</p>
     </Application>
   );
 };
diff --git a/src/client/declarations.d.ts b/src/client/declarations.d.ts
index 486f768..776d8d9 100644
--- a/src/client/declarations.d.ts
+++ b/src/client/declarations.d.ts
@@ -13,3 +13,7 @@ declare namespace google.script.host {
 declare namespace google.script.host.editor {
   function focus(): void;
 }
+
+// app version which is injected by vite define when bundling
+// it is used to show in the about dialog when deploying
+declare const __APP_VERSION__: string;
diff --git a/vite.config.ts b/vite.config.ts
index 6957ee2..6677c00 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,6 +14,7 @@ import react from '@vitejs/plugin-react-swc';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 import { writeFile } from 'fs/promises';
+import packageInfo from './package.json';
 
 const PORT = 3000;
 const clientRoot = './src/client';
@@ -47,6 +48,9 @@ const clientEntrypoints: Array<DialogEntry> = [
 ];
 
 const sharedConfig = defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify(packageInfo.version),
+  },
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),