add contract page with dynamic form elements

frontend/src/components/Shipments/Modal/index.tsx

@@ -5,7 +5,7 @@ import { IconCancel } from "@tabler/icons-react";
 import { useForm } from "@mantine/form";
 import { useEffect, useMemo } from "react";
 import { shipmentToShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
-import { getForms, getProducts } from "@/services/api";
+import { getForms, getProductors, getProducts } from "@/services/api";
 
 export type ShipmentModalProps = ModalBaseProps & {
     currentShipment?: Shipment;
@@ -42,18 +42,28 @@ export default function ShipmentModal({
     }, [currentShipment]);
 
     const { data: allForms } = getForms();
-    const { data: allProducts } = getProducts();
+    const { data: allProducts } = getProducts(new URLSearchParams("types=1"));
+    const { data: allProductors } = getProductors()
     const formsSelect = useMemo(() => {
         return allForms?.map(form => ({value: String(form.id), label: `${form.name} ${form.season}`}))
     }, [allForms]);
 
     const productsSelect = useMemo(() => {
-        return allProducts?.map(product => ({value: String(product.id), label: `${product.name}`}))
-    }, [allProducts]);
+        if (!allProducts)
+            return;
+        return allProductors?.map(productor => {
+            return {
+                group: productor.name, 
+                items: allProducts
+                    .filter((product) => product.productor.id === productor.id)
+                    .map((product) => ({value: String(product.id), label: `${product.name}`}))
+            }
+        });
+    }, [allProducts, form]);
 
     return (
         <Modal
-            size="50%" 
+            w={{base: "100%", md: "80%", lg: "50%"}} 
             opened={opened}
             onClose={onClose}
             title={currentShipment ? t("edit shipment") : t('create shipment')}
@@ -83,8 +93,9 @@ export default function ShipmentModal({
             <MultiSelect
                 label={t("shipment products", {capfirst: true})}
                 placeholder={t("shipment products", {capfirst: true})}
-                data={productsSelect}
+                data={productsSelect || []}
                 clearable
+                searchable
                 {...form.getInputProps('product_ids')}
             />
             <Group mt="sm" justify="space-between">
@@ -105,7 +116,6 @@ export default function ShipmentModal({
                         form.validate();
                         if (form.isValid()) {
                             handleSubmit(form.getValues(), currentShipment?.id)
-                            // form.reset();
                         }
                     }}
                 >{currentShipment ? t("edit shipment", {capfirst: true}) : t('create shipment', {capfirst: true})}</Button>