113 lines
2.8 KiB
TypeScript
113 lines
2.8 KiB
TypeScript
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
|
|
import { Box, Button, Paper, Typography } from "@mui/material";
|
|
import { useSuspenseQuery } from "@tanstack/react-query";
|
|
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
import KennzahlenTable from "../components/KennzahlenTable";
|
|
import PDFViewer from "../components/pdfViewer";
|
|
import { kpiQueryOptions } from "../util/query";
|
|
|
|
export const Route = createFileRoute("/extractedResult/$pitchBook")({
|
|
component: ExtractedResultsPage,
|
|
loader: ({ context: { queryClient }, params: { pitchBook } }) =>
|
|
queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
|
|
});
|
|
|
|
function ExtractedResultsPage() {
|
|
const { pitchBook } = Route.useParams();
|
|
const navigate = useNavigate();
|
|
const status: "green" | "yellow" | "red" = "red";
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
const statusColor = {
|
|
red: "#f43131",
|
|
yellow: "#f6ed48",
|
|
green: "#3fd942",
|
|
}[status];
|
|
|
|
const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
|
|
|
|
return (
|
|
<Box p={4}>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box
|
|
sx={{
|
|
width: 45,
|
|
height: 45,
|
|
borderRadius: "50%",
|
|
backgroundColor: statusColor,
|
|
top: 32,
|
|
left: 32,
|
|
}}
|
|
/>
|
|
<Typography variant="h5" gutterBottom>
|
|
Kennzahlen extrahiert aus: <br />
|
|
<strong>FONDSNAME: TODO</strong>
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
display="flex"
|
|
gap={4}
|
|
sx={{
|
|
width: "100vw",
|
|
maxWidth: "100%",
|
|
height: "80vh",
|
|
mt: 4,
|
|
}}
|
|
>
|
|
<Paper
|
|
elevation={2}
|
|
sx={{
|
|
width: "45%",
|
|
height: "100%",
|
|
borderRadius: 2,
|
|
backgroundColor: "#eeeeee",
|
|
padding: 2,
|
|
overflow: "auto",
|
|
}}
|
|
>
|
|
<KennzahlenTable
|
|
onPageClick={setCurrentPage}
|
|
data={kpi}
|
|
pdfId={pitchBook}
|
|
/>
|
|
</Paper>
|
|
<Box
|
|
display="flex"
|
|
flexDirection="column"
|
|
justifyContent="space-between"
|
|
gap={5}
|
|
sx={{ width: "55%", height: "95%" }}
|
|
>
|
|
<Paper
|
|
elevation={2}
|
|
sx={{
|
|
height: "100%",
|
|
borderRadius: 2,
|
|
backgroundColor: "#eeeeee",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
|
|
</Paper>
|
|
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
|
|
<Button variant="contained" sx={{ backgroundColor: "#383838" }}>
|
|
<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
|
|
Kennzahlenzeile kopieren
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
sx={{ backgroundColor: "#383838" }}
|
|
onClick={() => navigate({ to: "/" })}
|
|
>
|
|
Neu hochladen
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|