sorted all dropdown list

src/components/Project/Infrastructure/FloorModel.jsx

@@ -25,9 +25,7 @@ const FloorModel = ({
   onSubmit,
   clearTrigger,
   onClearComplete,
-} ) =>
+}) => {
-{
-
   const [formData, setFormData] = useState(defaultModel);
   const [selectedBuilding, setSelectedBuilding] = useState({});
   const [buildings, setBuildings] = useState(project?.buildings || []);
@@ -45,14 +43,12 @@ const FloorModel = ({
     defaultValues: defaultModel,
   });
 
-  useEffect( () =>
+  useEffect(() => {
-  {
-
     if (clearTrigger) {
       reset(defaultModel);
       onClearComplete();
     }
-  }, [clearTrigger, onClearComplete, reset,]);
+  }, [clearTrigger, onClearComplete, reset]);
 
   // Handle building selection change
   const handleBuildigChange = (e) => {
@@ -64,7 +60,6 @@ const FloorModel = ({
         id: "",
         floorName: "",
         buildingId: building.id,
- 
       });
       setValue("buildingId", building.id); // Set value for validation
       setValue("id", "0"); // Reset floorId when changing building
@@ -74,14 +69,11 @@ const FloorModel = ({
         id: "",
         floorName: "",
         buildingId: "0",
-
       });
       setValue("buildingId", "0");
     }
   };
 
-
-
   // Handle floor selection change
   const handleFloorChange = (e) => {
     const id = e.target.value;
@@ -91,7 +83,6 @@ const FloorModel = ({
         id: floor.id,
         floorName: floor.floorName,
         buildingId: selectedBuilding.id,
-      
       });
       setValue("floorName", floor.floorName);
     } else {
@@ -99,7 +90,6 @@ const FloorModel = ({
         id: "0",
         floorName: "",
         buildingId: selectedBuilding.id,
-    
       });
       setValue("floorName", "");
     }
@@ -108,35 +98,31 @@ const FloorModel = ({
   // Handle form submission
   const onFormSubmit = (data) => {
     onSubmit(data);
-    reset(
+    reset({
-      {
+      floorName: "",
-        floorName: ""
+    });
-      } )
+    if (data.id !== "0") {
-    if ( data.id !== "0" )
-    {
       showToast("Floor updated successfully.", "success");
-    } else
+    } else {
-    {
       showToast("Floor created successfully.", "success");
     }
-    
   };
 
-
-  
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-            <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
+            <button
+              type="button"
+              className="btn-close"
+              aria-label="Close"
+              onClick={onClose}
+            />
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Floors - {project.name}</h5>
             </div>
-            <form
+            <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
-              className="row g-2"
-              onSubmit={handleSubmit(onFormSubmit)}
-            >
               <div className="col-12 col-md-12">
                 <label className="form-label" htmlFor="buildingId">
                   Select Building
@@ -151,7 +137,10 @@ const FloorModel = ({
                   <option value="0">Select Building</option>
                   {buildings &&
                     buildings?.length > 0 &&
-                  buildings.map((building) => (
+                    buildings
+                      ?.slice()
+                      ?.sort((a, b) => a.name.localeCompare(b.name))
+                      ?.map((building) => (
                         <option key={building.id} value={building.id}>
                           {building.name}
                         </option>
@@ -164,9 +153,7 @@ const FloorModel = ({
 
               {formData.buildingId !== "0" && (
                 <div className="col-12 col-md-12">
-                  <label className="form-label" >
+                  <label className="form-label">Select Floor</label>
-                    Select Floor
-                  </label>
                   <select
                     id="id"
                     className="select2 form-select form-select-sm"
@@ -182,8 +169,10 @@ const FloorModel = ({
                     ) )} */}
 
                     {selectedBuilding &&
-                  selectedBuilding?.floors.length > 0 &&
+                      selectedBuilding.floors.length > 0 &&
-                  selectedBuilding?.floors.map((floor) => (
+                      [...selectedBuilding.floors]
+                        ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
+                        ?.map((floor) => (
                           <option key={floor.id} value={floor.id}>
                             {floor.floorName}
                           </option>

src/components/Project/Infrastructure/TaskModel.jsx

@@ -162,7 +162,10 @@ const TaskModel = ({
                   onChange={handleBuildingChange}
                 >
                   <option value="0">Select Building</option>
-                  {project.buildings.map((building) => (
+                  {project.buildings
+                    ?.slice()
+                    ?.sort((a, b) => a.name.localeCompare(b.name))
+                    ?.map((building) => (
                       <option key={building.id} value={building.id}>
                         {building.name}
                       </option>
@@ -186,7 +189,10 @@ const TaskModel = ({
                     onChange={handleFloorChange}
                   >
                     <option value="0">Select Floor</option>
-                    {selectedBuilding.floors.map((floor) => (
+                    {selectedBuilding.floors
+                      ?.slice()
+                      ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
+                      ?.map((floor) => (
                         <option key={floor.id} value={floor.id}>
                           {floor.floorName} - ({floor.workAreas.length} Work
                           Areas)
@@ -212,7 +218,10 @@ const TaskModel = ({
                     onChange={handleWorkAreaChange}
                   >
                     <option value="0">Select Work Area</option>
-                    {selectedFloor.workAreas.map((workArea) => (
+                    {selectedFloor.workAreas
+                      ?.slice() 
+                      ?.sort((a, b) => a.areaName.localeCompare(b.areaName)) 
+                      ?.map((workArea) => (
                         <option key={workArea.id} value={workArea.id}>
                           {workArea.areaName}
                         </option>
@@ -237,8 +246,9 @@ const TaskModel = ({
                     onChange={handleActivityChange}
                   >
                     <option value="0">Select Activity</option>
-                    {activities?.slice() 
+                    {activities
-                      .sort((a, b) =>
+                      ?.slice()
+                      ?.sort((a, b) =>
                         a.activityName.localeCompare(b.activityName)
                       )
                       ?.map((activity) => (

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -10,7 +10,10 @@ const workAreaSchema = z.object( {
 
   buildingId: z.string().nonempty("Building is required"),
   floorId: z.string().nonempty("Floor is required"),
-  areaName: z.string().nonempty( "Work Area Name is required" ).min( 3, "Name must be at least 3 characters long" ),
+  areaName: z
+    .string()
+    .nonempty("Work Area Name is required")
+    .min(3, "Name must be at least 3 characters long"),
 });
 
 // Default form data
@@ -20,12 +23,25 @@ const defaultModel = {
   floorId: "0",
 };
 
-const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClose }) => {
+const WorkAreaModel = ({
+  project,
+  onSubmit,
+  clearTrigger,
+  onClearComplete,
+  onClose,
+}) => {
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
-  const [selectdWorkArea,setWorkArea] = useState()
+  const [selectdWorkArea, setWorkArea] = useState();
 
-  const { register, handleSubmit, formState: { errors }, setValue, reset, watch } = useForm({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+    watch,
+  } = useForm({
     resolver: zodResolver(workAreaSchema), // Use Zod resolver for validation
     defaultValues: defaultModel,
   });
@@ -41,25 +57,22 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
     }
   }, [clearTrigger, onClearComplete, reset]);
 
-  const handleWorkAreaChange = ( e ) =>
+  const handleWorkAreaChange = (e) => {
-  {
-    
-    
     const { value } = e.target;
 
     if (value === "0") {
       setValue("id", "0"); // Create New Work Area
       setValue("areaName", "");
 
-      setWorkArea(String(0))
+      setWorkArea(String(0));
     } else {
-      const workArea = selectedFloor?.workAreas.find((b) => b.id === Number(value));
+      const workArea = selectedFloor?.workAreas.find(
-      if ( workArea )
+        (b) => b.id === Number(value)
-      {
+      );
+      if (workArea) {
         setValue("id", String(workArea.id)); // Set id as a string
         setValue("areaName", workArea.areaName);
-        setWorkArea(String(workArea.id))
+        setWorkArea(String(workArea.id));
-
       }
     }
   };
@@ -89,37 +102,31 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
     reset(defaultModel); // Reset the form when a new building is selected
   };
 
-  const onSubmitForm = ( data ) =>
+  const onSubmitForm = (data) => {
-  {
-
     let WorkArea = {
       id: data.id,
       areaName: data.areaName,
       floorId: data.floorId,
-      buildingId:data.buildingId
+      buildingId: data.buildingId,
-    }
+    };
     onSubmit(WorkArea);
 
     reset({
       id: "0",
-      areaName:""
+      areaName: "",
     });
-    if ( data.id !== "0" )
+    if (data.id !== "0") {
-      {
       showToast("WorkArea updated successfully.", "success");
-      } else
+    } else {
-      {
       showToast("WorkArea created successfully.", "success");
-      
     }
-    
   };
 
   const handleCancel = () => {
     reset(defaultModel);
     setSelectedFloor(null);
     setSelectedBuilding(null);
-    onClose()
+    onClose();
   };
 
   return (
@@ -127,14 +134,21 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-          <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
+            <button
+              type="button"
+              className="btn-close"
+              aria-label="Close"
+              onClick={onClose}
+            />
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Work Area</h5>
             </div>
             <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
               {/* Building Selection */}
               <div className="col-6 col-md-6">
-                <label className="form-label" htmlFor="buildingId">Select Building</label>
+                <label className="form-label" htmlFor="buildingId">
+                  Select Building
+                </label>
                 <select
                   id="buildingId"
                   name="buildingId"
@@ -143,7 +157,10 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
                   onChange={handleBuildingChange}
                 >
                   <option value="0">Select Building</option>
-                  {project?.buildings?.map((building) => (
+                  {project?.buildings
+                    ?.slice()
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((building) => (
                       <option key={building.id} value={building.id}>
                         {building.name}
                       </option>
@@ -155,7 +172,9 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
               {/* Floor Selection */}
               {selectedBuilding && selectedBuilding.buildingId !== "0" && (
                 <div className="col-6 col-md-6">
-                  <label className="form-label" htmlFor="floorId">Select Floor</label>
+                  <label className="form-label" htmlFor="floorId">
+                    Select Floor
+                  </label>
                   <select
                     id="floorId"
                     name="floorId"
@@ -164,7 +183,10 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
                     onChange={handleFloorChange}
                   >
                     <option value="0">Select Floor</option>
-                    {selectedBuilding.floors.map((floor) => (
+                    {selectedBuilding.floors
+                      ?.slice() 
+                      .sort((a, b) => a.floorName.localeCompare(b.floorName)) 
+                      .map((floor) => (
                         <option key={floor.id} value={floor.id}>
                           {floor.floorName}
                         </option>
@@ -185,7 +207,6 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
                       className="select2 form-select form-select-sm"
                       {...register("id")}
                       onChange={handleWorkAreaChange}
-                     
                     >
                       <option value="0">Create New Work Area</option>
                       {selectedFloor?.workAreas?.map((workArea) => (
@@ -200,7 +221,9 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
                   {/* Work Area Name Input */}
                   <div className="col-12 col-md-12">
                     <label className="form-label" htmlFor="areaName">
-                      {watch("id") === "0" ? "Enter Work Area Name" : "Modify Work Area Name"}
+                      {watch("id") === "0"
+                        ? "Enter Work Area Name"
+                        : "Modify Work Area Name"}
                     </label>
                     <input
                       type="text"
@@ -210,15 +233,28 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClo
                       placeholder="Work Area"
                       {...register("areaName")}
                     />
-                    {errors.areaName && <span className="danger-text">{errors.areaName.message}</span>}
+                    {errors.areaName && (
+                      <span className="danger-text">
+                        {errors.areaName.message}
+                      </span>
+                    )}
                   </div>
 
                   {/* Submit and Cancel Buttons */}
                   <div className="col-12 text-center">
-                    <button type="submit" className="btn btn-sm btn-primary me-3">
+                    <button
+                      type="submit"
+                      className="btn btn-sm btn-primary me-3"
+                    >
                       {watch("id") === "0" ? "Add Work Area" : "Edit Work Area"}
                     </button>
-                    <button type="button" className="btn btn-sm btn-label-secondary" onClick={handleCancel} data-bs-dismiss="modal" aria-label="Close">
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-label-secondary"
+                      onClick={handleCancel}
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                    >
                       Cancel
                     </button>
                   </div>

src/components/Project/Infrastructure/WorkItem.jsx

@@ -8,6 +8,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const [itemName, setItemName] = useState("");
   const [NewWorkItem, setNewWorkItem] = useState();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
@@ -38,6 +39,8 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
 
+  const showModal1 = () => setShowModal(true);
+  const closeModal1 = () => setShowModal(false);
   return (
     <>
       <div
@@ -50,6 +53,33 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         <AssignRoleModel assignData={assigndata} onClose={closeModal} />
       </div>
 
+      <div
+        className={`modal fade ${showModal ? "show" : ""}`}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: showModal ? "block" : "none" }}
+        aria-hidden={!showModal}
+      >
+        <div
+          className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-body p-sm-4 p-0">
+              <button
+                type="button"
+                className="btn-close"
+                onClick={closeModal1}
+                aria-label="Close"
+              ></button>
+              <div className="container my-1"></div>
+
+              <h6>Comming Soon</h6>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <tr>
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
@@ -119,6 +149,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               aria-label="Modify"
               type="button"
               className="btn p-0 dropdown-toggle hide-arrow"
+              onClick={showModal1}
             >
               <i
                 className="bx bxs-edit me-2 text-primary"
@@ -132,6 +163,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               aria-label="Delete"
               type="button"
               className="btn p-0 dropdown-toggle hide-arrow"
+              onClick={showModal1}
             >
               <i
                 className="bx bx-trash me-1 text-danger"
@@ -154,11 +186,11 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
 
             <div className="dropdown-menu dropdown-menu-end m-0">
               {" "}
-              <a className="dropdown-item ">
+              <a className="dropdown-item " onClick={showModal1}>
                 {" "}
                 <i className="bx bxs-edit me-2 text-primary"></i>Edit
               </a>
-              <a className="dropdown-item">
+              <a className="dropdown-item" onClick={showModal1}>
                 {" "}
                 <i className="bx bx-trash me-1 text-danger"></i>Delete
               </a>