add shipment forms and start contract from form

frontend/src/pages/Contract/index.tsx

@@ -0,0 +1,52 @@
+import { getForm } from "@/services/api";
+import { Group, Loader, NumberInput, Stack, Text, Title } from "@mantine/core";
+import { useMemo } from "react";
+import { useParams } from "react-router";
+
+export function Contract() {
+    const { id } = useParams();
+    const { data: form } = getForm(Number(id), {enabled: !!id})
+
+    const productsRecurent = useMemo(() => {
+        console.log(form)
+        return form?.productor?.products.filter((el) => el.type === "2")
+    }, [form])
+
+    const shipments = useMemo(() => {
+        return form?.shipments
+    }, [form])
+
+    if (!form) 
+        return <Loader/>
+
+    return (
+        <Stack>
+            <Title>{form.name}</Title>
+            {
+                productsRecurent.map((el) => (
+                    <Group>
+                        <Text>{el.name}</Text>
+                        <NumberInput/>
+                    </Group>
+                ))
+            }
+            {
+                shipments.map((shipment) => (
+                    <>
+                        <Text>{shipment.name}</Text>
+                        {
+                            shipment?.products.map((product) => (
+                                <Group>
+                                    <Text>{product.name}</Text>
+                                    <NumberInput/>
+                                </Group>
+
+                            ))
+                        }
+                    </>
+                    
+                ))
+            }
+        </Stack>
+    )
+}

frontend/src/pages/Dashboard/index.tsx

@@ -9,18 +9,18 @@ export default function Dashboard() {
     return (
         <Tabs 
             w={{base: "100%", md: "80%", lg: "60%"}}
-            keepMounted={false} 
             orientation={"horizontal"}
             value={location.pathname.split('/')[2]}
-            defaultValue={location.pathname.split('/')[2]}
+            defaultValue={"productors"}
             onChange={(value) => navigate(`/dashboard/${value}`)}
         >
             <Tabs.List>
                 <Tabs.Tab value="productors">{t("productors", {capfirst: true})}</Tabs.Tab>
                 <Tabs.Tab value="products">{t("products", {capfirst: true})}</Tabs.Tab>
+                <Tabs.Tab value="forms">{t("forms", {capfirst: true})}</Tabs.Tab>
+                <Tabs.Tab value="shipments">{t("shipments", {capfirst: true})}</Tabs.Tab>
                 <Tabs.Tab value="templates">{t("templates", {capfirst: true})}</Tabs.Tab>
                 <Tabs.Tab value="users">{t("users", {capfirst: true})}</Tabs.Tab>
-                <Tabs.Tab value="forms">{t("forms", {capfirst: true})}</Tabs.Tab>
             </Tabs.List>
             <Outlet/>
         </Tabs>

frontend/src/pages/Forms/index.tsx

@@ -1,5 +1,5 @@
 import { Stack, Loader, Title, Group, ActionIcon, Tooltip, Table, ScrollArea } from "@mantine/core";
-import { createForm, createShipment, editForm, editShipment, getForm, getForms } from "@/services/api";
+import { createForm, editForm, getForm, getForms } from "@/services/api";
 import { t } from "@/config/i18n";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { IconPlus } from "@tabler/icons-react";
@@ -7,7 +7,6 @@ import { useCallback, useMemo } from "react";
 import FormModal from "@/components/Forms/Modal";
 import FormRow from "@/components/Forms/Row";
 import type { Form, FormInputs } from "@/services/resources/forms";
-import type { ShipmentEdit, ShipmentInputs } from "@/services/resources/shipments";
 import FilterForms from "@/components/Forms/Filter";
 
 export function Forms() {
@@ -46,57 +45,24 @@ export function Forms() {
 
     const createFormMutation = createForm();
     const editFormMutation = editForm();
-    const createShipmentsMutation = createShipment();
-    const editShipmentsMutation = editShipment();
     
     const handleCreateForm = useCallback(async (form: FormInputs) => {
             if (!form.start || !form.end)
                 return;
-            const newForm = await createFormMutation.mutateAsync({
+            await createFormMutation.mutateAsync({
                 ...form,
                 start: form?.start,
                 end: form?.start,
                 productor_id: Number(form.productor_id),
                 referer_id: Number(form.referer_id)
             });
-            form.shipments.map(async (shipment: ShipmentInputs) => {
-                if (!shipment.name || !shipment.date)
-                    return
-                const newShipment = {
-                    name: shipment.name,
-                    date: shipment.date,
-                }
-                return await createShipmentsMutation.mutateAsync(
-                    {...newShipment, form_id: newForm.id}
-                );
-            });
             closeModal();
-    }, [createFormMutation, createShipmentsMutation]);
+    }, [createFormMutation]);
 
     const handleEditForm = useCallback(async (form: FormInputs, id?: number) => {
         if (!id)
             return;
-        form.shipments
-            .filter((el: ShipmentInputs) => el.id)
-            .map(async (shipment: ShipmentInputs) => {
-            if (
-                !shipment.name ||
-                !shipment.date || 
-                !shipment.form_id || 
-                !shipment.id
-            )
-                    return
-            const newShipment: ShipmentEdit = {
-                name: shipment.name,
-                date: shipment.date,
-                form_id: shipment.form_id,
-            };
-            await editShipmentsMutation.mutate({
-                id: shipment.id,
-                shipment: newShipment
-            });
-        });
-        const newForm = await editFormMutation.mutateAsync({
+        await editFormMutation.mutateAsync({
             id: id,
             form: {
                 ...form,
@@ -106,22 +72,8 @@ export function Forms() {
                 referer_id: Number(form.referer_id)
             }
         });
-        form.shipments
-            .filter((el: ShipmentInputs) => el.id === null)
-            .map(async (shipment: ShipmentInputs) => {
-            if (!shipment.name || !shipment.date)
-                return
-            const newShipment = {
-                name: shipment.name,
-                date: shipment.date,
-            }
-            return await createShipmentsMutation.mutateAsync({
-                ...newShipment,
-                form_id: newForm.id,
-            });        
-        });
         closeModal();
-    }, [editShipmentsMutation, createShipmentsMutation, editFormMutation]);
+    }, [editFormMutation]);
 
     const onFilterChange = useCallback((
         values: string[], 
@@ -199,14 +151,6 @@ export function Forms() {
                     </Table.Tbody>
                 </Table>
             </ScrollArea>
-
-            {/* <Flex gap="md" wrap="wrap" justify="center">
-            {
-            data?.map((form: Form) => (
-                <FormCard form={form} isEdit={isEdit} closeModal={closeModal} handleSubmit={handleEditForm}/>
-            ))
-            }
-            </Flex> */}
         </Stack>
     );
 }

frontend/src/pages/Home/index.tsx

@@ -1,8 +1,20 @@
-import { Text } from "@mantine/core";
+import { Flex } from "@mantine/core";
 import { t } from "@/config/i18n";
+import { useParams } from "react-router";
+import { getForms } from "@/services/api";
+import { FormCard } from "@/components/Forms/Card";
+import type { Form } from "@/services/resources/forms";
 
 export function Home() {
+    const { data: allForms } = getForms();
+
     return (
-        <Text>{t("test", {capfirst: true})}</Text>
+        <Flex gap="md" wrap="wrap" justify="center">
+        {
+        allForms?.map((form: Form) => (
+            <FormCard form={form} key={form.id}/>
+        ))
+        }
+        </Flex>  
     );
 }

frontend/src/pages/Shipments/index.tsx

@@ -0,0 +1,128 @@
+import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { createShipment, editShipment, getShipment, getShipments } from "@/services/api";
+import { IconPlus } from "@tabler/icons-react";
+import ShipmentRow from "@/components/Shipments/Row";
+import { useLocation, useNavigate, useSearchParams } from "react-router";
+import { useCallback, useMemo } from "react";
+import { shipmentCreateFromShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
+import ShipmentModal from "@/components/Shipments/Modal";
+import ShipmentsFilters from "@/components/Shipments/Filter";
+
+export default function Shipments() {
+    const [ searchParams, setSearchParams ] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const isCreate = location.pathname === "/dashboard/shipments/create";
+    const isEdit = location.pathname.includes("/edit");
+
+    const editId = useMemo(() => {
+        if (isEdit) {
+            return location.pathname.split("/")[3]
+        }
+        return null
+    }, [location, isEdit])
+    
+    const closeModal = () => {
+        navigate("/dashboard/shipments");
+    };
+
+    const { data: shipments, isPending } = getShipments(searchParams);
+    const { data: currentShipment } = getShipment(Number(editId), { enabled: !!editId });
+    const { data: allShipments } = getShipments();
+
+    const names = useMemo(() => {
+        return allShipments?.map((shipment: Shipment) => (shipment.name))
+            .filter((season, index, array) => array.indexOf(season) === index)
+    }, [allShipments])
+
+    const createShipmentMutation = createShipment();
+    const editShipmentMutation = editShipment();
+
+    const handleCreateShipment = useCallback(async (shipment: ShipmentInputs) => {
+        await createShipmentMutation.mutateAsync(shipmentCreateFromShipmentInputs(shipment));
+        closeModal();
+    }, [createShipmentMutation]);
+
+    const handleEditShipment = useCallback(async (shipment: ShipmentInputs, id?: number) => {
+        if (!id)
+            return;
+        await editShipmentMutation.mutateAsync({
+            id: id,
+            shipment: shipmentCreateFromShipmentInputs(shipment)
+        });
+        closeModal();
+    }, []);
+    
+    const onFilterChange = useCallback((values: string[], filter: string) => {
+        setSearchParams(prev => {
+            const params = new URLSearchParams(prev);
+            params.delete(filter)
+            
+            values.forEach(value => {
+                params.append(filter, value);
+            });
+            return params;
+        });
+    }, [searchParams, setSearchParams])
+
+    if (!shipments || isPending)
+        return <Loader/>
+
+    return (
+        <Stack>
+            <Group justify="space-between">
+                <Title order={2}>{t("all shipments", {capfirst: true})}</Title>
+                <Tooltip label={t("create shipment", {capfirst: true})}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(`/dashboard/shipments/create`);
+                        }}
+                    >
+                        <IconPlus/>
+                    </ActionIcon>
+                </Tooltip>
+                <ShipmentModal
+                    opened={isCreate} 
+                    onClose={closeModal} 
+                    handleSubmit={handleCreateShipment}
+                />
+                <ShipmentModal
+                    opened={isEdit}
+                    onClose={closeModal}
+                    currentShipment={currentShipment}
+                    handleSubmit={handleEditShipment}
+                />
+            </Group>
+            <ShipmentsFilters
+                names={names || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <ScrollArea type="auto">
+                <Table striped>
+                    <Table.Thead>
+                        <Table.Tr>
+                            <Table.Th>{t("name", {capfirst: true})}</Table.Th>
+                            <Table.Th>{t("date", {capfirst: true})}</Table.Th>
+                            <Table.Th>{t("formulare", {capfirst: true})}</Table.Th>
+                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {
+                            shipments.map((shipment) => (
+                                <ShipmentRow 
+                                    shipment={shipment}
+                                    key={shipment.id}
+                                />
+                            ))
+                        }
+                    </Table.Tbody>
+                </Table>
+            </ScrollArea>
+        </Stack>
+    );
+}