src/components/Project/AboutProject.jsx

@@ -51,14 +51,14 @@ const AboutProject = () => {
         <>
           <div className="card mb-6">
             <div className="card-header text-start">
-              <h6 className="card-action-title mb-0 ps-1">
+              <h6 className="card-action-title mb-0">
                 {" "}
                 <i className="fa fa-building rounded-circle text-primary"></i>
                 <span className="ms-2">Project Profile</span>
               </h6>
             </div>
             <div className="card-body">
-              <ul className="list-unstyled my-3 ps-0">
+              <ul className="list-unstyled my-3 ps-2">
                 <li className="d-flex mb-3">
                   <div className="d-flex align-items-center" style={{ width: '120px' }}> {/* Adjust width as needed for alignment */}
                     <i className="bx bx-cog"></i>

src/components/master/CreateRole.jsx

@@ -141,92 +141,83 @@ const CreateRole = ({ modalType, onClose }) => {
         )}
       </div>
 
-      <div
+      <div className="col-12 col-md-12  border">
-        className="border rounded px-3"
-        style={{
-          maxHeight: "350px",
-          overflowY: "auto",
-          overflowX: "hidden", // Prevent bottom scrollbar
-        }}
-      >
         {masterFeatures.map((feature, featureIndex) => (
           <React.Fragment key={feature.id}>
-            <div className="row my-1">
+            <div
-              {/* Feature Title */}
+              className="row my-1"
-              <div className="col-12 text-start fw-semibold mb-2">
+              key={feature.id}
-                {feature.name}
+              style={{ marginLeft: "0px" }}
+            >
+              <div
+                className="col-12 col-md-3 d-flex text-start align-items-start"
+                style={{ wordWrap: "break-word" }}
+              >
+                <span className="fs">{feature.name}</span>
               </div>
 
-              {/* Permissions Grid */}
+              <div className="col-12 col-md-1"></div>
-              <div className="col-12">
-                <div className="row">
-                  {feature.featurePermissions.map((perm, permIndex) => {
-                    const refIndex = featureIndex * 100 + permIndex;
-                    return (
-                      <div
-                        className="col-12 col-sm-6 col-md-4 mb-3"
-                        key={perm.id}
-                      >
-                        <div className="d-flex align-items-start">
-                          <label
-                            className="form-check-label d-flex align-items-center"
-                            htmlFor={perm.id}
-                          >
-                            <input
-                              type="checkbox"
-                              className="form-check-input me-2"
-                              id={perm.id}
-                              value={perm.id}
-                              {...register("selectedPermissions")}
-                            />
-                            {perm.name}
-                          </label>
 
-                          {/* Info icon */}
+              <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-                          <div className="ms-1 d-flex align-items-center">
+                {feature.featurePermissions.map((perm, permIndex) => {
-                            <div
+                  const refIndex = featureIndex * 10 + permIndex;
-                              ref={(el) => (popoverRefs.current[refIndex] = el)}
+                  return (
-                              tabIndex="0"
+                    <div className="d-flex me-3 mb-2" key={perm.id}>
-                              className="d-flex align-items-center justify-content-center"
+                      <label className="form-check-label" htmlFor={perm.id}>
-                              data-bs-toggle="popover"
+                        <input
-                              data-bs-trigger="focus"
+                          type="checkbox"
-                              data-bs-placement="right"
+                          className="form-check-input mx-2"
-                              data-bs-html="true"
+                          id={perm.id}
-                              data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
+                          value={perm.id}
-                            >
+                          {...register("selectedPermissions")}
-                              &nbsp;
+                        />
-                              <svg
+                        {perm.name}
-                                xmlns="http://www.w3.org/2000/svg"
+                      </label>
-                                width="13"
+                      <div style={{ display: "flex", alignItems: "center" }}>
-                                height="13"
+                        <div
-                                fill="currentColor"
+                          key={refIndex}
-                                className="bi bi-info-circle"
+                          ref={(el) => (popoverRefs.current[refIndex] = el)}
-                                viewBox="0 0 16 16"
+                          tabIndex="0"
-                              >
+                          className="d-flex align-items-center avatar-group justify-content-center"
-                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                          data-bs-toggle="popover"
-                                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                          refIndex
-                              </svg>
+                          data-bs-trigger="focus"
-                            </div>
+                          data-bs-placement="right"
-                          </div>
+                          data-bs-html="true"
+                          data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
+                                      </div>
+                                    `}
+                        >
+                          &nbsp;
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="13"
+                            height="13"
+                            fill="currentColor"
+                            className="bi bi-info-circle"
+                            viewBox="0 0 16 16"
+                          >
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                          </svg>
                         </div>
                       </div>
-                    );
+                    </div>
-                  })}
+                  );
-                </div>
+                })}
               </div>
             </div>
-
+            <hr className="hr my-1 py-1" />
-            <hr className="my-2" />
           </React.Fragment>
         ))}
-
         {errors.selectedPermissions && (
           <p className="text-danger">{errors.selectedPermissions.message}</p>
         )}
         {!masterFeatures && <p>Loading...</p>}
       </div>
 
-
       {masterFeatures && (
         <div className="col-12 text-center">
           <button type="submit" className="btn btn-sm btn-primary me-3">

src/components/master/EditRole.jsx

@@ -7,7 +7,14 @@ import { useFeatures } from "../../hooks/useMasterRole";
 import { MasterRespository } from "../../repositories/MastersRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
-import { useUpdateApplicationRole } from "../../hooks/masterHook/useMaster";
+import {useUpdateApplicationRole} from "../../hooks/masterHook/useMaster";
+
+
+
+
+
+
+
 
 const updateSchema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
@@ -18,145 +25,147 @@ const updateSchema = z.object({
   }),
 });
 
+
+
 const EditMaster = ({ master, onClose }) => {
-  const maxDescriptionLength = 255;
+const maxDescriptionLength = 255;
-  const popoverRefs = useRef([]);
+const popoverRefs = useRef([]);
-  const { masterFeatures } = useFeatures();
+const { masterFeatures } = useFeatures();
-  const { mutate: updateApplicationRole, isPending: isLoading } = useUpdateApplicationRole(() => onClose?.());
+const { mutate: updateApplicationRole, isPending: isLoading } = useUpdateApplicationRole(() => onClose?.());
 
-  const buildDefaultPermissions = () => {
+const buildDefaultPermissions = () => {
-    const defaults = {};
+  const defaults = {};
-    masterFeatures.forEach((feature) => {
+  masterFeatures.forEach((feature) => {
-      feature.featurePermissions.forEach((perm) => {
+    feature.featurePermissions.forEach((perm) => {
-        const existing = master?.item?.featurePermission?.find(p => p.id === perm.id);
+      const existing = master?.item?.featurePermission?.find(p => p.id === perm.id);
-        defaults[perm.id] = existing?.isEnabled || false;
+      defaults[perm.id] = existing?.isEnabled || false;
-      });
     });
-    return defaults;
-  };
-
-  const initialPermissions = buildDefaultPermissions();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, dirtyFields },
-    setError,
-    reset,
-  } = useForm({
-    resolver: zodResolver(updateSchema),
-    defaultValues: {
-      role: master?.item?.role || "",
-      description: master?.item?.description || "",
-      permissions: initialPermissions,
-    },
   });
+  return defaults;
+};
 
-  const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
+const initialPermissions = buildDefaultPermissions();
 
-  const onSubmit = (data) => {
+const {
-    const existingIds = new Set(master?.item?.featurePermission?.map(p => p.id));
+  register,
+  handleSubmit,
+  formState: { errors, dirtyFields },
+  setError,
+  reset,
+} = useForm({
+  resolver: zodResolver(updateSchema),
+  defaultValues: {
+    role: master?.item?.role || "",
+    description: master?.item?.description || "",
+    permissions: initialPermissions,
+  },
+});
 
-    const updatedPermissions = Object.entries(data.permissions)
+const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
-      .filter(([id, value]) => {
-        return existingIds.has(id) || value === true || (dirtyFields.permissions?.[id]);
-      })
-      .map(([id, value]) => ({ id, isEnabled: value }));
 
-    if (updatedPermissions.length === 0) {
+const onSubmit = (data) => {
-      setError("permissions", {
+  const existingIds = new Set(master?.item?.featurePermission?.map(p => p.id));
-        type: "manual",
-        message: "At least one permission must be selected.",
-      });
-      return;
-    }
 
-    const payload = {
+  const updatedPermissions = Object.entries(data.permissions)
-      id: master?.item?.id,
+    .filter(([id, value]) => {
-      role: data.role,
+      return existingIds.has(id) || value === true || (dirtyFields.permissions?.[id]);
-      description: data.description,
+    })
-      featuresPermission: updatedPermissions,
+    .map(([id, value]) => ({ id, isEnabled: value }));
-    };
 
-    updateApplicationRole({ id: payload.id, payload });
+  if (updatedPermissions.length === 0) {
+    setError("permissions", {
+      type: "manual",
+      message: "At least one permission must be selected.",
+    });
+    return;
+  }
+
+  const payload = {
+    id: master?.item?.id,
+    role: data.role,
+    description: data.description,
+    featuresPermission: updatedPermissions,
   };
-  // const onSubmit = (data) => {
+
-  //     setIsLoading(true)
+   updateApplicationRole({ id: payload.id, payload });
-  //     const existingIds = new Set(
+};
-  //       master?.item?.featurePermission?.map((p) => p.id)
+// const onSubmit = (data) => {
-  //     );
+//     setIsLoading(true)
+//     const existingIds = new Set(
+//       master?.item?.featurePermission?.map((p) => p.id)
+//     );
 
 
-  //     const updatedPermissions = Object.entries(data.permissions)
+//     const updatedPermissions = Object.entries(data.permissions)
-  //       .filter(([id, value]) => {
+//       .filter(([id, value]) => {
-  //         if (existingIds.has(id)) return true;
+//         if (existingIds.has(id)) return true;
 
-  //         return (
+//         return (
-  //           value === true ||
+//           value === true ||
-  //           (dirtyFields.permissions && dirtyFields.permissions[id])
+//           (dirtyFields.permissions && dirtyFields.permissions[id])
-  //         );
+//         );
-  //       })
+//       })
-  //       .map(([id, value]) => ({ id, isEnabled: value }));
+//       .map(([id, value]) => ({ id, isEnabled: value }));
 
 
-  //     if (updatedPermissions.length === 0) {
+//     if (updatedPermissions.length === 0) {
-  //       setError("permissions", {
+//       setError("permissions", {
-  //         type: "manual",
+//         type: "manual",
-  //         message: "At least one permission must be selected.",
+//         message: "At least one permission must be selected.",
-  //       });
+//       });
-  //       return;
+//       return;
-  //     }
+//     }
 
-  //     const updatedRole = {
+//     const updatedRole = {
-  //       id: master?.item?.id,
+//       id: master?.item?.id,
-  //       role: data.role,
+//       role: data.role,
-  //       description: data.description,
+//       description: data.description,
-  //       featuresPermission: updatedPermissions,
+//       featuresPermission: updatedPermissions,
-  //     };
+//     };
-  //     MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
+//     MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
-  //       setIsLoading(false)
+//       setIsLoading(false)
 
 
-  //       const cachedData = getCachedData("Application Role");
+//       const cachedData = getCachedData("Application Role");
 
-  //       if (cachedData) {
+//       if (cachedData) {
 
-  //         const updatedData = cachedData.map((role) =>
+//         const updatedData = cachedData.map((role) =>
-  //           role.id === resp.data?.id ? { ...role, ...resp.data } : role
+//           role.id === resp.data?.id ? { ...role, ...resp.data } : role
-  //         );
+//         );
 
-  //         cacheData("Application Role", updatedData);
+//         cacheData("Application Role", updatedData);
-  //       }
+//       }
-  //       showToast("Application Role Updated successfully.", "success");
+//       showToast("Application Role Updated successfully.", "success");
-  //       setIsLoading(false)
+//       setIsLoading(false)
-  //       onClose()
+//       onClose()
-  //     }).catch((Err) => {
+//     }).catch((Err) => {
-  //       showToast(Err.message, "error");
+//       showToast(Err.message, "error");
-  //       setIsLoading(false)
+//       setIsLoading(false)
-  //     })
+//     })
 
-  //   };
+//   };
-  useEffect(() => {
+useEffect(() => {
-    reset({
+  reset({
-      role: master?.item?.role || "",
+    role: master?.item?.role || "",
-      description: master?.item?.description || "",
+    description: master?.item?.description || "",
-      permissions: buildDefaultPermissions(),
+    permissions: buildDefaultPermissions(),
-    });
+  });
-    setDescriptionLength(master?.item?.description?.length || 0);
+  setDescriptionLength(master?.item?.description?.length || 0);
-  }, [master, reset]);
+}, [master, reset]);
 
-  useEffect(() => {
+useEffect(() => {
-    popoverRefs.current.forEach((el) => {
+  popoverRefs.current.forEach((el) => {
-      if (el) {
+    if (el) {
-        new bootstrap.Popover(el, {
+      new bootstrap.Popover(el, {
-          trigger: "focus",
+        trigger: "focus",
-          placement: "right",
+        placement: "right",
-          html: true,
+        html: true,
-          content: el.getAttribute("data-bs-content"),
+        content: el.getAttribute("data-bs-content"),
-        });
+      });
-      }
+    }
-    });
+  });
-  }, [masterFeatures]);
+}, [masterFeatures]);
 
 
   return (
@@ -190,90 +199,76 @@ const EditMaster = ({ master, onClose }) => {
         )}
       </div>
 
-     <div className="col-12 text-start">
+      <div className="col-12 col-md-12 mx-2s" >
-  {/* Scrollable Container with Border */}
-  <div
-    className="border rounded p-3"
-    style={{
-      maxHeight: "350px",
-      overflowY: "auto",
-      overflowX: "hidden", // Prevent horizontal scrollbar
-      paddingRight: "10px",
-    }}
-  >
-    {masterFeatures.map((feature, featureIndex) => (
-      <div key={feature.id} className="mb-3">
-        {/* Feature Group Title */}
-        <div className="fw-semibold mb-2">{feature.name}</div>
 
-        {/* Permissions Grid */}
+        {masterFeatures.map((feature, featureIndex) => (
-        <div className="row">
+          <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
-          {feature.featurePermissions.map((perm, permIndex) => {
-            const refIndex = featureIndex * 10 + permIndex;
-            return (
-              <div
-                key={perm.id}
-                className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
-              >
-                <label
-                  className="form-check-label d-flex align-items-center"
-                  htmlFor={perm.id}
-                >
-                  <input
-                    type="checkbox"
-                    className="form-check-input me-2"
-                    id={perm.id}
-                    {...register(`permissions.${perm.id}`, {
-                      value: initialPermissions[perm.id] || false,
-                    })}
-                  />
-                  {perm.name}
-                </label>
 
-                {/* Info Icon */}
+            <div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
-                <div style={{ display: "flex", alignItems: "center" }}>
+              <span className="fs">{feature.name}</span>
-                  <div
+            </div>
-                    ref={(el) => (popoverRefs.current[refIndex] = el)}
+            <div className="col-12 col-md-1">
-                    tabIndex="0"
+
-                    className="d-flex align-items-center justify-content-center"
+            </div>
-                    data-bs-toggle="popover"
+            <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap ">
-                    data-bs-trigger="focus"
+              {feature.featurePermissions.map((perm, permIndex) => {
-                    data-bs-placement="right"
+                const refIndex = (featureIndex * 10) + permIndex;
-                    data-bs-html="true"
+                return (
-                    data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
+
-                  >
+                  <div className="d-flex me-3 mb-2" key={perm.id}>
-                    &nbsp;
+
-                    <svg
+                    <label className="form-check-label" htmlFor={perm.id}>
-                      xmlns="http://www.w3.org/2000/svg"
+                      <input
-                      width="13"
+                        type="checkbox"
-                      height="13"
+                        className="form-check-input mx-2"
-                      fill="currentColor"
+                        id={perm.id}
-                      className="bi bi-info-circle"
+                        {...register(`permissions.${perm.id}`, {
-                      viewBox="0 0 16 16"
+                          value: initialPermissions[perm.id] || false
-                    >
+                        })}
-                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                      />
-                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+
-                    </svg>
+                      {perm.name}
+                    </label>
+
+
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div
+                        key={refIndex}
+                        ref={(el) =>
+                          (popoverRefs.current[refIndex] = el)
+                        }
+                        tabIndex="0"
+                        className="d-flex align-items-center avatar-group justify-content-center"
+                        data-bs-toggle="popover" refIndex
+                        data-bs-trigger="focus"
+                        data-bs-placement="right"
+                        data-bs-html="true"
+                        data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
+                                      </div>
+                                    `}
+                      >
+                        &nbsp;
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
+                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
-                </div>
+                )
-              </div>
+              })}
-            );
-          })}
-        </div>
 
-        <hr className="my-2" />
+
+            </div>
+            <hr className="hr my-1 py-1" />
+          </div>
+        ))}
+        {errors.permissions && (
+          <p className="text-danger">{errors.permissions.message}</p>
+        )}
       </div>
-    ))}
-  </div>
-
-  {/* Error Display */}
-  {errors.permissions && (
-    <p className="text-danger">{errors.permissions.message}</p>
-  )}
-</div>
-
-
-
 
       <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>