Enhance webpack configuration for improved performance and development experience. Add filesystem caching and watch options. Update KreditorSelector to handle prefilled data and improve state management. Refactor TransactionsTable to manage focus during dialog interactions. Update admin tables to manage focus restoration and improve dialog handling. Implement IBAN filtering in IbanSelectionFilter and enhance document rendering with Kreditor information. Update SQL schema to allow multiple IBANs for the same Kreditor and adjust API routes for better data handling.

client/src/components/admin/KontoTable.js

@@ -43,6 +43,11 @@ class KontoTable extends Component {
       },
     };
     this.authService = new AuthService();
+    
+    // Focus management refs
+    this.triggerRef = React.createRef();
+    this.dialogRef = React.createRef();
+    this.confirmDialogRef = React.createRef();
   }
 
   componentDidMount() {
@@ -65,6 +70,9 @@ class KontoTable extends Component {
   };
 
   handleOpenDialog = (konto = null) => {
+    // Store reference to the trigger element for focus restoration
+    this.triggerRef.current = document.activeElement;
+    
     this.setState({
       dialogOpen: true,
       editingKonto: konto,
@@ -87,6 +95,13 @@ class KontoTable extends Component {
         name: '',
       },
     });
+    
+    // Restore focus to the trigger element after dialog closes
+    setTimeout(() => {
+      if (this.triggerRef.current && this.triggerRef.current.focus) {
+        this.triggerRef.current.focus();
+      }
+    }, 100);
   };
 
   handleInputChange = (field) => (event) => {
@@ -134,6 +149,9 @@ class KontoTable extends Component {
   };
 
   handleDeleteClick = (konto) => {
+    // Store reference to the trigger element for focus restoration
+    this.triggerRef.current = document.activeElement;
+    
     this.setState({
       confirmDialogOpen: true,
       itemToDelete: konto,
@@ -145,6 +163,13 @@ class KontoTable extends Component {
     if (!itemToDelete) return;
 
     this.setState({ confirmDialogOpen: false, itemToDelete: null });
+    
+    // Restore focus to the trigger element after dialog closes
+    setTimeout(() => {
+      if (this.triggerRef.current && this.triggerRef.current.focus) {
+        this.triggerRef.current.focus();
+      }
+    }, 100);
 
     try {
       const response = await this.authService.apiCall(`/admin/konten/${konto.id}`, {
@@ -168,6 +193,13 @@ class KontoTable extends Component {
       confirmDialogOpen: false,
       itemToDelete: null,
     });
+    
+    // Restore focus to the trigger element after dialog closes
+    setTimeout(() => {
+      if (this.triggerRef.current && this.triggerRef.current.focus) {
+        this.triggerRef.current.focus();
+      }
+    }, 100);
   };
 
   render() {
@@ -235,11 +267,22 @@ class KontoTable extends Component {
           </Table>
         </TableContainer>
 
-        <Dialog open={dialogOpen} onClose={this.handleCloseDialog} maxWidth="sm" fullWidth>
-          <DialogTitle>
+        <Dialog 
+          open={dialogOpen} 
+          onClose={this.handleCloseDialog} 
+          maxWidth="sm" 
+          fullWidth
+          ref={this.dialogRef}
+          disableAutoFocus={false}
+          disableEnforceFocus={false}
+          disableRestoreFocus={true}
+          aria-labelledby="konto-dialog-title"
+          aria-describedby="konto-dialog-content"
+        >
+          <DialogTitle id="konto-dialog-title">
             {editingKonto ? 'Konto bearbeiten' : 'Neues Konto'}
           </DialogTitle>
-          <DialogContent>
+          <DialogContent id="konto-dialog-content">
             <TextField
               autoFocus
               margin="dense"
@@ -279,9 +322,15 @@ class KontoTable extends Component {
           onClose={this.handleDeleteCancel}
           maxWidth="sm"
           fullWidth
+          ref={this.confirmDialogRef}
+          disableAutoFocus={false}
+          disableEnforceFocus={false}
+          disableRestoreFocus={true}
+          aria-labelledby="konto-confirm-dialog-title"
+          aria-describedby="konto-confirm-dialog-content"
         >
-          <DialogTitle>Löschen bestätigen</DialogTitle>
-          <DialogContent>
+          <DialogTitle id="konto-confirm-dialog-title">Löschen bestätigen</DialogTitle>
+          <DialogContent id="konto-confirm-dialog-content">
             <Typography>
               {this.state.itemToDelete && 
                 `Konto "${this.state.itemToDelete.konto} - ${this.state.itemToDelete.name}" wirklich löschen?`