feat: services kit and copy

src/client/index.ts

@@ -43,8 +43,13 @@ export type { CreatePayRateRequest } from './models/CreatePayRateRequest';
 export type { CreatePayRateResponse } from './models/CreatePayRateResponse';
 export type { CreatePositionRequest } from './models/CreatePositionRequest';
 export type { CreatePositionResponse } from './models/CreatePositionResponse';
+export type { CreateServiceKitSchema } from './models/CreateServiceKitSchema';
+export type { CreateServicesKitRequest } from './models/CreateServicesKitRequest';
+export type { CreateServicesKitResponse } from './models/CreateServicesKitResponse';
 export type { CreateUserRequest } from './models/CreateUserRequest';
 export type { CreateUserResponse } from './models/CreateUserResponse';
+export type { DealAddKitRequest } from './models/DealAddKitRequest';
+export type { DealAddKitResponse } from './models/DealAddKitResponse';
 export type { DealAddProductRequest } from './models/DealAddProductRequest';
 export type { DealAddProductResponse } from './models/DealAddProductResponse';
 export type { DealAddServiceRequest } from './models/DealAddServiceRequest';
@@ -66,12 +71,16 @@ export type { DealDeleteServicesRequest } from './models/DealDeleteServicesReque
 export type { DealDeleteServicesResponse } from './models/DealDeleteServicesResponse';
 export type { DealGeneralInfoSchema } from './models/DealGeneralInfoSchema';
 export type { DealGetAllResponse } from './models/DealGetAllResponse';
+export type { DealProductAddKitRequest } from './models/DealProductAddKitRequest';
+export type { DealProductAddKitResponse } from './models/DealProductAddKitResponse';
 export type { DealProductSchema } from './models/DealProductSchema';
 export type { DealProductServiceSchema } from './models/DealProductServiceSchema';
 export type { DealQuickCreateRequest } from './models/DealQuickCreateRequest';
 export type { DealQuickCreateResponse } from './models/DealQuickCreateResponse';
 export type { DealSchema } from './models/DealSchema';
 export type { DealServiceSchema } from './models/DealServiceSchema';
+export type { DealServicesCopyRequest } from './models/DealServicesCopyRequest';
+export type { DealServicesCopyResponse } from './models/DealServicesCopyResponse';
 export type { DealStatusHistorySchema } from './models/DealStatusHistorySchema';
 export type { DealSummary } from './models/DealSummary';
 export type { DealSummaryReorderRequest } from './models/DealSummaryReorderRequest';
@@ -100,6 +109,7 @@ export type { GetAllPayRatesResponse } from './models/GetAllPayRatesResponse';
 export type { GetAllPayrollSchemeResponse } from './models/GetAllPayrollSchemeResponse';
 export type { GetAllPositionsResponse } from './models/GetAllPositionsResponse';
 export type { GetAllRolesResponse } from './models/GetAllRolesResponse';
+export type { GetAllServicesKitsResponse } from './models/GetAllServicesKitsResponse';
 export type { GetAllShippingWarehousesResponse } from './models/GetAllShippingWarehousesResponse';
 export type { GetAllUsersResponse } from './models/GetAllUsersResponse';
 export type { GetBarcodeTemplateByIdRequest } from './models/GetBarcodeTemplateByIdRequest';
@@ -109,6 +119,7 @@ export type { GetProductBarcodePdfRequest } from './models/GetProductBarcodePdfR
 export type { GetProductBarcodePdfResponse } from './models/GetProductBarcodePdfResponse';
 export type { GetProductBarcodeRequest } from './models/GetProductBarcodeRequest';
 export type { GetProductBarcodeResponse } from './models/GetProductBarcodeResponse';
+export type { GetServiceKitSchema } from './models/GetServiceKitSchema';
 export type { GetTimeTrackingRecordsRequest } from './models/GetTimeTrackingRecordsRequest';
 export type { GetTimeTrackingRecordsResponse } from './models/GetTimeTrackingRecordsResponse';
 export type { HTTPValidationError } from './models/HTTPValidationError';
@@ -154,6 +165,9 @@ export type { TimeTrackingData } from './models/TimeTrackingData';
 export type { TimeTrackingRecord } from './models/TimeTrackingRecord';
 export type { UpdatePayRateRequest } from './models/UpdatePayRateRequest';
 export type { UpdatePayRateResponse } from './models/UpdatePayRateResponse';
+export type { UpdateServiceKitSchema } from './models/UpdateServiceKitSchema';
+export type { UpdateServicesKitRequest } from './models/UpdateServicesKitRequest';
+export type { UpdateServicesKitResponse } from './models/UpdateServicesKitResponse';
 export type { UpdateTimeTrackingRecordRequest } from './models/UpdateTimeTrackingRecordRequest';
 export type { UpdateTimeTrackingRecordResponse } from './models/UpdateTimeTrackingRecordResponse';
 export type { UpdateUserRequest } from './models/UpdateUserRequest';

src/client/models/CreateServiceKitSchema.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type CreateServiceKitSchema = {
+    name: string;
+    serviceType: number;
+    servicesIds: Array<number>;
+};
+

src/client/models/CreateServicesKitRequest.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { CreateServiceKitSchema } from './CreateServiceKitSchema';
+export type CreateServicesKitRequest = {
+    data: CreateServiceKitSchema;
+};
+

src/client/models/CreateServicesKitResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type CreateServicesKitResponse = {
+    ok: boolean;
+    message: string;
+};
+

src/client/models/DealAddKitRequest.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type DealAddKitRequest = {
+    dealId: number;
+    kitId: number;
+};
+

src/client/models/DealAddKitResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type DealAddKitResponse = {
+    ok: boolean;
+    message: string;
+};
+

src/client/models/DealProductAddKitRequest.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type DealProductAddKitRequest = {
+    dealId: number;
+    productId: number;
+    kitId: number;
+};
+

src/client/models/DealProductAddKitResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type DealProductAddKitResponse = {
+    ok: boolean;
+    message: string;
+};
+

src/client/models/DealServicesCopyRequest.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type DealServicesCopyRequest = {
+    dealId: number;
+    sourceProductId: number;
+    destinationProductIds: Array<number>;
+};
+

src/client/models/DealServicesCopyResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type DealServicesCopyResponse = {
+    ok: boolean;
+    message: string;
+};
+

src/client/models/GetAllServicesKitsResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { GetServiceKitSchema } from './GetServiceKitSchema';
+export type GetAllServicesKitsResponse = {
+    servicesKits: Array<GetServiceKitSchema>;
+};
+

src/client/models/GetServiceKitSchema.ts

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ServiceSchema } from './ServiceSchema';
+export type GetServiceKitSchema = {
+    name: string;
+    serviceType: number;
+    id: number;
+    services: Array<ServiceSchema>;
+};
+

src/client/models/UpdateServiceKitSchema.ts

@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type UpdateServiceKitSchema = {
+    name: string;
+    serviceType: number;
+    id: number;
+    servicesIds: Array<number>;
+};
+

src/client/models/UpdateServicesKitRequest.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { UpdateServiceKitSchema } from './UpdateServiceKitSchema';
+export type UpdateServicesKitRequest = {
+    data: UpdateServiceKitSchema;
+};
+

src/client/models/UpdateServicesKitResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type UpdateServicesKitResponse = {
+    ok: boolean;
+    message: string;
+};
+

src/client/services/DealService.ts

@@ -2,6 +2,8 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { DealAddKitRequest } from '../models/DealAddKitRequest';
+import type { DealAddKitResponse } from '../models/DealAddKitResponse';
 import type { DealAddProductRequest } from '../models/DealAddProductRequest';
 import type { DealAddProductResponse } from '../models/DealAddProductResponse';
 import type { DealAddServiceRequest } from '../models/DealAddServiceRequest';
@@ -22,9 +24,13 @@ import type { DealDeleteServiceResponse } from '../models/DealDeleteServiceRespo
 import type { DealDeleteServicesRequest } from '../models/DealDeleteServicesRequest';
 import type { DealDeleteServicesResponse } from '../models/DealDeleteServicesResponse';
 import type { DealGetAllResponse } from '../models/DealGetAllResponse';
+import type { DealProductAddKitRequest } from '../models/DealProductAddKitRequest';
+import type { DealProductAddKitResponse } from '../models/DealProductAddKitResponse';
 import type { DealQuickCreateRequest } from '../models/DealQuickCreateRequest';
 import type { DealQuickCreateResponse } from '../models/DealQuickCreateResponse';
 import type { DealSchema } from '../models/DealSchema';
+import type { DealServicesCopyRequest } from '../models/DealServicesCopyRequest';
+import type { DealServicesCopyResponse } from '../models/DealServicesCopyResponse';
 import type { DealSummaryReorderRequest } from '../models/DealSummaryReorderRequest';
 import type { DealSummaryResponse } from '../models/DealSummaryResponse';
 import type { DealUpdateGeneralInfoRequest } from '../models/DealUpdateGeneralInfoRequest';
@@ -204,6 +210,26 @@ export class DealService {
             },
         });
     }
+    /**
+     * Add Kit To Deal
+     * @returns DealAddKitResponse Successful Response
+     * @throws ApiError
+     */
+    public static addKitToDeal({
+        requestBody,
+    }: {
+        requestBody: DealAddKitRequest,
+    }): CancelablePromise<DealAddKitResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/deal/add-kit',
+            body: requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
     /**
      * Services Add
      * @returns DealAddServicesResponse Successful Response
@@ -324,6 +350,26 @@ export class DealService {
             },
         });
     }
+    /**
+     * Services Copy
+     * @returns DealServicesCopyResponse Successful Response
+     * @throws ApiError
+     */
+    public static copyProductServices({
+        requestBody,
+    }: {
+        requestBody: DealServicesCopyRequest,
+    }): CancelablePromise<DealServicesCopyResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/deal/services/copy',
+            body: requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
     /**
      * Products Update
      * @returns DealUpdateProductQuantityResponse Successful Response
@@ -424,4 +470,24 @@ export class DealService {
             },
         });
     }
+    /**
+     * Add Kit To Deal Product
+     * @returns DealProductAddKitResponse Successful Response
+     * @throws ApiError
+     */
+    public static addKitToDealProduct({
+        requestBody,
+    }: {
+        requestBody: DealProductAddKitRequest,
+    }): CancelablePromise<DealProductAddKitResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/deal/product/add-kit',
+            body: requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
 }

src/client/services/ServiceService.ts

@@ -3,6 +3,9 @@
 /* tslint:disable */
 /* eslint-disable */
 import type { BaseEnumListSchema } from '../models/BaseEnumListSchema';
+import type { CreateServicesKitRequest } from '../models/CreateServicesKitRequest';
+import type { CreateServicesKitResponse } from '../models/CreateServicesKitResponse';
+import type { GetAllServicesKitsResponse } from '../models/GetAllServicesKitsResponse';
 import type { ServiceCreateCategoryRequest } from '../models/ServiceCreateCategoryRequest';
 import type { ServiceCreateCategoryResponse } from '../models/ServiceCreateCategoryResponse';
 import type { ServiceCreateRequest } from '../models/ServiceCreateRequest';
@@ -13,6 +16,8 @@ import type { ServiceGetAllCategoriesResponse } from '../models/ServiceGetAllCat
 import type { ServiceGetAllResponse } from '../models/ServiceGetAllResponse';
 import type { ServiceUpdateRequest } from '../models/ServiceUpdateRequest';
 import type { ServiceUpdateResponse } from '../models/ServiceUpdateResponse';
+import type { UpdateServicesKitRequest } from '../models/UpdateServicesKitRequest';
+import type { UpdateServicesKitResponse } from '../models/UpdateServicesKitResponse';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
@@ -130,4 +135,55 @@ export class ServiceService {
             url: '/service/types/get-all',
         });
     }
+    /**
+     * Get All Services Kits
+     * @returns GetAllServicesKitsResponse Successful Response
+     * @throws ApiError
+     */
+    public static getAllServicesKits(): CancelablePromise<GetAllServicesKitsResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/service/kits/get-all',
+        });
+    }
+    /**
+     * Create Services Kit
+     * @returns CreateServicesKitResponse Successful Response
+     * @throws ApiError
+     */
+    public static createServicesKit({
+        requestBody,
+    }: {
+        requestBody: CreateServicesKitRequest,
+    }): CancelablePromise<CreateServicesKitResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/service/kits/create',
+            body: requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
+    /**
+     * Update Services Kit
+     * @returns UpdateServicesKitResponse Successful Response
+     * @throws ApiError
+     */
+    public static updateServicesKit({
+        requestBody,
+    }: {
+        requestBody: UpdateServicesKitRequest,
+    }): CancelablePromise<UpdateServicesKitResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/service/kits/update',
+            body: requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
 }

src/components/ObjectMultiSelect/ObjectMultiSelect.tsx

@@ -1,42 +1,77 @@
 import {MultiSelect, MultiSelectProps} from "@mantine/core";
 import {useEffect, useMemo, useState} from "react";
-import {ObjectWithNameAndId} from "../../types/utils.ts";
+import {groupBy} from "lodash";
 
+interface ObjectWithIdAndName {
+    id: number,
+    name: string
+}
 
-export type MultiselectObjectType<T extends ObjectWithNameAndId> = T;
+export type MultiselectObjectType<T> = T;
 
-type ControlledValueProps<T extends ObjectWithNameAndId> = {
+type ControlledValueProps<T> = {
     value: MultiselectObjectType<T>[],
     onChange: (value: MultiselectObjectType<T>[]) => void;
 }
 
-type RestProps<T extends ObjectWithNameAndId> = {
+type CustomLabelAndKeyProps<T> = {
+    getLabelFn: (item: MultiselectObjectType<T>) => string;
+    getValueFn: (item: MultiselectObjectType<T>) => string;
+}
+type RestProps<T> = {
     defaultValue?: MultiselectObjectType<T>[]
     onChange: (value: MultiselectObjectType<T>[]) => void;
     data: MultiselectObjectType<T>[];
+    groupBy?: (item: MultiselectObjectType<T>) => string;
+    filterBy?: (item: MultiselectObjectType<T>) => boolean;
+}
+const defaultGetLabelFn = <T extends { name: string }>(item: T): string => {
+    return item.name;
 }
 
-export type ObjectMultiSelectProps<T extends ObjectWithNameAndId> =
+const defaultGetValueFn = <T extends { id: number }>(item: T): string => {
+    return item.id.toString();
+}
+export type ObjectMultiSelectProps<T> =
     (RestProps<T> & Partial<ControlledValueProps<T>>)
-    & Omit<MultiSelectProps, 'value' | 'onChange' | 'data'>;
+    & Omit<MultiSelectProps, 'value' | 'onChange' | 'data'>
+    & (T extends ObjectWithIdAndName ? Partial<CustomLabelAndKeyProps<T>> : CustomLabelAndKeyProps<T>);
 
-const ObjectMultiSelect = <T extends ObjectWithNameAndId, >(props: ObjectMultiSelectProps<T>) => {
+const ObjectMultiSelect = <T, >(props: ObjectMultiSelectProps<T>) => {
 
     const isControlled = 'value' in props;
+    const haveGetValueFn = 'getValueFn' in props;
+    const haveGetLabelFn = 'getLabelFn' in props;
+
     const [internalValue, setInternalValue] = useState<MultiselectObjectType<T>[] | undefined>(props.defaultValue);
 
     const value = (isControlled ? props.value : internalValue) || [];
 
-    const data = useMemo(() => props.data.reduce((acc, item) => {
+    const getValueFn = (haveGetValueFn && props.getValueFn) || defaultGetValueFn;
-        acc.push({
+    const getLabelFn = (haveGetLabelFn && props.getLabelFn) || defaultGetLabelFn;
-            label: item.name,
+
-            value: item.id.toString()
+    const data = useMemo(() => {
-        });
+        const propsData = props.filterBy ? props.data.filter(props.filterBy) : props.data;
-        return acc;
+        if (props.groupBy) {
-    }, [] as { label: string, value: string }[]), [props.data]);
+
+            const groupedData = groupBy(propsData, props.groupBy);
+            return Object.entries(groupedData).map(([group, items]) => ({
+                group,
+                items: items.map(item => ({
+                    label: getLabelFn(item),
+                    value: getValueFn(item)
+                }))
+            }));
+        } else {
+            return propsData.map(item => ({
+                label: getLabelFn(item),
+                value: getValueFn(item)
+            }));
+        }
+    }, [props.data, props.groupBy]);
 
     const handleOnChange = (event: string[]) => {
-        const objects = props.data.filter(item => event.includes(item.id.toString()));
+        const objects = props.data.filter(item => event.includes(getValueFn(item)));
         if (isControlled) {
             props.onChange(objects);
             return;
@@ -51,7 +86,7 @@ const ObjectMultiSelect = <T extends ObjectWithNameAndId, >(props: ObjectMultiSe
     return (
         <MultiSelect
             {...props}
-            value={value.map(item => item.id.toString())}
+            value={value.map(item => getValueFn(item))}
             onChange={handleOnChange}
             data={data}
         />

src/components/Selects/ServicesKitSelect/ServicesKitSelect.tsx

@@ -0,0 +1,17 @@
+import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
+import {GetServiceKitSchema} from "../../../client";
+import {FC} from "react";
+import useServicesKitsList from "../../../pages/ServicesPage/hooks/useServicesKitsList.tsx";
+
+type Props = Omit<ObjectSelectProps<GetServiceKitSchema>, 'data'>
+const ServicesKitSelect: FC<Props> = (props) => {
+    const {objects} = useServicesKitsList();
+    return (
+        <ObjectSelect
+            data={objects}
+            {...props}
+        />
+    )
+}
+
+export default ServicesKitSelect;

src/components/Selects/ServicesMultiselect/ServicesMultiselect.tsx

@@ -0,0 +1,16 @@
+import ObjectMultiSelect, {ObjectMultiSelectProps} from "../../ObjectMultiSelect/ObjectMultiSelect.tsx";
+import {ServiceSchema} from "../../../client";
+import {FC} from "react";
+import useServicesList from "../../../pages/ServicesPage/hooks/useServicesList.tsx";
+
+type Props = Omit<ObjectMultiSelectProps<ServiceSchema>, 'data'>
+const ServicesMultiselect: FC<Props> = (props: Props) => {
+    const {services} = useServicesList();
+    return (
+        <ObjectMultiSelect
+            data={services}
+            {...props}
+        />
+    )
+}
+export default ServicesMultiselect;

src/modals/ServicesKitSelectModal/ServicesKitSelectModal.tsx

@@ -0,0 +1,60 @@
+import {GetServiceKitSchema} from "../../client";
+import {ContextModalProps} from "@mantine/modals";
+import {useState} from "react";
+import {Button, Flex, rem} from "@mantine/core";
+import ServicesKitSelect from "../../components/Selects/ServicesKitSelect/ServicesKitSelect.tsx";
+import {notifications} from "../../shared/lib/notifications.ts";
+
+type Props = {
+    onSelect: (kit: GetServiceKitSchema) => void;
+    serviceType: number;
+}
+
+const ServicesKitSelectModal = ({
+                                    context,
+                                    id,
+                                    innerProps
+                                }: ContextModalProps<Props>) => {
+    const [kit, setKit] = useState<GetServiceKitSchema | undefined>();
+    const onSelectClick = () => {
+        if (!kit) {
+            notifications.error({message: "Выберите набор услуг"});
+            return;
+        }
+        innerProps.onSelect(kit);
+        context.closeContextModal(id);
+    }
+    return (
+        <Flex
+            gap={rem(10)}
+            direction={"column"}>
+            <Flex>
+                <ServicesKitSelect
+                    w={"100%"}
+                    label={"Набор услуг"}
+                    placeholder={"Выберите набор услуг"}
+                    value={kit}
+                    onChange={setKit}
+                    filterBy={item => item.serviceType === innerProps.serviceType}
+                />
+            </Flex>
+            <Flex justify={"flex-end"} gap={rem(10)}>
+                <Button
+                    variant={"subtle"}
+                    onClick={() => context.closeContextModal(id)}
+                >
+                    Отменить
+                </Button>
+                <Button
+                    onClick={onSelectClick}
+                    variant={"default"}
+                >
+                    Добавить
+                </Button>
+
+            </Flex>
+        </Flex>
+    )
+}
+
+export default ServicesKitSelectModal;

src/modals/modals.ts

@@ -16,6 +16,9 @@ import EmployeeTableModal from "./EmployeeTableModal/EmployeeTableModal.tsx";
 import PositionFormModal from "./PositionFormModal/PositionFormModal.tsx";
 import PayRateFormModal from "../pages/AdminPage/modals/PayRateFormModal/PayRateFormModal.tsx";
 import CreatePaymentRecordModal from "../pages/AdminPage/modals/CreatePaymentRecordModal/CreatePaymentRecordModal.tsx";
+import ServiceKitModalForm from "../pages/ServicesPage/modals/ServicesKitModalForm.tsx";
+import ServicesKitSelectModal from "./ServicesKitSelectModal/ServicesKitSelectModal.tsx";
+import SelectDealProductsModal from "../pages/LeadsPage/modals/SelectDealProductsModal.tsx";
 
 export const modals = {
     enterDeadline: EnterDeadlineModal,
@@ -34,5 +37,8 @@ export const modals = {
     employeeTable: EmployeeTableModal,
     positionForm: PositionFormModal,
     payRateForm: PayRateFormModal,
-    createPaymentRecord: CreatePaymentRecordModal
+    createPaymentRecord: CreatePaymentRecordModal,
+    serviceKitModalForm: ServiceKitModalForm,
+    servicesKitSelectModal: ServicesKitSelectModal,
+    selectDealProductsModal: SelectDealProductsModal
 }

src/pages/LeadsPage/modals/SelectDealProductsModal.tsx

@@ -0,0 +1,64 @@
+import {DealProductSchema} from "../../../client";
+import {ContextModalProps} from "@mantine/modals";
+import {Button, Flex, rem} from "@mantine/core";
+import {useState} from "react";
+import ObjectMultiSelect from "../../../components/ObjectMultiSelect/ObjectMultiSelect.tsx";
+import {notifications} from "../../../shared/lib/notifications.ts";
+
+type Props = {
+    dealProducts: DealProductSchema[];
+    dealProduct: DealProductSchema;
+    onSelect: (
+        sourceProduct: DealProductSchema,
+        destinationProducts: DealProductSchema[]
+    ) => void
+}
+
+const SelectDealProductsModal = ({
+                                     context,
+                                     id,
+                                     innerProps
+                                 }: ContextModalProps<Props>) => {
+    const [dealProducts, setDealProducts] = useState<DealProductSchema[]>([]);
+    const onSelectClick = () => {
+        if (!dealProducts) {
+            notifications.error({message: "Выберите товары на которые необходимо продублировать услуги"});
+            return;
+        }
+        innerProps.onSelect(innerProps.dealProduct, dealProducts);
+        context.closeContextModal(id);
+    }
+    return (
+        <Flex direction={"column"} gap={rem(10)}>
+            <Flex>
+                <ObjectMultiSelect<DealProductSchema>
+                    w={"100%"}
+                    label={"Товары"}
+                    placeholder={"Выберите товары на которые нужно продублировать услуги"}
+                    onChange={setDealProducts}
+                    value={dealProducts}
+                    data={innerProps.dealProducts}
+                    getLabelFn={item => item.product.name}
+                    getValueFn={item => item.product.id.toString()}
+                    filterBy={item => item !== innerProps.dealProduct}
+                />
+            </Flex>
+            <Flex gap={rem(10)} justify={"flex-end"}>
+                <Button
+                    variant={"subtle"}
+                    onClick={() => context.closeContextModal(id)}
+                >
+                    Отменить
+                </Button>
+                <Button
+                    onClick={onSelectClick}
+                    variant={"default"}
+                >
+                    Продублировать
+                </Button>
+            </Flex>
+        </Flex>
+    )
+}
+
+export default SelectDealProductsModal;

src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx

@@ -5,6 +5,8 @@ import {Button, Flex, ScrollArea, Title} from "@mantine/core";
 import DealServicesTable from "./components/DealServicesTable/DealServicesTable.tsx";
 import useDealProductAndServiceTabState from "./hooks/useProductAndServiceTabState.tsx";
 import {modals} from "@mantine/modals";
+import {DealProductSchema, DealService, GetServiceKitSchema} from "../../../../client";
+import {notifications} from "../../../../shared/lib/notifications.ts";
 
 const ProductAndServiceTab: FC = () => {
     const {dealState, dealServicesState, dealProductsState} = useDealProductAndServiceTabState();
@@ -28,6 +30,64 @@ const ProductAndServiceTab: FC = () => {
         const dealServicesPrice = dealState.deal.services.reduce((acc, row) => acc + row.price * row.quantity, 0);
         return dealServicesPrice + productServicesPrice;
     }
+    const onCopyServices = (
+        sourceProduct: DealProductSchema,
+        destinationProducts: DealProductSchema[]
+    ) => {
+        if (!dealState.deal) return;
+        DealService.copyProductServices({
+            requestBody: {
+                dealId: dealState.deal.id,
+                destinationProductIds: destinationProducts.map(product => product.product.id),
+                sourceProductId: sourceProduct.product.id
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            await dealState.refetch()
+        })
+    }
+    const onCopyServicesClick = (product: DealProductSchema) => {
+        modals.openContextModal({
+            modal: "selectDealProductsModal",
+            title: "Дублирование услуг",
+            size: "lg",
+            innerProps: {
+                dealProducts: dealState.deal?.products || [],
+                dealProduct: product,
+                onSelect: onCopyServices
+            },
+            withCloseButton: false
+        })
+    }
+
+    const onKitAdd = (item: DealProductSchema, kit: GetServiceKitSchema) => {
+        if (!dealState.deal) return;
+        DealService.addKitToDealProduct({
+            requestBody: {
+                dealId: dealState.deal.id,
+                kitId: kit.id,
+                productId: item.product.id
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            await dealState.refetch();
+        });
+    }
+    const onDealKitAdd = (kit: GetServiceKitSchema) => {
+        if (!dealState.deal) return;
+        DealService.addKitToDeal({
+            requestBody: {
+                dealId: dealState.deal.id,
+                kitId: kit.id,
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message});
+            if (!ok) return;
+            await dealState.refetch();
+        });
+    }
     return (
         <div className={styles['container']}>
 
@@ -36,6 +96,8 @@ const ProductAndServiceTab: FC = () => {
 
                     {dealState.deal?.products.map(product => (
                         <ProductView
+                            onKitAdd={onKitAdd}
+                            onCopyServices={onCopyServicesClick}
                             key={product.product.id}
                             product={product}
                             onChange={dealProductsState.onChange}
@@ -48,6 +110,7 @@ const ProductAndServiceTab: FC = () => {
             <div className={styles['deal-container']}>
                 <Flex direction={"column"} className={styles['deal-container-wrapper']}>
                     <DealServicesTable
+                        onKitAdd={onDealKitAdd}
                         {...dealServicesState}
                     />
                     <div className={styles['deal-container-buttons']}>

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx

@@ -1,14 +1,18 @@
 import {CRUDTableProps} from "../../../../../../types/CRUDTable.tsx";
-import {DealServiceSchema, UserSchema} from "../../../../../../client";
+import {DealServiceSchema, GetServiceKitSchema, UserSchema} from "../../../../../../client";
 import {FC, useState} from "react";
 import {ActionIcon, Button, Flex, Modal, NumberInput, rem, Text, Title, Tooltip} from "@mantine/core";
 import {IconTrash, IconUsersGroup} from "@tabler/icons-react";
 import {modals} from "@mantine/modals";
 import {isNumber} from "lodash";
 import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUsersTable.tsx";
+import {ServiceType} from "../../../../../../shared/enums/ServiceType.ts";
 
-type Props = CRUDTableProps<DealServiceSchema>;
+type RestProps = {
-const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange}) => {
+    onKitAdd?: (kit: GetServiceKitSchema) => void
+};
+type Props = CRUDTableProps<DealServiceSchema> & RestProps;
+const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange, onKitAdd}) => {
 
     const [currentService, setCurrentService] = useState<DealServiceSchema | undefined>();
     const [employeesModalVisible, setEmployeesModalVisible] = useState(false);
@@ -66,6 +70,17 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange}) =>
             employees: items
         });
     }
+    const onAddKitClick = () => {
+        if (!onKitAdd) return;
+        modals.openContextModal({
+            modal: "servicesKitSelectModal",
+            innerProps: {
+                onSelect: onKitAdd,
+                serviceType: ServiceType.DEAL_SERVICE
+            },
+            title: 'Печать штрихкода',
+        })
+    }
     return (
         <>
             <Flex
@@ -131,12 +146,19 @@ const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange}) =>
                         order={3}
                     >Итог: {items.reduce((acc, item) => acc + (item.price * item.quantity), 0)}₽</Title>
                 </Flex>
-                <Flex pb={rem(10)} mt={"auto"}>
+                <Flex direction={"column"} gap={rem(10)} pb={rem(10)} mt={"auto"}>
                     <Button
                         onClick={onCreateClick}
                         fullWidth
                         variant={"default"}
                     >Добавить услугу</Button>
+                    <Button
+                        onClick={onAddKitClick}
+                        fullWidth
+                        variant={"default"}
+                    >
+                        Добавить набор услуг
+                    </Button>
                 </Flex>
             </Flex>
             <Modal

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx

@@ -11,10 +11,20 @@ import SimpleUsersTable from "../../../../components/SimpleUsersTable/SimpleUser
 
 type RestProps = {
     quantity: number;
+    onCopyServices?: () => void;
+    onKitAdd?: () => void;
 }
 
 type Props = CRUDTableProps<DealProductServiceSchema> & RestProps;
-const ProductServicesTable: FC<Props> = ({items, quantity, onCreate, onDelete, onChange}) => {
+const ProductServicesTable: FC<Props> = ({
+                                             items,
+                                             quantity,
+                                             onCreate,
+                                             onDelete,
+                                             onChange,
+                                             onCopyServices,
+                                             onKitAdd
+                                         }) => {
     const columns = useProductServicesTableColumns({data: items, quantity});
     const serviceIds = items.map(service => service.service.id);
 
@@ -85,6 +95,12 @@ const ProductServicesTable: FC<Props> = ({items, quantity, onCreate, onDelete, o
                         enableBottomToolbar: true,
                         renderBottomToolbar: (
                             <Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
+                                <Button onClick={() => onKitAdd && onKitAdd()} variant={"default"}>
+                                    Добавить набор услуг
+                                </Button>
+                                <Button onClick={() => onCopyServices && onCopyServices()} variant={"default"}>
+                                    Продублировать услуги
+                                </Button>
 
                                 <Button onClick={onCreateClick} variant={"default"}>
                                     Добавить услугу

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx

@@ -1,16 +1,24 @@
 import {FC} from "react";
-import {DealProductSchema, DealProductServiceSchema, ProductSchema} from "../../../../../../client";
+import {
+    DealProductSchema,
+    DealProductServiceSchema,
+    GetServiceKitSchema,
+    ProductSchema
+} from "../../../../../../client";
 import styles from './ProductView.module.css';
 import {ActionIcon, Flex, Image, NumberInput, rem, Spoiler, Text, Title, Tooltip} from '@mantine/core';
 import ProductServicesTable from "../ProductServicesTable/ProductServicesTable.tsx";
 import {isNil, isNumber} from "lodash";
 import {IconBarcode, IconTrash} from "@tabler/icons-react";
 import {modals} from "@mantine/modals";
+import {ServiceType} from "../../../../../../shared/enums/ServiceType.ts";
 
 type Props = {
     product: DealProductSchema;
     onChange?: (item: DealProductSchema) => void;
     onDelete?: (item: DealProductSchema) => void
+    onCopyServices?: (item: DealProductSchema) => void;
+    onKitAdd?: (item: DealProductSchema, kit: GetServiceKitSchema) => void;
 }
 type ProductFieldNames = {
     [K in keyof ProductSchema]: string
@@ -23,7 +31,7 @@ export const ProductFieldNames: Partial<ProductFieldNames> = {
     composition: "Состав",
     additionalInfo: "Доп. информация",
 }
-const ProductView: FC<Props> = ({product, onDelete, onChange}) => {
+const ProductView: FC<Props> = ({product, onDelete, onChange, onCopyServices, onKitAdd}) => {
     const onDeleteClick = () => {
         if (!onDelete) return;
         onDelete(product);
@@ -68,10 +76,20 @@ const ProductView: FC<Props> = ({product, onDelete, onChange}) => {
                 defaultQuantity: product.quantity
             },
             title: 'Печать штрихкода',
-
         })
     }
 
+    const onKitAddClick = () => {
+        if (!onKitAdd) return;
+        modals.openContextModal({
+            modal: "servicesKitSelectModal",
+            innerProps: {
+                onSelect: (kit) => onKitAdd(product, kit),
+                serviceType: ServiceType.PRODUCT_SERVICE
+            },
+            title: 'Печать штрихкода',
+        })
+    }
 
     return (
         <div className={styles['container']}>
@@ -106,6 +124,8 @@ const ProductView: FC<Props> = ({product, onDelete, onChange}) => {
 
             <div className={styles['services-container']}>
                 <ProductServicesTable
+                    onKitAdd={onKitAddClick}
+                    onCopyServices={() => onCopyServices && onCopyServices(product)}
                     items={product.services}
                     quantity={product.quantity}
                     onCreate={onServiceCreate}

src/pages/ServicesPage/components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx

@@ -1,17 +1,25 @@
 import {FC} from "react";
 import {SegmentedControl, SegmentedControlProps} from "@mantine/core";
-import {ServiceType} from "../../../../shared/enums/ServiceType.ts";
+export enum ServicesTab {
+    DEAL_SERVICE,
+    PRODUCT_SERVICE,
+    SERVICES_KITS
+}
 
 
 type Props = Omit<SegmentedControlProps, 'data'>;
 const data = [
     {
         label: 'Для товара',
-        value: ServiceType.PRODUCT_SERVICE.toString()
+        value: ServicesTab.PRODUCT_SERVICE.toString()
     },
     {
         label: 'Для сделки',
-        value: ServiceType.DEAL_SERVICE.toString()
+        value: ServicesTab.DEAL_SERVICE.toString()
+    },
+    {
+        label: 'Наборы услуг',
+        value: ServicesTab.SERVICES_KITS.toString()
     }
 ]
 const ServiceTypeSegmentedControl: FC<Props> = (props) => {

src/pages/ServicesPage/components/ServicesKitsTable/ServicesKitsTable.tsx

@@ -0,0 +1,61 @@
+import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
+import {GetServiceKitSchema} from "../../../../client";
+import {FC} from "react";
+import useServicesKitsTableColumns from "./columns.tsx";
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
+import {ActionIcon, Flex, Tooltip} from "@mantine/core";
+import {IconEdit, IconTrash} from "@tabler/icons-react";
+import {MRT_TableOptions} from "mantine-react-table";
+import {modals} from "@mantine/modals";
+
+type Props = CRUDTableProps<GetServiceKitSchema>;
+const ServicesKitsTable: FC<Props> = ({items, onDelete, onChange}) => {
+    const columns = useServicesKitsTableColumns();
+    const onEditClick = (kit: GetServiceKitSchema) => {
+        if (!onChange) return;
+        modals.openContextModal({
+            modal: 'serviceKitModalForm',
+            title: 'Создание набора услуг',
+            withCloseButton: false,
+            innerProps: {
+                element: kit,
+                onChange
+            }
+        })
+    }
+    const onDeleteClick = (kit: GetServiceKitSchema) => {
+        if (!onDelete) return;
+        console.log(kit)
+    }
+    return (
+        <BaseTable
+            data={items}
+            columns={columns}
+            restProps={{
+                enableSorting: false,
+                enableColumnActions: false,
+                enableRowActions: true,
+                renderRowActions: ({row}) => (
+                    <Flex gap="md">
+                        <Tooltip label="Редактировать">
+                            <ActionIcon
+                                onClick={() => onEditClick(row.original)}
+                                variant={"default"}>
+                                <IconEdit/>
+                            </ActionIcon>
+                        </Tooltip>
+                        <Tooltip label="Удалить">
+                            <ActionIcon onClick={() => {
+                                if (onDelete) onDeleteClick(row.original);
+                            }} variant={"default"}>
+                                <IconTrash/>
+                            </ActionIcon>
+                        </Tooltip>
+                    </Flex>
+                )
+            } as MRT_TableOptions<GetServiceKitSchema>}
+        />
+    )
+}
+
+export default ServicesKitsTable;

src/pages/ServicesPage/components/ServicesKitsTable/columns.tsx

@@ -0,0 +1,17 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {GetServiceKitSchema} from "../../../../client";
+
+const useServicesKitsTableColumns = () => {
+    return useMemo<MRT_ColumnDef<GetServiceKitSchema>[]>(() => [
+        {
+            accessorKey: "name",
+            header: "Название набора"
+        },
+        {
+            header: "Кол-во услуг",
+            Cell: ({row}) => row.original.services.length
+        }
+    ], []);
+}
+export default useServicesKitsTableColumns;

src/pages/ServicesPage/hooks/useServicesKitsList.tsx

@@ -0,0 +1,10 @@
+import ObjectList from "../../../hooks/objectList.tsx";
+import {ServiceService} from "../../../client";
+
+const useServicesKitsList = () => ObjectList({
+    queryFn: ServiceService.getAllServicesKits,
+    getObjectsFn: (response) => response.servicesKits,
+    queryKey: "getAllServicesKits"
+})
+
+export default useServicesKitsList;

src/pages/ServicesPage/modals/ServicesKitModalForm.tsx

@@ -0,0 +1,60 @@
+import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import {GetServiceKitSchema} from "../../../client";
+import {ContextModalProps} from "@mantine/modals";
+import {useForm} from "@mantine/form";
+import {ServiceType} from "../../../shared/enums/ServiceType.ts";
+import {TextInput} from "@mantine/core";
+import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
+import ServicesMultiselect from "../../../components/Selects/ServicesMultiselect/ServicesMultiselect.tsx";
+
+type Props = CreateEditFormProps<GetServiceKitSchema>;
+const ServiceKitModalForm = ({
+                                 context,
+                                 id,
+                                 innerProps,
+                             }: ContextModalProps<Props>) => {
+    const isEditing = 'element' in innerProps;
+    const initialValues: Partial<GetServiceKitSchema> = isEditing ? innerProps.element : {
+        name: "",
+        serviceType: ServiceType.DEAL_SERVICE,
+        services: []
+    }
+
+    const form = useForm<Partial<GetServiceKitSchema>>(
+        {
+            initialValues
+        }
+    );
+    return (
+        <BaseFormModal
+            {...innerProps}
+            form={form}
+            closeOnSubmit
+            onClose={() => context.closeContextModal(id)}
+        >
+            <BaseFormModal.Body>
+                <>
+                    <TextInput
+                        label={"Название"}
+                        placeholder={"Введите название набора услуг"}
+                        {...form.getInputProps("name")}
+                    />
+                    <ServiceTypeSelect
+                        label={"Тип услуг"}
+                        placeholder={"Выберите тип услуг"}
+                        {...form.getInputProps("serviceType")}
+                    />
+                    <ServicesMultiselect
+                        label={"Услуги"}
+                        placeholder={"Выберите услуги"}
+                        filterBy={(service) => service.serviceType === form.values.serviceType}
+                        groupBy={(service) => service.category.name}
+                        {...form.getInputProps("services")}
+                    />
+                </>
+            </BaseFormModal.Body>
+        </BaseFormModal>
+    )
+}
+
+export default ServiceKitModalForm;

src/pages/ServicesPage/ui/ServicesPage.tsx

@@ -4,15 +4,21 @@ import useServicesList from "../hooks/useServicesList.tsx";
 import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
 import styles from './ServicesPage.module.css';
 import {Button, Text} from "@mantine/core";
-import {ServiceCategorySchema, ServiceSchema, ServiceService} from "../../../client";
+import {GetServiceKitSchema, ServiceCategorySchema, ServiceSchema, ServiceService} from "../../../client";
 import {notifications} from "../../../shared/lib/notifications.ts";
 import {modals} from "@mantine/modals";
-import ServiceTypeSegmentedControl from "../components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx";
+import ServiceTypeSegmentedControl, {
-import {ServiceType} from "../../../shared/enums/ServiceType.ts";
+    ServicesTab
+} from "../components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx";
+import useServicesKitsList from "../hooks/useServicesKitsList.tsx";
+import ServicesKitsTable from "../components/ServicesKitsTable/ServicesKitsTable.tsx";
+import {omit} from "lodash";
+
 
 export const ServicesPage: FC = () => {
     const {services, refetch} = useServicesList();
-    const [serviceType, setServiceType] = useState(ServiceType.DEAL_SERVICE)
+    const {objects: servicesKits, refetch: refetchKits} = useServicesKitsList();
+    const [serviceType, setServiceType] = useState(ServicesTab.DEAL_SERVICE)
     // region Service create
     const onCreateClick = () => {
         modals.openContextModal({
@@ -87,14 +93,59 @@ export const ServicesPage: FC = () => {
             })
     }
 
+    const onKitCreate = (kit: GetServiceKitSchema) => {
+        ServiceService.createServicesKit({
+            requestBody: {
+                data: {
+                    ...omit(kit, ["services", "id"]),
+                    servicesIds: kit.services.map(service => service.id)
+                }
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message: message});
+            if (!ok) return;
+            await refetchKits();
+        })
+    }
 
-
+    const onKitCreateClick = () => {
+        modals.openContextModal({
+            modal: 'serviceKitModalForm',
+            title: 'Создание набора услуг',
+            withCloseButton: false,
+            innerProps: {
+                onCreate: onKitCreate
+            }
+        })
+    }
+    const onKitUpdate = (kit: GetServiceKitSchema) => {
+        ServiceService.updateServicesKit({
+            requestBody: {
+                data: {
+                    ...omit(kit, ["services"]),
+                    servicesIds: kit.services.map(service => service.id)
+                }
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message: message});
+            if (!ok) return;
+            await refetchKits();
+        })
+    }
     return (
         <div className={styles['container']}>
             <PageBlock>
                 <div className={styles['top-panel']}>
-                    <Button onClick={onCreateClick} variant={"default"}>Создать услугу</Button>
+                    {
-                    <Button onClick={onCreateCategoryClick} variant={"default"}>Создать категорию</Button>
+                        serviceType === ServicesTab.SERVICES_KITS ?
+                            <Button onClick={onKitCreateClick} variant={"default"}>Создать набор</Button> :
+                            <>
+                                <Button onClick={onCreateClick} variant={"default"}>Создать услугу</Button>
+                                <Button onClick={onCreateCategoryClick} variant={"default"}>Создать
+                                    категорию</Button>
+                            </>
+                    }
+
                     <ServiceTypeSegmentedControl
                         className={styles['top-panel-last-item']}
                         value={serviceType.toString()}
@@ -103,11 +154,19 @@ export const ServicesPage: FC = () => {
                 </div>
             </PageBlock>
             <PageBlock>
-            <ServicesTable
+                {
-                onDelete={onServiceDelete}
+                    serviceType === ServicesTab.SERVICES_KITS ?
-                onChange={onServiceUpdate}
+                        <ServicesKitsTable
-                items={services.filter(service => service.serviceType == serviceType)}
+                            items={servicesKits}
-            />
+                            onChange={onKitUpdate}
+                        />
+                        :
+                        <ServicesTable
+                            onDelete={onServiceDelete}
+                            onChange={onServiceUpdate}
+                            items={services.filter(service => service.serviceType == serviceType)}
+                        />
+                }
             </PageBlock>
         </div>
     )