fibdash/client/src/components/config/gridConfig.js

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 '';
  const parts = dateString.split('.');
  if (parts.length === 3) {
    return `${parts[0]}.${parts[1]}.20${parts[2]}`;
  }
  return 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',
    width: 100,
    valueFormatter: (params) => formatDate(params.value),
    pinned: 'left',
    sortable: true,
    filter: 'agDateColumnFilter',
    floatingFilter: false,
    headerComponent: TextHeaderWithFilter
  },
  {
    headerName: 'Beschreibung',
    field: 'description',
    width: 350,
    sortable: true,
    headerComponent: TextHeaderWithFilter,
    tooltipField: 'description',
    cellRenderer: DescriptionRenderer
  },
  {
    headerName: 'Name',
    field: 'Beguenstigter/Zahlungspflichtiger',
    width: 200,
    sortable: true,
    headerComponent: TextHeaderWithFilter,
    tooltipField: 'Beguenstigter/Zahlungspflichtiger',
    cellRenderer: RecipientRenderer
  },
  {
    headerName: 'IBAN',
    field: 'Kontonummer/IBAN',
    width: 180,
    sortable: true,
    filter: IbanSelectionFilter,
    headerComponent: TextHeaderWithFilter,
    tooltipField: 'Kontonummer/IBAN',
    cellRenderer: RecipientRenderer
  },
  {
    headerName: 'BIC',
    field: 'BIC (SWIFT-Code)',
    width: 120,
    sortable: true,
    headerComponent: TextHeaderWithFilter,
    tooltipField: 'BIC',
    cellRenderer: RecipientRenderer
  },
  {
    headerName: 'Betrag',
    field: 'numericAmount',
    width: 120,
    cellRenderer: AmountRenderer,
    sortable: true,
    filter: 'agNumberColumnFilter',
    floatingFilter: false,
    type: 'rightAligned',
    headerComponent: TextHeaderWithFilter
  },
  {
    headerName: 'Typ',
    field: 'typeText',
    width: 70,
    cellRenderer: TypeRenderer,
    sortable: false,
    suppressSorting: true,
    filter: CheckboxFilter,
    filterParams: {
      filterOptions: [
        {
          value: 'income',
          label: 'Einnahme',
          color: 'success',
          dotStyle: {
            width: '8px',
            height: '8px',
            backgroundColor: '#388e3c'
          },
          condition: (fieldValue) => fieldValue === 'Einnahme'
        },
        {
          value: 'expense',
          label: 'Ausgabe',
          color: 'error',
          dotStyle: {
            width: '8px',
            height: '8px',
            backgroundColor: '#d32f2f'
          },
          condition: (fieldValue) => fieldValue === 'Ausgabe'
        }
      ]
    },
    floatingFilter: false,
    headerComponent: TextHeaderWithFilter
  },
  {
    headerName: 'JTL',
    field: 'hasJTL',
    width: 70,
    cellRenderer: JtlRenderer,
    sortable: false,
    suppressSorting: true,
    filter: CheckboxFilter,
    filterParams: {
      filterOptions: [
        {
          value: 'present',
          label: 'Vorhanden',
          color: 'success',
          dotStyle: {
            width: '12px',
            height: '12px',
            backgroundColor: '#388e3c',
            border: 'none',
            fontSize: '8px',
            color: 'white',
            fontWeight: 'bold',
            content: '✓'
          },
          condition: (fieldValue) => fieldValue === true
        },
        {
          value: 'missing',
          label: 'Fehlend',
          color: 'error',
          dotStyle: {
            width: '12px',
            height: '12px',
            backgroundColor: '#f5f5f5',
            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
  }
];

export const defaultColDef = {
  resizable: true,
  sortable: true,
  filter: true,
  floatingFilter: false,
  suppressHeaderMenuButton: false
};

export const gridOptions = {
  animateRows: true,
  rowSelection: false,
  rowBuffer: 10,
  // Enable virtualization (default behavior)
  suppressRowVirtualisation: false,
  suppressColumnVirtualisation: false,
  // Performance optimizations
  suppressChangeDetection: false,
  // Row height
  rowHeight: 26,
  headerHeight: 40,
  // Pagination (optional - can be removed for infinite scrolling)
  pagination: false,
  paginationPageSize: 100,
  // Disable cell selection
  suppressCellSelection: true,
  suppressRowClickSelection: true,
  suppressCellFocus: true
};