Merge branch 'Document_Manag' of https://git.marcoaiot.com/admin/marco.pms.web into Document_Manag

# Conflicts:
#	src/components/Employee/EmpOverview.jsx

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,6 +133,12 @@ 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)
@@ -278,23 +284,11 @@ 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)}
@@ -336,29 +330,19 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
-                      type="text"
+                      type="tel"
                       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)}
@@ -506,4 +490,4 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   );
 };
 
-export default ManageDirectory;
+export default ManageDirectory;

src/components/Directory/UpdateContact.jsx

@@ -122,6 +122,11 @@ 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) => {
@@ -378,10 +383,12 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
-                      type="text"
+                      type="tel"
                       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="30"
+              DateDifference="7"
               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="30"
+              DateDifference="7"
               onRangeChange={setDateRange}
               endDateMode="today"
             />

src/components/Employee/EmpOverview.jsx

@@ -9,105 +9,80 @@ 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 mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-user bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-user bx-xs me-2"></i>
                 <span>Full Name</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "74px" }}>:</span>
-              <div className="flex-grow-1 text-start text-break">
+              <span className="ms-5">
                 {profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
-              </div>
+              </span>
             </div>
 
             {/* Status */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-check bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-check bx-xs me-2"></i>
                 <span>Status</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "96px" }}>:</span>
-              <div className="flex-grow-1 text-start">Active</div>
+              <span className="ms-5">Active</span>
             </div>
 
             {/* Role */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-crown bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-crown bx-xs me-2"></i>
                 <span>Role</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "110px" }}>:</span>
-              <div className="flex-grow-1 text-break text-start">
+              <span className="ms-5">{profile?.jobRole || <em>NA</em>}</span>
-                {profile?.jobRole || <em>NA</em>}
-              </div>
             </div>
 
             {/* Gender */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-flag bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-flag bx-xs me-2"></i>
                 <span>Gender</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "91px" }}>:</span>
-              <div className="flex-grow-1 text-start">
+              <span className="ms-5">{profile?.gender || <em>NA</em>}</span>
-                {profile?.gender || <em>NA</em>}
-              </div>
             </div>
 
             {/* Birth Date */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-calendar bx-xs me-2"></i>
                 <span>Birth Date</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "74px" }}>:</span>
-              <div className="flex-grow-1 text-start">
+              <span className="ms-5">
-                {profile?.birthDate ? (
+                {profile?.birthDate
-                  new Date(profile.birthDate).toLocaleDateString()
+                  ? new Date(profile.birthDate).toLocaleDateString()
-                ) : (
+                  : <em>NA</em>}
-                  <em>NA</em>
+              </span>
-                )}
-              </div>
             </div>
 
             {/* Joining Date */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-calendar bx-xs me-2"></i>
                 <span>Joining Date</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "60px" }}>:</span>
-              <div className="flex-grow-1 text-start">
+              <span className="ms-5">
-                {profile?.joiningDate ? (
+                {profile?.joiningDate
-                  new Date(profile.joiningDate).toLocaleDateString()
+                  ? new Date(profile.joiningDate).toLocaleDateString()
-                ) : (
+                  : <em>NA</em>}
-                  <em>NA</em>
+              </span>
-                )}
-              </div>
             </div>
 
             {/* Contacts Heading */}
@@ -116,83 +91,69 @@ const EmpOverview = ({ profile }) => {
             </small>
 
             {/* Contact Number */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-phone bx-xs me-2"></i>
                 <span>Contact</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "87px" }}>:</span>
-              <div className="flex-grow-1 text-start">
+              <span className="ms-5">{profile?.phoneNumber || <em>NA</em>}</span>
-                {profile?.phoneNumber || <em>NA</em>}
-              </div>
             </div>
 
             {/* Email */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex" style={{ minWidth: "160px", whiteSpace: "nowrap" }}>
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-envelope bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-envelope bx-xs me-2"></i>
                 <span>Email</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span className="me-5">:</span>
-              <div className="flex-grow-1 text-break text-start">
+              <span>
                 {profile?.email ? (
                   <a href={`mailto:${profile.email}`}>{profile.email}</a>
                 ) : (
                   <em>NA</em>
                 )}
-              </div>
+              </span>
             </div>
 
+
             {/* Emergency Contact */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-user bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-user bx-xs me-2"></i>
                 <span>Emergency Contact</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "14px" }}>:</span>
-              <div className="flex-grow-1 text-start">
+              <span className="ms-5">
                 {profile?.emergencyContactPerson || <em>NA</em>}
-              </div>
+              </span>
             </div>
 
             {/* Emergency Phone */}
-            <div className="d-flex mb-3">
+            <div className="d-flex align-items-start mb-3">
-              <div
+              <span className="d-flex">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
-              >
-                <i className="bx bx-phone bx-xs me-2"></i>
                 <span>Emergency Phone</span>
-              </div>
+              </span>
-              <div className="me-5">:</div>
+              <span style={{ marginLeft: "25px" }}>:</span>
-              <div className="flex-grow-1 text-start">
+              <span className="ms-5">
                 {profile?.emergencyPhoneNumber || <em>NA</em>}
-              </div>
+              </span>
             </div>
 
             {/* Address */}
-            <div className="d-flex mb-2">
+           <div className="d-flex align-items-start">
-              <div
+              <span className="d-flex align-items-center">
-                className="d-flex align-items-center me-2 text-nowrap"
+                <i className="bx bx-map bx-xs me-2 mt-1"></i>
-                style={{ minWidth: "160px" }}
+                <span className="text-nowrap">Address</span>
-              >
+              </span>
-                <i className="bx bx-map bx-xs me-2"></i>
+
-                <span>Address</span>
+              <span style={{ marginLeft: "86px" }}>:</span>
-              </div>
+              <span className="ms-5" style={{ marginRight: "75px" }}>
-              <div className="me-5">:</div>
-              <div className="flex-grow-1 text-break text-start">
                 {profile?.currentAddress || <em>NA</em>}
-              </div>
+              </span>
             </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) return [];
+    if (!taskListData || taskListData.length === 0) return [];
 
     let filteredTasks = [...taskListData];
 
@@ -125,6 +125,11 @@ 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,9 +612,10 @@ useEffect(() => {
                               {item.jobRole || "Not Assign Yet"}
                             </span>
                           </td>
-
                           <td className=" d-none  d-md-table-cell">
-                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
+                            {item.joiningDate
+                              ? moment(item.joiningDate).format("DD-MMM-YYYY")
+                              : "NA"}
                           </td>
                           <td>
                             {showInactive ? (

src/pages/master/MasterPage.jsx

@@ -4,45 +4,43 @@ import MasterModal from "../../components/master/MasterModal";
 import { mastersList } from "../../data/masters";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster, {
+import useMaster, { useMasterMenu } from "../../hooks/masterHook/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(null);
+  const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: 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(
+  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
-    (store) => store.localVariables.selectedMaster
-  );
   const queryClient = useQueryClient();
 
-  const {
+  const { data: masterData = [], loading, error, RecallApi,isError:isMasterError } = useMaster();
-    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) => {
@@ -56,17 +54,15 @@ const MasterPage = () => {
     if (!masterData?.length) return;
 
     const results = masterData.filter((item) =>
-      Object.values(item).some((field) =>
+      Object.values(item).some(
-        field?.toString().toLowerCase().includes(value)
+        (field) => field?.toString().toLowerCase().includes(value)
       )
     );
     setFilteredResults(results);
   };
   const displayData = useMemo(() => {
     if (searchTerm) return filteredResults;
-    return (
+    return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
-      queryClient.getQueryData(["masterData", selectedMaster]) || masterData
-    );
   }, [searchTerm, filteredResults, selectedMaster, masterData]);
 
   const columns = useMemo(() => {
@@ -77,12 +73,9 @@ const MasterPage = () => {
     }));
   }, [displayData]);
 
-useEffect(() => {
+  useEffect(() => {
-  if (modalConfig?.modalType && modalConfig?.modalType !== "delete") {
+    if (modalConfig) openModal();
-    openModal();
+  }, [modalConfig]);
-  }
-}, [modalConfig]);
-
 
   useEffect(() => {
     return () => {
@@ -91,46 +84,15 @@ useEffect(() => {
     };
   }, []);
 
-  if (isError || isMasterError)
+  if(isError || isMasterError) return <div className="d-flex flex-column align-items-center justify-content-center py-5">
-    return (
+      <h4 className=" mb-3"><i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred</h4>
-      <div className="d-flex flex-column align-items-center justify-content-center py-5">
+      <p className="text-muted">{error?.message || menuError?.message}</p>
-        <h4 className=" mb-3">
+  </div>
-          <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 (
     <>
-      {modalConfig?.modalType === "delete" && (
+      {isCreateModalOpen && (
-        <ConfirmModal
+        <MasterModal modaldata={modalConfig} closeModal={closeModal} />
-          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">
@@ -157,20 +119,15 @@ useEffect(() => {
                       >
                         <label>
                           <select
-                            onChange={(e) =>
+                            onChange={(e) => dispatch(changeMaster(e.target.value))}
-                              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: "170px" }}
+                            style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
                             value={selectedMaster}
                           >
-                            {isLoading && (
+                            {isLoading && <option value="">Loading...</option>}
-                              <option value={null}>Loading...</option>
-                            )}
                             {!isLoading &&
-                              data &&
                               data?.map((item) => (
                                 <option key={item.id} value={item.name}>
                                   {item.name}
@@ -198,13 +155,10 @@ useEffect(() => {
                           ></input>
                         </label>
                       </div>
-                      <div
+                      <div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
-                        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"
@@ -213,17 +167,13 @@ useEffect(() => {
                             data-bs-toggle="modal"
                             data-bs-target="#master-modal"
                             onClick={() => {
-                              handleModalData(
+                              handleModalData(selectedMaster, "null", selectedMaster)
-                                selectedMaster,
-                                null,
-                                selectedMaster
-                              );
                             }}
                           >
                             <span>
                               <i className="bx bx-plus-circle me-2"></i>
                               <span className=" d-sm-inline-block">
-                                Add {selectedMaster}
+                                Add  {selectedMaster}
                               </span>
                             </span>
                           </button>{" "}
@@ -233,17 +183,13 @@ useEffect(() => {
                   </div>
                 </div>
 
-                <MasterTable
+                <MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
-                  data={displayData}
-                  columns={columns}
-                  loading={loading}
-                  handleModalData={handleModalData}
-                />
                 <div style={{ width: "1%" }}></div>
               </div>
             </div>
           </div>
         </div>
+
       </div>
     </>
   );