fix a bug that could prevent user to selet their payment methods

frontend/src/pages/Contract/index.tsx

@@ -165,7 +165,7 @@ export function Contract() {
         );
 
     return (
-        <Stack w={{ base: "100%", md: "80%", lg: "50%" }}>
+        <Stack w={{ base: "100%", md: "80%", lg: "50%" }} p={{base: 'xs'}}>
             <Title order={2}>{form.name}</Title>
             <Title order={3}>{t("informations", { capfirst: true })}</Title>
             <Text size="sm">
@@ -283,6 +283,10 @@ export function Contract() {
                 ref={(el) => {
                     inputRefs.current.payment_method = el;
                 }}
+                comboboxProps={{ 
+                    withinPortal: false,
+                    position: "bottom-start",
+                }}
             />
             {inputForm.values.payment_method === "cheque" ? (
                 <ContractCheque
@@ -319,7 +323,7 @@ export function Contract() {
                 <Button 
                     leftSection={<IconDownload/>}
                     aria-label={t("submit contracts")} onClick={handleSubmit}>
-                    {t("submit contract", {capfirst: true})}
+                    {t("submit", {capfirst: true})}
                 </Button>
             </Overlay>
         </Stack>

frontend/src/pages/Productors/index.tsx

@@ -40,12 +40,16 @@ export default function Productors() {
     }, [navigate, searchParams]);
 
     const names = useMemo(() => {
+        if (!allProductors)
+            return [];
         return allProductors
             ?.map((productor: Productor) => productor.name)
             .filter((season, index, array) => array.indexOf(season) === index);
     }, [allProductors]);
 
     const types = useMemo(() => {
+        if (!allProductors)
+            return [];
         return allProductors
             ?.map((productor: Productor) => productor.type)
             .filter((productor, index, array) => array.indexOf(productor) === index);

frontend/src/pages/Products/index.tsx

@@ -38,12 +38,16 @@ export default function Products() {
     const { data: allProducts } = useGetProducts();
 
     const names = useMemo(() => {
+        if (!allProducts)
+            return [];
         return allProducts
             ?.map((product: Product) => product.name)
             .filter((season, index, array) => array.indexOf(season) === index);
     }, [allProducts]);
 
     const productors = useMemo(() => {
+        if (!allProducts)
+            return [];
         return allProducts
             ?.map((product: Product) => product.productor.name)
             .filter((productor, index, array) => array.indexOf(productor) === index);

frontend/src/pages/Shipments/index.tsx

@@ -44,12 +44,16 @@ export default function Shipments() {
     const { data: allShipments } = useGetShipments();
 
     const names = useMemo(() => {
+        if (!allShipments)
+            return [];
         return allShipments
             ?.map((shipment: Shipment) => shipment.name)
             .filter((season, index, array) => array.indexOf(season) === index);
     }, [allShipments]);
 
     const forms = useMemo(() => {
+        if (!allShipments)
+            return [];
         return allShipments
             ?.map((shipment: Shipment) => shipment.form.name)
             .filter((season, index, array) => array.indexOf(season) === index);

frontend/src/pages/Users/index.tsx

@@ -36,6 +36,8 @@ export default function Users() {
     const { data: allUsers } = useGetUsers();
 
     const names = useMemo(() => {
+        if (!allUsers)
+            return [];
         return allUsers
             ?.map((user: User) => user.name)
             .filter((season, index, array) => array.indexOf(season) === index);