add base template for manual fill

frontend/src/components/Forms/Card/index.tsx

@@ -1,17 +1,53 @@
-import { Badge, Box, Group, Paper, Text, Title } from "@mantine/core";
+import { ActionIcon, Badge, Box, Group, Paper, Text, Title, Tooltip } from "@mantine/core";
 import { Link } from "react-router";
 import type { Form } from "@/services/resources/forms";
+import { IconDownload, IconExternalLink, IconLink } from "@tabler/icons-react";
+import { t } from "@/config/i18n";
+import { useGetContractFileTemplate } from "@/services/api";
 
 export type FormCardProps = {
     form: Form;
 };
 
 export function FormCard({ form }: FormCardProps) {
+    const contractBaseTemplate = useGetContractFileTemplate()
     return (
         <Paper shadow="xl" p="xl" miw={{ base: "100vw", md: "25vw", lg: "20vw" }}>
+            <Group justify="start" mb="md">
+            <Tooltip
+                label={t("download base template to print")}
+            >
+                <ActionIcon
+                    variant={"outline"}
+                    aria-label={t("download base template to print")}
+                    onClick={async () => {
+                        await contractBaseTemplate.mutateAsync(form.id)
+                    }}
+                >
+                    <IconDownload/>
+                </ActionIcon>
+            </Tooltip>
+            <Tooltip
+                label={t("fill contract online")}
+            >
+                <ActionIcon
+                    variant={"outline"}
+                    aria-label={t("fill contract online")}
+                    component={Link}
+                    to={`/form/${form.id}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <IconExternalLink/>
+                </ActionIcon>
+            </Tooltip>
+            </Group>
+
             <Box
                 component={Link}
                 to={`/form/${form.id}`}
+                target="_blank"
+                rel="noopener noreferrer"
                 style={{ textDecoration: "none", color: "black" }}
             >
                 <Group justify="space-between" wrap="nowrap">

frontend/src/services/api.ts

@@ -711,6 +711,34 @@ export function useGetContractFile() {
     });
 }
 
+
+export function useGetContractFileTemplate() {
+    return useMutation({
+        mutationFn: async (form_id: number) => {
+            const res = await fetchWithAuth(`${Config.backend_uri}/contracts/${form_id}/base`)
+                .then((res) => res);
+
+            if (!res.ok) throw new Error();
+            const blob = await res.blob();
+            const disposition = res.headers.get("Content-Disposition");
+            const filename =
+                disposition && disposition?.includes("filename=")
+                    ? disposition.split("filename=")[1].replace(/"/g, "")
+                    : `contract_${form_id}.pdf`;
+            return { blob, filename };
+        },
+        onSuccess: ({ blob, filename }) => {
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = filename;
+            link.click();
+            URL.revokeObjectURL(url);
+        },
+    });
+}
+
+
 export function useGetRecap() {
     return useMutation({
         mutationFn: async (form_id: number) => {