Merge branch 'main' into #53-data-fetching

# Conflicts:
#	project/backend/coordinator/controller/socketIO.py
#	project/frontend/src/routeTree.gen.ts
pull/59/head
Jaronim Pracht 2025-06-09 14:43:59 +02:00
commit 38456382b2
21 changed files with 1347 additions and 118 deletions

View File

@ -2,4 +2,4 @@ API_KEY=
DATABASE_URL=postgresql://admin:admin@db:5432
POSTGRES_PASSWORD=admin
POSTGRES_USER=admin
COORDINATOR_URL="coordinator:5000"
COORDINATOR_URL="http://coordinator:5000"

View File

@ -0,0 +1,3 @@
.venv
venv
__pycache__

View File

@ -21,6 +21,7 @@ app.config["MAX_CONTENT_LENGTH"] = 100 * 1024 * 1024 # 100 MB
init_db(app)
register_routes(app)
# Register blueprints
app.register_blueprint(kennzahlen_bp)
@ -28,6 +29,7 @@ app.register_blueprint(kennzahlen_bp)
def health_check():
return "OK"
# für Docker wichtig: host='0.0.0.0'
if __name__ == "__main__":
socketio.run(app, debug=True, host="0.0.0.0", port=5050)

View File

@ -34,6 +34,8 @@ def create_kpi_setting():
"type",
"translation",
"example",
"position",
"active"
]
for field in required_fields:
if field not in data:
@ -58,6 +60,8 @@ def create_kpi_setting():
type=kpi_type,
translation=data["translation"],
example=data["example"],
position=data["position"],
active=data["active"]
)
db.session.add(new_kpi_setting)
@ -102,6 +106,12 @@ def update_kpi_setting(id):
if "example" in data:
kpi_setting.example = data["example"]
if "position" in data:
kpi_setting.position = data["position"]
if "active" in data:
kpi_setting.active = data["active"]
db.session.commit()
return jsonify(kpi_setting.to_dict()), 200
@ -114,3 +124,28 @@ def delete_kpi_setting(id):
db.session.commit()
return jsonify({"message": f"KPI Setting {id} deleted successfully"}), 200
@kpi_setting_controller.route("/update-kpi-positions", methods=["PUT"])
def update_kpi_positions():
data = request.json
if not data or not isinstance(data, list):
return jsonify({"error": "Expected an array of update objects"}), 400
try:
for update_item in data:
if "id" not in update_item or "position" not in update_item:
return jsonify({"error": "Each item must have 'id' and 'position' fields"}), 400
kpi_setting = KPISettingModel.query.get_or_404(update_item["id"])
kpi_setting.position = update_item["position"]
db.session.commit()
updated_kpis = KPISettingModel.query.order_by(KPISettingModel.position).all()
return jsonify([kpi.to_dict() for kpi in updated_kpis]), 200
except Exception as e:
db.session.rollback()
return jsonify({"error": f"Failed to update positions: {str(e)}"}), 500

View File

@ -13,44 +13,51 @@ from controller.socketIO import socketio
pitch_book_controller = Blueprint("pitch_books", __name__, url_prefix="/api/pitch_book")
OCR_SERVICE_URL = os.getenv("OCR_SERVICE_URL", "http://localhost:5051")
progress_per_id = {} # {id: {kpi: 0, pdf: 0}}
storage_lock = threading.Lock()
def process_pdf_async(app, file_id, file_data, filename):
with app.app_context():
try:
file_obj = BytesIO(file_data)
file_obj.name = filename
files = {'file': (filename, file_obj, 'application/pdf')}
data = {'id': file_id}
files = {"file": (filename, file_obj, "application/pdf")}
data = {"id": file_id}
response = requests.post(
f"{OCR_SERVICE_URL}/ocr",
files=files,
data=data,
timeout=600
f"{OCR_SERVICE_URL}/ocr", files=files, data=data, timeout=600
)
if response.status_code == 200:
response_data = response.json()
if 'ocr_pdf' in response_data:
if "ocr_pdf" in response_data:
import base64
ocr_pdf_data = base64.b64decode(response_data['ocr_pdf'])
ocr_pdf_data = base64.b64decode(response_data["ocr_pdf"])
file_record = PitchBookModel.query.get(file_id)
if file_record:
file_record.file = ocr_pdf_data
db.session.commit()
print(f"[DEBUG] PDF updated in database:")
print(f"[DEBUG] - Successfully saved to database")
print("[DEBUG] PDF updated in database:")
print("[DEBUG] - Successfully saved to database")
socketio.emit("progress", {"id": file_id, "progress": 50})
else:
socketio.emit("error", {"id": file_id, "message": "OCR processing failed"})
socketio.emit(
"error", {"id": file_id, "message": "OCR processing failed"}
)
except Exception as e:
import traceback
traceback.print_exc()
socketio.emit("error", {"id": file_id, "message": f"Processing failed: {str(e)}"})
socketio.emit(
"error", {"id": file_id, "message": f"Processing failed: {str(e)}"}
)
@pitch_book_controller.route("/", methods=["POST"])
@ -78,27 +85,33 @@ def upload_file():
db.session.add(new_file)
db.session.commit()
app = current_app._get_current_object()
files = {"file": (uploaded_file.filename, file_data, "application/pdf")}
data = {"id": new_file.id}
socketio.emit("progress", {"id": new_file.id, "progress": 10})
processing_thread = threading.Thread(
target=process_pdf_async,
args=(app, new_file.id, file_data, fileName),
daemon=True
response = requests.post(
f"{OCR_SERVICE_URL}/ocr", files=files, data=data, timeout=600
)
processing_thread.start()
if response.status_code == 200:
socketio.emit("progress", {"id": new_file.id, "progress": 10})
else:
print("Failed to process file")
return jsonify({
**new_file.to_dict(),
"status": "processing",
"message": "File uploaded successfully. Processing started."
}), 202
return (
jsonify(
{
**new_file.to_dict(),
"status": "processing",
"message": "File uploaded successfully. Processing started.",
}
),
202,
)
except Exception as e:
print(e)
return jsonify({"error": "Invalid file format. Only PDF files are accepted"}), 400
@pitch_book_controller.route("/", methods=["GET"])
def get_all_files():
files = PitchBookModel.query.all()
@ -128,21 +141,32 @@ def update_file(id):
if uploaded_file.filename != "":
file.filename = uploaded_file.filename
# Read file data once
file_data = uploaded_file.read()
try:
if (
uploaded_file
and puremagic.from_string(file_data, mime=True) == "application/pdf"
):
file.file = file_data
except Exception as e:
print(e)
# Read file data once
file_data = uploaded_file.read()
try:
if (
file_data
and puremagic.from_string(file_data, mime=True) == "application/pdf"
):
file.file = file_data
with storage_lock:
if id in progress_per_id and "kpi" in progress_per_id[id]:
del progress_per_id[id]["kpi"]
socketio.emit("progress", {"id": id, "progress": 100})
else:
progress_per_id[id] = {"pdf": 0}
print(f"[DEBUG] PDF updated in database {id}")
except Exception as e:
print(e)
if "kpi" in request.form:
socketio.emit("progress", {"id": id, "progress": 100})
file.kpi = request.form.get("kpi")
with storage_lock:
if id in progress_per_id and "pdf" in progress_per_id[id]:
del progress_per_id[id]["pdf"]
socketio.emit("progress", {"id": id, "progress": 100})
else:
progress_per_id[id] = {"kpi": 0}
db.session.commit()
return jsonify(file.to_dict()), 200
@ -154,4 +178,4 @@ def delete_file(id):
db.session.delete(file)
db.session.commit()
return jsonify({"message": f"File {id} deleted successfully"}), 200
return jsonify({"message": f"File {id} deleted successfully"}), 200

View File

@ -1,6 +1,7 @@
from flask import Blueprint, request, jsonify
from controller.socketIO import socketio
progress_controller = Blueprint("progress", __name__, url_prefix="/api/progress")
@ -8,10 +9,14 @@ progress_controller = Blueprint("progress", __name__, url_prefix="/api/progress"
def progress():
data = request.get_json()
if 'id' not in data or 'progress' not in data:
if "id" not in data or "progress" not in data:
return jsonify({"error": "Missing required fields. [id, progress]"}), 400
if not isinstance(data['progress'], (int, float)) or data['progress'] < 0 or data['progress'] >= 100:
if (
not isinstance(data["progress"], (int, float))
or data["progress"] < 0
or data["progress"] >= 100
):
return jsonify({"error": "Invalid progress value"}), 400
socketio.emit("progress", {"id": data["id"], "progress": data["progress"]})

View File

@ -13,3 +13,5 @@ def init_db(app):
db.init_app(app)
with app.app_context():
db.create_all()
from model.seed_data import seed_default_kpi_settings
seed_default_kpi_settings()

View File

@ -10,10 +10,11 @@ class KPISettingType(Enum):
RANGE = "range"
BOOLEAN = "boolean"
ARRAY = "array"
DATE = "date"
class KPISettingModel(db.Model):
__tablename__ = 'kpi_setting_model'
__tablename__ = "kpi_setting_model"
id: Mapped[int] = mapped_column(primary_key=True)
name: Mapped[str] = mapped_column(unique=True)
@ -24,6 +25,8 @@ class KPISettingModel(db.Model):
)
translation: Mapped[str]
example: Mapped[str]
position: Mapped[int]
active: Mapped[bool]
def to_dict(self):
return {
@ -34,12 +37,16 @@ class KPISettingModel(db.Model):
"type": self.type.value,
"translation": self.translation,
"example": self.example,
"position": self.position,
"active": self.active
}
def __init__(self, name, description, mandatory, type, translation, example):
def __init__(self, name, description, mandatory, type, translation, example, position, active):
self.name = name
self.description = description
self.mandatory = mandatory
self.type = type
self.translation = translation
self.example = example
self.position = position
self.active = active

View File

@ -0,0 +1,184 @@
from model.database import db
from model.kpi_setting_model import KPISettingModel, KPISettingType
def seed_default_kpi_settings():
if KPISettingModel.query.first() is not None:
print("KPI Settings bereits vorhanden, Seeding übersprungen")
return
default_kpi_settings = [
{
"name": "Fondsname",
"description": "Der vollständige Name des Investmentfonds",
"mandatory": True,
"type": KPISettingType.STRING,
"translation": "Fund Name",
"example": "Alpha Real Estate Fund I",
"position": 1,
"active": True
},
{
"name": "Fondsmanager",
"description": "Verantwortlicher Manager für die Fondsverwaltung",
"mandatory": True,
"type": KPISettingType.STRING,
"translation": "Fund Manager",
"example": "Max Mustermann",
"position": 2,
"active": True
},
{
"name": "AIFM",
"description": "Alternative Investment Fund Manager",
"mandatory": True,
"type": KPISettingType.STRING,
"translation": "AIFM",
"example": "Alpha Investment Management GmbH",
"position": 3,
"active": True
},
{
"name": "Datum",
"description": "Stichtag der Datenerfassung",
"mandatory": True,
"type": KPISettingType.DATE,
"translation": "Date",
"example": "05.05.2025",
"position": 4,
"active": True
},
{
"name": "Risikoprofil",
"description": "Klassifizierung des Risikos des Fonds",
"mandatory": True,
"type": KPISettingType.STRING,
"translation": "Risk Profile",
"example": "Core/Core++",
"position": 5,
"active": True
},
{
"name": "Artikel",
"description": "Artikel 8 SFDR-Klassifizierung",
"mandatory": False,
"type": KPISettingType.BOOLEAN,
"translation": "Article",
"example": "Artikel 8",
"position": 6,
"active": True
},
{
"name": "Zielrendite",
"description": "Angestrebte jährliche Rendite in Prozent",
"mandatory": True,
"type": KPISettingType.NUMBER,
"translation": "Target Return",
"example": "6.5",
"position": 7,
"active": True
},
{
"name": "Rendite",
"description": "Tatsächlich erzielte Rendite in Prozent",
"mandatory": False,
"type": KPISettingType.NUMBER,
"translation": "Return",
"example": "5.8",
"position": 8,
"active": True
},
{
"name": "Zielausschüttung",
"description": "Geplante Ausschüttung in Prozent",
"mandatory": False,
"type": KPISettingType.NUMBER,
"translation": "Target Distribution",
"example": "4.0",
"position": 9,
"active": True
},
{
"name": "Ausschüttung",
"description": "Tatsächliche Ausschüttung in Prozent",
"mandatory": False,
"type": KPISettingType.NUMBER,
"translation": "Distribution",
"example": "3.8",
"position": 10,
"active": True
},
{
"name": "Laufzeit",
"description": "Geplante Laufzeit des Fonds",
"mandatory": True,
"type": KPISettingType.STRING,
"translation": "Duration",
"example": "7 Jahre, 10, Evergreen",
"position": 11,
"active": True
},
{
"name": "LTV",
"description": "Loan-to-Value Verhältnis in Prozent",
"mandatory": False,
"type": KPISettingType.NUMBER,
"translation": "LTV",
"example": "65.0",
"position": 12,
"active": True
},
{
"name": "Managementgebühren",
"description": "Jährliche Verwaltungsgebühren in Prozent",
"mandatory": True,
"type": KPISettingType.NUMBER,
"translation": "Management Fees",
"example": "1.5",
"position": 13,
"active": True
},
{
"name": "Sektorenallokation",
"description": "Verteilung der Investments nach Sektoren",
"mandatory": False,
"type": KPISettingType.ARRAY,
"translation": "Sector Allocation",
"example": "Büro, Wohnen, Logistik, Studentenwohnen",
"position": 14,
"active": True
},
{
"name": "Länderallokation",
"description": "Geografische Verteilung der Investments",
"mandatory": False,
"type": KPISettingType.ARRAY,
"translation": "Country Allocation",
"example": "Deutschland,Frankreich, Österreich, Schweiz",
"position": 15,
"active": True
}
]
print("Füge Standard KPI Settings hinzu...")
for kpi_data in default_kpi_settings:
kpi_setting = KPISettingModel(
name=kpi_data["name"],
description=kpi_data["description"],
mandatory=kpi_data["mandatory"],
type=kpi_data["type"],
translation=kpi_data["translation"],
example=kpi_data["example"],
position=kpi_data["position"],
active=kpi_data["active"]
)
db.session.add(kpi_setting)
try:
db.session.commit()
print(f"Erfolgreich {len(default_kpi_settings)} Standard KPI Settings hinzugefügt")
except Exception as e:
db.session.rollback()
print(f"Fehler beim Hinzufügen der Standard KPI Settings: {e}")
raise

View File

@ -0,0 +1,3 @@
venv
.venv
__pycache__

View File

@ -1,11 +1,12 @@
from flask import Flask, request, jsonify
from flask import Flask, request
from ocr_runner import pdf_to_json, ocr_pdf
import requests
import os
import tempfile
import base64
from pathlib import Path
import logging
import threading
# Set up logging
logging.basicConfig(level=logging.INFO)
@ -15,6 +16,61 @@ app = Flask(__name__)
EXXETA_URL = os.getenv("EXXETA_SERVICE_URL", "http://localhost:5053/extract")
SPACY_URL = os.getenv("SPACY_SERVICE_URL", "http://localhost:5052/extract")
COORDINATOR_URL = os.getenv("COORDINATOR_URL", "http://localhost:5050")
def convert_pdf_async(temp_path, pitchbook_id):
try:
logger.info("Starting OCR process...")
ocr_path = ocr_pdf(temp_path)
if not ocr_path or not ocr_path.exists():
temp_path.unlink() # cleanup
return {"error": "OCR processing failed - all PDFs must be OCR'd"}, 500
with open(ocr_path, 'rb') as ocr_file:
ocr_file.seek(0)
result = pdf_to_json(ocr_file)
payload = {
"id": int(pitchbook_id),
"extracted_text_per_page": result["pages"]
}
logger.info("Sending payload to EXXETA and SPACY services")
try:
exxeta_response = requests.post(EXXETA_URL, json=payload, timeout=600)
logger.info(f"EXXETA response: {exxeta_response.status_code}")
except Exception as e:
logger.error(f"Error calling EXXETA: {e}")
try:
spacy_response = requests.post(SPACY_URL, json=payload, timeout=600)
logger.info(f"SPACY response: {spacy_response.status_code}")
except Exception as e:
logger.error(f"Error calling SPACY: {e}")
files=[
('file',('',open(ocr_path,'rb'),'application/pdf'))
]
headers = {}
try:
requests.put(f"{COORDINATOR_URL}/api/pitch_book/{pitchbook_id}", files=files, timeout=600, headers=headers)
requests.post(COORDINATOR_URL + "/api/progress", json={"id": pitchbook_id, "progress": 50}, timeout=600)
logger.info("COORDINATOR response: Progress + File updated")
except Exception as e:
logger.error(f"Error calling COORDINATOR: {e}")
ocr_path.unlink()
temp_path.unlink()
except Exception as e:
logger.error(f"Exception in OCR processing: {str(e)}", exc_info=True)
@app.route('/ocr', methods=['POST'])
def convert_extract_text_from_pdf():
@ -29,59 +85,20 @@ def convert_extract_text_from_pdf():
if not pitchbook_id:
return {"error": "No ID"}, 400
try:
with tempfile.NamedTemporaryFile(delete=False, suffix='.pdf') as temp_file:
file.seek(0)
temp_file.write(file.read())
temp_path = Path(temp_file.name)
with tempfile.NamedTemporaryFile(delete=False, suffix='.pdf') as temp_file:
file.seek(0)
temp_file.write(file.read())
temp_path = Path(temp_file.name)
logger.info("Starting OCR process...")
thread = threading.Thread(target=convert_pdf_async, args=(temp_path, pitchbook_id))
thread.start()
ocr_path = ocr_pdf(temp_path)
return {
"status": "sent",
"message": "PDF successfully OCR'd and processed"
}, 200
if not ocr_path or not ocr_path.exists():
temp_path.unlink() # cleanup
return {"error": "OCR processing failed - all PDFs must be OCR'd"}, 500
with open(ocr_path, 'rb') as ocr_file:
ocr_pdf_data = ocr_file.read()
ocr_pdf_base64 = base64.b64encode(ocr_pdf_data).decode('utf-8')
ocr_file.seek(0)
result = pdf_to_json(ocr_file)
ocr_path.unlink()
temp_path.unlink()
payload = {
"id": int(pitchbook_id),
"extracted_text_per_page": result["pages"]
}
logger.info(f"Sending payload to EXXETA and SPACY services")
try:
exxeta_response = requests.post(EXXETA_URL, json=payload, timeout=600)
logger.info(f"EXXETA response: {exxeta_response.status_code}")
except Exception as e:
logger.error(f"Error calling EXXETA: {e}")
try:
spacy_response = requests.post(SPACY_URL, json=payload, timeout=600)
logger.info(f"SPACY response: {spacy_response.status_code}")
except Exception as e:
logger.error(f"Error calling SPACY: {e}")
return {
"status": "sent",
"ocr_pdf": ocr_pdf_base64,
"message": "PDF successfully OCR'd and processed"
}, 200
except Exception as e:
logger.error(f"Exception in OCR processing: {str(e)}", exc_info=True)
return {"error": f"Processing failed: {str(e)}"}, 500
if __name__ == "__main__":
logger.info("Starting OCR service on port 5000")
app.run(host="0.0.0.0", port=5000, debug=True)
app.run(host="0.0.0.0", port=5051, debug=True)

View File

@ -16,4 +16,6 @@ RUN python -m spacy download en_core_web_sm
COPY .. /app
ENV PYTHONUNBUFFERED=1
CMD ["python3.12", "app.py"]

View File

@ -0,0 +1,3 @@
.venv
venv
__pycache__

View File

@ -10,7 +10,7 @@ import json
app = Flask(__name__)
load_dotenv()
coordinator_url = os.getenv("COORDINATOR_URL", "localhost:5000")
coordinator_url = os.getenv("COORDINATOR_URL", "http://localhost:5000")
# todo add persistence layer
data_storage = {} # {id: {spacy_data: [], exxeta_data: []}}
@ -28,7 +28,7 @@ def send_to_coordinator_service(processed_data, request_id):
"kpi": json.dumps(processed_data),
}
requests.put(
"http://" + coordinator_url + "/api/pitch_book/" + str(request_id),
coordinator_url + "/api/pitch_book/" + str(request_id),
data=payload,
)
print(f"Result PitchBook {request_id} sent to coordinator")
@ -128,4 +128,4 @@ def validate():
if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0", port=5054)
app.run(debug=True, host="0.0.0.0", port=5054)

View File

@ -73,6 +73,6 @@ services:
env_file:
- .env
environment:
- COORDINATOR_URL=coordinator:5000
- COORDINATOR_URL=http://coordinator:5000
ports:
- 5054:5000
- 5054:5000

View File

@ -0,0 +1,322 @@
import { Box, Tooltip, CircularProgress, Typography } from "@mui/material";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import { useEffect, useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import type { Kennzahl } from "../types/kpi";
import { getDisplayType } from "../types/kpi";
export function ConfigTable() {
const navigate = useNavigate();
const [kennzahlen, setKennzahlen] = useState<Kennzahl[]>([]);
const [draggedItem, setDraggedItem] = useState<Kennzahl | null>(null);
const [isUpdatingPositions, setIsUpdatingPositions] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchKennzahlen = async () => {
while (true) {
try {
console.log('Fetching kennzahlen from API...');
const response = await fetch(`http://localhost:5050/api/kpi_setting/`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('Fetched kennzahlen:', data);
const sortedData = data.sort((a: Kennzahl, b: Kennzahl) => a.position - b.position);
setKennzahlen(sortedData);
setLoading(false);
break;
} catch (err) {
console.error('Error fetching kennzahlen:', err);
await new Promise(resolve => setTimeout(resolve, 2000));
}
}
};
fetchKennzahlen();
}, []);
const handleToggleActive = async (id: number) => {
const kennzahl = kennzahlen.find(k => k.id === id);
if (!kennzahl) return;
try {
const response = await fetch(`http://localhost:5050/api/kpi_setting/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
active: !kennzahl.active
}),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const updatedKennzahl = await response.json();
setKennzahlen(prev =>
prev.map(item =>
item.id === id ? updatedKennzahl : item
)
);
} catch (err) {
console.error('Error toggling active status:', err);
setKennzahlen(prev =>
prev.map(item =>
item.id === id ? kennzahl : item
)
);
}
};
const updatePositionsInBackend = async (reorderedKennzahlen: Kennzahl[]) => {
setIsUpdatingPositions(true);
try {
const positionUpdates = reorderedKennzahlen.map((kennzahl, index) => ({
id: kennzahl.id,
position: index + 1
}));
const response = await fetch(`http://localhost:5050/api/kpi_setting/update-kpi-positions`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(positionUpdates),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const updatedKennzahlen = await response.json();
setKennzahlen(updatedKennzahlen);
} catch (err) {
console.error('Error updating positions:', err);
window.location.reload();
} finally {
setIsUpdatingPositions(false);
}
};
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 = async (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);
await updatePositionsInBackend(newKennzahlen);
};
const handleDragEnd = () => {
setDraggedItem(null);
};
const handleRowClick = (kennzahl: Kennzahl, e: React.MouseEvent) => {
if (draggedItem || isUpdatingPositions) {
return;
}
const target = e.target as HTMLElement;
if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
return;
}
if (target.closest('.drag-handle')) {
return;
}
console.log('Navigating to detail page for KPI:', kennzahl);
console.log('KPI ID:', kennzahl.id);
navigate({
to: `/config-detail/$kpiId`,
params: { kpiId: kennzahl.id.toString() }
});
};
if (loading) {
return (
<Box
height="100vh"
display="flex"
justifyContent="center"
alignItems="center"
flexDirection="column"
mt={8}
>
<CircularProgress sx={{ color: '#383838', mb: 2 }} />
<Typography>Lade Kennzahlen-Konfiguration...</Typography>
</Box>
);
}
return (
<Box
sx={{
width: "70%",
maxWidth: 800,
borderRadius: 2,
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
backgroundColor: "white",
overflow: "hidden",
opacity: isUpdatingPositions ? 0.7 : 1,
pointerEvents: isUpdatingPositions ? 'none' : 'auto'
}}
>
<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={!isUpdatingPositions}
onDragStart={(e) => handleDragStart(e, kennzahl)}
onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, kennzahl)}
onDragEnd={handleDragEnd}
onClick={(e) => handleRowClick(kennzahl, e)}
style={{
borderBottom: "1px solid #e0e0e0",
cursor: isUpdatingPositions ? "default" : "pointer",
backgroundColor: draggedItem?.id === kennzahl.id ? "#f0f0f0" : "white",
opacity: draggedItem?.id === kennzahl.id ? 0.5 : 1
}}
onMouseEnter={(e) => {
if (!draggedItem && !isUpdatingPositions) {
e.currentTarget.style.backgroundColor = "#f9f9f9";
}
}}
onMouseLeave={(e) => {
if (!draggedItem && !isUpdatingPositions) {
e.currentTarget.style.backgroundColor = "white";
}
}}
>
<td style={{ padding: "12px", textAlign: "center" }}>
<div className="drag-handle">
<Tooltip
title={
<>
<b>Neuanordnung der Kennzahlen</b><br />
Hier können Sie die Kennzahlen nach Belieben per Drag and Drop neu anordnen.
</>
}
placement="left"
arrow
>
<DragIndicatorIcon
sx={{
color: isUpdatingPositions ? "#ccc" : "#999",
cursor: isUpdatingPositions ? "default" : "grab",
"&:active": { cursor: isUpdatingPositions ? "default" : "grabbing" }
}}
/>
</Tooltip>
</div>
</td>
<td style={{ padding: "12px" }}>
<input
type="checkbox"
checked={kennzahl.active}
onChange={() => handleToggleActive(kennzahl.id)}
disabled={isUpdatingPositions}
style={{
width: "18px",
height: "18px",
cursor: isUpdatingPositions ? "default" : "pointer",
accentColor: "#383838"
}}
onClick={(e) => e.stopPropagation()}
/>
</td>
<td style={{
padding: "12px",
fontSize: "14px",
color: "#333"
}}>
<span title={`Click to view details (ID: ${kennzahl.id})`}>
{kennzahl.name}
</span>
</td>
<td style={{ padding: "12px" }}>
<span style={{
color: "#333",
padding: "4px 12px",
borderRadius: "16px",
fontSize: "12px",
fontWeight: "500",
border: "1px solid #ddd",
backgroundColor: "#f8f9fa"
}}>
{getDisplayType(kennzahl.type)}
</span>
</td>
</tr>
))}
</tbody>
</table>
</Box>
);
}

View File

@ -0,0 +1,247 @@
import { Box, Typography, Button, Paper, TextField, FormControlLabel,
Checkbox, Select, MenuItem, FormControl, InputLabel, Divider, CircularProgress } from "@mui/material";
import { useState, useEffect } from "react";
import type { Kennzahl } from "../types/kpi";
import { typeDisplayMapping } from "../types/kpi";
interface KPIFormProps {
mode: 'add' | 'edit';
initialData?: Kennzahl | null;
onSave: (data: Partial<Kennzahl>) => Promise<void>;
onCancel: () => void;
loading?: boolean;
}
const emptyKPI: Partial<Kennzahl> = {
name: '',
description: '',
mandatory: false,
type: 'string',
translation: '',
example: '',
active: true
};
export function KPIForm({ mode, initialData, onSave, onCancel, loading = false }: KPIFormProps) {
const [formData, setFormData] = useState<Partial<Kennzahl>>(emptyKPI);
const [isSaving, setIsSaving] = useState(false);
useEffect(() => {
if (mode === 'edit' && initialData) {
setFormData(initialData);
} else {
setFormData(emptyKPI);
}
}, [mode, initialData]);
const handleSave = async () => {
if (!formData.name?.trim()) {
alert('Name ist erforderlich');
return;
}
setIsSaving(true);
try {
await onSave(formData);
} catch (error) {
console.error('Error saving KPI:', error);
} finally {
setIsSaving(false);
}
};
const handleCancel = () => {
onCancel();
};
const updateField = (field: keyof Kennzahl, value: any) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
if (loading) {
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="400px"
flexDirection="column"
>
<CircularProgress sx={{ color: '#383838', mb: 2 }} />
<Typography>
{mode === 'edit' ? 'Lade KPI Details...' : 'Laden...'}
</Typography>
</Box>
);
}
return (
<Paper
elevation={2}
sx={{
width: "90%",
maxWidth: 800,
p: 4,
borderRadius: 2,
backgroundColor: "white"
}}
>
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Kennzahl
</Typography>
<TextField
fullWidth
label="Name *"
value={formData.name || ''}
onChange={(e) => updateField('name', e.target.value)}
sx={{ mb: 2 }}
required
error={!formData.name?.trim()}
helperText={!formData.name?.trim() ? 'Name ist erforderlich' : ''}
/>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Beschreibung
</Typography>
<TextField
fullWidth
multiline
rows={3}
label="Beschreibung"
value={formData.description || ''}
onChange={(e) => updateField('description', e.target.value)}
helperText="Beschreibung der Kennzahl"
/>
<Box mt={3}>
<FormControlLabel
control={
<Checkbox
checked={formData.mandatory || false}
onChange={(e) => updateField('mandatory', e.target.checked)}
sx={{ color: '#383838' }}
/>
}
label="Erforderlich"
/>
<Typography variant="body2" color="text.secondary" ml={4}>
Die Kennzahl erlaubt keine leeren Werte
</Typography>
</Box>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Format: {typeDisplayMapping[formData.type as keyof typeof typeDisplayMapping] || formData.type}
</Typography>
<FormControl fullWidth sx={{ mb: 2 }}>
<InputLabel>Typ</InputLabel>
<Select
value={formData.type || 'string'}
label="Typ"
onChange={(e) => updateField('type', e.target.value)}
>
<MenuItem value="string">Text</MenuItem>
<MenuItem value="number">Zahl</MenuItem>
<MenuItem value="date">Datum</MenuItem>
<MenuItem value="boolean">Ja/Nein</MenuItem>
<MenuItem value="array">Liste (mehrfach)</MenuItem>
</Select>
</FormControl>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Synonyme & Übersetzungen
</Typography>
<TextField
fullWidth
label="Übersetzung"
value={formData.translation || ''}
onChange={(e) => updateField('translation', e.target.value)}
helperText="z.B. Englische Übersetzung der Kennzahl"
/>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Beispiele von Kennzahl
</Typography>
<TextField
fullWidth
multiline
rows={2}
label="Beispiel"
value={formData.example || ''}
onChange={(e) => updateField('example', e.target.value)}
helperText="Beispielwerte für diese Kennzahl"
/>
</Box>
{mode === 'add' && (
<>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<FormControlLabel
control={
<Checkbox
checked={formData.active !== false}
onChange={(e) => updateField('active', e.target.checked)}
sx={{ color: '#383838' }}
/>
}
label="Aktiv"
/>
<Typography variant="body2" color="text.secondary" ml={4}>
Die Kennzahl ist aktiv und wird angezeigt
</Typography>
</Box>
</>
)}
<Box display="flex" justifyContent="flex-end" gap={2} mt={4}>
<Button
variant="outlined"
onClick={handleCancel}
disabled={isSaving}
sx={{
borderColor: "#383838",
color: "#383838",
"&:hover": { borderColor: "#2e2e2e", backgroundColor: "#f5f5f5" }
}}
>
Abbrechen
</Button>
<Button
variant="contained"
onClick={handleSave}
disabled={isSaving || !formData.name?.trim()}
sx={{
backgroundColor: "#383838",
"&:hover": { backgroundColor: "#2e2e2e" },
}}
>
{isSaving ? (
<>
<CircularProgress size={16} sx={{ mr: 1, color: 'white' }} />
{mode === 'add' ? 'Hinzufügen...' : 'Speichern...'}
</>
) : (
mode === 'add' ? 'Hinzufügen' : 'Speichern'
)}
</Button>
</Box>
</Paper>
);
}

View File

@ -0,0 +1,87 @@
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { Box, Typography, IconButton } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { KPIForm } from "../components/KPIForm";
import type { Kennzahl } from "../types/kpi";
export const Route = createFileRoute("/config-add")({
component: ConfigAddPage,
});
function ConfigAddPage() {
const navigate = useNavigate();
const handleSave = async (formData: Partial<Kennzahl>) => {
try {
const existingKPIsResponse = await fetch('http://localhost:5050/api/kpi_setting/');
const existingKPIs = await existingKPIsResponse.json();
const maxPosition = existingKPIs.length > 0
? Math.max(...existingKPIs.map((kpi: Kennzahl) => kpi.position))
: 0;
const kpiData = {
...formData,
position: maxPosition + 1,
active: formData.active !== false
};
const response = await fetch('http://localhost:5050/api/kpi_setting/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(kpiData),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
navigate({ to: "/config" });
} catch (error) {
console.error('Error creating KPI:', error);
throw error;
}
};
const handleCancel = () => {
navigate({ to: "/config" });
};
return (
<Box
minHeight="100vh"
width="100vw"
bgcolor="#f5f5f5"
display="flex"
flexDirection="column"
alignItems="center"
pt={3}
pb={4}
>
<Box
width="100%"
display="flex"
justifyContent="flex-start"
alignItems="center"
px={4}
mb={4}
>
<Box display="flex" alignItems="center">
<IconButton onClick={() => navigate({ to: "/config" })}>
<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
</IconButton>
<Typography variant="h5" fontWeight="bold" ml={3}>
Neue Kennzahl hinzufügen
</Typography>
</Box>
</Box>
<KPIForm
mode="add"
onSave={handleSave}
onCancel={handleCancel}
/>
</Box>
);
}

View File

@ -0,0 +1,269 @@
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { Box, Typography, IconButton, Button, CircularProgress, Paper, Divider
} from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useEffect, useState } from "react";
import type { Kennzahl } from "../types/kpi";
import { KPIForm } from "../components/KPIForm";
import { typeDisplayMapping } from "../types/kpi";
export const Route = createFileRoute("/config-detail/$kpiId")({
component: KPIDetailPage,
});
function KPIDetailPage() {
const { kpiId } = Route.useParams();
const navigate = useNavigate();
const [kennzahl, setKennzahl] = useState<Kennzahl | null>(null);
const [isEditing, setIsEditing] = useState(false);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchKennzahl = async () => {
try {
setLoading(true);
const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`);
if (!response.ok) {
if (response.status === 404) {
setError('KPI not found');
return;
}
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setKennzahl(data);
setError(null);
} catch (err) {
console.error('Error fetching KPI:', err);
setError('Error loading KPI');
} finally {
setLoading(false);
}
};
fetchKennzahl();
}, [kpiId]);
const handleSave = async (formData: Partial<Kennzahl>) => {
try {
const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const updatedKennzahl = await response.json();
setKennzahl(updatedKennzahl);
setIsEditing(false);
} catch (error) {
console.error('Error saving KPI:', error);
throw error;
}
};
const handleCancel = () => {
setIsEditing(false);
};
if (loading) {
return (
<Box
minHeight="100vh"
width="100vw"
bgcolor="#f5f5f5"
display="flex"
justifyContent="center"
alignItems="center"
flexDirection="column"
>
<CircularProgress sx={{ color: '#383838', mb: 2 }} />
<Typography>Lade KPI Details...</Typography>
</Box>
);
}
if (error || !kennzahl) {
return (
<Box
minHeight="100vh"
width="100vw"
bgcolor="#f5f5f5"
display="flex"
justifyContent="center"
alignItems="center"
flexDirection="column"
>
<Typography variant="h6" mb={2}>
{error || 'KPI nicht gefunden'}
</Typography>
<Button
variant="contained"
onClick={() => navigate({ to: "/config" })}
sx={{
backgroundColor: "#383838",
"&:hover": { backgroundColor: "#2e2e2e" },
}}
>
Zurück zur Konfiguration
</Button>
</Box>
);
}
if (!isEditing) {
return (
<Box
minHeight="100vh"
width="100vw"
bgcolor="#f5f5f5"
display="flex"
flexDirection="column"
alignItems="center"
pt={3}
pb={4}
>
<Box
width="100%"
display="flex"
justifyContent="space-between"
alignItems="center"
px={4}
mb={4}
>
<Box display="flex" alignItems="center">
<IconButton onClick={() => navigate({ to: "/config" })}>
<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
</IconButton>
<Typography variant="h5" fontWeight="bold" ml={3}>
Detailansicht
</Typography>
</Box>
<Button
variant="contained"
sx={{
backgroundColor: "#383838",
"&:hover": { backgroundColor: "#2e2e2e" },
}}
onClick={() => setIsEditing(true)}
>
Bearbeiten
</Button>
</Box>
<Paper
elevation={2}
sx={{
width: "90%",
maxWidth: 800,
p: 4,
borderRadius: 2,
backgroundColor: "white"
}}
>
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Kennzahl
</Typography>
<Typography variant="body1" sx={{ mb: 2, fontSize: 16 }}>
{kennzahl.name}
</Typography>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Beschreibung
</Typography>
<Typography variant="body1" color="text.secondary">
{kennzahl.description || "Zurzeit ist die Beschreibung der Kennzahl leer. Klicken Sie auf den Bearbeiten-Button, um die Beschreibung zu ergänzen."}
</Typography>
<Box mt={2}>
<Typography variant="body2" color="text.secondary">
<strong>Erforderlich:</strong> {kennzahl.mandatory ? 'Ja' : 'Nein'}
</Typography>
</Box>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Format
</Typography>
<Typography variant="body1" color="text.secondary">
{typeDisplayMapping[kennzahl.type] || kennzahl.type}
</Typography>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Synonyme & Übersetzungen
</Typography>
<Typography variant="body1" color="text.secondary">
{kennzahl.translation || "Zurzeit gibt es keine Einträge für Synonyme und Übersetzungen der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
</Typography>
</Box>
<Divider sx={{ my: 3 }} />
<Box mb={4}>
<Typography variant="h6" fontWeight="bold" mb={2}>
Beispiele von Kennzahl
</Typography>
<Typography variant="body1" color="text.secondary">
{kennzahl.example || "Zurzeit gibt es keine Beispiele der Kennzahl. Klicken Sie auf den Bearbeiten-Button, um die Liste zu ergänzen."}
</Typography>
</Box>
</Paper>
</Box>
);
}
return (
<Box
minHeight="100vh"
width="100vw"
bgcolor="#f5f5f5"
display="flex"
flexDirection="column"
alignItems="center"
pt={3}
pb={4}
>
<Box
width="100%"
display="flex"
justifyContent="flex-start"
alignItems="center"
px={4}
mb={4}
>
<Box display="flex" alignItems="center">
<IconButton onClick={() => navigate({ to: "/config" })}>
<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }}/>
</IconButton>
<Typography variant="h5" fontWeight="bold" ml={3}>
Kennzahl bearbeiten
</Typography>
</Box>
</Box>
<KPIForm
mode="edit"
initialData={kennzahl}
onSave={handleSave}
onCancel={handleCancel}
/>
</Box>
);
}

View File

@ -1,7 +1,8 @@
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 { useNavigate } from "@tanstack/react-router";
import { ConfigTable } from "../components/ConfigTable";
export const Route = createFileRoute("/config")({
component: ConfigPage,
@ -10,15 +11,20 @@ export const Route = createFileRoute("/config")({
function ConfigPage() {
const navigate = useNavigate();
const handleAddNewKPI = () => {
navigate({ to: "/config-add" });
};
return (
<Box
height="100vh"
minHeight="100vh"
width="100vw"
bgcolor="white"
display="flex"
flexDirection="column"
alignItems="center"
pt={3}
pb={4}
>
<Box
width="100%"
@ -37,6 +43,7 @@ function ConfigPage() {
</Box>
<Button
variant="contained"
onClick={handleAddNewKPI}
sx={{
backgroundColor: "#383838",
"&:hover": { backgroundColor: "#2e2e2e" },
@ -45,22 +52,9 @@ function ConfigPage() {
Neue Kennzahl hinzufügen
</Button>
</Box>
<Paper
elevation={2}
sx={{
width: "90%",
maxWidth: 1100,
height: 400,
mt: 4,
borderRadius: 2,
backgroundColor: "#eeeeee",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Typography color="textSecondary">To-do: Table hierhin</Typography>
</Paper>
<Box sx={{ width: "100%", mt: 4, display: "flex", justifyContent: "center" }}>
<ConfigTable />
</Box>
</Box>
);
}

View File

@ -0,0 +1,23 @@
export interface Kennzahl {
id: number;
name: string;
description: string;
mandatory: boolean;
type: string;
translation: string;
example: string;
position: number;
active: boolean;
}
export const typeDisplayMapping: Record<string, string> = {
"string": "Text",
"date": "Datum",
"boolean": "Ja/Nein",
"number": "Zahl",
"array": "Liste (mehrfach)"
};
export const getDisplayType = (backendType: string): string => {
return typeDisplayMapping[backendType] || backendType;
};