fix(MultiSelect): enhance item handling and improve empty state display

- Update MultiSelect component to allow items to be optional or null, improving flexibility.
- Implement safe handling of items to prevent errors when items are not provided.
- Add a message to display when no items are available, enhancing user experience.
- Refactor rendering logic for selected items to maintain consistent styling.

src/components/FormElements/MultiSelect.tsx

@@ -17,7 +17,7 @@ interface Option {
 
 type MultiSelectProps<T extends FieldValues> = {
   label: string;
-  items: { value: string; label: string }[];
+  items?: { value: string; label: string }[] | null;
   value?: string[];
   errors?: FieldErrors<T>;
   required?: boolean;
@@ -54,13 +54,15 @@ function MultiSelect<T extends FieldValues>({
   const trigger = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const newOptions = items.map((item) => ({
+    const safeItems = Array.isArray(items) ? items : [];
+
+    const newOptions = safeItems.map((item) => ({
       ...item,
       selected: value?.includes(item.value) ?? false,
     }));
     setOptions(newOptions);
 
-    const newSelectedIndices = items
+    const newSelectedIndices = safeItems
       .map((item, index) => (value?.includes(item.value) ? index : -1))
       .filter((index) => index !== -1);
     setSelected(newSelectedIndices);
@@ -215,7 +217,12 @@ function MultiSelect<T extends FieldValues>({
           ref={dropdownRef}
         >
           <div className="py-1">
-            {options.map((option, index) => (
+            {options.length === 0 ? (
+              <div className="px-3 py-2 text-sm text-dark-6 dark:text-dark-6">
+                No items are available
+              </div>
+            ) : (
+              options.map((option, index) => (
                 <div
                   key={index}
                   className={cn(
@@ -248,7 +255,8 @@ function MultiSelect<T extends FieldValues>({
                   </div>
                   {option.label}
                 </div>
-            ))}
+              ))
+            )}
           </div>
         </div>
       </div>

src/components/Tables/tenders/index.tsx

@@ -14,7 +14,7 @@ import { Tooltip } from "react-tooltip";
 import useTenderListPresenter from "./useTenderListPresenter";
 
 import { ExclamationIcon, EyeIcon } from "@/assets/icons";
-import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+
 import ListHeader from "@/components/ui/ListHeader";
 import Modal from "@/components/ui/modal";
 import Pagination from "@/components/ui/pagination";

src/hooks/queries/useCompaniesQueries.ts

@@ -140,7 +140,7 @@ export const useCreateCompanyCategory = (successCallback?: () => void) => {
       queryClient.invalidateQueries({
         queryKey: [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL],
       });
-      router.push("/companies/categories");
+      router.push("/company-categories");
     },
   });
 };