549 lines
18 KiB
TypeScript
549 lines
18 KiB
TypeScript
|
import { Controller, useForm } from "react-hook-form";
|
|||
|
|
import { Grid } from "../../components/Grid/Grid";
|
|||
|
|
import { FormApiBasedAutoComplete } from "../../components/FormItems/FormApiBasedAutoComplete";
|
|||
|
|
import {
|
|||
|
|
zValidateAutoComplete,
|
|||
|
|
zValidateAutoCompleteOptional,
|
|||
|
|
zValidateNumber,
|
|||
|
|
zValidateString,
|
|||
|
|
} from "../../data/getFormTypeErrors";
|
|||
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|||
|
|
import { z } from "zod";
|
|||
|
|
import AutoComplete from "../../components/AutoComplete/AutoComplete";
|
|||
|
|
import { getMonthsList } from "../../data/getMonths";
|
|||
|
|
import { RadioGroup } from "../../components/RadioButton/RadioGroup";
|
|||
|
|
import { useEffect, useRef, useState } from "react";
|
|||
|
|
import ToggleButton from "../../components/ToggleButton/ToggleButton";
|
|||
|
|
import Typography from "../../components/Typography/Typography";
|
|||
|
|
import Textfield from "../../components/Textfeild/Textfeild";
|
|||
|
|
import { useApiRequest } from "../../utils/useApiRequest";
|
|||
|
|
|
|||
|
|
type Props = {
|
|||
|
|
item: any;
|
|||
|
|
getData: () => void;
|
|||
|
|
onSubmit: (data: any) => void;
|
|||
|
|
setFormRef: (ref: HTMLFormElement | null) => void;
|
|||
|
|
visible: boolean;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const saleTypes = [
|
|||
|
|
{ value: "gov", label: "دولتی" },
|
|||
|
|
{ value: "free", label: "آزاد" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const groupTypes = [
|
|||
|
|
{ value: "روستایی", key: "rural", disabled: false },
|
|||
|
|
{ value: "صنعتی", key: "industrial", disabled: false },
|
|||
|
|
{ value: "عشایری", key: "nomadic", disabled: true },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const posSaleTypes = [
|
|||
|
|
{ value: "هردو", key: "all", disabled: false },
|
|||
|
|
{ value: "بر اساس وزن", key: "weight", disabled: false },
|
|||
|
|
{ value: "بر اساس تعداد راس دام", key: "count", disabled: false },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export const QuotaLevel1 = ({ item, onSubmit, setFormRef, visible }: Props) => {
|
|||
|
|
const [hasDistributionLimit, setHasDistributionLimit] = useState(
|
|||
|
|
item?.distribution_mode?.length ? true : false
|
|||
|
|
);
|
|||
|
|
const internalRef = useRef<HTMLFormElement>(null);
|
|||
|
|
const [livestockTypes, setLivestockTypes] = useState<
|
|||
|
|
Array<{
|
|||
|
|
livestock_group: string;
|
|||
|
|
livestock_type: any;
|
|||
|
|
weight_type: any;
|
|||
|
|
quantity_kg: number;
|
|||
|
|
fa: string;
|
|||
|
|
}>
|
|||
|
|
>([]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (visible) {
|
|||
|
|
setFormRef(internalRef.current);
|
|||
|
|
}
|
|||
|
|
}, [visible]);
|
|||
|
|
|
|||
|
|
const schema = z.object({
|
|||
|
|
product: zValidateNumber("محصول"),
|
|||
|
|
month_choices: zValidateAutoComplete("سهمیه ماه"),
|
|||
|
|
distribution_mode: hasDistributionLimit
|
|||
|
|
? zValidateAutoComplete("محدودیت توزیع دوره")
|
|||
|
|
: zValidateAutoCompleteOptional(),
|
|||
|
|
sale_license: zValidateAutoComplete("مجوز فروش"),
|
|||
|
|
pos_sale_type: zValidateString("نوع فروش در دستگاه"),
|
|||
|
|
sale_type: zValidateString("نوع فروش"),
|
|||
|
|
group: zValidateAutoComplete("گروه"),
|
|||
|
|
quota_weight: zValidateNumber("وزن سهمیه"),
|
|||
|
|
sale_unit: zValidateNumber("نوع مولفه"),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
type FormValues = z.infer<typeof schema>;
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
control,
|
|||
|
|
handleSubmit,
|
|||
|
|
setValue,
|
|||
|
|
getValues,
|
|||
|
|
trigger,
|
|||
|
|
formState: { errors },
|
|||
|
|
} = useForm<FormValues>({
|
|||
|
|
resolver: zodResolver(schema),
|
|||
|
|
defaultValues: {
|
|||
|
|
product: item?.product ? item?.product?.product_id : "",
|
|||
|
|
month_choices: item?.month_choices || [],
|
|||
|
|
distribution_mode: item?.distribution_mode || [],
|
|||
|
|
sale_license: item?.sale_license || [],
|
|||
|
|
sale_type: item?.sale_type || "gov",
|
|||
|
|
group: item?.group || [],
|
|||
|
|
pos_sale_type: item?.pos_sale_type || "all",
|
|||
|
|
quota_weight: item?.quota_weight || 0,
|
|||
|
|
sale_unit: item?.sale_unit ? item?.sale_unit?.id : "",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { data: livestockData } = useApiRequest({
|
|||
|
|
api: "/livestock/web/api/v1/livestock_type/",
|
|||
|
|
method: "get",
|
|||
|
|
params: { page: 1, page_size: 100 },
|
|||
|
|
queryKey: ["livestockTypes"],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (livestockData?.results) {
|
|||
|
|
const getQuantity = (allocate: any, group: string) => {
|
|||
|
|
const result = item?.livestock_allocations?.find(
|
|||
|
|
(option: any) =>
|
|||
|
|
option?.livestock_type?.weight_type === allocate?.weight_type &&
|
|||
|
|
option?.livestock_group === group &&
|
|||
|
|
option?.livestock_type?.name === allocate?.name
|
|||
|
|
);
|
|||
|
|
return result?.quantity_kg || 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formattedData = livestockData.results.flatMap((item: any) => [
|
|||
|
|
{
|
|||
|
|
livestock_group: "rural",
|
|||
|
|
livestock_type: item.id,
|
|||
|
|
weight_type: item.weight_type,
|
|||
|
|
quantity_kg: getQuantity(item, "rural"),
|
|||
|
|
fa: item.name,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
livestock_group: "industrial",
|
|||
|
|
livestock_type: item.id,
|
|||
|
|
weight_type: item.weight_type,
|
|||
|
|
quantity_kg: getQuantity(item, "industrial"),
|
|||
|
|
fa: item.name,
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
setLivestockTypes(formattedData);
|
|||
|
|
}
|
|||
|
|
}, [livestockData, item]);
|
|||
|
|
|
|||
|
|
const handleQuantityChange = (index: number, value: number) => {
|
|||
|
|
setLivestockTypes((prev) => {
|
|||
|
|
const newTypes = [...prev];
|
|||
|
|
newTypes[index] = { ...newTypes[index], quantity_kg: value };
|
|||
|
|
return newTypes;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const findLivestockIndex = (
|
|||
|
|
group: string,
|
|||
|
|
weightType: string,
|
|||
|
|
fa: string
|
|||
|
|
) => {
|
|||
|
|
return livestockTypes.findIndex(
|
|||
|
|
(item) =>
|
|||
|
|
item.livestock_group === group &&
|
|||
|
|
item.weight_type === weightType &&
|
|||
|
|
item.fa === fa
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmitForm = (data: FormValues) => {
|
|||
|
|
onSubmit({ ...data, livestockTypes, hasDistributionLimit });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<form ref={internalRef} onSubmit={handleSubmit(handleSubmitForm)}>
|
|||
|
|
<Grid container column>
|
|||
|
|
<Grid className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 mt-8 gap-4 items-start">
|
|||
|
|
<Controller
|
|||
|
|
name="product"
|
|||
|
|
control={control}
|
|||
|
|
render={() => (
|
|||
|
|
<>
|
|||
|
|
<FormApiBasedAutoComplete
|
|||
|
|
defaultKey={item?.product?.product_id}
|
|||
|
|
title="انتخاب محصول"
|
|||
|
|
api={`product/web/api/v1/product`}
|
|||
|
|
keyField="id"
|
|||
|
|
valueField="name"
|
|||
|
|
error={!!errors.product}
|
|||
|
|
errorMessage={errors.product?.message}
|
|||
|
|
onChange={(r) => {
|
|||
|
|
setValue("product", r);
|
|||
|
|
trigger("product");
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Controller
|
|||
|
|
name="quota_weight"
|
|||
|
|
control={control}
|
|||
|
|
render={({ field }) => (
|
|||
|
|
<Textfield
|
|||
|
|
formattedNumber
|
|||
|
|
fullWidth
|
|||
|
|
placeholder="وزن سهمیه"
|
|||
|
|
value={field.value}
|
|||
|
|
onChange={field.onChange}
|
|||
|
|
error={!!errors.quota_weight}
|
|||
|
|
helperText={errors.quota_weight?.message}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Controller
|
|||
|
|
name="month_choices"
|
|||
|
|
control={control}
|
|||
|
|
render={({ field }) => (
|
|||
|
|
<AutoComplete
|
|||
|
|
data={getMonthsList}
|
|||
|
|
selectField
|
|||
|
|
selectedKeys={field.value}
|
|||
|
|
multiselect
|
|||
|
|
onChange={(keys: (string | number)[]) => {
|
|||
|
|
setValue("month_choices", keys);
|
|||
|
|
trigger("month_choices");
|
|||
|
|
}}
|
|||
|
|
error={!!errors.month_choices}
|
|||
|
|
helperText={errors.month_choices?.message}
|
|||
|
|
title="سهمیه ماه"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Controller
|
|||
|
|
name="sale_license"
|
|||
|
|
control={control}
|
|||
|
|
render={({ field }) => (
|
|||
|
|
<AutoComplete
|
|||
|
|
selectField
|
|||
|
|
data={getMonthsList}
|
|||
|
|
selectedKeys={field.value}
|
|||
|
|
multiselect
|
|||
|
|
onChange={(keys: (string | number)[]) => {
|
|||
|
|
setValue("sale_license", keys);
|
|||
|
|
trigger("sale_license");
|
|||
|
|
}}
|
|||
|
|
error={!!errors.sale_license}
|
|||
|
|
helperText={errors.sale_license?.message}
|
|||
|
|
title="مجوز فروش"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Grid
|
|||
|
|
container
|
|||
|
|
className="p-2 border-1 rounded-lg items-center border-gray-200"
|
|||
|
|
>
|
|||
|
|
<Controller
|
|||
|
|
name="sale_type"
|
|||
|
|
control={control}
|
|||
|
|
render={({ field }) => (
|
|||
|
|
<RadioGroup
|
|||
|
|
groupTitle="نوع فروش"
|
|||
|
|
className="mr-2"
|
|||
|
|
direction="row"
|
|||
|
|
options={saleTypes}
|
|||
|
|
value={field.value}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
setValue("sale_type", e.target.value);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
</Grid>
|
|||
|
|
|
|||
|
|
<Controller
|
|||
|
|
name="group"
|
|||
|
|
control={control}
|
|||
|
|
render={({ field }) => (
|
|||
|
|
<AutoComplete
|
|||
|
|
selectField
|
|||
|
|
data={groupTypes}
|
|||
|
|
selectedKeys={field.value}
|
|||
|
|
multiselect
|
|||
|
|
onChange={(keys: (string | number)[]) => {
|
|||
|
|
setValue("group", keys);
|
|||
|
|
trigger("group");
|
|||
|
|
}}
|
|||
|
|
error={!!errors.group}
|
|||
|
|
helperText={errors.group?.message}
|
|||
|
|
title="گروه"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Controller
|
|||
|
|
name="product"
|
|||
|
|
control={control}
|
|||
|
|
render={() => (
|
|||
|
|
<>
|
|||
|
|
<FormApiBasedAutoComplete
|
|||
|
|
selectField
|
|||
|
|
defaultKey={item?.sale_unit?.id}
|
|||
|
|
title="نوع مولفه"
|
|||
|
|
api={`product/web/api/v1/sale_unit`}
|
|||
|
|
keyField="id"
|
|||
|
|
valueField="unit"
|
|||
|
|
error={!!errors.sale_unit}
|
|||
|
|
errorMessage={errors.sale_unit?.message}
|
|||
|
|
onChange={(r) => {
|
|||
|
|
setValue("sale_unit", r);
|
|||
|
|
trigger("sale_unit");
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
<Grid
|
|||
|
|
container
|
|||
|
|
column
|
|||
|
|
className="p-2 border-1 rounded-lg border-gray-200 items-start gap-2"
|
|||
|
|
>
|
|||
|
|
<ToggleButton
|
|||
|
|
type="button"
|
|||
|
|
isActive={hasDistributionLimit}
|
|||
|
|
onClick={() => {
|
|||
|
|
if (!hasDistributionLimit) {
|
|||
|
|
setValue("distribution_mode", []);
|
|||
|
|
trigger("distribution_mode");
|
|||
|
|
}
|
|||
|
|
setHasDistributionLimit(!hasDistributionLimit);
|
|||
|
|
}}
|
|||
|
|
title="محدودیت توزیع دوره"
|
|||
|
|
aria-label="Toggle like"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{hasDistributionLimit && (
|
|||
|
|
<Controller
|
|||
|
|
name="distribution_mode"
|
|||
|
|
control={control}
|
|||
|
|
render={({ field }) => (
|
|||
|
|
<AutoComplete
|
|||
|
|
data={getMonthsList}
|
|||
|
|
selectedKeys={field.value || []}
|
|||
|
|
multiselect
|
|||
|
|
onChange={(keys: (string | number)[]) => {
|
|||
|
|
setValue("distribution_mode", keys);
|
|||
|
|
trigger("distribution_mode");
|
|||
|
|
}}
|
|||
|
|
error={!!errors.distribution_mode}
|
|||
|
|
helperText={errors.distribution_mode?.message}
|
|||
|
|
title="محدودیت توزیع دوره"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</Grid>
|
|||
|
|
<Controller
|
|||
|
|
name="pos_sale_type"
|
|||
|
|
control={control}
|
|||
|
|
render={({ field }) => (
|
|||
|
|
<AutoComplete
|
|||
|
|
selectField
|
|||
|
|
data={posSaleTypes}
|
|||
|
|
selectedKeys={[field.value]}
|
|||
|
|
onChange={(keys: (string | number)[]) => {
|
|||
|
|
setValue("pos_sale_type", keys.toString());
|
|||
|
|
trigger("pos_sale_type");
|
|||
|
|
}}
|
|||
|
|
error={!!errors.pos_sale_type}
|
|||
|
|
helperText={errors.pos_sale_type?.message}
|
|||
|
|
title="نوع فروش در دستگاه"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
</Grid>
|
|||
|
|
|
|||
|
|
{getValues("group")?.includes("rural") && (
|
|||
|
|
<>
|
|||
|
|
<Typography
|
|||
|
|
color="text-gray-600 dark:text-dark-100 my-4"
|
|||
|
|
variant="body2"
|
|||
|
|
>
|
|||
|
|
سهمیه دام روستایی
|
|||
|
|
</Typography>
|
|||
|
|
<Grid className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
|
|||
|
|
<Grid className="grid gap-2 p-2 border-1 border-gray-200 rounded-xl">
|
|||
|
|
<Typography
|
|||
|
|
color="text-gray-600 dark:text-dark-100"
|
|||
|
|
className="flex justify-center select-none"
|
|||
|
|
variant="caption"
|
|||
|
|
>
|
|||
|
|
سنگین
|
|||
|
|
</Typography>
|
|||
|
|
{livestockTypes
|
|||
|
|
?.filter(
|
|||
|
|
(option) =>
|
|||
|
|
option.livestock_group === "rural" &&
|
|||
|
|
option?.weight_type === "H"
|
|||
|
|
)
|
|||
|
|
.map((item, i) => {
|
|||
|
|
const index = findLivestockIndex("rural", "H", item.fa);
|
|||
|
|
return (
|
|||
|
|
<Textfield
|
|||
|
|
value={item.quantity_kg}
|
|||
|
|
key={i}
|
|||
|
|
start={item.fa}
|
|||
|
|
end="کیلوگرم"
|
|||
|
|
formattedNumber
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const value =
|
|||
|
|
parseInt(e.target.value.replace(/,/g, "")) || 0;
|
|||
|
|
if (index !== -1) {
|
|||
|
|
handleQuantityChange(index, value);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Grid>
|
|||
|
|
<Grid className="grid gap-2 p-2 border-1 border-gray-200 rounded-xl">
|
|||
|
|
<Typography
|
|||
|
|
color="text-gray-600 dark:text-dark-100"
|
|||
|
|
className="flex justify-center select-none"
|
|||
|
|
variant="caption"
|
|||
|
|
>
|
|||
|
|
سبک
|
|||
|
|
</Typography>
|
|||
|
|
{livestockTypes
|
|||
|
|
?.filter(
|
|||
|
|
(option) =>
|
|||
|
|
option.livestock_group === "rural" &&
|
|||
|
|
option?.weight_type === "L"
|
|||
|
|
)
|
|||
|
|
.map((item, i) => {
|
|||
|
|
const index = findLivestockIndex("rural", "L", item.fa);
|
|||
|
|
return (
|
|||
|
|
<Textfield
|
|||
|
|
key={i}
|
|||
|
|
start={item.fa}
|
|||
|
|
end="کیلوگرم"
|
|||
|
|
formattedNumber
|
|||
|
|
value={item.quantity_kg}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const value =
|
|||
|
|
parseInt(e.target.value.replace(/,/g, "")) || 0;
|
|||
|
|
if (index !== -1) {
|
|||
|
|
handleQuantityChange(index, value);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Grid>
|
|||
|
|
</Grid>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{getValues("group")?.includes("industrial") && (
|
|||
|
|
<>
|
|||
|
|
<Typography
|
|||
|
|
color="text-gray-600 dark:text-dark-100 my-4"
|
|||
|
|
variant="body2"
|
|||
|
|
>
|
|||
|
|
سهمیه دام صنعتی
|
|||
|
|
</Typography>
|
|||
|
|
<Grid className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
|
|||
|
|
<Grid className="grid gap-2 p-2 border-1 border-gray-200 rounded-xl">
|
|||
|
|
<Typography
|
|||
|
|
color="text-gray-600 dark:text-dark-100"
|
|||
|
|
className="flex justify-center select-none"
|
|||
|
|
variant="caption"
|
|||
|
|
>
|
|||
|
|
سنگین
|
|||
|
|
</Typography>
|
|||
|
|
{livestockTypes
|
|||
|
|
?.filter(
|
|||
|
|
(option) =>
|
|||
|
|
option.livestock_group === "industrial" &&
|
|||
|
|
option?.weight_type === "H"
|
|||
|
|
)
|
|||
|
|
.map((item, i) => {
|
|||
|
|
const index = findLivestockIndex(
|
|||
|
|
"industrial",
|
|||
|
|
"H",
|
|||
|
|
item.fa
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
<Textfield
|
|||
|
|
value={item.quantity_kg}
|
|||
|
|
key={i}
|
|||
|
|
start={item.fa}
|
|||
|
|
end="کیلوگرم"
|
|||
|
|
formattedNumber
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const value =
|
|||
|
|
parseInt(e.target.value.replace(/,/g, "")) || 0;
|
|||
|
|
if (index !== -1) {
|
|||
|
|
handleQuantityChange(index, value);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Grid>
|
|||
|
|
<Grid className="grid gap-2 p-2 border-1 border-gray-200 rounded-xl">
|
|||
|
|
<Typography
|
|||
|
|
color="text-gray-600 dark:text-dark-100"
|
|||
|
|
className="flex justify-center select-none"
|
|||
|
|
variant="caption"
|
|||
|
|
>
|
|||
|
|
سبک
|
|||
|
|
</Typography>
|
|||
|
|
{livestockTypes
|
|||
|
|
?.filter(
|
|||
|
|
(option) =>
|
|||
|
|
option.livestock_group === "industrial" &&
|
|||
|
|
option?.weight_type === "L"
|
|||
|
|
)
|
|||
|
|
.map((item, i) => {
|
|||
|
|
const index = findLivestockIndex(
|
|||
|
|
"industrial",
|
|||
|
|
"L",
|
|||
|
|
item.fa
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
<Textfield
|
|||
|
|
key={i}
|
|||
|
|
start={item.fa}
|
|||
|
|
end="کیلوگرم"
|
|||
|
|
formattedNumber
|
|||
|
|
value={item.quantity_kg}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const value =
|
|||
|
|
parseInt(e.target.value.replace(/,/g, "")) || 0;
|
|||
|
|
if (index !== -1) {
|
|||
|
|
handleQuantityChange(index, value);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Grid>
|
|||
|
|
</Grid>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Grid>
|
|||
|
|
</form>
|
|||
|
|
);
|
|||
|
|
};
|