Mop/amap
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add contract pdf generation

Browse Source
This commit is contained in:
Julien Aldon
2026-02-14 23:59:44 +01:00
parent 7e42fbe106
commit f440cef59e
42 changed files with 1299 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/Forms/Card/index.tsx
View File

@@ -16,6 +16,7 @@ export function FormCard({form}: FormCardProps) {
<Box
component={Link}
to={`/form/${form.id}`}
style={{textDecoration: "none", color: "black"}}
>
<Group justify="space-between" wrap="nowrap">
<Title

17
frontend/src/components/Forms/Modal/index.tsx
View File

@@ -1,7 +1,7 @@
import { Button, Group, Modal, Select, TextInput, type ModalBaseProps } from "@mantine/core";
import { Button, Group, Modal, NumberInput, Select, TextInput, type ModalBaseProps } from "@mantine/core";
import { t } from "@/config/i18n";
import { DatePickerInput } from "@mantine/dates";
import { IconCancel } from "@tabler/icons-react";
import { IconCancel, IconEdit, IconPlus } from "@tabler/icons-react";
import { getProductors, getUsers } from "@/services/api";
import { useForm } from "@mantine/form";
import { useEffect, useMemo } from "react";
@@ -20,6 +20,7 @@ export default function FormModal({
}: FormModalProps) {
const {data: productors} = getProductors();
const {data: users} = getUsers();
const form = useForm<FormInputs>({
initialValues: {
name: "",
@@ -28,6 +29,7 @@ export default function FormModal({
end: null,
productor_id: "",
referer_id: "",
minimum_shipment_value: null,
},
validate: {
name: (value) =>
@@ -67,10 +69,9 @@ export default function FormModal({
return (
<Modal
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={currentForm ? t("edit form") : t('create form')}
title={currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}
>
<TextInput
label={t("form name", {capfirst: true})}
@@ -123,6 +124,13 @@ export default function FormModal({
data={productorsSelect || []}
{...form.getInputProps('productor_id')}
/>
<NumberInput
label={t("minimum shipment value", {capfirst: true})}
placeholder={t("minimum shipment value", {capfirst: true})}
description={t("some contracts require a minimum value per shipment, ignore this field if it's not the case", {capfirst: true})}
radius="sm"
{...form.getInputProps('minimum_shipment_value')}
/>
<Group mt="sm" justify="space-between">
<Button
variant="filled"
@@ -137,6 +145,7 @@ export default function FormModal({
<Button
variant="filled"
aria-label={currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}
leftSection={currentForm ? <IconEdit/> : <IconPlus/>}
onClick={() => {
form.validate();
if (form.isValid()) {

28
frontend/src/components/Label/index.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { ActionIcon, Tooltip } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";
export type InputLabelProps = {
label: string;
info: string;
isRequired?: boolean;
}
export function InputLabel({label, info, isRequired}: InputLabelProps) {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<Tooltip label={info}>
<ActionIcon variant="transparent" size="xs" color="gray">
<IconInfoCircle size={16}/>
</ActionIcon>
</Tooltip>
<span>
{label}
{
isRequired ?
<span style={{ color: 'red' }}> *</span> : null
}
</span>
</div>
);
}

13
frontend/src/components/Navbar/index.css
View File

@@ -1,12 +1,13 @@
nav {
display: flex;
justify-content: space-between;
justify-self: left;
width: 50%;
padding: 1rem;
background-color: var(--mantine-color-blue-4);
}
a {
gap: 1em;
.navLink {
color: #fff;
font-weight: bold;
margin-right: 1rem;
text-decoration: none;
}
}

14
frontend/src/components/Navbar/index.tsx
View File

@@ -5,8 +5,18 @@ import "./index.css";
export function Navbar() {
return (
<nav>
<NavLink to="/">{t("home", {capfirst: true})}</NavLink>
<NavLink to="/dashboard/productors">{t("dashboard", {capfirst: true})}</NavLink>
<NavLink
className={"navLink"}
to="/"
>
{t("home", {capfirst: true})}
</NavLink>
<NavLink
className={"navLink"}
to="/dashboard/productors"
>
{t("dashboard", {capfirst: true})}
</NavLink>
</nav>
);
}

71
frontend/src/components/Productors/Modal/index.tsx
View File

@@ -1,8 +1,8 @@
import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
import { Button, Group, Modal, MultiSelect, 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 { Productor, ProductorInputs } from "@/services/resources/productors";
import { PaymentMethods, type Productor, type ProductorInputs } from "@/services/resources/productors";
import { useEffect } from "react";
export type ProductorModalProps = ModalBaseProps & {
@@ -20,18 +20,16 @@ export function ProductorModal({
initialValues: {
name: "",
address: "",
payment: "",
payment_methods: [],
type: "",
},
validate: {
name: (value) =>
!value ? `${t("name", {capfirst: true})} ${t('is required')}` : null,
!value ? `${t("name", {capfirst: true})} ${t("is required")}` : null,
address: (value) =>
!value ? `${t("address", {capfirst: true})} ${t('is required')}` : null,
payment: (value) =>
!value ? `${t("payment", {capfirst: true})} ${t('is required')}` : null,
!value ? `${t("address", {capfirst: true})} ${t("is required")}` : null,
type: (value) =>
!value ? `${t("type", {capfirst: true})} ${t('is required')}` : null
!value ? `${t("type", {capfirst: true})} ${t("is required")}` : null
}
});
@@ -45,7 +43,6 @@ export function ProductorModal({
return (
<Modal
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={t("create productor", {capfirst: true})}
@@ -56,30 +53,65 @@ export function ProductorModal({
placeholder={t("productor name", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('name')}
{...form.getInputProps("name")}
/>
<TextInput
label={t("productor type", {capfirst: true})}
placeholder={t("productor type", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('type')}
{...form.getInputProps("type")}
/>
<TextInput
label={t("productor address", {capfirst: true})}
placeholder={t("productor address", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('address')}
{...form.getInputProps("address")}
/>
<TextInput
label={t("productor payment", {capfirst: true})}
placeholder={t("productor payment", {capfirst: true})}
<MultiSelect
label={t("payment methods", {capfirst: true})}
placeholder={t("payment methods", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('payment')}
data={PaymentMethods}
clearable
searchable
value={form.values.payment_methods.map(p => p.name)}
onChange={(names) => {
form.setFieldValue("payment_methods", names.map(name => {
const existing = form.values.payment_methods.find(p => p.name === name);
return existing ?? {
name,
details: ""
};
}));
}}
/>
{
form.values.payment_methods.map((method, index) => (
<TextInput
key={index}
label={
method.name === "cheque" ?
t("order name", {capfirst: true}) :
method.name === "transfer" ?
t("IBAN") :
t("details", {capfirst: true})
}
placeholder={
method.name === "cheque" ?
t("order name", {capfirst: true}) :
method.name === "transfer" ?
t("IBAN") :
t("details", {capfirst: true})
}
{...form.getInputProps(
`payment_methods.${index}.details`
)}
/>
))
}
<Group mt="sm" justify="space-between">
<Button
variant="filled"
@@ -93,14 +125,15 @@ export function ProductorModal({
>{t("cancel", {capfirst: true})}</Button>
<Button
variant="filled"
aria-label={currentProductor ? t("edit productor", {capfirst: true}) : t('create productor', {capfirst: true})}
aria-label={currentProductor ? t("edit productor", {capfirst: true}) : t("create productor", {capfirst: true})}
onClick={() => {
form.validate();
console.log(form.getValues())
if (form.isValid()) {
handleSubmit(form.getValues(), currentProductor?.id)
}
}}
>{currentProductor ? t("edit productor", {capfirst: true}) : t('create productor', {capfirst: true})}</Button>
>{currentProductor ? t("edit productor", {capfirst: true}) : t("create productor", {capfirst: true})}</Button>
</Group>
</Modal>
);

12
frontend/src/components/Productors/Row/index.tsx
View File

@@ -1,4 +1,4 @@
import { ActionIcon, Table, Tooltip } from "@mantine/core";
import { ActionIcon, Badge, Table, Tooltip } from "@mantine/core";
import { t } from "@/config/i18n";
import { IconEdit, IconX } from "@tabler/icons-react";
import type { Productor } from "@/services/resources/productors";
@@ -21,7 +21,15 @@ export default function ProductorRow({
<Table.Td>{productor.name}</Table.Td>
<Table.Td>{productor.type}</Table.Td>
<Table.Td>{productor.address}</Table.Td>
<Table.Td>{productor.payment}</Table.Td>
<Table.Td>
{
productor.payment_methods.map((value) =>(
<Badge ml="xs">
{t(value.name, {capfirst: true})}
</Badge>
))
}
</Table.Td>
<Table.Td>
<Tooltip label={t("edit productor", {capfirst: true})}>
<ActionIcon

29
frontend/src/components/Products/Modal/index.tsx
View File

@@ -1,10 +1,11 @@
import { Button, Group, Modal, NumberInput, Pill, Select, TextInput, Title, Tooltip, type ModalBaseProps } from "@mantine/core";
import { Button, Group, Modal, NumberInput, Select, TextInput, Title, type ModalBaseProps } from "@mantine/core";
import { t } from "@/config/i18n";
import { useForm } from "@mantine/form";
import { IconCancel, IconInfoCircle } from "@tabler/icons-react";
import { IconCancel } from "@tabler/icons-react";
import { ProductQuantityUnit, productToProductInputs, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
import { useEffect, useMemo } from "react";
import { getProductors } from "@/services/api";
import { InputLabel } from "@/components/Label";
export type ProductModalProps = ModalBaseProps & {
currentProduct?: Product;
@@ -42,7 +43,7 @@ export function ProductModal({
!value ? `${t("type", {capfirst: true})} ${t('is required')}` : null,
productor_id: (value) =>
!value ? `${t("productor", {capfirst: true})} ${t('is required')}` : null
}
},
});
useEffect(() => {
@@ -57,7 +58,6 @@ export function ProductModal({
return (
<Modal
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={t("create product", {capfirst: true})}
@@ -78,19 +78,23 @@ export function ProductModal({
label={t("product name", {capfirst: true})}
placeholder={t("product name", {capfirst: true})}
radius="sm"
withAsterisk
{...form.getInputProps('name')}
/>
<Select
label={t("product type", {capfirst: true})}
label={
<InputLabel
label={t("product type", {capfirst: true})}
info={t("recurrent product is for all shipments, planned product is for a specific shipment (see shipment form)", {capfirst: true})}
isRequired
/>
}
placeholder={t("product type", {capfirst: true})}
radius="sm"
withAsterisk
searchable
clearable
data={[
{value: "1", label: t("planned")},
{value: "2", label: t("recurrent")}
{value: "1", label: t("planned", {capfirst: true})},
{value: "2", label: t("recurrent", {capfirst: true})}
]}
{...form.getInputProps('type')}
/>
@@ -103,7 +107,7 @@ export function ProductModal({
withAsterisk
searchable
clearable
data={Object.entries(ProductUnit).map(([key, value]) => ({value: key, label: t(value)}))}
data={Object.entries(ProductUnit).map(([key, value]) => ({value: key, label: t(value, {capfirst: true})}))}
{...form.getInputProps('unit')}
/>
<Group grow>
@@ -131,7 +135,9 @@ export function ProductModal({
label={t("product quantity unit", {capfirst: true})}
placeholder={t("product quantity unit", {capfirst: true})}
radius="sm"
data={Object.entries(ProductQuantityUnit).map(([key, value]) => ({value: key, label: t(value)}))}
clearable
searchable
data={Object.entries(ProductQuantityUnit).map(([key, value]) => ({value: key, label: t(value, {capfirst: true})}))}
{...form.getInputProps('quantity_unit', {capfirst: true})}
/>
@@ -152,7 +158,6 @@ 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)
}

26
frontend/src/components/Products/Row/index.tsx
View File

@@ -20,11 +20,27 @@ export default function ProductRow({
<Table.Tr key={product.id}>
<Table.Td>{product.name}</Table.Td>
<Table.Td>{t(ProductType[product.type])}</Table.Td>
<Table.Td>{product.price}</Table.Td>
<Table.Td>{product.price_kg}</Table.Td>
<Table.Td>{product.quantity}</Table.Td>
<Table.Td>{product.quantity_unit}</Table.Td>
<Table.Td>{t(ProductUnit[product.unit])}</Table.Td>
<Table.Td>
{
product.price ?
Intl.NumberFormat(
"fr-FR",
{style: "currency", currency: "EUR"}
).format(product.price) : null
}
</Table.Td>
<Table.Td>
{
product.price_kg ?
`${Intl.NumberFormat(
"fr-FR",
{style: "currency", currency: "EUR"}
).format(product.price_kg)}/kg` : null
}
</Table.Td>
<Table.Td>{product.quantity}{product.quantity_unit}</Table.Td>
<Table.Td>{t(ProductUnit[product.unit], {capfirst: true})}</Table.Td>
<Table.Td>
<Tooltip label={t("edit product", {capfirst: true})}>
<ActionIcon

35
frontend/src/components/Shipments/Form/index.tsx
View File

@@ -1,13 +1,15 @@
import { Accordion, Group, Text } from "@mantine/core";
import { Accordion, Group, Stack, Text } from "@mantine/core";
import type { Shipment } from "@/services/resources/shipments";
import { ProductForm } from "@/components/Products/Form";
import type { UseFormReturnType } from "@mantine/form";
import { useMemo } from "react";
import { computePrices } from "@/pages/Contract";
import { t } from "@/config/i18n";
export type ShipmentFormProps = {
inputForm: UseFormReturnType<Record<string, string | number>>;
shipment: Shipment;
minimumPrice?: number | null;
index: number;
}
@@ -15,6 +17,7 @@ export default function ShipmentForm({
shipment,
index,
inputForm,
minimumPrice,
}: ShipmentFormProps) {
const shipmentPrice = useMemo(() => {
const values = Object
@@ -26,18 +29,42 @@ export default function ShipmentForm({
return computePrices(values, shipment.products);
}, [inputForm, shipment.products]);
const priceRequirement = useMemo(() => {
if (!minimumPrice)
return false;
return minimumPrice ? shipmentPrice < minimumPrice : true
}, [shipmentPrice, minimumPrice])
return (
<Accordion.Item value={String(index)}>
<Accordion.Control>
<Group justify="space-between">
<Text>{shipment.name}</Text>
<Text>{
<Text>{shipment.name}</Text>
<Stack gap={0}>
<Text c={priceRequirement ? "red" : "green"}>{
Intl.NumberFormat(
"fr-FR",
{style: "currency", currency: "EUR"}
).format(shipmentPrice)
}</Text>
<Text mr="lg">{shipment.date}</Text>
{
priceRequirement ?
<Text c="red"size="sm">
{`${t("minimum price for this shipment should be at least", {capfirst: true})} ${minimumPrice}€`}
</Text> :
null
}
</Stack>
<Text mr="lg">
{`${
new Date(shipment.date).toLocaleDateString("fr-FR", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})
}`}
</Text>
</Group>
</Accordion.Control>
<Accordion.Panel>

2
frontend/src/components/Shipments/Modal/index.tsx
View File

@@ -63,7 +63,6 @@ export default function ShipmentModal({
return (
<Modal
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={currentShipment ? t("edit shipment") : t('create shipment')}
@@ -93,6 +92,7 @@ export default function ShipmentModal({
<MultiSelect
label={t("shipment products", {capfirst: true})}
placeholder={t("shipment products", {capfirst: true})}
description={t("shipment products is necessary only for planned products (if all products are recurrent leave empty)", {capfirst: true})}
data={productsSelect || []}
clearable
searchable

1
frontend/src/components/Users/Modal/index.tsx
View File

@@ -37,7 +37,6 @@ export function UserModal({
return (
<Modal
w={{base: "100%", md: "80%", lg: "50%"}}
opened={opened}
onClose={onClose}
title={t("create user", {capfirst: true})}

3
frontend/src/main.tsx
View File

@@ -6,6 +6,8 @@ import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import '@mantine/notifications/styles.css';
import { Notifications } from "@mantine/notifications";
const queryClient = new QueryClient()
@@ -13,6 +15,7 @@ createRoot(document.getElementById("root")!).render(
<StrictMode>
<QueryClientProvider client={queryClient}>
<MantineProvider>
<Notifications />
<RouterProvider router={router} />
</MantineProvider>
</QueryClientProvider>

87
frontend/src/pages/Contract/index.tsx
View File

@@ -1,12 +1,12 @@
import { ProductForm } from "@/components/Products/Form";
import ShipmentForm from "@/components/Shipments/Form";
import { t } from "@/config/i18n";
import { getForm } from "@/services/api";
import { createContract, getForm } from "@/services/api";
import { type Product } from "@/services/resources/products";
import { Accordion, Button, Group, List, Loader, Overlay, Stack, Text, TextInput, Title } from "@mantine/core";
import { useForm } from "@mantine/form";
import { IconMail, IconPhone, IconUser } from "@tabler/icons-react";
import { useMemo } from "react";
import { useCallback, useMemo, useRef } from "react";
import { useParams } from "react-router";
export function computePrices(values: [string, any][], products: Product[], nbShipment?: number) {
@@ -15,7 +15,7 @@ export function computePrices(values: [string, any][], products: Product[], nbSh
const productId = Number(keyArray[keyArray.length - 1]);
const product = products.find((product) => product.id === productId);
if (!product) {
return 0;
return prev + 0;
}
const isRecurent = key.includes("recurrent") && nbShipment;
const productPrice = Number(product.price || product.price_kg);
@@ -29,6 +29,12 @@ export function Contract() {
const { id } = useParams();
const { data: form } = getForm(Number(id), {enabled: !!id});
const inputForm = useForm<Record<string, number | string>>({
initialValues: {
firstname: "",
lastname: "",
email: "",
phone: "",
},
validate: {
firstname: (value) => !value ? `${t("a firstname", {capfirst: true})} ${t("is required")}` : null,
lastname: (value) => !value ? `${t("a lastname", {capfirst: true})} ${t("is required")}` : null,
@@ -37,6 +43,8 @@ export function Contract() {
}
});
const createContractMutation = createContract();
const productsRecurent = useMemo(() => {
return form?.productor?.products.filter((el) => el.type === "2")
}, [form]);
@@ -50,10 +58,73 @@ export function Contract() {
}, [form])
const price = useMemo(() => {
if (!allProducts) {
return 0;
}
const values = Object.entries(inputForm.getValues());
return computePrices(values, allProducts, form?.shipments.length);
}, [inputForm, allProducts, form?.shipments]);
const inputRefs: Record<string, React.RefObject<HTMLInputElement | null>> = {
firstname: useRef<HTMLInputElement>(null),
lastname: useRef<HTMLInputElement>(null),
email: useRef<HTMLInputElement>(null),
phone: useRef<HTMLInputElement>(null)
}
const isShipmentsMinimumValue = useCallback(() => {
const shipmentErrors = form.shipments
.map((shipment) => {
const total = computePrices(
Object.entries(inputForm.getValues()),
shipment.products
);
if (total < (form?.minimum_shipment_value || 0)) {
return shipment.id; // mark shipment as invalid
}
return null;
})
.filter(Boolean);
return shipmentErrors.length === 0;
}, [form]);
const withDefaultValues = useCallback((values: Record<string, number | string>) => {
const result = {...values};
productsRecurent.forEach((product: Product) => {
const key = `recurrent-${product.id}`;
if (result[key] === undefined || result[key] === "") {
result[key] = 0;
}
});
form.shipments.forEach((shipment) => {
shipment.products.forEach((product) => {
const key = `planned-${shipment.id}-${product.id}`;
if (result[key] === undefined || result[key] === "") {
result[key] = 0;
}
})
});
return result;
}, [productsRecurent, form]);
const handleSubmit = useCallback(async () => {
const errors = inputForm.validate();
if (inputForm.isValid() && isShipmentsMinimumValue()) {
const contract = {
form_id: form.id,
contract: withDefaultValues(inputForm.getValues()),
}
await createContractMutation.mutateAsync(contract);
} else {
const firstErrorField = Object.keys(errors.errors)[0];
const ref = inputRefs[firstErrorField];
ref?.current?.scrollIntoView({behavior: "smooth", block: "center"});
}
}, [inputForm, inputRefs, isShipmentsMinimumValue, form]);
if (!form)
return <Loader/>;
@@ -74,6 +145,7 @@ export function Contract() {
required
leftSection={<IconUser/>}
{...inputForm.getInputProps('firstname')}
ref={inputRefs.firstname}
/>
<TextInput
label={t("lastname", {capfirst: true})}
@@ -83,6 +155,7 @@ export function Contract() {
required
leftSection={<IconUser/>}
{...inputForm.getInputProps('lastname')}
ref={inputRefs.lastname}
/>
</Group>
<Group grow>
@@ -94,6 +167,7 @@ export function Contract() {
required
leftSection={<IconMail/>}
{...inputForm.getInputProps('email')}
ref={inputRefs.email}
/>
<TextInput
label={t("phone", {capfirst: true})}
@@ -103,6 +177,7 @@ export function Contract() {
required
leftSection={<IconPhone/>}
{...inputForm.getInputProps('phone')}
ref={inputRefs.phone}
/>
</Group>
<Title order={3}>{t('shipments', {capfirst: true})}</Title>
@@ -149,6 +224,7 @@ export function Contract() {
{
shipments.map((shipment, index) => (
<ShipmentForm
minimumPrice={form.minimum_shipment_value}
shipment={shipment}
index={index}
inputForm={inputForm}
@@ -180,10 +256,7 @@ export function Contract() {
</Text>
<Button
aria-label={t('submit contract')}
onClick={() => {
inputForm.validate();
console.log(inputForm.getValues())
}}
onClick={handleSubmit}
>
{t('submit contract')}
</Button>

2
frontend/src/pages/Dashboard/index.tsx
View File

@@ -19,7 +19,7 @@ export default function Dashboard() {
<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="templates">{t("templates", {capfirst: true})}</Tabs.Tab> */}
<Tabs.Tab value="users">{t("users", {capfirst: true})}</Tabs.Tab>
</Tabs.List>
<Outlet/>

19
frontend/src/pages/Forms/index.tsx
View File

@@ -8,6 +8,7 @@ import FormModal from "@/components/Forms/Modal";
import FormRow from "@/components/Forms/Row";
import type { Form, FormInputs } from "@/services/resources/forms";
import FilterForms from "@/components/Forms/Filter";
import { notifications } from "@mantine/notifications";
export function Forms() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -52,11 +53,16 @@ export function Forms() {
await createFormMutation.mutateAsync({
...form,
start: form?.start,
end: form?.start,
end: form?.end,
productor_id: Number(form.productor_id),
referer_id: Number(form.referer_id)
referer_id: Number(form.referer_id),
minimum_shipment_value: Number(form.minimum_shipment_value),
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created form", {capfirst: true}),
});
}, [createFormMutation]);
const handleEditForm = useCallback(async (form: FormInputs, id?: number) => {
@@ -67,12 +73,17 @@ export function Forms() {
form: {
...form,
start: form.start,
end: form.start,
end: form.end,
productor_id: Number(form.productor_id),
referer_id: Number(form.referer_id)
referer_id: Number(form.referer_id),
minimum_shipment_value: Number(form.minimum_shipment_value),
}
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited form", {capfirst: true}),
});
}, [editFormMutation]);
const onFilterChange = useCallback((

13
frontend/src/pages/Home/index.tsx
View File

@@ -1,9 +1,8 @@
import { Flex } from "@mantine/core";
import { t } from "@/config/i18n";
import { useParams } from "react-router";
import { Flex, Text } from "@mantine/core";
import { getForms } from "@/services/api";
import { FormCard } from "@/components/Forms/Card";
import type { Form } from "@/services/resources/forms";
import { t } from "@/config/i18n";
export function Home() {
const { data: allForms } = getForms();
@@ -11,9 +10,11 @@ export function Home() {
return (
<Flex gap="md" wrap="wrap" justify="center">
{
allForms?.map((form: Form) => (
<FormCard form={form} key={form.id}/>
))
allForms && allForms?.length > 0 ?
allForms.map((form: Form) => (
<FormCard form={form} key={form.id}/>
)) :
<Text mt="lg" size="lg">{t("there is no contract for now",{capfirst: true})}</Text>
}
</Flex>
);

24
frontend/src/pages/NotFound/index.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { t } from "@/config/i18n";
import { ActionIcon, Stack, Text, Title, Tooltip } from "@mantine/core";
import { IconHome } from "@tabler/icons-react";
import { useNavigate } from "react-router";
export function NotFound() {
const navigate = useNavigate()
return (
<Stack justify="center" align="center">
<Title order={2}>{t("oops", {capfirst: true})}</Title>
<Text>{t('this page does not exists', {capfirst: true})}</Text>
<Tooltip label={t('back to home', {capfirst: true})}>
<ActionIcon
aria-label={t("back to home", {capfirst: true})}
onClick={() => {
navigate('/')
}}
>
<IconHome/>
</ActionIcon>
</Tooltip>
</Stack>
);
}

11
frontend/src/pages/Productors/index.tsx
View File

@@ -8,6 +8,7 @@ import { ProductorModal } from "@/components/Productors/Modal";
import { useCallback, useMemo } from "react";
import type { Productor, ProductorInputs } from "@/services/resources/productors";
import ProductorsFilters from "@/components/Productors/Filter";
import { notifications } from "@mantine/notifications";
export default function Productors() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -50,6 +51,10 @@ export default function Productors() {
...productor
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created productor", {capfirst: true}),
});
}, [createProductorMutation]);
const handleEditProductor = useCallback(async (productor: ProductorInputs, id?: number) => {
@@ -60,6 +65,10 @@ export default function Productors() {
productor: productor
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited productor", {capfirst: true}),
});
}, []);
const onFilterChange = useCallback((values: string[], filter: string) => {
@@ -116,7 +125,7 @@ export default function Productors() {
<Table.Th>{t("name", {capfirst: true})}</Table.Th>
<Table.Th>{t("type", {capfirst: true})}</Table.Th>
<Table.Th>{t("address", {capfirst: true})}</Table.Th>
<Table.Th>{t("payment", {capfirst: true})}</Table.Th>
<Table.Th>{t("payment methods", {capfirst: true})}</Table.Th>
<Table.Th>{t("actions", {capfirst: true})}</Table.Th>
</Table.Tr>
</Table.Thead>

10
frontend/src/pages/Products/index.tsx
View File

@@ -8,6 +8,7 @@ import { ProductModal } from "@/components/Products/Modal";
import { useCallback, useMemo } from "react";
import { productCreateFromProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
import ProductsFilters from "@/components/Products/Filter";
import { notifications } from "@mantine/notifications";
export default function Products() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -48,6 +49,10 @@ export default function Products() {
const handleCreateProduct = useCallback(async (product: ProductInputs) => {
await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created product", {capfirst: true}),
});
}, [createProductMutation]);
const handleEditProduct = useCallback(async (product: ProductInputs, id?: number) => {
@@ -58,6 +63,10 @@ export default function Products() {
product: productCreateFromProductInputs(product)
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited product", {capfirst: true}),
});
}, []);
const onFilterChange = useCallback((values: string[], filter: string) => {
@@ -116,7 +125,6 @@ export default function Products() {
<Table.Th>{t("price", {capfirst: true})}</Table.Th>
<Table.Th>{t("priceKg", {capfirst: true})}</Table.Th>
<Table.Th>{t("quantity", {capfirst: true})}</Table.Th>
<Table.Th>{t("quantity unit", {capfirst: true})}</Table.Th>
<Table.Th>{t("unit", {capfirst: true})}</Table.Th>
<Table.Th>{t("actions", {capfirst: true})}</Table.Th>
</Table.Tr>

9
frontend/src/pages/Shipments/index.tsx
View File

@@ -8,6 +8,7 @@ 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";
import { notifications } from "@mantine/notifications";
export default function Shipments() {
const [ searchParams, setSearchParams ] = useSearchParams();
@@ -43,6 +44,10 @@ export default function Shipments() {
const handleCreateShipment = useCallback(async (shipment: ShipmentInputs) => {
await createShipmentMutation.mutateAsync(shipmentCreateFromShipmentInputs(shipment));
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created shipment", {capfirst: true}),
});
}, [createShipmentMutation]);
const handleEditShipment = useCallback(async (shipment: ShipmentInputs, id?: number) => {
@@ -53,6 +58,10 @@ export default function Shipments() {
shipment: shipmentCreateFromShipmentInputs(shipment)
});
closeModal();
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited shipment", {capfirst: true}),
});
}, []);
const onFilterChange = useCallback((values: string[], filter: string) => {

14
frontend/src/pages/Users/index.tsx
View File

@@ -42,18 +42,18 @@ export default function Users() {
const editUserMutation = editUser();
const handleCreateUser = useCallback(async (user: UserInputs) => {
await createUserMutation.mutateAsync(user);
closeModal();
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();
await editUserMutation.mutateAsync({
id: id,
user: user
});
closeModal();
}, []);
const onFilterChange = useCallback((values: string[], filter: string) => {

6
frontend/src/router.tsx
View File

@@ -8,17 +8,17 @@ import { Forms } from "@/pages/Forms";
import Dashboard from "@/pages/Dashboard";
import Productors from "@/pages/Productors";
import Products from "@/pages/Products";
import Templates from "@/pages/Templates";
import Users from "@/pages/Users";
import Shipments from "./pages/Shipments";
import { Contract } from "./pages/Contract";
import { NotFound } from "./pages/NotFound";
// import { CreateForms } from "@/pages/Forms/CreateForm";
export const router = createBrowserRouter([
{
path: "/",
Component: Root,
// errorElement: <NotFound />,
errorElement: <NotFound />,
children: [
{ index: true, Component: Home },
{ path: "/forms", Component: Forms },
@@ -31,7 +31,7 @@ export const router = createBrowserRouter([
{ path: "products", Component: Products },
{ path: "products/create", Component: Products },
{ path: "products/:id/edit", Component: Products },
{ path: "templates", Component: Templates },
// { path: "templates", Component: Templates },
{ path: "users", Component: Users },
{ path: "users/create", Component: Users },
{ path: "users/:id/edit", Component: Users },

183
frontend/src/services/api.ts
View File

@@ -5,6 +5,9 @@ import type { Shipment, ShipmentCreate, ShipmentEditPayload } from "@/services/r
import type { Productor, ProductorCreate, ProductorEditPayload } from "@/services/resources/productors";
import type { User, UserCreate, UserEditPayload } from "@/services/resources/users";
import type { Product, ProductCreate, ProductEditPayload } from "./resources/products";
import type { ContractCreate } from "./resources/contracts";
import { notifications } from "@mantine/notifications";
import { t } from "@/config/i18n";
export function getShipments(filters?: URLSearchParams): UseQueryResult<Shipment[], Error> {
const queryString = filters?.toString()
@@ -43,7 +46,18 @@ export function createShipment() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created shipment", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['shipments'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing shipment`, {capfirst: true}),
color: "red"
});
}
})
}
@@ -62,7 +76,18 @@ export function editShipment() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited shipment", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['shipments'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing shipment`, {capfirst: true}),
color: "red"
});
}
})
}
@@ -79,7 +104,18 @@ export function deleteShipment() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully deleted shipment", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['shipments'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error deleting shipment`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -121,7 +157,18 @@ export function createProductor() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created productor", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['productors'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing productor`, {capfirst: true}),
color: "red"
});
}
})
}
@@ -140,7 +187,18 @@ export function editProductor() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited productor", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['productors'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing productor`, {capfirst: true}),
color: "red"
});
}
})
}
@@ -157,7 +215,18 @@ export function deleteProductor() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully deleted productor", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['productors'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error deleting productor`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -216,7 +285,18 @@ export function deleteForm() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully deleted form", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['forms'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error deleting form`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -235,7 +315,18 @@ export function editForm() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited form", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['forms'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing form`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -277,7 +368,18 @@ export function createProduct() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created product", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['products'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing product`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -294,7 +396,18 @@ export function deleteProduct() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully deleted product", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['products'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error deleting product`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -313,7 +426,18 @@ export function editProduct() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited product", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['products'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing product`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -355,7 +479,18 @@ export function createUser() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully created user", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['users'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing user`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -372,7 +507,18 @@ export function deleteUser() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully deleted user", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['users'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error deleting user`, {capfirst: true}),
color: "red"
});
}
});
}
@@ -391,7 +537,44 @@ export function editUser() {
}).then((res) => res.json());
},
onSuccess: async () => {
notifications.show({
title: t("success", {capfirst: true}),
message: t("successfully edited user", {capfirst: true}),
});
await queryClient.invalidateQueries({ queryKey: ['users'] })
},
onError: (error: any) => {
notifications.show({
title: t("error", {capfirst: true}),
message: error?.message || t(`error editing user`, {capfirst: true}),
color: "red"
});
}
});
}
export function createContract() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: (newContract: ContractCreate) => {
return fetch(`${Config.backend_uri}/contracts`, {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(newContract),
}).then(async (res) => await res.blob());
},
onSuccess: async (pdfBlob) => {
const url = URL.createObjectURL(pdfBlob);
const link = document.createElement("a");
link.href = url;
link.download = `contract.pdf`;
link.click();
URL.revokeObjectURL(url);
await queryClient.invalidateQueries({ queryKey: ["contracts"] });
}
});
}

4
frontend/src/services/resources/contracts.ts Normal file
View File

@@ -0,0 +1,4 @@
export type ContractCreate = {
form_id: number;
contract: Record<string, string | number | null>;
}

6
frontend/src/services/resources/forms.ts
View File

@@ -1,5 +1,5 @@
import type { Productor } from "@/services/resources/productors";
import type { Shipment, ShipmentInputs } from "@/services/resources/shipments";
import type { Shipment } from "@/services/resources/shipments";
import type { User } from "@/services/resources/users";
export type Form = {
@@ -11,6 +11,7 @@ export type Form = {
productor: Productor;
referer: User;
shipments: Shipment[];
minimum_shipment_value: number | null;
}
export type FormCreate = {
@@ -20,6 +21,7 @@ export type FormCreate = {
end: string;
productor_id: number;
referer_id: number;
minimum_shipment_value: number | null;
}
export type FormEdit = {
@@ -29,6 +31,7 @@ export type FormEdit = {
end?: string | null;
productor_id?: number | null;
referer_id?: number | null;
minimum_shipment_value: number | null;
}
export type FormEditPayload = {
@@ -43,4 +46,5 @@ export type FormInputs = {
end: string | null;
productor_id: string;
referer_id: string;
minimum_shipment_value: number | string | null;
}

19
frontend/src/services/resources/productors.ts
View File

@@ -1,10 +1,21 @@
import { t } from "@/config/i18n";
import type { Product } from "./products";
export const PaymentMethods = [
{value: "cheque", label: t("cheque", {capfirst: true})},
{value: "transfer", label: t("transfer", {capfirst: true})},
]
export type PaymentMethod = {
name: string;
details: string;
}
export type Productor = {
id: number;
name: string;
address: string;
payment: string;
payment_methods: PaymentMethod[];
type: string;
products: Product[]
}
@@ -12,22 +23,22 @@ export type Productor = {
export type ProductorCreate = {
name: string;
address: string;
payment: string;
payment_methods: PaymentMethod[];
type: string;
}
export type ProductorEdit = {
name: string | null;
address: string | null;
payment: string | null;
payment_methods: PaymentMethod[];
type: string | null;
}
export type ProductorInputs = {
name: string;
address: string;
payment: string;
type: string;
payment_methods: PaymentMethod[];
}
export type ProductorEditPayload = {

12
frontend/src/services/resources/products.ts
View File

@@ -61,9 +61,9 @@ export type ProductInputs = {
productor_id: string | null;
name: string;
unit: string | null;
price: number | null;
price_kg: number | null;
quantity: number | null;
price: number | string | null;
price_kg: number | string | null;
quantity: number | string | null;
quantity_unit: string | null;
type: string | null;
}
@@ -91,9 +91,9 @@ export function productCreateFromProductInputs(productInput: ProductInputs): Pro
productor_id: Number(productInput.productor_id)!,
name: productInput.name,
unit: productInput.unit!,
price: productInput.price!,
price_kg: productInput.price_kg,
quantity: productInput.quantity,
price: productInput.price === "" || !productInput.price ? null : Number(productInput.price),
price_kg: productInput.price_kg === "" || !productInput.price_kg ? null : Number(productInput.price_kg),
quantity: productInput.quantity === "" || !productInput.quantity ? null : Number(productInput.quantity),
quantity_unit: productInput.quantity_unit,
type: productInput.type!,
}