add products

frontend/src/components/Productors/Filter/index.tsx

@@ -16,10 +16,10 @@ export default function ProductorsFilter({
     onFilterChange
 }: ProductorsFiltersProps) {
     const defaultNames = useMemo(() => {
-        return filters.getAll("name")
+        return filters.getAll("names")
     }, [filters]);
     const defaultTypes = useMemo(() => {
-        return filters.getAll("type")
+        return filters.getAll("types")
     }, [filters]);
     return (
         <Group>

frontend/src/components/Products/Filter/index.tsx

@@ -4,22 +4,22 @@ import { t } from "@/config/i18n";
 
 export type ProductsFiltersProps = {
     names: string[];
-    types: string[];
+    productors: string[];
     filters: URLSearchParams;
     onFilterChange: (values: string[], filter: string) => void;
 }
 
 export default function ProductsFilters({
     names,
-    types,
+    productors,
     filters, 
     onFilterChange
 }: ProductsFiltersProps) {
     const defaultNames = useMemo(() => {
-        return filters.getAll("name")
+        return filters.getAll("names")
     }, [filters]);
-    const defaultTypes = useMemo(() => {
-        return filters.getAll("type")
+    const defaultProductors = useMemo(() => {
+        return filters.getAll("productors")
     }, [filters]);
     return (
         <Group>
@@ -34,12 +34,12 @@ export default function ProductsFilters({
                 clearable
             />
             <MultiSelect
-                aria-label={t("filter by type", {capfirst: true})}
-                placeholder={t("filter by type", {capfirst: true})}
-                data={types}
-                defaultValue={defaultTypes}
+                aria-label={t("filter by productor", {capfirst: true})}
+                placeholder={t("filter by productor", {capfirst: true})}
+                data={productors}
+                defaultValue={defaultProductors}
                 onChange={(values: string[]) => {
-                    onFilterChange(values, 'types')
+                    onFilterChange(values, 'productors')
                 }}
                 clearable
             />

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

@@ -2,7 +2,7 @@ import { Button, Group, Modal, NumberInput, Select, TextInput, Title, type Modal
 import { t } from "@/config/i18n";
 import { useForm } from "@mantine/form";
 import { IconCancel } from "@tabler/icons-react";
-import type { Product, ProductInputs } from "@/services/resources/products";
+import { productToProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
 import { useEffect, useMemo } from "react";
 import { getProductors } from "@/services/api";
 
@@ -23,9 +23,9 @@ export function ProductModal({
             name: "",
             unit: null,
             price: null,
-            priceKg: null,
+            price_kg: null,
             weight: null,
-            type: "",
+            type: null,
             productor_id: null,
         },
         validate: {
@@ -35,10 +35,6 @@ export function ProductModal({
                 !value ? `${t("unit", {capfirst: true})} ${t('is required')}` : null,
             price: (value) =>
                 !value ? `${t("price", {capfirst: true})} ${t('is required')}` : null,
-            priceKg: (value) =>
-                !value ? `${t("priceKg", {capfirst: true})} ${t('is required')}` : null,
-            weight: (value) =>
-                !value ? `${t("weight", {capfirst: true})} ${t('is required')}` : null,
             type: (value) =>
                 !value ? `${t("type", {capfirst: true})} ${t('is required')}` : null,
             productor_id: (value) =>
@@ -48,9 +44,7 @@ export function ProductModal({
 
     useEffect(() => {
         if (currentProduct) {
-            form.initialize({
-                ...currentProduct,
-            });
+            form.initialize(productToProductInputs(currentProduct));
         }
     }, [currentProduct]);
     
@@ -73,13 +67,27 @@ export function ProductModal({
                 withAsterisk
                 {...form.getInputProps('name')}
             />
-            <TextInput
-                label={t("product type", {capfirst: true}, {capfirst: true}, {capfirst: true})}
-                placeholder={t("product type", {capfirst: true}, {capfirst: true}, {capfirst: true})}
+            <Select
+                label={t("product type", {capfirst: true})}
+                placeholder={t("product type", {capfirst: true})}
                 radius="sm"
-                withAsterisk
+                data={[
+                    {value: "1", label: t("planned")},
+                    {value: "2", label: t("reccurent")}
+                ]}
                 {...form.getInputProps('type')}
             />
+            <Select
+                label={t("product unit", {capfirst: true})}
+                placeholder={t("product unit", {capfirst: true})}
+                radius="sm"
+                data={[
+                    {value: "1", label: t("grams")},
+                    {value: "2", label: t("kilo")},
+                    {value: "3", label: t("piece")}
+                ]}
+                {...form.getInputProps('unit')}
+            />
             <NumberInput
                 label={t("product price", {capfirst: true})}
                 placeholder={t("product price", {capfirst: true})}
@@ -88,17 +96,15 @@ export function ProductModal({
                 {...form.getInputProps('price')}
             />
             <NumberInput
-                label={t("product priceKg", {capfirst: true}, {capfirst: true})}
-                placeholder={t("product priceKg", {capfirst: true}, {capfirst: true})}
+                label={t("product priceKg", {capfirst: true})}
+                placeholder={t("product priceKg", {capfirst: true})}
                 radius="sm"
-                withAsterisk
-                {...form.getInputProps('priceKg')}
+                {...form.getInputProps('price_kg')}
             />
             <NumberInput
                 label={t("product weight", {capfirst: true})}
                 placeholder={t("product weight", {capfirst: true})}
                 radius="sm"
-                withAsterisk
                 {...form.getInputProps('weight', {capfirst: true})}
             />
            <Select
@@ -129,6 +135,7 @@ export function ProductModal({
                     aria-label={currentProduct ? t("edit product", {capfirst: true}) : t('create product', {capfirst: true})}
                     onClick={() => {
                         form.validate();
+                        console.log(form.isValid(), form.getValues())
                         if (form.isValid())
                             handleSubmit(form.getValues(), currentProduct?.id)
                     }}

frontend/src/components/Products/Row/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
-import type { Product, ProductInputs } from "@/services/resources/products";
+import { ProductType, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
 import { ProductModal } from "@/components/Products/Modal";
 import { deleteProduct, getProduct } from "@/services/api";
 import { useNavigate } from "react-router";
@@ -32,11 +32,11 @@ export default function ProductRow({
                 handleSubmit={handleSubmit}
             />
             <Table.Td>{product.name}</Table.Td>
-            <Table.Td>{product.type}</Table.Td>
+            <Table.Td>{ProductType[product.type]}</Table.Td>
             <Table.Td>{product.price}</Table.Td>
-            <Table.Td>{product.priceKg}</Table.Td>
+            <Table.Td>{product.price_kg}</Table.Td>
             <Table.Td>{product.weight}</Table.Td>
-            <Table.Td>{product.unit}</Table.Td>
+            <Table.Td>{ProductUnit[product.unit]}</Table.Td>
             <Table.Td>
                 <Tooltip label={t("edit product", {capfirst: true})}>
                     <ActionIcon