Correction in Subscription page.

src/components/Project/Team/TeamAssignToProject.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import TeamEmployeeList from "./TeamEmployeeList";
 import { useOrganization } from "../../../hooks/useDirectory";
 import { useOrganizationsList } from "../../../hooks/useOrganization";
@@ -14,26 +14,26 @@ const TeamAssignToProject = ({ closeModal }) => {
   const project = useSelectedProject();
   const { data, isLoading, isError, error } =
     useProjectAssignedOrganizationsName(project);
-  const { control, watch, formState: { errors } } = useForm({
+  const { control, watch, setValue, formState: { errors } } = useForm({
     defaultValues: { organizationId: "" },
   });
+
+  useEffect(() => {
+    if (data?.length === 1) {
+      setValue("organizationId", data[0].id, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  }, [data, setValue]);
+
   return (
     <div className="container">
       {/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
       <h5 className="mb-4">Assign Employee To Project</h5>
 
       <div className="row align-items-center gx-5 text-start">
-        <div className="col-12 col-md-6 mb-2 mt-5">
+        <div className="col-12 col-md-6 mb-2">
-         
-          {!isLoading && data && (
-            <>
-              {data.length === 1 && (
-                <h5 className="mb-2">{data[0].name}</h5>
-              )}
-
-              {/* If multiple organizations → show dropdown */}
-              {data.length > 1 && (
-                <div className="col-12 col-md-6 mb-2 text-start">
           <AppFormController
             name="organizationId"
             control={control}
@@ -41,7 +41,7 @@ const TeamAssignToProject = ({ closeModal }) => {
             render={({ field }) => (
               <SelectField
                 label="Select Organization"
-                        options={[...data]}
+                options={data ?? []}
                 placeholder="Choose an Organization"
                 required
                 labelKey="name"
@@ -54,17 +54,9 @@ const TeamAssignToProject = ({ closeModal }) => {
             )}
           />
           {errors.organizationId && (
-                    <small className="danger-text">
+            <small className="danger-text">{errors.organizationId.message}</small>
-                      {errors.organizationId.message}
-                    </small>
           )}
         </div>
-              )}
-            </>
-          )}
-          {/* </div> */}
-
-        </div>
         <div className="col-12 col-md-6 mt-n2">
           <div className="d-flex flex-column">
             <label htmlFor="search" className="form-label mb-1">

src/pages/Home/SubscriptionPlans.jsx

@@ -108,15 +108,15 @@ const SubscriptionPlans = () => {
                       if (!mod || !mod.name) return null;
 
                       return (
-                        <div className="accordion-item mb-2" key={mod.id}>
+                        <div className="accordion-item mb-2" key={`${plan.id}-${mod.id}`}>
-                          <h2 className="accordion-header" id={`heading-${mod.id}`}>
+  <h2 id={`heading-${plan.id}-${mod.id}`} className="accordion-header">
     <button
-                              className="accordion-button collapsed py-2 d-flex justify-content-between align-items-center"
+      className="accordion-button py-2 d-flex justify-content-between align-items-center"
       type="button"
       data-bs-toggle="collapse"
-                              data-bs-target={`#collapse-${mod.id}-${plan.id}`}
+      data-bs-target={`#collapse-${plan.id}-${mod.id}`}
-                              aria-expanded="false"
+      aria-expanded="true"
-                              aria-controls={`collapse-${mod.id}-${plan.id}`}
+      aria-controls={`collapse-${plan.id}-${mod.id}`}
     >
       <span className="fw-semibold d-flex align-items-center">
         {mod.enabled ? (
@@ -127,45 +127,37 @@ const SubscriptionPlans = () => {
         {mod.name}
       </span>
 
-                              {/* Down arrow */}
+      <i className="bx bx-chevron-down ms-2"></i>
-                              <i
-                                className="bx bx-chevron-down ms-2 transition-arrow"
-                                style={{ fontSize: "16px", transition: "transform 0.3s" }}
-                              ></i>
     </button>
   </h2>
 
   <div
-                            id={`collapse-${mod.id}-${plan.id}`}
+    id={`collapse-${plan.id}-${mod.id}`}
-                            className="accordion-collapse collapse"
+    className="accordion-collapse collapse show"
-                            data-bs-parent={`#planFeatures-${plan.id}`}
+    aria-labelledby={`heading-${plan.id}-${mod.id}`}
   >
     <div className="accordion-body py-2">
-                              {mod.features && mod.features.length > 0 ? (
+      {mod.features?.length > 0 ? (
         <ul className="list-unstyled ms-2">
           {mod.features.map((feat) => (
-                                    <li
+            <li key={feat.id} className="d-flex align-items-start mb-1">
-                                      key={feat.id}
-                                      className="d-flex align-items-start mb-1"
-                                    >
               <i
-                                        className={`fa-regular ${mod.enabled ? "bx bxs-circle text-success" : "bx bxs-circle text-danger"
+                className={`bx bxs-circle ${
+                  mod.enabled ? "text-success" : "text-danger"
                 } me-2 mt-1`}
                 style={{ fontSize: "8px" }}
               ></i>
-
               <span>{feat.name}</span>
             </li>
           ))}
         </ul>
       ) : (
-                                <p className="text-muted small mb-0">
+        <p className="text-muted small mb-0">No additional features</p>
-                                  No additional features
-                                </p>
       )}
     </div>
   </div>
-                        </div>
+</div>
+
                       );
                     })}
                 </div>