Add support for pre-form and post-form content

src/frontend/src/components/forms/ApiForm.tsx

@@ -38,6 +38,10 @@ export interface ApiFormProps {
   fetchInitialData?: boolean;
   method?: string;
   opened: boolean;
+  preFormContent?: JSX.Element;
+  preFormContentFunc?: () => JSX.Element;
+  postFormContent?: JSX.Element;
+  postFormContentFunc?: () => JSX.Element;
   onClose?: () => void;
   onFormSuccess?: () => void;
   onFormError?: () => void;
@@ -201,6 +205,8 @@ export function ApiForm(props: ApiFormProps) {
               {error}
             </Alert>
           )}
+          {props.preFormContent && props.preFormContent}
+          {props.preFormContentFunc ? props.preFormContentFunc() : null}
           {canRender && (
             <ScrollArea>
               <Stack spacing="md">
@@ -218,6 +224,8 @@ export function ApiForm(props: ApiFormProps) {
               </Stack>
             </ScrollArea>
           )}
+          {props.postFormContent && props.postFormContent}
+          {props.postFormContentFunc ? props.postFormContentFunc() : null}
         </Stack>
         <Divider />
         <Group position="right">

src/frontend/src/pages/Index/Home.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro';
-import { Group, Stack } from '@mantine/core';
+import { Alert, Group, Stack } from '@mantine/core';
 import { Button } from '@mantine/core';
 import {
   IconBuilding,
@@ -143,6 +143,10 @@ export default function Home() {
         fields={[]}
         opened={stockFormOpened}
         onClose={() => setStockFormOpened(false)}
+        preFormContent={<Alert color="red">Are you sure?</Alert>}
+        postFormContentFunc={() => (
+          <Alert color="blue">Post form content!</Alert>
+        )}
       />
       <CreateApiForm
         name="sales-order-create"