Implement DATEV export functionality in DataViewer and enhance TransactionsTable with selection features and improved row styling. Update environment variables and add devServer configuration in webpack for better development experience.

client/src/components/config/gridConfig.js

@@ -1,10 +1,14 @@
 import CheckboxFilter from '../filters/CheckboxFilter';
+import IbanSelectionFilter from '../filters/IbanSelectionFilter';
 import TextHeaderWithFilter from '../headers/TextHeaderWithFilter';
+import SelectionHeader from '../headers/SelectionHeader';
 import AmountRenderer from '../cellRenderers/AmountRenderer';
 import TypeRenderer from '../cellRenderers/TypeRenderer';
 import JtlRenderer from '../cellRenderers/JtlRenderer';
 import DescriptionRenderer from '../cellRenderers/DescriptionRenderer';
 import RecipientRenderer from '../cellRenderers/RecipientRenderer';
+import DocumentRenderer from '../cellRenderers/DocumentRenderer';
+import SelectionRenderer from '../cellRenderers/SelectionRenderer';
 
 const formatDate = (dateString) => {
   if (!dateString) return '';
@@ -16,6 +20,21 @@ const formatDate = (dateString) => {
 };
 
 export const getColumnDefs = () => [
+  {
+    headerName: '',
+    field: 'selection',
+    width: 50,
+    pinned: 'left',
+    sortable: false,
+    filter: false,
+    resizable: false,
+    suppressMenu: true,
+    cellRenderer: SelectionRenderer,
+    headerComponent: SelectionHeader,
+    headerComponentParams: {
+      // These will be set by the parent component
+    }
+  },
   {
     headerName: 'Datum',
     field: 'Buchungstag',
@@ -50,6 +69,7 @@ export const getColumnDefs = () => [
     field: 'Kontonummer/IBAN',
     width: 180,
     sortable: true,
+    filter: IbanSelectionFilter,
     headerComponent: TextHeaderWithFilter,
     tooltipField: 'Kontonummer/IBAN',
     cellRenderer: RecipientRenderer
@@ -79,7 +99,8 @@ export const getColumnDefs = () => [
     field: 'typeText',
     width: 70,
     cellRenderer: TypeRenderer,
-    sortable: true,
+    sortable: false,
+    suppressSorting: true,
     filter: CheckboxFilter,
     filterParams: {
       filterOptions: [
@@ -115,7 +136,8 @@ export const getColumnDefs = () => [
     field: 'hasJTL',
     width: 70,
     cellRenderer: JtlRenderer,
-    sortable: true,
+    sortable: false,
+    suppressSorting: true,
     filter: CheckboxFilter,
     filterParams: {
       filterOptions: [
@@ -146,11 +168,36 @@ export const getColumnDefs = () => [
             border: '1px solid #ccc'
           },
           condition: (fieldValue) => fieldValue === false
+        },
+        {
+          value: 'undefined',
+          label: 'Unbekannt',
+          color: 'warning',
+          dotStyle: {
+            width: '12px',
+            height: '12px',
+            backgroundColor: '#fff3cd',
+            border: '1px solid #ffc107',
+            fontSize: '8px',
+            color: '#856404',
+            fontWeight: 'bold',
+            content: '?'
+          },
+          condition: (fieldValue) => fieldValue === undefined
         }
       ]
     },
     floatingFilter: false,
     headerComponent: TextHeaderWithFilter
+  },
+  {
+    headerName: 'Dokumente',
+    field: 'documents',
+    width: 90,
+    cellRenderer: DocumentRenderer,
+    sortable: false,
+    filter: false,
+    headerComponent: TextHeaderWithFilter
   }
 ];
 
@@ -164,10 +211,7 @@ export const defaultColDef = {
 
 export const gridOptions = {
   animateRows: true,
-  rowSelection: {
-    mode: 'singleRow',
-    enableClickSelection: true
-  },
+  rowSelection: false,
   rowBuffer: 10,
   // Enable virtualization (default behavior)
   suppressRowVirtualisation: false,
@@ -179,5 +223,9 @@ export const gridOptions = {
   headerHeight: 40,
   // Pagination (optional - can be removed for infinite scrolling)
   pagination: false,
-  paginationPageSize: 100
+  paginationPageSize: 100,
+  // Disable cell selection
+  suppressCellSelection: true,
+  suppressRowClickSelection: true,
+  suppressCellFocus: true
 };