Displaying Card for contract

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

@@ -1,6 +1,12 @@
-import { Route, Routes } from "react-router";
+import { useContext } from "react";
+import { Route, Routes, useParams } from "react-router";
+import { useOne, useTranslation } from "@refinedev/core";
+import { DeleteButton } from "@refinedev/mui";
+import { CircularProgress, Stack } from "@mui/material";
+import { CrudForm } from "../../lib/crud/components/crud-form";
+import { FirmContext } from "../../contexts/FirmContext";
 import List from "./base-page/List";
-import Edit from "./base-page/Edit";
+import Cartouche from "../../components/Cartouche";
 
 export type Contract = {
   id: string,
@@ -24,5 +30,39 @@ const ListContract = () => {
 }
 
 const EditContract = () => {
-  return <Edit<Contract> resource={`contracts`} schemaName={"Contract"} />
+  const { currentFirm } = useContext(FirmContext);
-}
+  const { translate: t } = useTranslation();
+  const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
+  const { record_id } = useParams();
+
+  const { data, isLoading } = useOne({resource: `${resourceBasePath}/contracts`, id: record_id,});
+
+  if (isLoading || data?.data === undefined) {
+    return <CircularProgress />
+  }
+
+  const record = data.data;
+  return (
+    <>
+      <h2>{record.label}</h2>
+      <Cartouche record={record}/>
+      <CrudForm
+        resourceBasePath={resourceBasePath}
+        schemaName={"Contract"}
+        uiSchema={{"ui:readonly": true }}
+        record={record}
+        card={true}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            justifyContent: "flex-end",
+            alignItems: "center",
+          }}>
+          { record.status == "published" && (<DeleteButton variant="contained" size="large" color="error" recordItemId={record_id}/>) }
+        </Stack>
+      </CrudForm>
+    </>
+  )
+}