diff --git a/project/Dockerfile b/project/Dockerfile index 591bb75..db0c480 100644 --- a/project/Dockerfile +++ b/project/Dockerfile @@ -17,4 +17,4 @@ COPY . . ENV PYTHONUNBUFFERED=1 -CMD ["gunicorn", "--timeout", "600", "--workers", "2", "--bind", "0.0.0.0:5000", "app:app"] +CMD ["gunicorn", "--timeout", "600", "--workers", "1", "--bind", "0.0.0.0:5000", "app:app"] diff --git a/project/docker-compose.yml b/project/docker-compose.yml index 5ab0201..5c1f337 100644 --- a/project/docker-compose.yml +++ b/project/docker-compose.yml @@ -4,6 +4,9 @@ services: context: frontend ports: - 8080:80 + environment: + - API_HOST=http://localhost:5050 + db: image: postgres:17-alpine env_file: diff --git a/project/frontend/Dockerfile b/project/frontend/Dockerfile index 617e964..69ae868 100644 --- a/project/frontend/Dockerfile +++ b/project/frontend/Dockerfile @@ -8,8 +8,21 @@ RUN bun install --frozen-lockfile COPY . . +# dummy environment variable for build - DONT CHANGE!!! +ENV VITE_API_HOST=SECRET_HOST + RUN bun run build FROM nginx:1.28.0-alpine3.21 + +# default environment variable that will be replaced at runtime +ENV API_HOST=http://localhost:5050 + COPY docker/nginx.conf /etc/nginx/conf.d/default.conf COPY --from=base /usr/src/app/dist /usr/share/nginx/html + +# entrypoint script +COPY docker/docker-entrypoint.sh /docker-entrypoint.sh +RUN chmod +x /docker-entrypoint.sh + +CMD ["/docker-entrypoint.sh"] \ No newline at end of file diff --git a/project/frontend/docker/docker-entrypoint.sh b/project/frontend/docker/docker-entrypoint.sh new file mode 100644 index 0000000..fc1b6be --- /dev/null +++ b/project/frontend/docker/docker-entrypoint.sh @@ -0,0 +1,23 @@ +#!/bin/sh + +# Replace API host in built JavaScript files +echo "Replacing SECRET_HOST with ${API_HOST}" + +# Replace in main JS files +for i in /usr/share/nginx/html/*.js; do + if [ -f "$i" ]; then + sed -i "s|SECRET_HOST|${API_HOST}|g" "$i" + fi +done + +# Replace in assets folder JS files +for i in /usr/share/nginx/html/assets/*.js; do + if [ -f "$i" ]; then + sed -i "s|SECRET_HOST|${API_HOST}|g" "$i" + fi +done + +echo "Replacement completed. Starting nginx..." + +# Start nginx and replace the shell process +exec nginx -g 'daemon off;' \ No newline at end of file diff --git a/project/frontend/src/components/ConfigTable.tsx b/project/frontend/src/components/ConfigTable.tsx index 74675d7..f835021 100644 --- a/project/frontend/src/components/ConfigTable.tsx +++ b/project/frontend/src/components/ConfigTable.tsx @@ -5,8 +5,13 @@ import { useEffect, useState } from "react"; import type { Kennzahl } from "../types/kpi"; import { getDisplayType } from "../types/kpi"; import { fetchKennzahlen as fetchK } from "../util/api"; +import { API_HOST } from "../util/api"; -export function ConfigTable() { +type ConfigTableProps = { + from?: string; +}; + +export function ConfigTable({ from }: ConfigTableProps) { const navigate = useNavigate(); const [kennzahlen, setKennzahlen] = useState([]); const [draggedItem, setDraggedItem] = useState(null); @@ -42,7 +47,7 @@ export function ConfigTable() { try { const response = await fetch( - `http://localhost:5050/api/kpi_setting/${id}`, + `${API_HOST}/api/kpi_setting/${id}`, { method: "PUT", headers: { @@ -79,7 +84,7 @@ export function ConfigTable() { })); const response = await fetch( - `http://localhost:5050/api/kpi_setting/update-kpi-positions`, + `${API_HOST}/api/kpi_setting/update-kpi-positions`, { method: "PUT", headers: { @@ -160,12 +165,10 @@ export function ConfigTable() { 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() }, + search: from ? { from } : undefined, }); }; diff --git a/project/frontend/src/components/KennzahlenTable.tsx b/project/frontend/src/components/KennzahlenTable.tsx index 5808a5f..b6a19bb 100644 --- a/project/frontend/src/components/KennzahlenTable.tsx +++ b/project/frontend/src/components/KennzahlenTable.tsx @@ -34,6 +34,7 @@ interface KennzahlenTableProps { source: string; }[]; }; + from?: string; } export default function KennzahlenTable({ @@ -41,10 +42,11 @@ export default function KennzahlenTable({ data, pdfId, settings, + from }: KennzahlenTableProps) { const [editingIndex, setEditingIndex] = useState(""); const [editValue, setEditValue] = useState(""); - const navigate = useNavigate({ from: "/extractedResult/$pitchBook" }); + const navigate = useNavigate(); const queryClient = useQueryClient(); @@ -120,6 +122,7 @@ export default function KennzahlenTable({ pitchBook: pdfId, kpi: settingName, }, + search: { from: from ?? undefined }, }); }; @@ -225,76 +228,94 @@ export default function KennzahlenTable({ ) : ( - + Problem +
+ Es wurden keine Kennzahlen gefunden. Bitte ergänzen! + : "" + } + placement="bottom" + arrow > - - {hasNoValue && ( - - )} - {editingIndex === row.setting.name ? ( - setEditValue(e.target.value)} - onKeyDown={(e) => - handleKeyPress(e, row.setting.name) - } - onBlur={() => handleSave(row.setting.name)} - autoFocus - size="small" - fullWidth - variant="standard" - sx={{ margin: "-8px 0" }} + + + + {hasNoValue && ( + + )} + {editingIndex === row.setting.name ? ( + setEditValue(e.target.value)} + onKeyDown={(e) => + handleKeyPress(e, row.setting.name) + } + onBlur={() => handleSave(row.setting.name)} + autoFocus + size="small" + fullWidth + variant="standard" + sx={{ margin: "-8px 0" }} + /> + ) : ( + + {row.extractedValues.at(0)?.entity || "—"} + + )} + + { + e.stopPropagation(); + startEditing( + row.extractedValues.at(0)?.entity || "", + row.setting.name, + ); + }} /> - ) : ( - - {row.extractedValues.at(0)?.entity || "—"} - - )} - - { - e.stopPropagation(); - startEditing( - row.extractedValues.at(0)?.entity || "", - row.setting.name, - ); - }} - /> - + + + )} - - onPageClick?.( - Number(row.extractedValues.at(0)?.page), - row.extractedValues.at(0)?.entity || "", - ) - } - sx={{ cursor: "pointer" }} - > - {row.extractedValues.at(0)?.page} - + {(row.extractedValues.at(0)?.page ?? 0) > 0 ? ( + { + const extractedValue = row.extractedValues.at(0); + if (extractedValue?.page && extractedValue.page > 0) { + onPageClick?.(Number(extractedValue.page), extractedValue.entity || ""); + } + }} + sx={{ cursor: "pointer" }} + > + {row.extractedValues.at(0)?.page} + + ) : ( + "" + )} ); diff --git a/project/frontend/src/components/PitchBooksTable.tsx b/project/frontend/src/components/PitchBooksTable.tsx new file mode 100644 index 0000000..7a86ada --- /dev/null +++ b/project/frontend/src/components/PitchBooksTable.tsx @@ -0,0 +1,186 @@ +import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, CircularProgress, Chip } from "@mui/material"; +import { useSuspenseQuery } from "@tanstack/react-query"; +import { useNavigate } from "@tanstack/react-router"; +import { pitchBooksQueryOptions } from "../util/query"; +import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty'; + +interface PitchBook { + id: number; + filename: string; + created_at: string; + kpi?: string | { + [key: string]: { + label: string; + entity: string; + page: number; + status: string; + source: string; + }[]; + }; + status?: 'processing' | 'completed'; +} + +export function PitchBooksTable() { + const navigate = useNavigate(); + const { data: pitchBooks, isLoading } = useSuspenseQuery(pitchBooksQueryOptions()); + + const handleRowClick = (pitchBookId: number) => { + navigate({ + to: "/extractedResult/$pitchBook", + params: { pitchBook: pitchBookId.toString() }, + search: { from: "overview" } + }); + }; + + const getKPIValue = (pitchBook: PitchBook, fieldName: string): string => { + if (!pitchBook.kpi || typeof pitchBook.kpi === 'string') { + try { + const parsedKPI = JSON.parse(pitchBook.kpi as string); + // Convert array to object format if needed + const kpiObj = Array.isArray(parsedKPI) ? + parsedKPI.reduce((acc: any, item: any) => { + if (!acc[item.label]) acc[item.label] = []; + acc[item.label].push(item); + return acc; + }, {}) : parsedKPI; + + return kpiObj[fieldName]?.[0]?.entity || 'N/A'; + } catch { + return 'N/A'; + } + } + + return (pitchBook.kpi as any)[fieldName]?.[0]?.entity || 'N/A'; + }; + + const getStatus = (pitchBook: PitchBook) => { + if (pitchBook.kpi && + ((typeof pitchBook.kpi === 'string' && pitchBook.kpi !== '{}') || + (typeof pitchBook.kpi === 'object' && Object.keys(pitchBook.kpi).length > 0))) { + return 'completed'; + } + return 'processing'; + }; + + if (isLoading) { + return ( + + + + ); + } + + return ( + + + + + + Fondsname + Fondsmanager + Dateiname + Status + + + + {pitchBooks.map((pitchBook: PitchBook) => { + const status = getStatus(pitchBook); + const fundName = getKPIValue(pitchBook, 'FONDSNAME') || + getKPIValue(pitchBook, 'FUND_NAME') || + getKPIValue(pitchBook, 'NAME'); + + const manager = getKPIValue(pitchBook, 'FONDSMANAGER') || + getKPIValue(pitchBook, 'MANAGER') || + getKPIValue(pitchBook, 'PORTFOLIO_MANAGER'); + + return ( + handleRowClick(pitchBook.id)} + sx={{ + cursor: "pointer", + "&:hover": { + backgroundColor: "#f9f9f9", + }, + }} + > + + + + + + + + {fundName} + + + {manager} + + + {pitchBook.filename} + + + + {status === 'completed' ? ( + } + label="Abgeschlossen" + size="small" + sx={{ + backgroundColor: "#e8f5e9", + color: "#2e7d32", + "& .MuiChip-icon": { + color: "#2e7d32", + }, + }} + /> + ) : ( + } + label="In Bearbeitung" + size="small" + sx={{ + backgroundColor: "#fff3e0", + color: "#e65100", + "& .MuiChip-icon": { + color: "#e65100", + }, + }} + /> + )} + + + ); + })} + +
+ {pitchBooks.length === 0 && ( + + + Keine Pitch Books vorhanden + + + )} + + ); +} \ No newline at end of file diff --git a/project/frontend/src/components/UploadPage.tsx b/project/frontend/src/components/UploadPage.tsx index 94cf9e5..6de8a62 100644 --- a/project/frontend/src/components/UploadPage.tsx +++ b/project/frontend/src/components/UploadPage.tsx @@ -5,6 +5,7 @@ import { useCallback, useEffect, useState } from "react"; import FileUpload from "react-material-file-upload"; import { socket } from "../socket"; import { CircularProgressWithLabel } from "./CircularProgressWithLabel"; +import { API_HOST } from "../util/api"; export default function UploadPage() { const [files, setFiles] = useState([]); @@ -16,7 +17,7 @@ export default function UploadPage() { const uploadFile = useCallback(async () => { const formData = new FormData(); formData.append("file", files[0]); - const response = await fetch("http://localhost:5050/api/pitch_book", { + const response = await fetch(`${API_HOST}/api/pitch_book`, { method: "POST", body: formData, }); @@ -168,6 +169,19 @@ export default function UploadPage() { > Kennzahlen extrahieren + ); diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx index b39421d..ee68c8d 100644 --- a/project/frontend/src/components/pdfViewer.tsx +++ b/project/frontend/src/components/pdfViewer.tsx @@ -10,6 +10,7 @@ import type { OnGetTextSuccess, } from "node_modules/react-pdf/dist/esm/shared/types"; import { socket } from "../socket"; +import { API_HOST } from "../util/api"; import { highlightPattern } from "../util/highlighting"; interface PDFViewerProps { @@ -110,7 +111,8 @@ export default function PDFViewer({ ) { for ( let k = textItems[i].i; - k < textItems[i + s.split(" ").length].i; + k < textItems[i + s.split(" ").length]?.i || + k < textItems[i + s.split(" ").length - 1]?.i; k++ ) { tmpPos.push(textContent[k].posKey); @@ -128,7 +130,8 @@ export default function PDFViewer({ ) { for ( let k = textItems[i].i; - k < textItems[i + focusHighlight.text.split(" ").length].i; + k < textItems[i + focusHighlight.text.split(" ").length]?.i || + k < textItems[i + focusHighlight.text.split(" ").length - 1]?.i; k++ ) { tmpPosHighlight.push(textContent[k].posKey); @@ -172,7 +175,7 @@ export default function PDFViewer({ > console.error("Es gab ein Fehler beim Laden des PDFs:", error) diff --git a/project/frontend/src/routeTree.gen.ts b/project/frontend/src/routeTree.gen.ts index 489b1cf..5377387 100644 --- a/project/frontend/src/routeTree.gen.ts +++ b/project/frontend/src/routeTree.gen.ts @@ -11,6 +11,7 @@ // Import Routes import { Route as rootRoute } from './routes/__root' +import { Route as PitchbooksImport } from './routes/pitchbooks' import { Route as ConfigAddImport } from './routes/config-add' import { Route as ConfigImport } from './routes/config' import { Route as IndexImport } from './routes/index' @@ -20,6 +21,12 @@ import { Route as ExtractedResultPitchBookKpiImport } from './routes/extractedRe // Create/Update Routes +const PitchbooksRoute = PitchbooksImport.update({ + id: '/pitchbooks', + path: '/pitchbooks', + getParentRoute: () => rootRoute, +} as any) + const ConfigAddRoute = ConfigAddImport.update({ id: '/config-add', path: '/config-add', @@ -82,6 +89,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof ConfigAddImport parentRoute: typeof rootRoute } + '/pitchbooks': { + id: '/pitchbooks' + path: '/pitchbooks' + fullPath: '/pitchbooks' + preLoaderRoute: typeof PitchbooksImport + parentRoute: typeof rootRoute + } '/config-detail/$kpiId': { id: '/config-detail/$kpiId' path: '/config-detail/$kpiId' @@ -112,6 +126,7 @@ export interface FileRoutesByFullPath { '/': typeof IndexRoute '/config': typeof ConfigRoute '/config-add': typeof ConfigAddRoute + '/pitchbooks': typeof PitchbooksRoute '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute '/extractedResult/$pitchBook/$kpi': typeof ExtractedResultPitchBookKpiRoute @@ -121,6 +136,7 @@ export interface FileRoutesByTo { '/': typeof IndexRoute '/config': typeof ConfigRoute '/config-add': typeof ConfigAddRoute + '/pitchbooks': typeof PitchbooksRoute '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute '/extractedResult/$pitchBook/$kpi': typeof ExtractedResultPitchBookKpiRoute @@ -131,6 +147,7 @@ export interface FileRoutesById { '/': typeof IndexRoute '/config': typeof ConfigRoute '/config-add': typeof ConfigAddRoute + '/pitchbooks': typeof PitchbooksRoute '/config-detail/$kpiId': typeof ConfigDetailKpiIdRoute '/extractedResult/$pitchBook': typeof ExtractedResultPitchBookRoute '/extractedResult_/$pitchBook/$kpi': typeof ExtractedResultPitchBookKpiRoute @@ -142,6 +159,7 @@ export interface FileRouteTypes { | '/' | '/config' | '/config-add' + | '/pitchbooks' | '/config-detail/$kpiId' | '/extractedResult/$pitchBook' | '/extractedResult/$pitchBook/$kpi' @@ -150,6 +168,7 @@ export interface FileRouteTypes { | '/' | '/config' | '/config-add' + | '/pitchbooks' | '/config-detail/$kpiId' | '/extractedResult/$pitchBook' | '/extractedResult/$pitchBook/$kpi' @@ -158,6 +177,7 @@ export interface FileRouteTypes { | '/' | '/config' | '/config-add' + | '/pitchbooks' | '/config-detail/$kpiId' | '/extractedResult/$pitchBook' | '/extractedResult_/$pitchBook/$kpi' @@ -168,6 +188,7 @@ export interface RootRouteChildren { IndexRoute: typeof IndexRoute ConfigRoute: typeof ConfigRoute ConfigAddRoute: typeof ConfigAddRoute + PitchbooksRoute: typeof PitchbooksRoute ConfigDetailKpiIdRoute: typeof ConfigDetailKpiIdRoute ExtractedResultPitchBookRoute: typeof ExtractedResultPitchBookRoute ExtractedResultPitchBookKpiRoute: typeof ExtractedResultPitchBookKpiRoute @@ -177,6 +198,7 @@ const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, ConfigRoute: ConfigRoute, ConfigAddRoute: ConfigAddRoute, + PitchbooksRoute: PitchbooksRoute, ConfigDetailKpiIdRoute: ConfigDetailKpiIdRoute, ExtractedResultPitchBookRoute: ExtractedResultPitchBookRoute, ExtractedResultPitchBookKpiRoute: ExtractedResultPitchBookKpiRoute, @@ -195,6 +217,7 @@ export const routeTree = rootRoute "/", "/config", "/config-add", + "/pitchbooks", "/config-detail/$kpiId", "/extractedResult/$pitchBook", "/extractedResult_/$pitchBook/$kpi" @@ -209,6 +232,9 @@ export const routeTree = rootRoute "/config-add": { "filePath": "config-add.tsx" }, + "/pitchbooks": { + "filePath": "pitchbooks.tsx" + }, "/config-detail/$kpiId": { "filePath": "config-detail.$kpiId.tsx" }, diff --git a/project/frontend/src/routes/config-add.tsx b/project/frontend/src/routes/config-add.tsx index b90d7b1..26bc90a 100644 --- a/project/frontend/src/routes/config-add.tsx +++ b/project/frontend/src/routes/config-add.tsx @@ -3,17 +3,31 @@ 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"; +import { API_HOST } from "../util/api"; export const Route = createFileRoute("/config-add")({ component: ConfigAddPage, + validateSearch: (search: Record): { from?: string } => { + return { + from: search.from as string | undefined, + }; + }, }); function ConfigAddPage() { const navigate = useNavigate(); + const { from } = Route.useSearch(); + + const handleBack = () => { + navigate({ + to: "/config", + search: from ? { from } : undefined, + }); + }; const handleSave = async (formData: Partial) => { try { - const existingKPIsResponse = await fetch('http://localhost:5050/api/kpi_setting/'); + const existingKPIsResponse = await fetch(`${API_HOST}/api/kpi_setting/`); const existingKPIs = await existingKPIsResponse.json(); const maxPosition = existingKPIs.length > 0 ? Math.max(...existingKPIs.map((kpi: Kennzahl) => kpi.position)) @@ -25,7 +39,7 @@ function ConfigAddPage() { active: formData.active !== false }; - const response = await fetch('http://localhost:5050/api/kpi_setting/', { + const response = await fetch(`${API_HOST}/api/kpi_setting/`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -68,7 +82,7 @@ function ConfigAddPage() { mb={4} > - navigate({ to: "/config" })}> + diff --git a/project/frontend/src/routes/config-detail.$kpiId.tsx b/project/frontend/src/routes/config-detail.$kpiId.tsx index 16ddce9..04ef98c 100644 --- a/project/frontend/src/routes/config-detail.$kpiId.tsx +++ b/project/frontend/src/routes/config-detail.$kpiId.tsx @@ -6,24 +6,38 @@ import { useEffect, useState } from "react"; import type { Kennzahl } from "../types/kpi"; import { KPIForm } from "../components/KPIForm"; import { typeDisplayMapping } from "../types/kpi"; +import { API_HOST } from "../util/api"; export const Route = createFileRoute("/config-detail/$kpiId")({ component: KPIDetailPage, + validateSearch: (search: Record): { from?: string } => { + return { + from: search.from as string | undefined, + }; + }, }); function KPIDetailPage() { const { kpiId } = Route.useParams(); const navigate = useNavigate(); + const { from } = Route.useSearch(); const [kennzahl, setKennzahl] = useState(null); const [isEditing, setIsEditing] = useState(false); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const handleBack = () => { + navigate({ + to: "/config", + search: from ? { from } : undefined + }); + }; + useEffect(() => { const fetchKennzahl = async () => { try { setLoading(true); - const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`); + const response = await fetch(`${API_HOST}/api/kpi_setting/${kpiId}`); if (!response.ok) { if (response.status === 404) { setError('KPI not found'); @@ -47,7 +61,7 @@ function KPIDetailPage() { const handleSave = async (formData: Partial) => { try { - const response = await fetch(`http://localhost:5050/api/kpi_setting/${kpiId}`, { + const response = await fetch(`${API_HOST}/api/kpi_setting/${kpiId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -138,7 +152,7 @@ function KPIDetailPage() { mb={4} > - navigate({ to: "/config" })}> + @@ -249,7 +263,7 @@ function KPIDetailPage() { mb={4} > - navigate({ to: "/config" })}> + diff --git a/project/frontend/src/routes/config.tsx b/project/frontend/src/routes/config.tsx index eddf16e..ac64c3d 100644 --- a/project/frontend/src/routes/config.tsx +++ b/project/frontend/src/routes/config.tsx @@ -6,13 +6,29 @@ import { ConfigTable } from "../components/ConfigTable"; export const Route = createFileRoute("/config")({ component: ConfigPage, + validateSearch: (search: Record): { from?: string } => { + const from = typeof search.from === "string" ? search.from : undefined; + return { from }; + } }); function ConfigPage() { const navigate = useNavigate(); + const { from } = Route.useSearch(); const handleAddNewKPI = () => { - navigate({ to: "/config-add" }); + navigate({ + to: "/config-add", + search: from ? { from } : undefined + }); + }; + + const handleBack = () => { + if (from === "pitchbooks") { + navigate({ to: "/pitchbooks" }); + } else { + navigate({ to: "/" }); + } }; return ( @@ -34,7 +50,7 @@ function ConfigPage() { px={4} > - navigate({ to: "/" })}> + @@ -53,7 +69,7 @@ function ConfigPage() { - + ); diff --git a/project/frontend/src/routes/extractedResult.$pitchBook.tsx b/project/frontend/src/routes/extractedResult.$pitchBook.tsx index bee005d..d579338 100644 --- a/project/frontend/src/routes/extractedResult.$pitchBook.tsx +++ b/project/frontend/src/routes/extractedResult.$pitchBook.tsx @@ -1,26 +1,42 @@ import ContentPasteIcon from "@mui/icons-material/ContentPaste"; -import { Box, Button, Paper, Typography } from "@mui/material"; +import { Box, Button, Paper, Typography, Snackbar, Alert, IconButton } from "@mui/material"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import { useSuspenseQuery } from "@tanstack/react-query"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; -import { useCallback, useState } from "react"; +import { useCallback, useState, useMemo } from "react"; import KennzahlenTable from "../components/KennzahlenTable"; import PDFViewer from "../components/pdfViewer"; import { kpiQueryOptions, settingsQueryOptions } from "../util/query"; +import { redirect } from "@tanstack/react-router"; export const Route = createFileRoute("/extractedResult/$pitchBook")({ component: ExtractedResultsPage, - loader: ({ context: { queryClient }, params: { pitchBook } }) => - Promise.allSettled([ + validateSearch: (search: Record): { from?: string } => { + return { + from: search.from as string | undefined, + }; + }, + loader: async ({ context: { queryClient }, params: { pitchBook } }) => { + const results = await Promise.allSettled([ queryClient.ensureQueryData(kpiQueryOptions(pitchBook)), queryClient.ensureQueryData(settingsQueryOptions()), - ]), + ]); + if (results[0].status === "rejected") { + throw redirect({ + to: "/" + }); + } + return results; + } }); function ExtractedResultsPage() { const { pitchBook } = Route.useParams(); const navigate = useNavigate(); - const status: "green" | "yellow" | "red" = "red"; + const { from } = Route.useSearch(); const [currentPage, setCurrentPage] = useState(1); + const [copied, setCopied] = useState(false); + const [snackbarOpen, setSnackbarOpen] = useState(false); const [focusHighlight, setFocusHighlight] = useState({ page: 5, text: "Langjährige", @@ -31,18 +47,106 @@ function ExtractedResultsPage() { setFocusHighlight({ page, text: entity }); }, []); + const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook)); + const { data: settings } = useSuspenseQuery(settingsQueryOptions()); + + const status = useMemo(() => { + let hasRedBorders = false; + let hasYellowBorders = false; + + settings + .filter((setting) => setting.active) + .forEach((setting) => { + const values = kpi[setting.name.toUpperCase()] || []; + const hasNoValue = setting.mandatory && (values.length === 0 || values[0]?.entity === ""); + const hasMultipleValues = values.length > 1; + + if (hasNoValue) { + hasRedBorders = true; + } else if (hasMultipleValues) { + hasYellowBorders = true; + } + }); + + if (hasRedBorders) return "red"; + if (hasYellowBorders) return "yellow"; + return "green"; + }, [kpi, settings]); + const statusColor = { red: "#f43131", yellow: "#f6ed48", green: "#3fd942", }[status]; - const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook)); - const { data: settings } = useSuspenseQuery(settingsQueryOptions()); + const prepareClipboardData = () => { + const activeSettings = settings + .filter(setting => setting.active) + .sort((a, b) => a.position - b.position); + + const values = activeSettings.map(setting => { + const settingData = kpi[setting.name.toUpperCase()]; + if (!settingData || settingData.length === 0) { + return ""; + } + let value = settingData[0]?.entity || ""; + value = value + .replace(/[\r\n]/g, ' ') + .replace(/\s+/g, ' ') + .trim(); + value = value.replace(/\t/g, ' '); + return value; + }); + return values.join('\t'); + }; + + const handleCopyToClipboard = async () => { + try { + const textToCopy = prepareClipboardData(); + + if (navigator.clipboard && window.isSecureContext) { + await navigator.clipboard.write([ + new ClipboardItem({ + 'text/plain': new Blob([textToCopy], { type: 'text/plain' }) + }) + ]); + } else { + const textArea = document.createElement("textarea"); + textArea.value = textToCopy; + textArea.style.position = "fixed"; + textArea.style.left = "-999999px"; + textArea.style.top = "-999999px"; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + document.execCommand('copy'); + textArea.remove(); + } + + setCopied(true); + setSnackbarOpen(true); + setTimeout(() => setCopied(false), 2000); + + } catch (err) { + console.error('Fallback to copy failed'); + } + }; + + const handleCloseSnackbar = () => { + setSnackbarOpen(false); + }; return ( + {from === "overview" && ( + navigate({ to: "/pitchbooks" })} + sx={{ ml: -1 }} + > + + + )} -