src/components/Directory/ManageDirectory.jsx

@@ -41,7 +41,7 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   const { designationList, loading: designloading } = useDesignation();
   const { contactTags, loading: Tagloading } = useContactTags();
   const [IsSubmitting, setSubmitting] = useState(false);
-  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [showSuggestions,setShowSuggestions] = useState(false);
   const [filteredDesignationList, setFilteredDesignationList] = useState([]);
   const dispatch = useDispatch();
 
@@ -133,12 +133,6 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     setValue("designation", val);
   };
 
-  // Handle phone number input to only allow numbers and max length of 10
-  const handlePhoneInput = (e) => {
-    const value = e.target.value.replace(/[^0-9]/g, "");
-    e.target.value = value.slice(0, 10);
-  };
-
 
   const toggleBucketId = (id) => {
     const updated = watchBucketIds?.includes(id)
@@ -284,11 +278,23 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
                       placeholder="email@example.com"
                     />
                     {index === emailFields.length - 1 ? (
+                      // <button
+                      //   type="button"
+                      //   className="btn btn-xs btn-primary ms-1"
+                      //   onClick={handleAddEmail}
+                      //   style={{ width: "24px", height: "24px" }}
+                      // >
                       <i
                         className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={handleAddEmail}
                       />
                     ) : (
+                      // <button
+                      //   type="button"
+                      //   className="btn btn-xs btn-danger ms-1 p-0"
+                      //   onClick={() => removeEmail(index)}
+                      //   style={{ width: "24px", height: "24px" }}
+                      // >
                       <i
                         className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={() => removeEmail(index)}
@@ -330,19 +336,29 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
-                      type="tel"
+                      type="text"
                       className="form-control form-control-sm"
                       {...register(`contactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
-                      onInput={handlePhoneInput}
-                      maxLength={10}
                     />
                     {index === phoneFields.length - 1 ? (
+                      // <button
+                      //   type="button"
+                      //   className="btn btn-xs btn-primary ms-1"
+                      //   onClick={handleAddPhone}
+                      //   style={{ width: "24px", height: "24px" }}
+                      // >
                       <i
                         className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={handleAddPhone}
                       />
                     ) : (
+                      // <button
+                      //   type="button"
+                      //   className="btn btn-xs btn-danger ms-1"
+                      //   onClick={() => removePhone(index)}
+                      //   style={{ width: "24px", height: "24px" }}
+                      // >
                       <i
                         className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
                         onClick={() => removePhone(index)}

src/components/Directory/UpdateContact.jsx

@@ -122,11 +122,6 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
     setValue("designation", val);
   };
 
-  const handlePhoneInput = (e) => {
-    const value = e.target.value.replace(/[^0-9]/g, "");
-    e.target.value = value.slice(0, 10);
-  };
-
   const watchBucketIds = watch("bucketIds");
 
   const toggleBucketId = (id) => {
@@ -383,12 +378,10 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
-                      type="tel"
+                      type="text"
                       className="form-control form-control-sm"
                       {...register(`contactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
-                      onInput={handlePhoneInput}
-                      maxLength={10}
                     />
                     {index === phoneFields.length - 1 ? (
                       // <button

src/components/Employee/EmpActivities.jsx

@@ -25,7 +25,7 @@ error,
         <div className="card-body">
           <div className="my-0 text-start">
             <DateRangePicker
-              DateDifference="7"
+              DateDifference="30"
               onRangeChange={setDateRange}
               endDateMode="today"
             />

src/components/Employee/EmpAttendance.jsx

@@ -128,7 +128,7 @@ const EmpAttendance = ({ employee }) => {
         >
           <div className="col-md-4 my-0 ">
             <DateRangePicker
-              DateDifference="7"
+              DateDifference="30"
               onRangeChange={setDateRange}
               endDateMode="today"
             />

src/components/Employee/EmpOverview.jsx

@@ -9,80 +9,105 @@ const EmpOverview = ({ profile }) => {
       <div className="col-12 mb-4">
         <div className="card">
           <div className="card-body">
-
             {/* About Heading */}
             <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
               About
             </small>
 
             {/* Full Name */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-user bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-user bx-xs me-2"></i>
                 <span>Full Name</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "74px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">
+              <div className="flex-grow-1 text-start text-break">
                 {profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
-              </span>
+              </div>
             </div>
 
             {/* Status */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-check bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-check bx-xs me-2"></i>
                 <span>Status</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "96px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">Active</span>
+              <div className="flex-grow-1 text-start">Active</div>
             </div>
 
             {/* Role */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-crown bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-crown bx-xs me-2"></i>
                 <span>Role</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "110px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">{profile?.jobRole || <em>NA</em>}</span>
+              <div className="flex-grow-1 text-break text-start">
+                {profile?.jobRole || <em>NA</em>}
+              </div>
             </div>
 
             {/* Gender */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-flag bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-flag bx-xs me-2"></i>
                 <span>Gender</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "91px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">{profile?.gender || <em>NA</em>}</span>
+              <div className="flex-grow-1 text-start">
+                {profile?.gender || <em>NA</em>}
+              </div>
             </div>
 
             {/* Birth Date */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-calendar bx-xs me-2"></i>
                 <span>Birth Date</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "74px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">
+              <div className="flex-grow-1 text-start">
-                {profile?.birthDate
+                {profile?.birthDate ? (
-                  ? new Date(profile.birthDate).toLocaleDateString()
+                  new Date(profile.birthDate).toLocaleDateString()
-                  : <em>NA</em>}
+                ) : (
-              </span>
+                  <em>NA</em>
+                )}
+              </div>
             </div>
 
             {/* Joining Date */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-calendar bx-xs me-2"></i>
                 <span>Joining Date</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "60px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">
+              <div className="flex-grow-1 text-start">
-                {profile?.joiningDate
+                {profile?.joiningDate ? (
-                  ? new Date(profile.joiningDate).toLocaleDateString()
+                  new Date(profile.joiningDate).toLocaleDateString()
-                  : <em>NA</em>}
+                ) : (
-              </span>
+                  <em>NA</em>
+                )}
+              </div>
             </div>
 
             {/* Contacts Heading */}
@@ -91,69 +116,83 @@ const EmpOverview = ({ profile }) => {
             </small>
 
             {/* Contact Number */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-phone bx-xs me-2"></i>
                 <span>Contact</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "87px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">{profile?.phoneNumber || <em>NA</em>}</span>
+              <div className="flex-grow-1 text-start">
+                {profile?.phoneNumber || <em>NA</em>}
+              </div>
             </div>
 
             {/* Email */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex" style={{ minWidth: "160px", whiteSpace: "nowrap" }}>
+              <div
-                <i className="bx bx-envelope bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-envelope bx-xs me-2"></i>
                 <span>Email</span>
-              </span>
+              </div>
-              <span className="me-5">:</span>
+              <div className="me-5">:</div>
-              <span>
+              <div className="flex-grow-1 text-break text-start">
                 {profile?.email ? (
                   <a href={`mailto:${profile.email}`}>{profile.email}</a>
                 ) : (
                   <em>NA</em>
                 )}
-              </span>
+              </div>
             </div>
 
-
             {/* Emergency Contact */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-user bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-user bx-xs me-2"></i>
                 <span>Emergency Contact</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "14px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">
+              <div className="flex-grow-1 text-start">
                 {profile?.emergencyContactPerson || <em>NA</em>}
-              </span>
+              </div>
             </div>
 
             {/* Emergency Phone */}
-            <div className="d-flex align-items-start mb-3">
+            <div className="d-flex mb-3">
-              <span className="d-flex">
+              <div
-                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-phone bx-xs me-2"></i>
                 <span>Emergency Phone</span>
-              </span>
+              </div>
-              <span style={{ marginLeft: "25px" }}>:</span>
+              <div className="me-5">:</div>
-              <span className="ms-5">
+              <div className="flex-grow-1 text-start">
                 {profile?.emergencyPhoneNumber || <em>NA</em>}
-              </span>
+              </div>
             </div>
 
             {/* Address */}
-           <div className="d-flex align-items-start">
+            <div className="d-flex mb-2">
-              <span className="d-flex align-items-center">
+              <div
-                <i className="bx bx-map bx-xs me-2 mt-1"></i>
+                className="d-flex align-items-center me-2 text-nowrap"
-                <span className="text-nowrap">Address</span>
+                style={{ minWidth: "160px" }}
-              </span>
+              >
-
+                <i className="bx bx-map bx-xs me-2"></i>
-              <span style={{ marginLeft: "86px" }}>:</span>
+                <span>Address</span>
-              <span className="ms-5" style={{ marginRight: "75px" }}>
+              </div>
-                {profile?.currentAddress || <em>NA</em>}
+              <div className="me-5">:</div>
-              </span>
+              <div className="flex-grow-1 text-break text-start">
+                {profile?.currentAddress || <em>NA</em>}
+              </div>
             </div>
-
           </div>
         </div>
       </div>

src/components/common/FilterIcon.jsx

@@ -30,7 +30,7 @@ const FilterIcon = ({
   }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities, selectedProject]);
 
   const getUniqueFilterValues = (key, overrideBuilding, overrideFloors) => {
-    if (!taskListData || taskListData.length === 0) return [];
+    if (!taskListData) return [];
 
     let filteredTasks = [...taskListData];
 
@@ -125,11 +125,6 @@ const FilterIcon = ({
   const appliedFilterCount =
     (appliedBuilding ? 1 : 0) + appliedFloors.length + appliedActivities.length;
 
-  // ✅ Hide filter if no task data
-  if (!taskListData || taskListData.length === 0) {
-    return null;
-  }
-
   return (
     <div className="dropdown" style={{ marginLeft: "-14px", position: "relative" }}>
       <a

src/pages/employee/EmployeeList.jsx

@@ -612,10 +612,9 @@ useEffect(() => {
                               {item.jobRole || "Not Assign Yet"}
                             </span>
                           </td>
+
                           <td className=" d-none  d-md-table-cell">
-                            {item.joiningDate
+                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
-                              ? moment(item.joiningDate).format("DD-MMM-YYYY")
-                              : "NA"}
                           </td>
                           <td>
                             {showInactive ? (

src/pages/master/MasterPage.jsx

@@ -4,43 +4,45 @@ import MasterModal from "../../components/master/MasterModal";
 import { mastersList } from "../../data/masters";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster, { useMasterMenu } from "../../hooks/masterHook/useMaster"
+import useMaster, {
+  useDeleteMasterItem,
+  useMasterMenu,
+} from "../../hooks/masterHook/useMaster";
 import MasterTable from "./MasterTable";
 import { getCachedData } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
 import { useQueryClient } from "@tanstack/react-query";
-
+import GlobalModel from "../../components/common/GlobalModel";
+import ConfirmModal from "../../components/common/ConfirmModal";
 
 const MasterPage = () => {
-  const {data,isLoading,isError,error:menuError} = useMasterMenu()
+  const { data, isLoading, isError, error: menuError } = useMasterMenu();
-  const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
+  const [modalConfig, setModalConfig] = useState(null);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const [filteredResults, setFilteredResults] = useState([]);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
   const dispatch = useDispatch();
-  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
+  const selectedMaster = useSelector(
+    (store) => store.localVariables.selectedMaster
+  );
   const queryClient = useQueryClient();
 
-  const { data: masterData = [], loading, error, RecallApi,isError:isMasterError } = useMaster();
+  const {
-
+    data: masterData = [],
+    loading,
+    error,
+    RecallApi,
+    isError: isMasterError,
+  } = useMaster();
+  const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
   const openModal = () => setIsCreateModalOpen(true);
 
   const closeModal = () => {
     setIsCreateModalOpen(false);
     setModalConfig(null);
-
-    // Clean up Bootstrap modal manually
-    const modalEl = document.getElementById('master-modal');
-    modalEl?.classList.remove('show');
-    if (modalEl) modalEl.style.display = 'none';
-
-    document.body.classList.remove('modal-open');
-    document.body.style.overflow = 'auto';
-
-    document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
   };
 
   const handleModalData = (modalType, item, masterType = selectedMaster) => {
@@ -54,15 +56,17 @@ const MasterPage = () => {
     if (!masterData?.length) return;
 
     const results = masterData.filter((item) =>
-      Object.values(item).some(
+      Object.values(item).some((field) =>
-        (field) => field?.toString().toLowerCase().includes(value)
+        field?.toString().toLowerCase().includes(value)
       )
     );
     setFilteredResults(results);
   };
   const displayData = useMemo(() => {
     if (searchTerm) return filteredResults;
-    return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
+    return (
+      queryClient.getQueryData(["masterData", selectedMaster]) || masterData
+    );
   }, [searchTerm, filteredResults, selectedMaster, masterData]);
 
   const columns = useMemo(() => {
@@ -73,9 +77,12 @@ const MasterPage = () => {
     }));
   }, [displayData]);
 
-  useEffect(() => {
+useEffect(() => {
-    if (modalConfig) openModal();
+  if (modalConfig?.modalType && modalConfig?.modalType !== "delete") {
-  }, [modalConfig]);
+    openModal();
+  }
+}, [modalConfig]);
+
 
   useEffect(() => {
     return () => {
@@ -84,15 +91,46 @@ const MasterPage = () => {
     };
   }, []);
 
-  if(isError || isMasterError) return <div className="d-flex flex-column align-items-center justify-content-center py-5">
+  if (isError || isMasterError)
-      <h4 className=" mb-3"><i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred</h4>
+    return (
+      <div className="d-flex flex-column align-items-center justify-content-center py-5">
+        <h4 className=" mb-3">
+          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
+          occurred
+        </h4>
         <p className="text-muted">{error?.message || menuError?.message}</p>
       </div>
+    );
   return (
     <>
-      {isCreateModalOpen && (
+      {modalConfig?.modalType === "delete" && (
+        <ConfirmModal
+          type="delete"
+          header={`Delete ${modalConfig.masterType}`}
+          message="Are you sure you want to delete?"
+          onSubmit={() => {
+            deleteMasterItem(
+              {
+                masterType: modalConfig.masterType,
+                item: modalConfig.item,
+                validateFn: modalConfig.validateFn,
+              },
+              { onSuccess: closeModal }
+            );
+          }}
+          onClose={closeModal}
+          loading={isPending}
+          isOpen={true}
+        />
+      )}
+      {isCreateModalOpen && modalConfig?.modalType !== "delete" && (
+        <GlobalModel
+          isOpen={isCreateModalOpen}
+          closeModal={closeModal}
+          size={modalConfig?.masterType === "Application Role" ? "lg" : "md"}
+        >
           <MasterModal modaldata={modalConfig} closeModal={closeModal} />
-
+        </GlobalModel>
       )}
 
       <div className="container-fluid">
@@ -119,15 +157,20 @@ const MasterPage = () => {
                       >
                         <label>
                           <select
-                            onChange={(e) => dispatch(changeMaster(e.target.value))}
+                            onChange={(e) =>
+                              dispatch(changeMaster(e.target.value))
+                            }
                             name="DataTables_Table_0_length"
                             aria-controls="DataTables_Table_0"
                             className="form-select py-1 px-2"
-                            style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                            style={{ fontSize: "0.875rem", height: "32px", width: "170px" }}
                             value={selectedMaster}
                           >
-                            {isLoading && <option value="">Loading...</option>}
+                            {isLoading && (
+                              <option value={null}>Loading...</option>
+                            )}
                             {!isLoading &&
+                              data &&
                               data?.map((item) => (
                                 <option key={item.id} value={item.name}>
                                   {item.name}
@@ -155,10 +198,13 @@ const MasterPage = () => {
                           ></input>
                         </label>
                       </div>
-                      <div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
+                      <div
+                        className={`dt-buttons btn-group flex-wrap ${
+                          !hasMasterPermission && "d-none"
+                        }`}
+                      >
                         {" "}
                         <div className="input-group">
-
                           <button
                             className={`btn btn-sm  add-new btn-primary `}
                             tabIndex="0"
@@ -167,7 +213,11 @@ const MasterPage = () => {
                             data-bs-toggle="modal"
                             data-bs-target="#master-modal"
                             onClick={() => {
-                              handleModalData(selectedMaster, "null", selectedMaster)
+                              handleModalData(
+                                selectedMaster,
+                                null,
+                                selectedMaster
+                              );
                             }}
                           >
                             <span>
@@ -183,13 +233,17 @@ const MasterPage = () => {
                   </div>
                 </div>
 
-                <MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
+                <MasterTable
+                  data={displayData}
+                  columns={columns}
+                  loading={loading}
+                  handleModalData={handleModalData}
+                />
                 <div style={{ width: "1%" }}></div>
               </div>
             </div>
           </div>
         </div>
-
       </div>
     </>
   );