src/components/Organization/AssignOrg.jsx

@@ -171,8 +171,8 @@ const AssignOrg = ({ setStep }) => {
           {flowType !== "default" && (
             <>
               {/* Organization Type */}
-              <div className="mb-1 text-start">
+              <div className="mb-3 text-start">
-                <Label htmlFor="organizationTypeId" required>
+                <Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
                   Organization Type
                 </Label>
                 <div className="d-flex flex-wrap gap-3 mt-1">
@@ -206,11 +206,11 @@ const AssignOrg = ({ setStep }) => {
 
               {/* Services */}
               <div className="mb-3">
-                <Label htmlFor="serviceIds" required>
+                <Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
                   Select Services
                 </Label>
                 {mergedServices?.map((service) => (
-                  <div key={service.id} className="form-check">
+                  <div key={service.id} className="form-check mb-3">
                     <input
                       type="checkbox"
                       value={service.id}
@@ -230,7 +230,7 @@ const AssignOrg = ({ setStep }) => {
           )}
 
           {/* Buttons: Always visible */}
-          <div className="d-flex justify-content-between mt-3">
+          <div className="d-flex justify-content-between mt-5">
             <button
               type="button"
               className="btn btn-xs btn-outline-secondary"
@@ -247,8 +247,8 @@ const AssignOrg = ({ setStep }) => {
               {isPending
                 ? "Please wait..."
                 : flowType === "default"
-                ? "Assign Organization"
+                  ? "Assign Organization"
-                : "Add"}
+                  : "Add"}
             </button>
           </div>
         </form>

src/components/Organization/ManagOrg.jsx

@@ -146,6 +146,7 @@ const ManagOrg = () => {
             required
             valueKey="id"
             options={service?.data || []}
+            required = {true}
           />
           {errors.serviceIds && (
             <span className="danger-text">{errors.serviceIds.message}</span>

src/components/common/Modal.jsx

@@ -27,9 +27,9 @@ const Modal = ({
         className={`modal-dialog modal-${size} modal-dialog-${position}`}
         role="document"
       >
-        <div className="modal-content  text-white shadow-lg">
+        <div className="modal-content text-white shadow-lg">
           {/* Header */}
-          <div className="modal-header pb-2 border-0">
+          <div className="modal-header justify-content-center pb-2 border-0">
             <h5 className="modal-title">{title}</h5>
             <button
               type="button"

src/components/common/SelectMultiple.jsx

@@ -12,6 +12,7 @@ const SelectMultiple = ({
   valueKey = "id",
   placeholder = "Please select...",
   IsLoading = false,
+  required = false
 }) => {
   const { setValue, watch } = useFormContext();
   const selectedValues = watch(name) || [];
@@ -146,7 +147,8 @@ const SelectMultiple = ({
         className="multi-select-dropdown-container"
         style={{ position: "relative" }}
       >
-       <label>{label}</label>
+      <Label required={required}>{label}</Label>
+
 
         <div
           className="multi-select-dropdown-header"

src/pages/Activities/AttendancePage.jsx

@@ -174,27 +174,25 @@ const AttendancePage = () => {
               {/* Search + Organization filter */}
               <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto d-flex gap-2 align-items-center">
                 {/* Organization Dropdown */}
-                {organizations?.length > 1 && (
+                <select
-                  <select
+                  className="form-select form-select-sm"
-                    className="form-select form-select-sm"
+                  style={{ minWidth: "180px" }}
-                    style={{ minWidth: "180px" }}
+                  value={appliedFilters.selectedOrganization}
-                    value={appliedFilters.selectedOrganization}
+                  onChange={(e) =>
-                    onChange={(e) =>
+                    setAppliedFilters((prev) => ({
-                      setAppliedFilters((prev) => ({
+                      ...prev,
-                        ...prev,
+                      selectedOrganization: e.target.value,
-                        selectedOrganization: e.target.value,
+                    }))
-                      }))
+                  }
-                    }
+                  disabled={orgLoading}
-                    disabled={orgLoading}
+                >
-                  >
+                  <option value="">All Organizations</option>
-                    <option value="">All Organizations</option>
+                  {organizations?.map((org) => (
-                    {organizations?.map((org) => (
+                    <option key={org.id} value={org.id}>
-                      <option key={org.id} value={org.id}>
+                      {org.name}
-                        {org.name}
+                    </option>
-                      </option>
+                  ))}
-                    ))}
+                </select>
-                  </select>
-                )}
 
                 {/* Search Input */}
                 <input
@@ -207,6 +205,7 @@ const AttendancePage = () => {
                 />
               </div>
 
+
             </div>
           </div>