From 51615145f6ccfaee75e6551086fced43fa647ef8 Mon Sep 17 00:00:00 2001
From: s8613 <s86136@bht-berlin.de>
Date: Wed, 4 Jun 2025 21:07:43 +0200
Subject: [PATCH] Added table to config.tsx

---
 project/frontend/src/routes/config.tsx | 206 +++++++++++++++++++++++--
 1 file changed, 193 insertions(+), 13 deletions(-)

diff --git a/project/frontend/src/routes/config.tsx b/project/frontend/src/routes/config.tsx
index 5ddecdb..6ba17e6 100644
--- a/project/frontend/src/routes/config.tsx
+++ b/project/frontend/src/routes/config.tsx
@@ -1,24 +1,91 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
+import { Box, Button, IconButton, Typography } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
 
 export const Route = createFileRoute("/config")({
     component: ConfigPage,
 });
 
+interface Kennzahl {
+    id: number;
+    name: string;
+    format: string;
+    active: boolean;
+}
+
+const mockKennzahlen: Kennzahl[] = [
+    { id: 1, name: "Fondsname", format: "Text", active: true },
+    { id: 2, name: "Fondsmanager", format: "Text", active: true },
+    { id: 3, name: "AIFM", format: "Text", active: false },
+    { id: 4, name: "Datum", format: "Datum", active: true },
+    { id: 5, name: "Risikoprofil", format: "Text", active: true },
+    { id: 6, name: "Artikel", format: "Ja/Nein", active: true },
+    { id: 7, name: "Zielrendite", format: "Zahl", active: true },
+    { id: 8, name: "Rendite", format: "Zahl", active: true },
+    { id: 9, name: "Zielausschüttung", format: "Zahl", active: true },
+    { id: 10, name: "Ausschüttung", format: "Zahl", active: true },
+    { id: 11, name: "Laufzeit", format: "Text", active: true },
+    { id: 12, name: "LTV", format: "Zahl", active: true },
+    { id: 13, name: "Managementgebühren", format: "Zahl", active: true },
+    { id: 14, name: "Sektorenallokation", format: "Liste (mehrfach)", active: true },
+    { id: 15, name: "Länderallokation", format: "Liste (mehrfach)", active: true },
+];
+
 function ConfigPage() {
     const navigate = useNavigate();
+    const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>(mockKennzahlen);
+    const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
+
+    const handleToggleActive = (id: number) => {
+        setKennzahlen(prev =>
+            prev.map(item =>
+                item.id === id ? { ...item, active: !item.active } : item
+            )
+        );
+    };
+
+    const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, item: Kennzahl) => {
+        setDraggedItem(item);
+        e.dataTransfer.effectAllowed = "move";
+    };
+
+    const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+    };
+
+    const handleDrop = (e: React.DragEvent<HTMLTableRowElement>, targetItem: Kennzahl) => {
+        e.preventDefault();
+        if (!draggedItem || draggedItem.id === targetItem.id) return;
+
+        const draggedIndex = kennzahlen.findIndex(item => item.id === draggedItem.id);
+        const targetIndex = kennzahlen.findIndex(item => item.id === targetItem.id);
+
+        const newKennzahlen = [...kennzahlen];
+        const [removed] = newKennzahlen.splice(draggedIndex, 1);
+        newKennzahlen.splice(targetIndex, 0, removed);
+
+        setKennzahlen(newKennzahlen);
+        setDraggedItem(null);
+    };
+
+    const handleDragEnd = () => {
+        setDraggedItem(null);
+    };
 
     return (
         <Box
-            height="100vh"
+            minHeight="100vh"
             width="100vw"
             bgcolor="white"
             display="flex"
             flexDirection="column"
             alignItems="center"
             pt={3}
+            pb={4}
         >
             <Box
                 width="100%"
@@ -45,22 +112,135 @@ function ConfigPage() {
                     Neue Kennzahl hinzufügen
                 </Button>
             </Box>
-            <Paper
-                elevation={2}
+
+            <Box
                 sx={{
-                    width: "90%",
-                    maxWidth: 1100,
-                    height: 400,
+                    width: "70%",
+                    maxWidth: 800,
                     mt: 4,
                     borderRadius: 2,
-                    backgroundColor: "#eeeeee",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+                    backgroundColor: "white",
+                    overflow: "hidden",
                 }}
             >
-                <Typography color="textSecondary">To-do: Table hierhin</Typography>
-            </Paper>
+                <table style={{
+                    width: "100%",
+                    borderCollapse: "collapse"
+                }}>
+                    <thead>
+                    <tr style={{ backgroundColor: "#f5f5f5" }}>
+                        <th style={{
+                            padding: "16px 12px",
+                            textAlign: "left",
+                            fontWeight: "bold",
+                            width: "60px",
+                            borderBottom: "1px solid #e0e0e0"
+                        }}>
+
+                        </th>
+                        <th style={{
+                            padding: "16px 12px",
+                            textAlign: "left",
+                            fontWeight: "bold",
+                            width: "80px",
+                            borderBottom: "1px solid #e0e0e0"
+                        }}>
+                            Aktiv
+                        </th>
+                        <th style={{
+                            padding: "16px 12px",
+                            textAlign: "left",
+                            fontWeight: "bold",
+                            borderBottom: "1px solid #e0e0e0"
+                        }}>
+                            Name
+                        </th>
+                        <th style={{
+                            padding: "16px 12px",
+                            textAlign: "left",
+                            fontWeight: "bold",
+                            width: "160px",
+                            borderBottom: "1px solid #e0e0e0"
+                        }}>
+                            Format
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {kennzahlen.map((kennzahl) => (
+                        <tr
+                            key={kennzahl.id}
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, kennzahl)}
+                            onDragOver={handleDragOver}
+                            onDrop={(e) => handleDrop(e, kennzahl)}
+                            onDragEnd={handleDragEnd}
+                            style={{
+                                borderBottom: "1px solid #e0e0e0",
+                                cursor: "move",
+                                backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
+                                opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
+                            }}
+                            onMouseEnter={(e) => {
+                                if (!draggedItem) {
+                                    e.currentTarget.style.backgroundColor = "#f9f9f9";
+                                }
+                            }}
+                            onMouseLeave={(e) => {
+                                if (!draggedItem) {
+                                    e.currentTarget.style.backgroundColor = "white";
+                                }
+                            }}
+                        >
+                            <td style={{ padding: "12px", textAlign: "center" }}>
+                                <DragIndicatorIcon
+                                    sx={{
+                                        color: "#999",
+                                        cursor: "grab",
+                                        "&:active": { cursor: "grabbing" }
+                                    }}
+                                />
+                            </td>
+                            <td style={{ padding: "12px" }}>
+                                <input
+                                    type="checkbox"
+                                    checked={kennzahl.active}
+                                    onChange={() => handleToggleActive(kennzahl.id)}
+                                    style={{
+                                        width: "18px",
+                                        height: "18px",
+                                        cursor: "pointer",
+                                        accentColor: "#383838"
+                                    }}
+                                    onClick={(e) => e.stopPropagation()}
+                                />
+                            </td>
+                            <td style={{
+                                padding: "12px",
+                                fontSize: "14px",
+                                color: "#333"
+                            }}>
+                                {kennzahl.name}
+                            </td>
+                            <td style={{ padding: "12px" }}>
+                                    <span style={{
+                                        color: "#333",
+                                        padding: "4px 12px",
+                                        borderRadius: "16px",
+                                        fontSize: "12px",
+                                        fontWeight: "500",
+                                        border: "1px solid #ddd",
+                                        backgroundColor: "#f8f9fa"
+                                    }}>
+                                        {kennzahl.format}
+                                    </span>
+                            </td>
+                        </tr>
+                    ))}
+                    </tbody>
+                </table>
+            </Box>
         </Box>
     );
 }
\ No newline at end of file