feat: deal product services

src/components/ObjectSelect/ObjectSelect.tsx

@@ -1,6 +1,7 @@
 import {Select, SelectProps} from "@mantine/core";
 import {useEffect, useMemo, useState} from "react";
 import {ObjectWithNameAndId} from "../../types/utils.ts";
+import {groupBy} from "lodash";
 
 
 export type SelectObjectType<T extends ObjectWithNameAndId> = T;
@@ -14,6 +15,7 @@ type RestProps<T extends ObjectWithNameAndId> = {
     defaultValue?: SelectObjectType<T>
     onChange: (value: SelectObjectType<T>) => void;
     data: SelectObjectType<T>[];
+    groupBy?: (item: SelectObjectType<T>) => string;
 }
 
 export type ObjectSelectProps<T extends ObjectWithNameAndId> =
@@ -27,14 +29,23 @@ const ObjectSelect = <T extends ObjectWithNameAndId, >(props: ObjectSelectProps<
 
     const value = isControlled ? props.value : internalValue;
 
-    const data = useMemo(() => props.data.reduce((acc, item) => {
-        acc.push({
-            label: item.name,
-            value: item.id.toString()
-        });
-        return acc;
-    }, [] as { label: string, value: string }[]), [props.data]);
-
+    const data = useMemo(() => {
+        if (props.groupBy) {
+            const groupedData = groupBy(props.data, props.groupBy);
+            return Object.entries(groupedData).map(([group, items]) => ({
+                group,
+                items: items.map(item => ({
+                    label: item.name,
+                    value: item.id.toString()
+                }))
+            }));
+        } else {
+            return props.data.map(item => ({
+                label: item.name,
+                value: item.id.toString()
+            }));
+        }
+    }, [props.data, props.groupBy]);
 
     const handleOnChange = (event: string | null) => {
         if (!event) return;