add shipments create and form create

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

@@ -0,0 +1,77 @@
+import { ActionIcon, Badge, Box, Group, Paper, Text, Title } from "@mantine/core";
+import { Link, useNavigate } from "react-router";
+import { deleteForm, getForm, type Form, type Shipment } from "../../../services/api";
+import { IconEdit, IconX } from "@tabler/icons-react";
+import { t } from "../../../config/i18n";
+import FormModal, { type FormInputs } from "../FormModal";
+
+export type FormCardProps = {
+    form: Form;
+    isEdit: boolean;
+    closeModal: () => void;
+    handleSubmit: (form: FormInputs, id?: number) => void;
+}
+
+export default function FormCard({form, isEdit, closeModal, handleSubmit}: FormCardProps) {
+    const deleteMutation = deleteForm();
+    const navigate = useNavigate();
+    const {data: currentForm, isPending} = getForm(form.id);
+    
+    return (
+        <Paper
+            key={form.id}
+            shadow="xl" 
+            p="xl"
+            miw={{base: "100vw", md: "25vw", lg:"20vw"}}
+        >
+            {/* TODO: Show only to logged users */}
+            <FormModal 
+                opened={isEdit} 
+                onClose={closeModal} 
+                currentForm={currentForm} 
+                handleSubmit={handleSubmit}
+            />
+            <Group justify="space-between" mb="sm">
+                <ActionIcon
+                    size={"sm"}
+                    aria-label={t("edit form")}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        navigate(`/form/${form.id}/edit`);
+                    }}
+                >
+                    <IconEdit/>
+                </ActionIcon>
+                <ActionIcon
+                    size={"sm"}
+                    aria-label={t("delete form")}
+                    color="red"
+                    onClick={() => {
+                        deleteMutation.mutate(form.id);
+                    }}
+                >
+                    <IconX/>
+                </ActionIcon>
+            </Group>
+            <Box
+                component={Link}
+                to={`/form/${form.id}`}
+            >
+                <Group justify="space-between" wrap="nowrap">
+                    <Title 
+                        order={3}
+                        textWrap="wrap"
+                        lineClamp={1}
+                        >
+                        {form.name}
+                    </Title>
+                    <Badge>{form.season}</Badge>
+                </Group>
+                <Group justify="space-between">
+                    <Text>{form.productor.name}</Text>
+                    <Text>{form.referer.name}</Text>
+                </Group>
+            </Box>
+        </Paper>
+    );
+}