refactor(forms): Enhance MultiSelect with controlled state and styling

This commit overhauls the `MultiSelect` component to improve its functionality, flexibility, and integration with form libraries.

The component is now a controlled component, accepting a `value` prop and using the `onChange` handler to propagate updates. This allows for seamless integration with libraries like React Hook Form.

Key changes include:
- Added `value`, `disabled`, `active`, and `height` props for more granular control over the component's state and appearance.
- Refactored styling logic to use the `cn` utility for cleaner conditional class management.
- Simplified the internal JSX structure and SVGs for better readability and maintenance.
- Updated the component's state management to correctly reflect the incoming `value` prop.

src/components/forms/companies/useCreateCompanyPresenter.ts

@@ -1,5 +1,9 @@
 "use client";
-import { useCreateCompany, useUpdateCompany } from "@/hooks/queries";
+import {
+  useCompanyCategoriesQuery,
+  useCreateCompany,
+  useUpdateCompany,
+} from "@/hooks/queries";
 import { ICreateCompanyCredentials } from "@/lib/api";
 import { useIsMutating } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
@@ -17,9 +21,24 @@ const useCreateCompanyPresenter = ({ defaultValues, editMode, id }: IProps) => {
     register,
     formState: { errors },
     handleSubmit,
+    watch,
+    setValue,
     reset,
-  } = useForm<ICreateCompanyCredentials>({ mode: "onChange", defaultValues });
+  } = useForm<ICreateCompanyCredentials>({
+    mode: "onChange",
+    defaultValues: {
+      ...defaultValues,
+      tags: {
+        ...defaultValues?.tags,
+        categories: defaultValues?.tags.categories.map((item) => ({
+          value: item.id,
+          text: item.name,
+        })),
+      },
+    },
+  });
   const router = useRouter();
+  const { data: companyCategories } = useCompanyCategoriesQuery();
   const { mutate: createCompany, isPending: isCreating } = useCreateCompany();
   const { mutate: updateCompany, isPending: isUpdating } = useUpdateCompany(
     id as string,
@@ -30,33 +49,6 @@ const useCreateCompanyPresenter = ({ defaultValues, editMode, id }: IProps) => {
       founded_year: data.founded_year ? +data.founded_year : 0,
       employee_count: data.employee_count ? +data.employee_count : 0,
       annual_revenue: data.annual_revenue ? +data.annual_revenue : 0,
-      tags: {
-        keywords: data.tags?.keywords
-          ? (data.tags.keywords as unknown as string)
-              .split(",")
-              .map((s) => s.trim())
-          : [],
-        categories: data.tags?.categories
-          ? (data.tags.categories as unknown as string)
-              .split(",")
-              .map((s) => s.trim())
-          : [],
-        specializations: data.tags?.specializations
-          ? (data.tags.specializations as unknown as string)
-              .split(",")
-              .map((s) => s.trim())
-          : [],
-        certifications: data.tags?.certifications
-          ? (data.tags.certifications as unknown as string)
-              .split(",")
-              .map((s) => s.trim())
-          : [],
-        cpv_codes: data.tags?.cpv_codes
-          ? (data.tags.cpv_codes as unknown as string)
-              .split(",")
-              .map((s) => s.trim())
-          : [],
-      },
     };
     if (editMode) {
       updateCompany({
@@ -80,7 +72,10 @@ const useCreateCompanyPresenter = ({ defaultValues, editMode, id }: IProps) => {
     isMutating,
     isCreating,
     isUpdating,
-    router
+    router,
+    watch,
+    setValue,
+    companyCategories,
   };
 };