src/components/Project/Infrastructure/BuildingModel.jsx

@@ -6,7 +6,6 @@ import ProjectRepository from "../../../repositories/ProjectRepository";
 import { useSelector } from "react-redux";
 import { useProjectDetails } from "../../../hooks/useProjects";
 import {getCachedData} from "../../../slices/apiDataManager";
-import showToast from "../../../services/toastService";
 
 // Zod validation schema
 const buildingSchema = z.object({
@@ -80,18 +79,10 @@ const BuildingModel = ({
 
   const onSubmitHandler = async (data) => {
     onSubmit({ ...data, projectId: project.id });
-    reset( {
+    reset({
-      Id:"0",
+      name: null,
-      name: "",
+      description: null,
-      description: "",
+    });
-    } );
-    if ( data.Id !== "0" )
-      {
-        showToast( "Building updated successfully.", "success" );
-      } else
-      {
-        showToast( "Building created successfully.", "success" );
-       }
   };
 
   useEffect( () =>

src/components/Project/Infrastructure/FloorModel.jsx

@@ -2,8 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { getCachedData } from "../../../slices/apiDataManager";
+import {getCachedData} from "../../../slices/apiDataManager";
-import showToast from "../../../services/toastService";
 
 // Zod validation schema
 const floorSchema = z.object({
@@ -25,9 +24,11 @@ const FloorModel = ({
   onSubmit,
   clearTrigger,
   onClearComplete,
-}) => {
+} ) =>
+{
+
   const [formData, setFormData] = useState(defaultModel);
-  const [selectedBuilding, setSelectedBuilding] = useState({});
+  const [ selectedBuilding, setSelectedBuilding ] = useState( {} );
   const [buildings, setBuildings] = useState(project?.buildings || []);
   
   // Initialize the form with React Hook Form
@@ -43,12 +44,14 @@ const FloorModel = ({
     defaultValues: defaultModel,
   });
 
-  useEffect(() => {
+  useEffect( () =>
+  {
+
     if (clearTrigger) {
       reset(defaultModel);
       onClearComplete();
     }
-  }, [clearTrigger, onClearComplete, reset]);
+  }, [clearTrigger, onClearComplete, reset,]);
 
   // Handle building selection change
   const handleBuildigChange = (e) => {
@@ -60,6 +63,7 @@ const FloorModel = ({
         id: "",
         floorName: "",
         buildingId: building.id,
+ 
       });
       setValue("buildingId", building.id); // Set value for validation
       setValue("id", "0"); // Reset floorId when changing building
@@ -69,11 +73,14 @@ const FloorModel = ({
         id: "",
         floorName: "",
         buildingId: "0",
+
       });
       setValue("buildingId", "0");
     }
   };
  
+
+
   // Handle floor selection change
   const handleFloorChange = (e) => {
     const id = e.target.value;
@@ -83,13 +90,15 @@ const FloorModel = ({
         id: floor.id,
         floorName: floor.floorName,
         buildingId: selectedBuilding.id,
+      
       });
-      setValue("floorName", floor.floorName);
+      setValue("floorName", floor.floorName); // Set floor name for form
     } else {
       setFormData({
         id: "0",
         floorName: "",
         buildingId: selectedBuilding.id,
+    
       });
       setValue("floorName", "");
     }
@@ -98,31 +107,23 @@ const FloorModel = ({
   // Handle form submission
   const onFormSubmit = (data) => {
     onSubmit(data);
-    reset({
-      floorName: "",
-    });
-    if (data.id !== "0") {
-      showToast("Floor updated successfully.", "success");
-    } 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
+            <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
-              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 className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
+            <form
+              className="row g-2"
+              onSubmit={handleSubmit(onFormSubmit)}
+            >
               <div className="col-12 col-md-12">
                 <label className="form-label" htmlFor="buildingId">
                   Select Building
@@ -136,15 +137,12 @@ const FloorModel = ({
                 >
                   <option value="0">Select Building</option>
                   {buildings &&
-                    buildings?.length > 0 &&
+                  buildings?.length > 0 &&
-                    buildings
+                  buildings.map((building) => (
-                      ?.slice()
+                    <option key={building.id} value={building.id}>
-                      ?.sort((a, b) => a.name.localeCompare(b.name))
+                      {building.name}
-                      ?.map((building) => (
+                    </option>
-                        <option key={building.id} value={building.id}>
+                  ))}
-                          {building.name}
-                        </option>
-                      ))}
                 </select>
                 {errors.buildingId && (
                   <p className="text-danger">{errors.buildingId.message}</p>
@@ -153,7 +151,9 @@ const FloorModel = ({
 
               {formData.buildingId !== "0" && (
                 <div className="col-12 col-md-12">
-                  <label className="form-label">Select Floor</label>
+                  <label className="form-label" >
+                    Select Floor
+                  </label>
                   <select
                     id="id"
                     className="select2 form-select form-select-sm"
@@ -169,14 +169,12 @@ const FloorModel = ({
                     ) )} */}
                     
                     {selectedBuilding &&
-                      selectedBuilding.floors.length > 0 &&
+                  selectedBuilding?.floors.length > 0 &&
-                      [...selectedBuilding.floors]
+                  selectedBuilding?.floors.map((floor) => (
-                        ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
+                    <option key={floor.id} value={floor.id}>
-                        ?.map((floor) => (
+                      {floor.floorName}
-                          <option key={floor.id} value={floor.id}>
+                    </option>
-                            {floor.floorName}
+                  ))}
-                          </option>
-                        ))}
                   </select>
                   {errors.id && (
                     <p className="text-danger">{errors.id.message}</p>

src/components/Project/Infrastructure/TaskModel.jsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from "zod";
-import { useDispatch } from "react-redux";
+import {useDispatch} from "react-redux";
-import { changeMaster } from "../../../slices/localVariablesSlice";
+import {changeMaster} from "../../../slices/localVariablesSlice";
 import useMaster from "../../../hooks/masterHook/useMaster";
 
+// Define Zod validation schema
 const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
   floorId: z.string().min(1, "Floor is required"),
@@ -17,8 +18,6 @@ const taskSchema = z.object({
 
 const defaultModel = {
   id: "0",
-  buildingID: "0",
-  floorId: "0",
   workAreaId: 0,
   activityID: 0,
   plannedWork: 0,
@@ -29,51 +28,49 @@ const TaskModel = ({
   project,
   onSubmit,
   clearTrigger,
-  onClearComplete,
+  onClearComplete,onClose
-  onClose,
+} )=>{
-}) => {
+  const dispatch = useDispatch()
-  const dispatch = useDispatch();
+  const {data:activities,loading} = useMaster()
-  const { data: activities } = useMaster();
   const [formData, setFormData] = useState(defaultModel);
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
   const [selectedWorkArea, setSelectedWorkArea] = useState(null);
   const [selectedActivity, setSelectedActivity] = useState(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const {
+  
-    register,
+  const { register, handleSubmit, formState: { errors },reset } = useForm({
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm({
     resolver: zodResolver(taskSchema),
-    defaultValues: defaultModel,
+    defaultValues: formData,
   });
 
   useEffect(() => {
     if (clearTrigger) {
-      resetForm();
+      setFormData(defaultModel);
       onClearComplete();
     }
   }, [clearTrigger, onClearComplete]);
 
-  useEffect(() => {
+  // Handle input changes
-    dispatch(changeMaster("Activity"));
+  const handleChange = (e) => {
-    resetForm();
+    const { name, value } = e.target;
-  }, []);
+    const activity = activities.find((b) => b.id === Number(value));
+    setFormData({ ...formData, [name]: value });
+  };
 
-  const handleBuildingChange = (e) => {
+  const handleActivityChange = (e) => {
     const { value } = e.target;
-    const building = project.buildings.find((b) => b.id === Number(value));
+    const activity = activities.find((b) => b.id === Number(value));
-    setSelectedBuilding(building);
+
-    setSelectedFloor(null);
+    setFormData({ ...formData, ["activityID"]: value });
-    setSelectedWorkArea(null);
+    setSelectedActivity(activity);
-    setSelectedActivity(null);
+  };
-    reset({
+
-      ...defaultModel,
+  const handleWorkAreaChange = (e) => {
-      buildingID: value,
+    const { value } = e.target;
-    });
+    const workArea = selectedFloor.workAreas.find((b) => b.id === Number(value));
+    setSelectedWorkArea(workArea);
+    setFormData({ ...formData, ["workAreaId"]: value });
   };
 
   const handleFloorChange = (e) => {
@@ -82,126 +79,105 @@ const TaskModel = ({
     setSelectedFloor(floor);
     setSelectedWorkArea(null);
     setSelectedActivity(null);
-    reset((prev) => ({
-      ...prev,
-      floorId: value,
-      workAreaId: 0,
-      activityID: 0,
-    }));
-  };
-
-  const handleWorkAreaChange = (e) => {
-    const { value } = e.target;
-    const workArea = selectedFloor.workAreas.find(
-      (b) => b.id === Number(value)
-    );
-    setSelectedWorkArea(workArea);
-    reset((prev) => ({
-      ...prev,
-      workAreaId: Number(value),
-    }));
-  };
-
-  const handleActivityChange = (e) => {
-    const { value } = e.target;
-    const activity = activities.find((b) => b.id === Number(value));
-    setSelectedActivity(activity);
-    reset((prev) => ({
-      ...prev,
-      activityID: Number(value),
-    }));
-  };
-
-  const onSubmitForm = async (data) => {
-    setIsSubmitting(true);
-    await onSubmit(data);
-    reset({
-      buildingID: data.buildingID,
-      floorId: data.floorId,
-      workAreaId: data.workAreaId,
-      activityID: data.activityID,
-      plannedWork: 0,
-      completedWork: 0,
-    });
-    setIsSubmitting(false);
-  };
-
-  const resetForm = () => {
     setFormData(defaultModel);
-    setSelectedBuilding(null);
+  };
+
+  const handleBuildingChange = (e) => {
+    const { value } = e.target;
+    const building = project.buildings.find((b) => b.id === Number(value));
+    setSelectedBuilding(building);
     setSelectedFloor(null);
     setSelectedWorkArea(null);
     setSelectedActivity(null);
-    reset(defaultModel);
+    setFormData(defaultModel);
   };
 
+  const onSubmitForm = ( data ) =>
+  {
+    onSubmit( data ); 
+    setSelectedActivity(null),
+   setSelectedWorkArea(null)
+    reset( {
+      plannedWork: 0,
+      completedWork:0
+      
+    })
+  };
+
+  useEffect( () =>
+  {
+
+    dispatch(changeMaster("Activity")),
+    () =>{
+      resetVlaue ()
+    }
+  },[])
+  const resetVlaue = () =>
+  {
+    setSelectedBuilding( null )
+    setSelectedFloor( null )
+    setSelectedWorkArea( null )
+    setSelectedActivity(null)
+    reset( {
+      plannedWork: 0,
+      completedWork:0
+    })
+ }
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-            <button
+          <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
-              type="button"
-              className="btn-close"
-              aria-label="Close"
-              onClick={onClose}
-            />
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Task</h5>
             </div>
             <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
               {/* Select Building */}
               <div className="col-6 col-md-6">
-                <label className="form-label" htmlFor="buildingID">
+                <label className="form-label" htmlFor="name">
                   Select Building
                 </label>
                 <select
                   id="buildingID"
-                  className="form-select form-select-sm"
+                  name="buildingID"
+                  className="select2 form-select form-select-sm"
+                  aria-label="Default select example"
                   {...register("buildingID")}
-                  onChange={handleBuildingChange}
+                  onChange={(e) => handleBuildingChange(e)}
                 >
                   <option value="0">Select Building</option>
-                  {project.buildings
+                  {project.buildings.map((building) => (
-                    ?.slice()
+                    <option key={building.id} value={building.id}>
-                    ?.sort((a, b) => a.name.localeCompare(b.name))
+                      {building.name}
-                    ?.map((building) => (
+                    </option>
-                      <option key={building.id} value={building.id}>
+                  ))}
-                        {building.name}
-                      </option>
-                    ))}
                 </select>
-                {errors.buildingID && (
+                {errors.buildingID && <p className="danger-text">{errors.buildingID.message}</p>}
-                  <p className="danger-text">{errors.buildingID.message}</p>
-                )}
               </div>
 
               {/* Select Floor */}
-              {selectedBuilding && (
+              {selectedBuilding && selectedBuilding.id !== "0" && (
                 <div className="col-6 col-md-6">
                   <label className="form-label" htmlFor="floorId">
                     Select Floor
                   </label>
                   <select
                     id="floorId"
-                    className="form-select form-select-sm"
+                    name="floorId"
+                    className="select2 form-select form-select-sm"
+                    aria-label="Default select example"
                     {...register("floorId")}
-                    onChange={handleFloorChange}
+                    onChange={(e) => handleFloorChange(e)}
                   >
                     <option value="0">Select Floor</option>
-                    {selectedBuilding.floors
+                    {selectedBuilding.floors.map((floor) => (
-                      ?.slice()
+                      <option key={floor.id} value={floor.id}>
-                      ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
+                        {floor.floorName} - ({floor.workAreas.length} Work Areas)
-                      ?.map((floor) => (
+                      </option>
-                        <option key={floor.id} value={floor.id}>
+                    ))}
-                          {floor.floorName} - ({floor.workAreas.length} Work
-                          Areas)
-                        </option>
-                      ))}
                   </select>
-                  {errors.floorId && (
+                  {errors.floorId && <p  className="danger-text">{errors.floorId.message}</p>}
-                    <p className="danger-text">{errors.floorId.message}</p>
-                  )}
                 </div>
               )}
 
@@ -213,23 +189,20 @@ const TaskModel = ({
                   </label>
                   <select
                     id="workAreaId"
-                    className="form-select form-select-sm"
+                    name="workAreaId"
-                    {...register("workAreaId", { valueAsNumber: true })}
+                    className="select2 form-select form-select-sm"
-                    onChange={handleWorkAreaChange}
+                    aria-label="Default select example"
+                    {...register("workAreaId",{valueAsNumber:true})}
+                    onChange={(e) => handleWorkAreaChange(e)}
                   >
                     <option value="0">Select Work Area</option>
-                    {selectedFloor.workAreas
+                    {selectedFloor.workAreas.map((workArea) => (
-                      ?.slice() 
+                      <option key={workArea.id} value={workArea.id}>
-                      ?.sort((a, b) => a.areaName.localeCompare(b.areaName)) 
+                        {workArea.areaName}
-                      ?.map((workArea) => (
+                      </option>
-                        <option key={workArea.id} value={workArea.id}>
+                    ))}
-                          {workArea.areaName}
-                        </option>
-                      ))}
                   </select>
-                  {errors.workAreaId && (
+                  {errors.workAreaId && <p  className="danger-text">{errors.workAreaId.message}</p>}
-                    <p className="danger-text">{errors.workAreaId.message}</p>
-                  )}
                 </div>
               )}
 
@@ -241,25 +214,20 @@ const TaskModel = ({
                   </label>
                   <select
                     id="activityID"
-                    className="form-select form-select-sm"
+                    name="activityID"
-                    {...register("activityID", { valueAsNumber: true })}
+                    className="select2 form-select form-select-sm"
-                    onChange={handleActivityChange}
+                    aria-label="Default select example"
+                    {...register("activityID",{valueAsNumber:true})}
+                    onChange={(e) => handleActivityChange(e)}
                   >
                     <option value="0">Select Activity</option>
-                    {activities
+                    {activities.map((activity) => (
-                      ?.slice()
+                      <option key={activity.id} value={activity.id}>
-                      ?.sort((a, b) =>
+                        {activity.activityName}
-                        a.activityName.localeCompare(b.activityName)
+                      </option>
-                      )
+                    ))}
-                      ?.map((activity) => (
-                        <option key={activity.id} value={activity.id}>
-                          {activity.activityName}
-                        </option>
-                      ))}
                   </select>
-                  {errors.activityID && (
+                  {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
-                    <p className="danger-text">{errors.activityID.message}</p>
-                  )}
                 </div>
               )}
 
@@ -272,12 +240,12 @@ const TaskModel = ({
                   <input
                     {...register("plannedWork", { valueAsNumber: true })}
                     type="number"
+                    id="plannedWork"
+                    name="plannedWork"
                     className="form-control form-control-sm me-2"
                     placeholder="Planned Work"
                   />
-                  {errors.plannedWork && (
+                  {errors.plannedWork && <p className="danger-text">{errors.plannedWork.message}</p>}
-                    <p className="danger-text">{errors.plannedWork.message}</p>
-                  )}
                 </div>
               )}
 
@@ -290,14 +258,12 @@ const TaskModel = ({
                   <input
                     {...register("completedWork", { valueAsNumber: true })}
                     type="number"
+                    id="completedWork"
+                    name="completedWork"
                     className="form-control form-control-sm me-2"
                     placeholder="Completed Work"
                   />
-                  {errors.completedWork && (
+                  {errors.completedWork && <p className="danger-text">{errors.completedWork.message}</p>}
-                    <p className="danger-text">
-                      {errors.completedWork.message}
-                    </p>
-                  )}
                 </div>
               )}
 
@@ -310,6 +276,8 @@ const TaskModel = ({
                   <input
                     type="text"
                     disabled
+                    id="unit"
+                    name="unit"
                     className="form-control form-control-sm me-2"
                     value={selectedActivity?.unitOfMeasurement || ""}
                   />
@@ -318,11 +286,7 @@ const TaskModel = ({
 
               <div className="col-12 text-center">
                 <button type="submit" className="btn btn-sm btn-primary me-3">
-                  {isSubmitting
+                  {formData.id !== "0" && formData.id !== "" ? "Edit Task" : "Add Task"}
-                    ? "Please Wait.."
-                    : formData.id !== "0" && formData.id !== ""
-                    ? "Edit Task"
-                    : "Add Task"}
                 </button>
                 <button
                   type="button"
@@ -331,6 +295,7 @@ const TaskModel = ({
                 >
                   Cancel
                 </button>
+               
               </div>
             </form>
           </div>

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -2,18 +2,14 @@ import React, { useState, useEffect } from "react";
 import { set, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import showToast from "../../../services/toastService";
 
 // Zod schema for form validation
-const workAreaSchema = z.object({
+const workAreaSchema = z.object( {
-  id: z.string().nonempty("Floor is required"),
+  id:z.string().nonempty("Floor is required"),
   
   buildingId: z.string().nonempty("Building is required"),
   floorId: z.string().nonempty("Floor is required"),
-  areaName: z
+  areaName: z.string().nonempty( "Work Area Name is required" ).min( 3, "Name must be at least 3 characters long" ),
-    .string()
-    .nonempty("Work Area Name is required")
-    .min(3, "Name must be at least 3 characters long"),
 });
 
 // Default form data
@@ -23,30 +19,17 @@ const defaultModel = {
   floorId: "0",
 };
 
-const WorkAreaModel = ({
+const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClose }) => {
-  project,
-  onSubmit,
-  clearTrigger,
-  onClearComplete,
-  onClose,
-}) => {
   const [selectedBuilding, setSelectedBuilding] = useState(null);
-  const [selectedFloor, setSelectedFloor] = useState(null);
+  const [ selectedFloor, setSelectedFloor ] = useState( null );
-  const [selectdWorkArea, setWorkArea] = useState();
+  const [selectdWorkArea,setWorkArea] = useState()
 
-  const {
+  const { register, handleSubmit, formState: { errors }, setValue, reset, watch } = useForm({
-    register,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    reset,
-    watch,
-  } = useForm({
     resolver: zodResolver(workAreaSchema), // Use Zod resolver for validation
     defaultValues: defaultModel,
   });
 
-  const floorId = watch("floorId"); // Watch the floorId for conditional rendering
+  const floorId = watch( "floorId" );  // Watch the floorId for conditional rendering
 
   useEffect(() => {
     if (clearTrigger) {
@@ -57,22 +40,25 @@ const WorkAreaModel = ({
     }
   }, [clearTrigger, onClearComplete, reset]);
 
-  const handleWorkAreaChange = (e) => {
+  const handleWorkAreaChange = ( e ) =>
+  {
+    
+    
     const { value } = e.target;
 
     if (value === "0") {
-      setValue("id", "0"); // Create New Work Area
+      setValue("id", "0");  // Create New Work Area
-      setValue("areaName", "");
+      setValue( "areaName", "" );
  
-      setWorkArea(String(0));
+      setWorkArea(String(0))
     } else {
-      const workArea = selectedFloor?.workAreas.find(
+      const workArea = selectedFloor?.workAreas.find((b) => b.id === Number(value));
-        (b) => b.id === Number(value)
+      if ( workArea )
-      );
+      {
-      if (workArea) {
+        setValue("id", String(workArea.id));  // Set id as a string
-        setValue("id", String(workArea.id)); // Set id as a string
         setValue("areaName", workArea.areaName);
-        setWorkArea(String(workArea.id));
+        setWorkArea(String(workArea.id))
+
       }
     }
   };
@@ -83,8 +69,8 @@ const WorkAreaModel = ({
 
     if (floor) {
       setSelectedFloor(floor);
-      setValue("floorId", floor.id); // Update floorId
+      setValue("floorId", floor.id);  // Update floorId
-      setValue("id", "0"); // Reset Work Area ID for new area creation
+      setValue("id", "0");  // Reset Work Area ID for new area creation
       setValue("areaName", ""); // Reset Work Area Name when changing floor
     } else {
       setSelectedFloor(null);
@@ -102,31 +88,23 @@ const WorkAreaModel = ({
     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: "",
-    });
-    if (data.id !== "0") {
-      showToast("WorkArea updated successfully.", "success");
-    } else {
-      showToast("WorkArea created successfully.", "success");
     }
+    onSubmit(WorkArea);  // Send the final data to the parent
   };
 
   const handleCancel = () => {
-    reset(defaultModel);
+    reset(defaultModel); // Reset the form to initial state
     setSelectedFloor(null);
-    setSelectedBuilding(null);
+    setSelectedBuilding( null );
-    onClose();
+    onClose()
   };
 
   return (
@@ -134,21 +112,14 @@ const WorkAreaModel = ({
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-            <button
+          <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
-              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">
+                <label className="form-label" htmlFor="buildingId">Select Building</label>
-                  Select Building
-                </label>
                 <select
                   id="buildingId"
                   name="buildingId"
@@ -157,14 +128,11 @@ const WorkAreaModel = ({
                   onChange={handleBuildingChange}
                 >
                   <option value="0">Select Building</option>
-                  {project?.buildings
+                  {project?.buildings?.map((building) => (
-                    ?.slice()
+                    <option key={building.id} value={building.id}>
-                    .sort((a, b) => a.name.localeCompare(b.name))
+                      {building.name}
-                    .map((building) => (
+                    </option>
-                      <option key={building.id} value={building.id}>
+                  ))}
-                        {building.name}
-                      </option>
-                    ))}
                 </select>
                 {errors.buildingId && <span>{errors.buildingId.message}</span>}
               </div>
@@ -172,9 +140,7 @@ const WorkAreaModel = ({
               {/* Floor Selection */}
               {selectedBuilding && selectedBuilding.buildingId !== "0" && (
                 <div className="col-6 col-md-6">
-                  <label className="form-label" htmlFor="floorId">
+                  <label className="form-label" htmlFor="floorId">Select Floor</label>
-                    Select Floor
-                  </label>
                   <select
                     id="floorId"
                     name="floorId"
@@ -183,14 +149,11 @@ const WorkAreaModel = ({
                     onChange={handleFloorChange}
                   >
                     <option value="0">Select Floor</option>
-                    {selectedBuilding.floors
+                    {selectedBuilding.floors.map((floor) => (
-                      ?.slice() 
+                      <option key={floor.id} value={floor.id}>
-                      .sort((a, b) => a.floorName.localeCompare(b.floorName)) 
+                        {floor.floorName}
-                      .map((floor) => (
+                      </option>
-                        <option key={floor.id} value={floor.id}>
+                    ))}
-                          {floor.floorName}
-                        </option>
-                      ))}
                   </select>
                   {errors.floorId && <span>{errors.floorId.message}</span>}
                 </div>
@@ -200,7 +163,7 @@ const WorkAreaModel = ({
               {floorId !== "0" && (
                 <>
                   <div className="col-12 col-md-12">
-                    <label className="form-label">Select Work Area</label>
+                    <label className="form-label" >Select Work Area</label>
                     <select
                       id="workAreaId"
                       name="workAreaId"
@@ -221,9 +184,7 @@ const WorkAreaModel = ({
                   {/* Work Area Name Input */}
                   <div className="col-12 col-md-12">
                     <label className="form-label" htmlFor="areaName">
-                      {watch("id") === "0"
+                      {watch("id") === "0" ? "Enter Work Area Name" : "Modify Work Area Name"}
-                        ? "Enter Work Area Name"
-                        : "Modify Work Area Name"}
                     </label>
                     <input
                       type="text"
@@ -233,28 +194,15 @@ const WorkAreaModel = ({
                       placeholder="Work Area"
                       {...register("areaName")}
                     />
-                    {errors.areaName && (
+                    {errors.areaName && <span className="danger-text">{errors.areaName.message}</span>}
-                      <span className="danger-text">
-                        {errors.areaName.message}
-                      </span>
-                    )}
                   </div>
 
                   {/* Submit and Cancel Buttons */}
                   <div className="col-12 text-center">
-                    <button
+                    <button type="submit" className="btn btn-sm btn-primary me-3">
-                      type="submit"
-                      className="btn btn-sm btn-primary me-3"
-                    >
                       {watch("id") === "0" ? "Add Work Area" : "Edit Work Area"}
                     </button>
-                    <button
+                    <button type="button" className="btn btn-sm btn-label-secondary" onClick={handleCancel} data-bs-dismiss="modal" aria-label="Close">
-                      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,7 +8,6 @@ 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);
@@ -39,8 +38,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
 
-  const showModal1 = () => setShowModal(true);
-  const closeModal1 = () => setShowModal(false);
   return (
     <>
       <div
@@ -53,33 +50,6 @@ 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>
@@ -149,7 +119,6 @@ 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"
@@ -163,7 +132,6 @@ 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"
@@ -186,11 +154,11 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
 
             <div className="dropdown-menu dropdown-menu-end m-0">
               {" "}
-              <a className="dropdown-item " onClick={showModal1}>
+              <a className="dropdown-item ">
                 {" "}
                 <i className="bx bxs-edit me-2 text-primary"></i>Edit
               </a>
-              <a className="dropdown-item" onClick={showModal1}>
+              <a className="dropdown-item">
                 {" "}
                 <i className="bx bx-trash me-1 text-danger"></i>Delete
               </a>

src/components/Project/ProjectInfra.jsx

@@ -160,7 +160,7 @@ const ProjectInfra = ({
           });
      
           setProject( updatedProject );
-          // closeTaskModel()
+          closeTaskModel()
         }
       })
       .catch((error) => {
@@ -172,6 +172,7 @@ const ProjectInfra = ({
   const submitData = async (infraObject) => {
     try
     {
+      debugger
       
       let response = await ProjectRepository.manageProjectInfra(infraObject);
       const entity = response.data;
@@ -205,8 +206,7 @@ const ProjectInfra = ({
           ...prevProject,
           buildings: updatedBuildings,
         } ) );
-        // closeBuildingModel()
+        closeBuildingModel()
-        
       }
       // Handle the floor data
       else if (entity.floor) {
@@ -243,7 +243,7 @@ const ProjectInfra = ({
           data: updatedProject,
         });
         setProject( updatedProject );
-        // closeFloorModel()
+        closeFloorModel()
       }
       // Handle the work area data
       else if ( entity.workArea )
@@ -287,7 +287,7 @@ const ProjectInfra = ({
           data: updatedProject,
         });
         setProject( updatedProject );
-        // closeWorkAreaModel()
+        closeWorkAreaModel()
       }
       // Handle the task (workItem) data
       else {
@@ -296,6 +296,7 @@ const ProjectInfra = ({
     } catch (Err) {
       showToast("Somthing wrong", "error");
     }
+    handleClose();
   };