updated the table view

src/core/PageManager/data/pages/pek-tables.ts

@@ -5,6 +5,7 @@ import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
 import { usePekTablesContext } from '../../../../hooks/PekTablesContext';
 import PekTablesDropdown from './pek-tables/PekTablesDropdown';
 import PekTablesPageWrapper from './pek-tables/PekTablesPageWrapper';
+import PekTablesTable from './pek-tables/PekTablesTable';
 
 // Hook factory for PEK Tables page
 const createPekTablesHook = () => {
@@ -98,17 +99,8 @@ export const pekTablesPageData: GenericPageData = {
         },
         {
             id: 'pek-tables-table',
-            type: 'table',
+            type: 'custom',
-            tableConfig: {
+            customComponent: PekTablesTable
-                hookFactory: createPekTablesHook,
-                columns: [], // Auto-detect columns
-                searchable: true,
-                filterable: true,
-                sortable: true,
-                pagination: true,
-                pageSize: 10,
-                selectable: true
-            }
         }
     ],
     

src/core/PageManager/data/pages/pek-tables/PekTablesCollapsable.module.css

@@ -0,0 +1,69 @@
+.collapsableContainer {
+  width: 100%;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--color-bg, #ffffff);
+  display: flex;
+  flex-direction: column;
+}
+
+.collapseButton {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background-color: var(--color-bg-secondary, #f9fafb);
+  border: none;
+  border-bottom: 1px solid var(--color-border, #e5e7eb);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-family: var(--font-family);
+}
+
+.collapseButton:hover {
+  background-color: var(--color-hover, #f3f4f6);
+}
+
+.collapseButton:focus {
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: -2px;
+}
+
+.collapseButtonText {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text, #111827);
+}
+
+.collapseIcon {
+  color: var(--color-text-secondary, #6b7280);
+  font-size: 1rem;
+  transition: transform 0.2s;
+}
+
+.collapsableContent {
+  padding: 0;
+  animation: slideDown 0.2s ease-out;
+  height: calc(100vh - 250px); /* Very tall height, starting below dropdown and extending downward */
+  min-height: 500px; /* Minimum height for usability */
+  max-height: calc(100vh - 150px); /* Maximum height to leave minimal space for other elements */
+  overflow-y: auto;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 1000px;
+  }
+}
+

src/core/PageManager/data/pages/pek-tables/PekTablesCollapsable.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import styles from './PekTablesCollapsable.module.css';
+
+interface PekTablesCollapsableProps {
+  title?: string;
+  children: React.ReactNode;
+  defaultCollapsed?: boolean;
+}
+
+const PekTablesCollapsable: React.FC<PekTablesCollapsableProps> = ({
+  title = 'Tabellenansicht',
+  children,
+  defaultCollapsed = false
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <div className={styles.collapsableContainer}>
+      <button
+        type="button"
+        className={styles.collapseButton}
+        onClick={toggleCollapse}
+        aria-expanded={!isCollapsed}
+      >
+        <span className={styles.collapseButtonText}>{title}</span>
+        {isCollapsed ? (
+          <FaChevronDown className={styles.collapseIcon} />
+        ) : (
+          <FaChevronUp className={styles.collapseIcon} />
+        )}
+      </button>
+      {!isCollapsed && (
+        <div className={styles.collapsableContent}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PekTablesCollapsable;
+

src/core/PageManager/data/pages/pek-tables/PekTablesTable.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { FormGenerator } from '../../../../../components/FormGenerator';
+import { usePekTablesContext } from '../../../../../hooks/PekTablesContext';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import styles from './PekTablesCollapsable.module.css';
+
+const PekTablesTable: React.FC = () => {
+  const {
+    tableData,
+    isLoadingTableData,
+    tableDataError,
+    refreshTableData,
+    selectedTable
+  } = usePekTablesContext();
+
+  const [isCollapsed, setIsCollapsed] = useState(true); // Default collapsed to show chat window
+
+  // Debug logging
+  if (import.meta.env.DEV) {
+    console.log('📊 PekTablesTable render:', {
+      selectedTable,
+      tableDataLength: tableData?.length || 0,
+      isLoadingTableData,
+      tableDataError
+    });
+  }
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  // Show error state if there's an error
+  if (tableDataError) {
+    return (
+      <div className={styles.collapsableContainer}>
+        <button
+          type="button"
+          className={styles.collapseButton}
+          onClick={toggleCollapse}
+          aria-expanded={!isCollapsed}
+        >
+          <span className={styles.collapseButtonText}>Tabellenansicht</span>
+          {isCollapsed ? (
+            <FaChevronDown className={styles.collapseIcon} />
+          ) : (
+            <FaChevronUp className={styles.collapseIcon} />
+          )}
+        </button>
+        {!isCollapsed && (
+          <div className={styles.collapsableContent}>
+            <div style={{ padding: '1rem', color: '#ef4444' }}>
+              <p>Fehler beim Laden der Daten: {tableDataError}</p>
+              {refreshTableData && (
+                <button onClick={refreshTableData} style={{ marginTop: '0.5rem', padding: '0.5rem 1rem', backgroundColor: '#3b82f6', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
+                  Erneut versuchen
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Only show loading spinner on initial load (when there's no data yet)
+  const showLoadingSpinner = isLoadingTableData && (!tableData || tableData.length === 0);
+
+  return (
+    <div className={styles.collapsableContainer}>
+      <button
+        type="button"
+        className={styles.collapseButton}
+        onClick={toggleCollapse}
+        aria-expanded={!isCollapsed}
+      >
+        <span className={styles.collapseButtonText}>
+          Tabellenansicht {selectedTable && `(${selectedTable})`} {tableData && tableData.length > 0 && `- ${tableData.length} Einträge`}
+        </span>
+        {isCollapsed ? (
+          <FaChevronDown className={styles.collapseIcon} />
+        ) : (
+          <FaChevronUp className={styles.collapseIcon} />
+        )}
+      </button>
+      {!isCollapsed && (
+        <div className={styles.collapsableContent}>
+          {tableData && tableData.length > 0 ? (
+            <FormGenerator
+              data={tableData}
+              columns={undefined} // Auto-detect columns - undefined triggers auto-detection
+              loading={showLoadingSpinner}
+              searchable={true}
+              filterable={true}
+              sortable={true}
+              pagination={true}
+              pageSize={10}
+              selectable={true}
+            />
+          ) : isLoadingTableData ? (
+            <div style={{ padding: '1rem', textAlign: 'center', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <div>Lade Daten...</div>
+            </div>
+          ) : (
+            <div style={{ padding: '1rem', textAlign: 'center', color: '#6b7280', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              Keine Daten verfügbar. Bitte wählen Sie eine Tabelle aus.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PekTablesTable;
+