add users and fix modal

2026-02-12 19:10:50 +01:00
parent 1a98957466
commit fe27595931
18 changed files with 482 additions and 88 deletions
--- a/frontend/src/components/Forms/Modal/index.tsx
+++ b/frontend/src/components/Forms/Modal/index.tsx
@@ -51,7 +51,7 @@ export default function FormModal({

    useEffect(() => {
        if (currentForm) {
-            form.initialize({
+            form.setValues({
                ...currentForm,
                start: currentForm.start || null,
                end: currentForm.end || null,
@@ -93,6 +93,7 @@ export default function FormModal({

    return (
        <Modal
+            size="50%" 
            opened={opened}
            onClose={onClose}
            title={currentForm ? t("edit form") : t('create form')}
@@ -206,8 +207,10 @@ export default function FormModal({
                    aria-label={currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}
                    onClick={() => {
                        form.validate();
-                        if (form.isValid())
+                        if (form.isValid()) {
                            handleSubmit(form.getValues(), currentForm?.id)
+                            form.reset();
+                        }
                    }}
                >{currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}</Button>
            </Group>
--- a/frontend/src/components/Forms/Row/index.tsx
+++ b/frontend/src/components/Forms/Row/index.tsx
@@ -8,29 +8,16 @@ import FormModal from "@/components/Forms/Modal";

 export type FormRowProps = {
    form: Form;
-    isEdit: boolean;
-    closeModal: () => void;
-    handleSubmit: (form: FormInputs, id?: number) => void;
 }

 export default function FormRow({
    form, 
-    isEdit, 
-    closeModal, 
-    handleSubmit
 }: FormRowProps) {
    const deleteMutation = deleteForm();
    const navigate = useNavigate();
-    const {data: currentForm, isPending} = getForm(form.id);
-    
+
    return (
        <Table.Tr key={form.id}>
-            <FormModal
-                opened={isEdit} 
-                onClose={closeModal} 
-                currentForm={currentForm} 
-                handleSubmit={handleSubmit}
-            />
            <Table.Td>{form.name}</Table.Td>
            <Table.Td>{form.season}</Table.Td>
            <Table.Td>{form.start}</Table.Td>
--- a/frontend/src/components/Productors/Filter/index.tsx
+++ b/frontend/src/components/Productors/Filter/index.tsx
@@ -21,6 +21,7 @@ export default function ProductorsFilter({
    const defaultTypes = useMemo(() => {
        return filters.getAll("types")
    }, [filters]);
+    
    return (
        <Group>
            <MultiSelect
--- a/frontend/src/components/Productors/Modal/index.tsx
+++ b/frontend/src/components/Productors/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Modal, Text, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { useForm } from "@mantine/form";
 import { IconCancel } from "@tabler/icons-react";
@@ -34,13 +34,13 @@ export function ProductorModal({
                !value ? `${t("type", {capfirst: true})} ${t('is required')}` : null
        }
    });
-
+    
    useEffect(() => {
        if (currentProductor) {
-            form.initialize({
+            form.setValues({
                ...currentProductor,
            });
-        }
+        }    
    }, [currentProductor]);
    
    return (
@@ -99,6 +99,7 @@ export function ProductorModal({
                        form.validate();
                        if (form.isValid()) {
                            handleSubmit(form.getValues(), currentProductor?.id)
+                            form.reset();
                        }
                    }}
                >{currentProductor ? t("edit productor", {capfirst: true}) : t('create productor', {capfirst: true})}</Button>
--- a/frontend/src/components/Productors/Row/index.tsx
+++ b/frontend/src/components/Productors/Row/index.tsx
@@ -1,36 +1,22 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
-import type { Productor, ProductorInputs } from "@/services/resources/productors";
-import { ProductorModal } from "@/components/Productors/Modal";
-import { deleteProductor, getProductor } from "@/services/api";
+import type { Productor } from "@/services/resources/productors";
+import { deleteProductor } from "@/services/api";
 import { useNavigate } from "react-router";

 export type ProductorRowProps = {
    productor: Productor;
-    isEdit: boolean;
-    closeModal: () => void;
-    handleSubmit: (productor: ProductorInputs, id?: number) => void;
 }

 export default function ProductorRow({
    productor,
-    isEdit, 
-    closeModal, 
-    handleSubmit
 }: ProductorRowProps) {
    const deleteMutation = deleteProductor();
    const navigate = useNavigate();
-    const {data: currentProductor, isPending} = getProductor(productor.id);

    return (
        <Table.Tr key={productor.id}>
-            <ProductorModal
-                opened={isEdit}
-                onClose={closeModal}
-                currentProductor={currentProductor}
-                handleSubmit={handleSubmit}
-            />
            <Table.Td>{productor.name}</Table.Td>
            <Table.Td>{productor.type}</Table.Td>
            <Table.Td>{productor.address}</Table.Td>
--- a/frontend/src/components/Products/Filter/index.tsx
+++ b/frontend/src/components/Products/Filter/index.tsx
@@ -21,6 +21,7 @@ export default function ProductsFilters({
    const defaultProductors = useMemo(() => {
        return filters.getAll("productors")
    }, [filters]);
+    
    return (
        <Group>
            <MultiSelect
--- a/frontend/src/components/Products/Modal/index.tsx
+++ b/frontend/src/components/Products/Modal/index.tsx
@@ -44,7 +44,7 @@ export function ProductModal({

    useEffect(() => {
        if (currentProduct) {
-            form.initialize(productToProductInputs(currentProduct));
+            form.setValues(productToProductInputs(currentProduct));
        }
    }, [currentProduct]);
    
@@ -136,8 +136,10 @@ export function ProductModal({
                    onClick={() => {
                        form.validate();
                        console.log(form.isValid(), form.getValues())
-                        if (form.isValid())
+                        if (form.isValid()) {
                            handleSubmit(form.getValues(), currentProduct?.id)
+                            form.reset();
+                        }
                    }}
                >{currentProduct ? t("edit product", {capfirst: true}) : t('create product', {capfirst: true})}</Button>
            </Group>
--- a/frontend/src/components/Products/Row/index.tsx
+++ b/frontend/src/components/Products/Row/index.tsx
@@ -8,29 +8,16 @@ import { useNavigate } from "react-router";

 export type ProductRowProps = {
    product: Product;
-    isEdit: boolean;
-    closeModal: () => void;
-    handleSubmit: (product: ProductInputs, id?: number) => void;
 }

 export default function ProductRow({
    product,
-    isEdit, 
-    closeModal, 
-    handleSubmit
 }: ProductRowProps) {
    const deleteMutation = deleteProduct();
    const navigate = useNavigate();
-    const {data: currentProduct, isPending} = getProduct(product.id);

    return (
        <Table.Tr key={product.id}>
-            <ProductModal
-                opened={isEdit}
-                onClose={closeModal}
-                currentProduct={currentProduct}
-                handleSubmit={handleSubmit}
-            />
            <Table.Td>{product.name}</Table.Td>
            <Table.Td>{ProductType[product.type]}</Table.Td>
            <Table.Td>{product.price}</Table.Td>
--- a/frontend/src/components/Users/Filter/index.tsx
+++ b/frontend/src/components/Users/Filter/index.tsx
@@ -0,0 +1,34 @@
+import { Group, MultiSelect } from "@mantine/core";
+import { useMemo } from "react";
+import { t } from "@/config/i18n";
+
+export type UserFiltersProps = {
+    names: string[];
+    filters: URLSearchParams;
+    onFilterChange: (values: string[], filter: string) => void;
+}
+
+export default function UserFilters({
+    names,
+    filters, 
+    onFilterChange
+}: UserFiltersProps) {
+    const defaultNames = useMemo(() => {
+        return filters.getAll("names")
+    }, [filters]);
+    
+    return (
+        <Group>
+            <MultiSelect
+                aria-label={t("filter by name", {capfirst: true})}
+                placeholder={t("filter by name", {capfirst: true})}
+                data={names}
+                defaultValue={defaultNames}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, 'names')
+                }}
+                clearable
+            />
+        </Group>
+    );
+}
--- a/frontend/src/components/Users/Modal/index.tsx
+++ b/frontend/src/components/Users/Modal/index.tsx
@@ -0,0 +1,87 @@
+import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { useForm } from "@mantine/form";
+import { IconCancel } from "@tabler/icons-react";
+import { type User, type UserInputs } from "@/services/resources/users";
+import { useEffect } from "react";
+
+export type UserModalProps = ModalBaseProps & {
+    currentUser?: User;
+    handleSubmit: (user: UserInputs, id?: number) => void;
+}
+
+export function UserModal({
+    opened, 
+    onClose, 
+    currentUser, 
+    handleSubmit
+}: UserModalProps) {
+    const form = useForm<UserInputs>({
+        initialValues: {
+            name: "",
+            email: ""
+        },
+        validate: {
+            name: (value) =>
+                !value ? `${t("name", {capfirst: true})} ${t('is required')}` : null,
+            email: (value) =>
+                !value ? `${t("email", {capfirst: true})} ${t('is required')}` : null,
+        }
+    });
+
+    useEffect(() => {
+        if (currentUser) {
+            form.setValues(currentUser);
+        }
+    }, [currentUser]);
+
+    return (
+        <Modal
+            size="50%" 
+            opened={opened}
+            onClose={onClose}
+            title={t("create user", {capfirst: true})}
+        >
+            <Title order={4}>{t("informations", {capfirst: true})}</Title>
+            <TextInput
+                label={t("user name", {capfirst: true})}
+                placeholder={t("user name", {capfirst: true})}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps('name')}
+            />
+             <TextInput
+                label={t("user email", {capfirst: true})}
+                placeholder={t("user email", {capfirst: true})}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps('email')}
+            />
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", {capfirst: true})}
+                    leftSection={<IconCancel/>}
+                    onClick={() => {
+                        form.reset();
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >{t("cancel", {capfirst: true})}</Button>
+                <Button
+                    variant="filled"
+                    aria-label={currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}
+                    onClick={() => {
+                        form.validate();
+                        console.log(form.isValid(), form.getValues())
+                        if (form.isValid()) {
+                            handleSubmit(form.getValues(), currentUser?.id)
+                            form.reset();
+                        }
+                    }}
+                >{currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}</Button>
+            </Group>
+        </Modal>
+    );
+}
--- a/frontend/src/components/Users/Row/index.tsx
+++ b/frontend/src/components/Users/Row/index.tsx
@@ -0,0 +1,52 @@
+import { ActionIcon, Table, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { IconEdit, IconX } from "@tabler/icons-react";
+import { type User, type UserInputs } from "@/services/resources/users";
+import { UserModal } from "@/components/Users/Modal";
+import { deleteUser, getUser } from "@/services/api";
+import { useNavigate } from "react-router";
+
+export type UserRowProps = {
+    user: User;
+}
+
+export default function UserRow({
+    user,
+}: UserRowProps) {
+    const deleteMutation = deleteUser();
+    const navigate = useNavigate();
+
+    return (
+        <Table.Tr key={user.id}>
+            <Table.Td>{user.name}</Table.Td>
+            <Table.Td>{user.email}</Table.Td>
+            <Table.Td>
+                <Tooltip label={t("edit user", {capfirst: true})}>
+                    <ActionIcon
+                        size="sm" 
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(`/dashboard/users/${user.id}/edit`);
+                        }}
+                    >
+                        <IconEdit/>
+                    </ActionIcon>
+                </Tooltip>
+                <Tooltip label={t("remove user", {capfirst: true})}>
+                    <ActionIcon 
+                        color="red" 
+                        size="sm" 
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(user.id);
+                        }}
+                    >
+                        <IconX/>
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+
+    );
+}
--- a/frontend/src/pages/Forms/index.tsx
+++ b/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, getForms } from "@/services/api";
+import { createForm, createShipment, editForm, editShipment, getForm, getForms } from "@/services/api";
 import { t } from "@/config/i18n";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { IconPlus } from "@tabler/icons-react";
@@ -18,11 +18,20 @@ export function Forms() {
    const isCreate = location.pathname === "/dashboard/forms/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/forms");
    };

    const { isPending, data } = getForms(searchParams);
+    const { data: currentForm } = getForm(Number(editId), { enabled: !!editId });
+    
    const { data: allForms } = getForms();

    const seasons = useMemo(() => {
@@ -159,6 +168,12 @@ export function Forms() {
                filters={searchParams}
                onFilterChange={onFilterChange}
            />
+            <FormModal
+                opened={isEdit} 
+                onClose={closeModal} 
+                currentForm={currentForm} 
+                handleSubmit={handleEditForm}
+            />
            <ScrollArea type="auto">            
                <Table striped>
                    <Table.Thead>
@@ -177,9 +192,7 @@ export function Forms() {
                            data.map((form) => (
                                <FormRow
                                    form={form} 
-                                    isEdit={isEdit} 
-                                    closeModal={closeModal} 
-                                    handleSubmit={handleEditForm}
+                                    key={form.id}
                                />
                            ))
                        }
--- a/frontend/src/pages/Productors/index.tsx
+++ b/frontend/src/pages/Productors/index.tsx
@@ -1,11 +1,11 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { createProductor, editProductor, getProductors } from "@/services/api";
+import { createProductor, editProductor, getProductor, getProductors } from "@/services/api";
 import { IconPlus } from "@tabler/icons-react";
 import ProductorRow from "@/components/Productors/Row";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { ProductorModal } from "@/components/Productors/Modal";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { Productor, ProductorInputs } from "@/services/resources/productors";
 import ProductorsFilters from "@/components/Productors/Filter";

@@ -17,12 +17,20 @@ export default function Productors() {
    const isCreate = location.pathname === "/dashboard/productors/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/productors");
    };

-    const {data: productors, isPending} = getProductors(searchParams);
-    const {data: allProductors } = getProductors();
+    const { data: productors, isPending } = getProductors(searchParams);
+    const { data: currentProductor } = getProductor(Number(editId), { enabled: !!editId });
+    const { data: allProductors } = getProductors();

    const names = useMemo(() => {
        return allProductors?.map((productor: Productor) => (productor.name))
@@ -88,6 +96,12 @@ export default function Productors() {
                    onClose={closeModal} 
                    handleSubmit={handleCreateProductor}
                />
+                <ProductorModal
+                    opened={isEdit}
+                    onClose={closeModal}
+                    currentProductor={currentProductor}
+                    handleSubmit={handleEditProductor}
+                />
            </Group>
            <ProductorsFilters
                names={names || []}
@@ -111,10 +125,7 @@ export default function Productors() {
                            productors.map((productor) => (
                                <ProductorRow 
                                    productor={productor}
-                                    isEdit={isEdit} 
-                                    closeModal={closeModal} 
-                                    handleSubmit={handleEditProductor}
-
+                                    key={productor.id}
                                />
                            ))
                        }
--- a/frontend/src/pages/Products/index.tsx
+++ b/frontend/src/pages/Products/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { createProduct, editProduct, getProducts } from "@/services/api";
+import { createProduct, editProduct, getProduct, getProducts } from "@/services/api";
 import { IconPlus } from "@tabler/icons-react";
 import ProductRow from "@/components/Products/Row";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
@@ -17,12 +17,20 @@ export default function Products() {
    const isCreate = location.pathname === "/dashboard/products/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/products");
    };

-    const {data: products, isPending} = getProducts(searchParams);
-    const {data: allProducts } = getProducts();
+    const { data: products, isPending } = getProducts(searchParams);
+    const { data: currentProduct } = getProduct(Number(editId), { enabled: !!editId });
+    const { data: allProducts } = getProducts();

    const names = useMemo(() => {
        return allProducts?.map((product: Product) => (product.name))
@@ -60,7 +68,6 @@ export default function Products() {
            values.forEach(value => {
                params.append(filter, value);
            });
-
            return params;
        });
    }, [searchParams, setSearchParams])
@@ -94,6 +101,12 @@ export default function Products() {
                filters={searchParams}
                onFilterChange={onFilterChange}
            />
+            <ProductModal
+                opened={isEdit}
+                onClose={closeModal}
+                currentProduct={currentProduct}
+                handleSubmit={handleEditProduct}
+            />
            <ScrollArea type="auto">
                <Table striped>
                    <Table.Thead>
@@ -112,10 +125,7 @@ export default function Products() {
                            products.map((product) => (
                                <ProductRow 
                                    product={product}
-                                    isEdit={isEdit} 
-                                    closeModal={closeModal} 
-                                    handleSubmit={handleEditProduct}
-
+                                    key={product.id}
                                />
                            ))
                        }
--- a/frontend/src/pages/Users/index.tsx
+++ b/frontend/src/pages/Users/index.tsx
@@ -1,5 +1,128 @@
+import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { createUser, editUser, getUser, getUsers } from "@/services/api";
+import { IconPlus } from "@tabler/icons-react";
+import UserRow from "@/components/Users/Row";
+import { useLocation, useNavigate, useSearchParams } from "react-router";
+import { UserModal } from "@/components/Users/Modal";
+import { useCallback, useMemo } from "react";
+import { type User, type UserInputs } from "@/services/resources/users";
+import UsersFilters from "@/components/Users/Filter";
+
 export default function Users() {
+    const [ searchParams, setSearchParams ] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const isCreate = location.pathname === "/dashboard/users/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/users");
+    };
+
+    const {data: users, isPending} = getUsers(searchParams);
+    const { data: currentUser } = getUser(Number(editId), { enabled: !!editId });
+    
+    const {data: allUsers } = getUsers();
+
+    const names = useMemo(() => {
+        return allUsers?.map((user: User) => (user.name))
+            .filter((season, index, array) => array.indexOf(season) === index)
+    }, [allUsers])
+
+    const createUserMutation = createUser();
+    const editUserMutation = editUser();
+
+    const handleCreateUser = useCallback(async (user: UserInputs) => {
+        await createUserMutation.mutateAsync(user);
+        closeModal();
+    }, [createUserMutation]);
+
+    const handleEditUser = useCallback(async (user: UserInputs, id?: number) => {
+        if (!id)
+            return;
+        await editUserMutation.mutateAsync({
+            id: id,
+            user: user
+        });
+        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 (!users || isPending)
+        return <Loader/>
+
    return (
-        <></>
+        <Stack>
+            <Group justify="space-between">
+                <Title order={2}>{t("all users", {capfirst: true})}</Title>
+                <Tooltip label={t("create user", {capfirst: true})}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(`/dashboard/users/create`);
+                        }}
+                    >
+                        <IconPlus/>
+                    </ActionIcon>
+                </Tooltip>
+                <UserModal
+                    opened={isCreate} 
+                    onClose={closeModal} 
+                    handleSubmit={handleCreateUser}
+                />
+                <UserModal
+                    opened={isEdit}
+                    onClose={closeModal}
+                    currentUser={currentUser}
+                    handleSubmit={handleEditUser}
+                />
+            </Group>
+            <UsersFilters
+                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("email", {capfirst: true})}</Table.Th>
+                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {
+                            users.map((user) => (
+                                <UserRow 
+                                    user={user}
+                                    key={user.id}
+                                />
+                            ))
+                        }
+                    </Table.Tbody>
+                </Table>
+            </ScrollArea>
+        </Stack>
    );
 }
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -29,6 +29,8 @@ export const router = createBrowserRouter([
        {path: "products/:id/edit", Component: Products},
        { path: "templates",  Component: Templates },
        { path: "users",  Component: Users },
+        {path: "users/create", Component: Users},
+        {path: "users/:id/edit", Component: Users},
        { path: "forms",  Component: Forms },
        { path: "forms/:id/edit",  Component: Forms },
        { path: "forms/create",  Component: Forms },
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -3,19 +3,9 @@ import { Config } from "@/config/config";
 import type { Form, FormCreate, FormEditPayload } from "@/services/resources/forms";
 import type { Shipment, ShipmentCreate, ShipmentEditPayload } from "@/services/resources/shipments";
 import type { Productor, ProductorCreate, ProductorEditPayload } from "@/services/resources/productors";
-import type { User } from "@/services/resources/users";
+import type { User, UserCreate, UserEditPayload } from "@/services/resources/users";
 import type { Product, ProductCreate, ProductEditPayload } from "./resources/products";

-export function getUsers() {
-    return useQuery<User[]>({
-        queryKey: ['users'],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/users`)
-            .then((res) => res.json())
-        ),
-    });
-}
-
 export function getShipments() {
    return useQuery<Shipment[]>({
        queryKey: ['shipments'],
@@ -65,10 +55,10 @@ export function editShipment() {
    })
 }

-export function getProductors(filters?: URLSearchParams) {
+export function getProductors(filters?: URLSearchParams): UseQueryResult<Productor[], Error> {
    const queryString = filters?.toString()
    return useQuery<Productor[]>({
-        queryKey: ['productors', filters],
+        queryKey: ['productors', queryString],
        queryFn: () => (
            fetch(`${Config.backend_uri}/productors${filters ? `?${queryString}` : ""}`)
            .then((res) => res.json())
@@ -76,13 +66,15 @@ export function getProductors(filters?: URLSearchParams) {
    });
 }

-export function getProductor(id: number) {
+export function getProductor(id?: number, options?: any) {
    return useQuery<Productor>({
        queryKey: ['productor'],
        queryFn: () => (
            fetch(`${Config.backend_uri}/productors/${id}`)
            .then((res) => res.json())
        ),
+        enabled: !!id, 
+        ...options,
    });
 }

@@ -141,13 +133,15 @@ export function deleteProductor() {
    });
 }

-export function getForm(id: number): UseQueryResult<Form, Error> {
+export function getForm(id?: number, options?: any) {
    return useQuery<Form>({
        queryKey: ['form'],
        queryFn: () => (
            fetch(`${Config.backend_uri}/forms/${id}`)
            .then((res) => res.json())
        ),
+        enabled: !!id, 
+        ...options,
    });
 }

@@ -217,13 +211,15 @@ export function editForm() {
    });
 }

-export function getProduct(id: number): UseQueryResult<Product, Error> {
+export function getProduct(id?: number, options?: any) {
    return useQuery<Product>({
        queryKey: ['product'],
        queryFn: () => (
            fetch(`${Config.backend_uri}/products/${id}`)
            .then((res) => res.json())
        ),
+        enabled: !!id, 
+        ...options,
    });
 }

@@ -292,3 +288,81 @@ export function editProduct() {
        }
    });
 }
+
+export function getUser(id?: number, options?: any) {
+    return useQuery<User>({
+        queryKey: ['user'],
+        queryFn: () => (
+            fetch(`${Config.backend_uri}/users/${id}`)
+            .then((res) => res.json())
+        ),
+        enabled: !!id, 
+        ...options,
+    });
+}
+
+export function getUsers(filters?: URLSearchParams): UseQueryResult<User[], Error> {    
+    const queryString = filters?.toString()
+    return useQuery<User[]>({
+        queryKey: ['users', queryString],
+        queryFn: () => (
+            fetch(`${Config.backend_uri}/users${filters ? `?${queryString}` : ""}`)
+            .then((res) => res.json())
+        ),
+    });
+}
+
+export function createUser() {
+    const queryClient = useQueryClient()
+
+    return useMutation({
+        mutationFn: (newUser: UserCreate) => {
+            return fetch(`${Config.backend_uri}/users`, {
+                method: 'POST',
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(newUser),
+            }).then((res) => res.json());
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ['users'] })
+        }
+    });
+}
+
+export function deleteUser() {
+    const queryClient = useQueryClient()
+    return useMutation({
+        mutationFn: (id: number) => {
+            return fetch(`${Config.backend_uri}/users/${id}`, {
+                method: 'DELETE',
+                headers: {
+                    "Content-Type": "application/json"
+                },
+            }).then((res) => res.json());
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ['users'] })
+        }
+    });
+}
+
+export function editUser() {
+    const queryClient = useQueryClient()
+
+    return useMutation({
+        mutationFn: ({id, user}: UserEditPayload) => {
+            return fetch(`${Config.backend_uri}/users/${id}`, {
+                method: 'PUT',
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(user),
+            }).then((res) => res.json());
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ['users'] })
+        }
+    });
+}
--- a/frontend/src/services/resources/users.ts
+++ b/frontend/src/services/resources/users.ts
@@ -6,3 +6,23 @@ export type User = {
    email: string;
    products: Product[];
 }
+
+export type UserInputs = {
+    email: string;
+    name: string;
+}
+
+export type UserCreate ={
+    email: string | null;
+    name: string | null;
+}
+
+export type UserEdit ={
+    email: string | null;
+    name: string | null;
+}
+
+export type UserEditPayload = {
+    user: UserEdit;
+    id: number;
+}