refactore SelectMult Tag for label display is required or optional

src/components/Organization/ManageOrganization.jsx

@@ -9,6 +9,7 @@ import Modal from "../common/Modal";
 import { useOrganization } from "../../hooks/useDirectory";
 import { useOrganizationModal } from "../../hooks/useOrganization";
 import Label from "../common/Label";
+import SelectMultiple from "../common/SelectMultiple";
 
 const ManageOrganization = () => {
   const orgModal = useOrganizationModal();
@@ -48,6 +49,14 @@ const ManageOrganization = () => {
           </Label>
           <input className="form-control form-control-sm" />
         </div>
+        <div className="mb-1 text-start">
+          <SelectMultiple
+            name="serviceIds"
+            label="Services"
+            required={true}
+            valueKey="id"
+          />
+        </div>
         <div className="mb-1 text-start">
           <Label htmlFor="organization" required>
             Address
@@ -66,7 +75,7 @@ const ManageOrganization = () => {
       isOpen={orgModal.isOpen}
       onClose={orgModal.onClose}
       onSubmit={onSubmit}
-      title={"Manage organization"}
+      title={"Manage Organization"}
       actionLabel={"Submit"}
       body={contentBody}
     />

src/components/common/SelectMultiple.jsx

@@ -2,15 +2,17 @@ import React, { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 import { createPortal } from "react-dom";
 import "./MultiSelectDropdown.css";
+import Label from "./Label";
 
 const SelectMultiple = ({
   name,
   options = [],
   label = "Select options",
-  labelKey = "name", // Can now be a function or a string
+  labelKey = "name",
   valueKey = "id",
   placeholder = "Please select...",
   IsLoading = false,
+  required = false,
 }) => {
   const { setValue, watch } = useFormContext();
   const selectedValues = watch(name) || [];
@@ -20,7 +22,11 @@ const SelectMultiple = ({
   const containerRef = useRef(null);
   const dropdownRef = useRef(null);
 
-  const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
+  const [dropdownStyles, setDropdownStyles] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
 
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -100,8 +106,14 @@ const SelectMultiple = ({
         return (
           <div
             key={valueVal}
-            className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
-            style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
+            className={`multi-select-dropdown-option ${
+              isChecked ? "selected" : ""
+            }`}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              padding: "4px 8px",
+            }}
           >
             <input
               type="checkbox"
@@ -130,8 +142,14 @@ const SelectMultiple = ({
 
   return (
     <>
-      <div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
-        <label className="form-label mb-1">{label}</label>
+      <div
+        ref={containerRef}
+        className="multi-select-dropdown-container"
+        style={{ position: "relative" }}
+      >
+        <Label htmlFor={name} required={required}>
+          {label}
+        </Label>
 
         <div
           className="multi-select-dropdown-header"
@@ -140,7 +158,9 @@ const SelectMultiple = ({
         >
           <span
             className={
-              selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
+              selectedValues.length > 0
+                ? "placeholder-style-selected"
+                : "placeholder-style"
             }
           >
             <div className="selected-badges-container">
@@ -149,7 +169,10 @@ const SelectMultiple = ({
                   const found = options.find((opt) => opt[valueKey] === val);
                   const label = found ? getLabel(found) : "";
                   return (
-                    <span key={val} className="badge badge-selected-item mx-1 mb-1">
+                    <span
+                      key={val}
+                      className="badge badge-selected-item mx-1 mb-1"
+                    >
                       {label}
                     </span>
                   );