Fix merge commit 2
parent
f6747e45ac
commit
64426a5f83
|
|
@ -42,25 +42,43 @@ export default function KennzahlenTable({
|
|||
data,
|
||||
pdfId,
|
||||
settings,
|
||||
from
|
||||
from,
|
||||
}: KennzahlenTableProps) {
|
||||
const [editingIndex, setEditingIndex] = useState<string>("");
|
||||
const [editValue, setEditValue] = useState("");
|
||||
const [editingPageIndex, setEditingPageIndex] = useState<string>("");
|
||||
const [editPageValue, setEditPageValue] = useState("");
|
||||
const [hoveredPageIndex, setHoveredPageIndex] = useState<string>("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: (id: string) => {
|
||||
mutationFn: (params: { id: string; newValue?: string; newPage?: number }) => {
|
||||
const { id, newValue, newPage } = params;
|
||||
const key = id.toUpperCase();
|
||||
const updatedData = { ...data };
|
||||
updatedData[key] = data[key]?.map((item) => ({
|
||||
...item,
|
||||
entity: editValue,
|
||||
})) || [{ label: key, entity: editValue }];
|
||||
|
||||
if (data[key] && data[key].length > 0) {
|
||||
updatedData[key] = data[key].map((item) => ({
|
||||
...item,
|
||||
...(newValue !== undefined && { entity: newValue }),
|
||||
...(newPage !== undefined && { page: newPage }),
|
||||
}));
|
||||
} else {
|
||||
updatedData[key] = [{
|
||||
label: key,
|
||||
entity: newValue || "",
|
||||
page: newPage || 0,
|
||||
status: "single-source",
|
||||
source: "manual"
|
||||
}];
|
||||
}
|
||||
|
||||
return fetchPutKPI(Number(pdfId), updatedData);
|
||||
},
|
||||
onMutate: async (id: string) => {
|
||||
onMutate: async (params: { id: string; newValue?: string; newPage?: number }) => {
|
||||
const { id, newValue, newPage } = params;
|
||||
await queryClient.cancelQueries({
|
||||
queryKey: ["pitchBookKPI", pdfId],
|
||||
});
|
||||
|
|
@ -71,10 +89,23 @@ export default function KennzahlenTable({
|
|||
|
||||
queryClient.setQueryData(["pitchBookKPI", pdfId], () => {
|
||||
const updatedData = { ...data };
|
||||
updatedData[key] = data[key]?.map((item) => ({
|
||||
...item,
|
||||
entity: editValue,
|
||||
})) || [{ label: key, entity: editValue }];
|
||||
|
||||
if (data[key] && data[key].length > 0) {
|
||||
updatedData[key] = data[key].map((item) => ({
|
||||
...item,
|
||||
...(newValue !== undefined && { entity: newValue }),
|
||||
...(newPage !== undefined && { page: newPage }),
|
||||
}));
|
||||
} else {
|
||||
updatedData[key] = [{
|
||||
label: key,
|
||||
entity: newValue || "",
|
||||
page: newPage || 0,
|
||||
status: "single-source",
|
||||
source: "manual"
|
||||
}];
|
||||
}
|
||||
|
||||
return updatedData;
|
||||
});
|
||||
|
||||
|
|
@ -99,19 +130,39 @@ export default function KennzahlenTable({
|
|||
setEditValue(value);
|
||||
};
|
||||
|
||||
const startPageEditing = (value: number, index: string) => {
|
||||
setEditingPageIndex(index);
|
||||
setEditPageValue(value.toString());
|
||||
};
|
||||
|
||||
// Bearbeitung beenden und Wert speichern
|
||||
const handleSave = async (index: string) => {
|
||||
// await updateKennzahl(rows[index].label, editValue);
|
||||
mutate(index);
|
||||
mutate({ id: index, newValue: editValue });
|
||||
setEditingIndex("");
|
||||
};
|
||||
|
||||
const handlePageSave = async (index: string) => {
|
||||
const pageNumber = parseInt(editPageValue);
|
||||
if (!isNaN(pageNumber) && pageNumber > 0) {
|
||||
mutate({ id: index, newPage: pageNumber });
|
||||
}
|
||||
setEditingPageIndex("");
|
||||
};
|
||||
|
||||
// Tastatureingaben verarbeiten
|
||||
const handleKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSave(index);
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingIndex("null");
|
||||
setEditingIndex("");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
|
||||
if (e.key === "Enter") {
|
||||
handlePageSave(index);
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingPageIndex("");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -131,14 +182,16 @@ export default function KennzahlenTable({
|
|||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<TableCell width="25%">
|
||||
<strong>Kennzahl</strong>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell width="60%">
|
||||
<strong>Wert</strong>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<strong>Seite</strong>
|
||||
<TableCell align="center" width="15%">
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }}>
|
||||
<strong>Seite</strong>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -165,6 +218,10 @@ export default function KennzahlenTable({
|
|||
borderColor = "#f6ed48";
|
||||
}
|
||||
|
||||
const currentPage = row.extractedValues.at(0)?.page ?? 0;
|
||||
const isPageHovered = hoveredPageIndex === row.setting.name;
|
||||
const canEditPage = !hasMultipleValues;
|
||||
|
||||
return (
|
||||
<TableRow key={row.setting.name}>
|
||||
<TableCell>{row.setting.name}</TableCell>
|
||||
|
|
@ -229,12 +286,17 @@ export default function KennzahlenTable({
|
|||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip
|
||||
title={hasNoValue ?
|
||||
<>
|
||||
<b>Problem</b>
|
||||
<br />
|
||||
Es wurden keine Kennzahlen gefunden. Bitte ergänzen!
|
||||
</> : ""
|
||||
title={
|
||||
hasNoValue ? (
|
||||
<>
|
||||
<b>Problem</b>
|
||||
<br />
|
||||
Es wurden keine Kennzahlen gefunden. Bitte
|
||||
ergänzen!
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
placement="bottom"
|
||||
arrow
|
||||
|
|
@ -261,7 +323,10 @@ export default function KennzahlenTable({
|
|||
}}
|
||||
>
|
||||
{hasNoValue && (
|
||||
<ErrorOutlineIcon fontSize="small" color="error" />
|
||||
<ErrorOutlineIcon
|
||||
fontSize="small"
|
||||
color="error"
|
||||
/>
|
||||
)}
|
||||
{editingIndex === row.setting.name ? (
|
||||
<TextField
|
||||
|
|
@ -300,21 +365,115 @@ export default function KennzahlenTable({
|
|||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{(row.extractedValues.at(0)?.page ?? 0) > 0 ? (
|
||||
<Link
|
||||
component="button"
|
||||
onClick={() => {
|
||||
const extractedValue = row.extractedValues.at(0);
|
||||
if (extractedValue?.page && extractedValue.page > 0) {
|
||||
onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
|
||||
{editingPageIndex === row.setting.name ? (
|
||||
<TextField
|
||||
value={editPageValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
if (value === '' || /^\d+$/.test(value) && parseInt(value) > 0) {
|
||||
setEditPageValue(value);
|
||||
}
|
||||
}}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
{row.extractedValues.at(0)?.page}
|
||||
</Link>
|
||||
onKeyDown={(e) => handlePageKeyPress(e, row.setting.name)}
|
||||
onBlur={() => handlePageSave(row.setting.name)}
|
||||
autoFocus
|
||||
size="small"
|
||||
variant="standard"
|
||||
sx={{
|
||||
width: "60px",
|
||||
"& .MuiInput-input": {
|
||||
textAlign: "center"
|
||||
}
|
||||
}}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
style: { textAlign: 'center' }
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
<>
|
||||
{currentPage > 0 ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
cursor: canEditPage ? "pointer" : "default",
|
||||
borderRadius: "4px",
|
||||
minHeight: "32px",
|
||||
minWidth: "100px",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
onMouseEnter={() => canEditPage && setHoveredPageIndex(row.setting.name)}
|
||||
onMouseLeave={() => setHoveredPageIndex("")}
|
||||
onClick={() => {
|
||||
if (canEditPage) {
|
||||
startPageEditing(currentPage, row.setting.name);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
component="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const extractedValue = row.extractedValues.at(0);
|
||||
if (extractedValue?.page && extractedValue.page > 0) {
|
||||
onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
|
||||
}
|
||||
}}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</Link>
|
||||
|
||||
{isPageHovered && canEditPage && (
|
||||
<EditIcon
|
||||
fontSize="small"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: "70px",
|
||||
color: "#666",
|
||||
opacity: 0.7,
|
||||
transition: "opacity 0.2s ease",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
) : canEditPage ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
cursor: "pointer",
|
||||
minHeight: "32px",
|
||||
minWidth: "100px",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: isPageHovered ? "#f8f9fa" : "transparent",
|
||||
}}
|
||||
onMouseEnter={() => setHoveredPageIndex(row.setting.name)}
|
||||
onMouseLeave={() => setHoveredPageIndex("")}
|
||||
onClick={() => startPageEditing(0, row.setting.name)}
|
||||
>
|
||||
<span style={{ color: "#999" }}>...</span>
|
||||
<EditIcon
|
||||
fontSize="small"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: "70px",
|
||||
color: "#555",
|
||||
cursor: "pointer",
|
||||
opacity: 0.7,
|
||||
transition: "opacity 0.2s ease",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -324,4 +483,4 @@ export default function KennzahlenTable({
|
|||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,186 +1,388 @@
|
|||
import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, CircularProgress, Chip } from "@mui/material";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||||
import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
|
||||
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
||||
import {
|
||||
Box,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
LinearProgress,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { socket } from "../socket";
|
||||
import { fetchPitchBooksById } from "../util/api";
|
||||
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';
|
||||
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 [loadingPitchBooks, setLoadingPitchBooks] = useState<
|
||||
{
|
||||
id: number;
|
||||
progress: number;
|
||||
filename?: string;
|
||||
buffer: number;
|
||||
intervalId?: number;
|
||||
}[]
|
||||
>([]);
|
||||
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 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;
|
||||
const onConnection = useCallback(() => {
|
||||
console.log("connected");
|
||||
}, []);
|
||||
|
||||
return kpiObj[fieldName]?.[0]?.entity || 'N/A';
|
||||
} catch {
|
||||
return 'N/A';
|
||||
}
|
||||
}
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return (pitchBook.kpi as any)[fieldName]?.[0]?.entity || 'N/A';
|
||||
};
|
||||
const onProgress = useCallback(
|
||||
(progress: { id: number; progress: number }) => {
|
||||
if (progress.progress === 100) {
|
||||
setLoadingPitchBooks((prev) => {
|
||||
const intervalId = prev.find(
|
||||
(item) => item.id === progress.id,
|
||||
)?.intervalId;
|
||||
console.log(intervalId, prev);
|
||||
intervalId && clearInterval(intervalId);
|
||||
|
||||
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';
|
||||
};
|
||||
return [...prev.filter((item) => item.id !== progress.id)];
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: pitchBooksQueryOptions().queryKey,
|
||||
});
|
||||
} else {
|
||||
setLoadingPitchBooks((prev) => {
|
||||
const oldItem = prev.find((item) => item.id === progress.id);
|
||||
let intervalId = oldItem?.intervalId;
|
||||
if (!oldItem) {
|
||||
intervalId = setInterval(() => {
|
||||
setLoadingPitchBooks((prev) => {
|
||||
const oldItem = prev.find((item) => item.id === progress.id);
|
||||
if (!oldItem) return prev;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box display="flex" justifyContent="center" alignItems="center" height="400px">
|
||||
<CircularProgress sx={{ color: "#383838" }} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return [
|
||||
...prev.filter((e) => e.id !== progress.id),
|
||||
{
|
||||
id: progress.id,
|
||||
progress: oldItem?.progress ?? progress.progress,
|
||||
filename: oldItem?.filename,
|
||||
buffer: oldItem ? oldItem.buffer + 0.5 : 0,
|
||||
intervalId: oldItem.intervalId,
|
||||
},
|
||||
];
|
||||
});
|
||||
}, 400);
|
||||
|
||||
return (
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
width: "85%",
|
||||
maxWidth: 1200,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
|
||||
<TableCell sx={{ width: "60px" }}></TableCell>
|
||||
<TableCell sx={{ fontWeight: "bold" }}>Fondsname</TableCell>
|
||||
<TableCell sx={{ fontWeight: "bold" }}>Fondsmanager</TableCell>
|
||||
<TableCell sx={{ fontWeight: "bold" }}>Dateiname</TableCell>
|
||||
<TableCell sx={{ fontWeight: "bold", width: "120px" }}>Status</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{pitchBooks.map((pitchBook: PitchBook) => {
|
||||
const status = getStatus(pitchBook);
|
||||
const fundName = getKPIValue(pitchBook, 'FONDSNAME') ||
|
||||
getKPIValue(pitchBook, 'FUND_NAME') ||
|
||||
getKPIValue(pitchBook, 'NAME');
|
||||
fetchPitchBooksById(progress.id)
|
||||
.then((res) => {
|
||||
setLoadingPitchBooks((prev) => [
|
||||
...prev.filter((item) => item.id !== progress.id),
|
||||
{
|
||||
id: progress.id,
|
||||
progress: progress.progress,
|
||||
filename: res.filename,
|
||||
buffer: 0,
|
||||
intervalId,
|
||||
},
|
||||
]);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
return [
|
||||
...prev.filter((item) => item.id !== progress.id),
|
||||
{
|
||||
id: progress.id,
|
||||
progress: progress.progress,
|
||||
filename: oldItem?.filename,
|
||||
buffer: 0,
|
||||
intervalId,
|
||||
},
|
||||
];
|
||||
});
|
||||
}
|
||||
},
|
||||
[queryClient],
|
||||
);
|
||||
|
||||
const manager = getKPIValue(pitchBook, 'FONDSMANAGER') ||
|
||||
getKPIValue(pitchBook, 'MANAGER') ||
|
||||
getKPIValue(pitchBook, 'PORTFOLIO_MANAGER');
|
||||
useEffect(() => {
|
||||
socket.on("connect", onConnection);
|
||||
socket.on("progress", onProgress);
|
||||
return () => {
|
||||
socket.off("connect", onConnection);
|
||||
socket.off("progress", onProgress);
|
||||
};
|
||||
}, [onConnection, onProgress]);
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={pitchBook.id}
|
||||
onClick={() => handleRowClick(pitchBook.id)}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
backgroundColor: "#f9f9f9",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<TableCell>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 50,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" fontWeight="medium">
|
||||
{fundName}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>{manager}</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" color="text.secondary" fontSize="0.875rem">
|
||||
{pitchBook.filename}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{status === 'completed' ? (
|
||||
<Chip
|
||||
icon={<CheckCircleIcon />}
|
||||
label="Abgeschlossen"
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: "#e8f5e9",
|
||||
color: "#2e7d32",
|
||||
"& .MuiChip-icon": {
|
||||
color: "#2e7d32",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Chip
|
||||
icon={<HourglassEmptyIcon />}
|
||||
label="In Bearbeitung"
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: "#fff3e0",
|
||||
color: "#e65100",
|
||||
"& .MuiChip-icon": {
|
||||
color: "#e65100",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{pitchBooks.length === 0 && (
|
||||
<Box p={4} textAlign="center">
|
||||
<Typography color="text.secondary">
|
||||
Keine Pitch Books vorhanden
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
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, item) => {
|
||||
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[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 (
|
||||
<Box
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
height="400px"
|
||||
>
|
||||
<CircularProgress sx={{ color: "#383838" }} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
width: "85%",
|
||||
maxWidth: 1200,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
|
||||
<TableCell sx={{ width: "60px" }} />
|
||||
<TableCell sx={{ fontWeight: "bold" }}>Fondsname</TableCell>
|
||||
<TableCell sx={{ fontWeight: "bold" }}>Fondsmanager</TableCell>
|
||||
<TableCell sx={{ fontWeight: "bold" }}>Dateiname</TableCell>
|
||||
<TableCell sx={{ fontWeight: "bold", width: "120px" }}>
|
||||
Status
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{pitchBooks
|
||||
.filter(
|
||||
(pitchbook: PitchBook) =>
|
||||
!loadingPitchBooks.some((e) => e.id === pitchbook.id),
|
||||
)
|
||||
.sort(
|
||||
(a: PitchBook, b: PitchBook) =>
|
||||
new Date(a.created_at).getTime() -
|
||||
new Date(b.created_at).getTime(),
|
||||
)
|
||||
.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 (
|
||||
<TableRow
|
||||
key={pitchBook.id}
|
||||
onClick={() => handleRowClick(pitchBook.id)}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
backgroundColor: "#f9f9f9",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<TableCell>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 50,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
<PictureAsPdfIcon
|
||||
fontSize="small"
|
||||
sx={{ color: "#666" }}
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" fontWeight="medium">
|
||||
{fundName}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>{manager}</TableCell>
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
fontSize="0.875rem"
|
||||
>
|
||||
{pitchBook.filename}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{status === "completed" ? (
|
||||
<Chip
|
||||
icon={<CheckCircleIcon />}
|
||||
label="Abgeschlossen"
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: "#e8f5e9",
|
||||
color: "#2e7d32",
|
||||
"& .MuiChip-icon": {
|
||||
color: "#2e7d32",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Chip
|
||||
icon={<HourglassEmptyIcon />}
|
||||
label="In Bearbeitung"
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: "#fff3e0",
|
||||
color: "#e65100",
|
||||
"& .MuiChip-icon": {
|
||||
color: "#e65100",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{loadingPitchBooks
|
||||
.sort((a, b) => a.id - b.id)
|
||||
.map((pitchBook) => (
|
||||
<TableRow key={pitchBook.id}>
|
||||
<TableCell>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 50,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "1px solid #e0e0e0",
|
||||
}}
|
||||
>
|
||||
<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell colSpan={2}>
|
||||
<LinearProgress
|
||||
variant="buffer"
|
||||
value={pitchBook.progress}
|
||||
valueBuffer={
|
||||
pitchBook.buffer
|
||||
? pitchBook.progress + pitchBook.buffer
|
||||
: pitchBook.progress
|
||||
}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{" "}
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
fontSize="0.875rem"
|
||||
>
|
||||
{pitchBook.filename}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
icon={<HourglassEmptyIcon />}
|
||||
label="In Bearbeitung"
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: "#fff3e0",
|
||||
color: "#e65100",
|
||||
"& .MuiChip-icon": {
|
||||
color: "#e65100",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{pitchBooks.length === 0 && (
|
||||
<Box p={4} textAlign="center">
|
||||
<Typography color="text.secondary">
|
||||
Keine Pitch Books vorhanden
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import { Backdrop, Box, Button, IconButton, Paper } from "@mui/material";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { useNavigate, useRouter } from "@tanstack/react-router";
|
||||
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";
|
||||
import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
|
||||
|
||||
export default function UploadPage() {
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
|
|
@ -13,6 +13,7 @@ export default function UploadPage() {
|
|||
const [loadingState, setLoadingState] = useState<number | null>(null);
|
||||
const fileTypes = ["pdf"];
|
||||
const navigate = useNavigate();
|
||||
const router = useRouter();
|
||||
|
||||
const uploadFile = useCallback(async () => {
|
||||
const formData = new FormData();
|
||||
|
|
@ -178,6 +179,7 @@ export default function UploadPage() {
|
|||
backgroundColor: "#383838",
|
||||
"&:hover": { backgroundColor: "#2e2e2e" },
|
||||
}}
|
||||
onMouseEnter={() => router.preloadRoute({ to: "/pitchbooks" })}
|
||||
onClick={() => navigate({ to: "/pitchbooks" })}
|
||||
>
|
||||
Alle Pitch Books anzeigen
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type { Kennzahl } from "@/types/kpi";
|
||||
|
||||
const API_HOST = import.meta.env.VITE_API_HOST || 'http://localhost:5050';
|
||||
const API_HOST = import.meta.env.VITE_API_HOST || "http://localhost:5050";
|
||||
|
||||
export { API_HOST };
|
||||
|
||||
|
|
@ -15,9 +15,7 @@ export const fetchKPI = async (
|
|||
source: string;
|
||||
}[];
|
||||
}> => {
|
||||
const response = await fetch(
|
||||
`${API_HOST}/api/pitch_book/${pitchBookId}`,
|
||||
);
|
||||
const response = await fetch(`${API_HOST}/api/pitch_book/${pitchBookId}`);
|
||||
const data = await response.json();
|
||||
|
||||
return data.kpi ? getKPI(data.kpi) : {};
|
||||
|
|
@ -46,13 +44,10 @@ export const fetchPutKPI = async (
|
|||
const formData = new FormData();
|
||||
formData.append("kpi", JSON.stringify(flattenKPIArray(kpi)));
|
||||
|
||||
const response = await fetch(
|
||||
`${API_HOST}/api/pitch_book/${pitchBookId}`,
|
||||
{
|
||||
method: "PUT",
|
||||
body: formData,
|
||||
},
|
||||
);
|
||||
const response = await fetch(`${API_HOST}/api/pitch_book/${pitchBookId}`, {
|
||||
method: "PUT",
|
||||
body: formData,
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
|
@ -119,3 +114,11 @@ export async function fetchPitchBooks() {
|
|||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function fetchPitchBooksById(id: number) {
|
||||
const response = await fetch(`${API_HOST}/api/pitch_book/${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch pitch books");
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue