Adding preview du contract drafts

gui/rpk-gui/src/pages/firm/DraftRoutes.tsx

@@ -1,6 +1,9 @@
-import { Navigate, Route, Routes, useParams } from "react-router";
-import { CircularProgress } from "@mui/material";
+import dayjs from "dayjs";
 import React, { useContext, useState } from "react";
+import { Navigate, Route, Routes, useParams } from "react-router";
+import { Box, Button, CircularProgress, Container, DialogContent, Modal, Paper } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import PreviewIcon from '@mui/icons-material/Preview';
 import { useOne, useTranslation } from "@refinedev/core";
 import { BaseForm } from "../../lib/crud/components/base-form";
 import { ForeignKeyReference, ForeignKeySchema } from "../../lib/crud/components/widgets/foreign-key";
@@ -10,7 +13,6 @@ import List from "./base-page/List";
 import Edit from "./base-page/Edit";
 import New from "./base-page/New";
 import { Contract } from "./ContractRoutes";
-import dayjs from "dayjs";
 
 type Draft = {
   id: string,
@@ -50,7 +52,7 @@ const EditDraft = () => {
     return <CircularProgress />
   }
 
-  if (!data?.data) {
+  if (record_id == undefined || !data?.data) {
     return <Navigate to="../" />
   }
 
@@ -63,12 +65,56 @@ const EditDraft = () => {
 
   return (
     <>
+      <DraftPreview resourceBasePath={resourceBasePath} recordId={record_id}/>
       <Edit<Draft> resource={"contracts/drafts"} schemaName={"ContractDraft"} uiSchema={uiSchema} />
       <ContractCreate draft={draft}></ContractCreate>
     </>
   )
 }
 
+const DraftPreview = (props: {resourceBasePath: string, recordId: string}) => {
+  const { resourceBasePath, recordId } = props
+  const [openPreviewModal, setOpenPreviewModal] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="outlined" onClick={() => setOpenPreviewModal(true)} color="primary" >
+        <PreviewIcon />Preview
+      </Button>
+      <Modal
+        open={openPreviewModal}
+        onClose={() => setOpenPreviewModal(false)}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <DialogContent>
+          <Container>
+            <Paper>
+              <Stack
+                direction={"row"}
+                spacing={2}
+                sx={{
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <Box padding={"45px"}>
+                  <iframe
+                    src={`/api/v1/${resourceBasePath}/contracts/preview/draft/${recordId}`}
+                    width="675px"
+                    height="955px"
+                    style={{ backgroundColor: "white", border: "1px solid black" }}
+                  />
+                </Box>
+              </Stack>
+            </Paper>
+          </Container>
+        </DialogContent>
+      </Modal>
+    </>
+  )
+}
+
 const ContractCreate = (props: { draft: any}) => {
   const { translate: t } = useTranslation();
   const { draft } = props;