fixed directory header layout

2025-10-11 12:43:37 +05:30 · 2025-10-11 12:43:37 +05:30 · 281a956ac8
commit 281a956ac8
parent 31882c3d12
6 changed files with 166 additions and 196 deletions
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@ -38,190 +38,136 @@ const usePagination = (data, itemsPerPage) => {
 };

 const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
-  // const selectedProject = useSelector(
-  //   (store) => store.localVariables.projectId
-  // );
-  const selectedProject = useSelectedProject();
-  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-  const dispatch = useDispatch();
-  const [loading, setLoading] = useState(false);
-  const [showPending, setShowPending] = useState(false);
+const selectedProject = useSelectedProject();
+const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+const dispatch = useDispatch();
+const [loading, setLoading] = useState(false);
+const [showPending, setShowPending] = useState(false);
+const [isRefreshing, setIsRefreshing] = useState(false);

-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [processedData, setProcessedData] = useState([]);
+const today = new Date();
+today.setHours(0, 0, 0, 0);

-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
+const yesterday = new Date();
+yesterday.setDate(yesterday.getDate() - 1);

-  const yesterday = new Date();
-  yesterday.setDate(yesterday.getDate() - 1);
+const isSameDay = (dateStr) => {
+  if (!dateStr) return false;
+  const d = new Date(dateStr);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime() === today.getTime();
+};

-  const isSameDay = (dateStr) => {
-    if (!dateStr) return false;
-    const d = new Date(dateStr);
-    d.setHours(0, 0, 0, 0);
-    return d.getTime() === today.getTime();
-  };
+const isBeforeToday = (dateStr) => {
+  if (!dateStr) return false;
+  const d = new Date(dateStr);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime() < today.getTime();
+};

-  const isBeforeToday = (dateStr) => {
-    if (!dateStr) return false;
-    const d = new Date(dateStr);
-    d.setHours(0, 0, 0, 0);
-    return d.getTime() < today.getTime();
-  };
+const sortByName = (a, b) => {
+  const nameA = (a.firstName + a.lastName).toLowerCase();
+  const nameB = (b.firstName + b.lastName).toLowerCase();
+  return nameA.localeCompare(nameB);
+};

-  const sortByName = (a, b) => {
-    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
-    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA?.localeCompare(nameB);
-  };
+const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
+  selectedProject,
+  dateRange.startDate,
+  dateRange.endDate,
+  organizationId
+);

-  const {
-    data = [],
-    isLoading,
-    error,
-    refetch,
-    isFetching,
-  } = useAttendancesLogs(
-    selectedProject,
-    dateRange.startDate,
-    dateRange.endDate,
-    organizationId
-  );
-  const filtering = (data) => {
-    const filteredData = showPending
-      ? data.filter((item) => item.checkOutTime === null)
-      : data;
+const processedData = useMemo(() => {
+  const filteredData = showPending
+    ? data.filter((item) => item.checkOutTime === null)
+    : data;

-    const group1 = filteredData
-      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-      .sort(sortByName);
-    const group2 = filteredData
-      .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-      .sort(sortByName);
-    const group3 = filteredData
-      .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-      .sort(sortByName);
-    const group4 = filteredData.filter(
-      (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
-    );
-    const group5 = filteredData
-      .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
-      .sort(sortByName);
-    const group6 = filteredData
-      .filter((d) => d.activity === 5)
-      .sort(sortByName);
+  const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
+  const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
+  const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
+  const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
+  const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName);
+  const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);

-    const sortedList = [
-      ...group1,
-      ...group2,
-      ...group3,
-      ...group4,
-      ...group5,
-      ...group6,
-    ];
+  const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];

-    // Group by date
-    const groupedByDate = sortedList.reduce((acc, item) => {
-      const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
-      if (date) {
-        acc[date] = acc[date] || [];
-        acc[date].push(item);
-      }
-      return acc;
-    }, {});
-
-    const sortedDates = Object.keys(groupedByDate).sort(
-      (a, b) => new Date(b) - new Date(a)
-    );
-
-    const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
-    setProcessedData(finalData);
-  };
-
-  useEffect(() => {
-    filtering(data);
-  }, [data, showPending]);
-
-  // New useEffect to handle search filtering
-  const filteredSearchData = useMemo(() => {
-    if (!searchTerm) {
-      return processedData;
+  const groupedByDate = sortedList.reduce((acc, item) => {
+    const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
+    if (date) {
+      acc[date] = acc[date] || [];
+      acc[date].push(item);
    }
-    const lowercasedSearchTerm = searchTerm.toLowerCase();
-    return processedData.filter((item) => {
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-      return fullName.includes(lowercasedSearchTerm);
-    });
-  }, [processedData, searchTerm]);
+    return acc;
+  }, {});

-  const {
-    currentPage,
-    totalPages,
-    currentItems: paginatedAttendances,
-    paginate,
-    resetPage,
-  } = usePagination(filteredSearchData, 20);
+  const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
+  return sortedDates.flatMap((date) => groupedByDate[date]);
+}, [data, showPending]);

-  useEffect(() => {
-    resetPage();
-  }, [filteredSearchData, resetPage]);
+const filteredSearchData = useMemo(() => {
+  if (!searchTerm) return processedData;

-  const handler = useCallback(
-    (msg) => {
-      const { startDate, endDate } = dateRange;
-      const checkIn = msg.response.checkInTime.substring(0, 10);
-      if (
-        selectedProject === msg.projectId &&
-        startDate <= checkIn &&
-        checkIn <= endDate
-      ) {
-        queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
-          if (!oldData) {
-            queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
-            return;
-          }
-          const updatedAttendance = oldData.map((record) =>
-            record.id === msg.response.id
-              ? { ...record, ...msg.response }
-              : record
-          );
-          filtering(updatedAttendance);
-          return updatedAttendance;
-        });
-        resetPage();
-      }
-    },
-    [selectedProject, dateRange, filtering, resetPage]
+  const lowercased = searchTerm.toLowerCase();
+  return processedData.filter((item) =>
+    `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
  );
+}, [processedData, searchTerm]);

-  useEffect(() => {
-    eventBus.on("attendance_log", handler);
-    return () => eventBus.off("attendance_log", handler);
-  }, [handler]);
+const {
+  currentPage,
+  totalPages,
+  currentItems: paginatedAttendances,
+  paginate,
+  resetPage,
+} = usePagination(filteredSearchData, 20);

-  const employeeHandler = useCallback(
-    (msg) => {
-      const { startDate, endDate } = dateRange;
-      if (data.some((item) => item.employeeId == msg.employeeId)) {
-        // dispatch(
-        //   fetchAttendanceData({
-        //     ,
-        //     fromDate: startDate,
-        //     toDate: endDate,
-        //   })
-        // );
+useEffect(() => {
+  resetPage();
+}, [filteredSearchData]);
+
+const handler = useCallback(
+  (msg) => {
+    const { startDate, endDate } = dateRange;
+    const checkIn = msg.response.checkInTime.substring(0, 10);
+
+    if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
+      queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
+        if (!oldData) {
+          queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
+          return;
+        }
+        return oldData.map((record) =>
+          record.id === msg.response.id ? { ...record, ...msg.response } : record
+        );
+      });
+      resetPage();
+    }
+  },
+  [selectedProject, dateRange, resetPage]
+);
+
+useEffect(() => {
+  eventBus.on("attendance_log", handler);
+  return () => eventBus.off("attendance_log", handler);
+}, [handler]);
+
+const employeeHandler = useCallback(
+  (msg) => {
+    const { startDate, endDate } = dateRange;
+    if (data.some((item) => item.employeeId == msg.employeeId)) {
+      refetch();
+    }
+  },
+  [data, refetch]
+);
+
+useEffect(() => {
+  eventBus.on("employee", employeeHandler);
+  return () => eventBus.off("employee", employeeHandler);
+}, [employeeHandler]);

-        refetch();
-      }
-    },
-    [selectedProject, dateRange, data, refetch]
-  );

-  useEffect(() => {
-    eventBus.on("employee", employeeHandler);
-    return () => eventBus.off("employee", employeeHandler);
-  }, [employeeHandler]);

  return (
    <>
--- a/src/components/Activities/Regularization.jsx
+++ b/src/components/Activities/Regularization.jsx
@ -33,7 +33,11 @@ const Regularization = ({
  );

  useEffect(() => {
+    if(!regularizes) return
+    if(regularizes?.length) {
    setregularizedList(regularizes);
+
+    }
  }, [regularizes]);

  const sortByName = (a, b) => {
--- a/src/components/master/MasterModal.jsx
+++ b/src/components/master/MasterModal.jsx
@ -70,12 +70,12 @@ const MasterModal = ({ modaldata, closeModal }) => {
  };

  return (
-<>
+<div className="p-2 p-md-1">
    <div className="text-center">
      <p className="fs-5 fw-semibold" >{`${masterType, " ",  modalType}`}</p>
    </div>
     { modalComponents[modalType] || null}
-</>
+</div>
  );
 };

--- a/src/pages/Directory/DirectoryPage.jsx
+++ b/src/pages/Directory/DirectoryPage.jsx
@ -162,29 +162,33 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                </ul>
              </div>

-              <div className="mb-1 px-2 py-3">
-                <div className="d-flex align-items-center justify-content-between">
-                  <div className="d-flex align-items-center gap-3">
+              <div className="mb-1 px-md-2 px-0 py-3">
+                <div className="row">
+                  <div className="col-12 col-md-10 mb-2">
                    {activeTab === "notes" && (
-                      <input
+                      <div className="col-8 col-md-3">
+                        <input
                        type="search"
                        className="form-control form-control-sm"
                        placeholder="Search notes..."
                        value={searchNote}
                        onChange={(e) => setSearchNote(e.target.value)}
                      />
+                      </div>
                    )}

                    {activeTab === "contacts" && (
                      <div className="d-flex align-items-center gap-3">
-                        <div className="d-flex gap-2 align-items-center">
-                          <input
+                        <div className="col-12 col-md-8 d-flex flex-row gap-2">
+                         <div className="col-7 col-md-4">
+                           <input
                            type="search"
                            className="form-control form-control-sm"
                            placeholder="Search contacts..."
                            value={searchContact}
                            onChange={(e) => setsearchContact(e.target.value)}
                          />
+                         </div>
                          <button
                            className={`btn btn-sm p-1 ${
                              !gridView ? "btn-primary" : "btn-outline-primary"
@ -202,9 +206,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                          >
                            <i className="bx bx-grid-alt"></i>
                          </button>
-                        </div>
-
-                        <div className="form-check form-switch d-flex align-items-center">
+                          <div className="form-check form-switch d-flex align-items-center d-none d-md-flex">
                          <input
                            type="checkbox"
                            className="form-check-input"
@ -220,11 +222,30 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                            {showActive ? "Active" : "Inactive"} Contacts
                          </label>
                        </div>
+                        </div>
+
+                        
                      </div>
                    )}
                  </div>
-
-                  <div className="btn-group">
+                   <div className="col-12 col-md-2 d-flex justify-content-end align-items-center gap-2">
+                    <div className={`form-check form-switch d-flex align-items-center  ${activeTab === "contacts" ? " d-flex d-md-none m-0":"d-none" }`}>
+                          <input
+                            type="checkbox"
+                            className="form-check-input"
+                            role="switch"
+                            id="inactiveEmployeesCheckbox"
+                            checked={showActive}
+                            onChange={(e) => setShowActive(e.target.checked)}
+                          />
+                          <label
+                            className="form-check-label ms-2"
+                            htmlFor="inactiveEmployeesCheckbox"
+                          >
+                            {showActive ? "Active" : "Inactive"} Contacts
+                          </label>
+                        </div>
+                        <div className="  btn-group">
                    <button
                      className="btn btn-sm btn-label-secondary dropdown-toggle"
                      type="button"
@ -244,6 +265,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                      </li>
                    </ul>
                  </div>
+                   </div>
+                  
                </div>
              </div>
            </div>
--- a/src/pages/master/MasterPage.jsx
+++ b/src/pages/master/MasterPage.jsx
@ -103,7 +103,7 @@ const MasterPage = () => {

  if (menuErrorFlag || isMasterError)
    return (
-      <div className="d-flex flex-column align-items-center justify-content-center py-5">
+      <div className="d-flex flex-column align-items-center justify-content-center py-1 py-md-5">
        <h4 className="mb-3">
          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
          occurred
@ -161,21 +161,17 @@ const MasterPage = () => {
          data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
        />

-        <div className="row">
+        <div className="row page-min-h">
          <div className="card">
            <div
-              className="card-datatable table-responsive py-10 mx-5 "
+              className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
              style={{ overflow: "hidden" }}
            >
              <div className="row mb-2">
-                <div className="col-md-3 col-sm-6">
+                <div className="col-12 col-md-3">
                  <select
                    className="form-select py-1 px-2"
-                    style={{
-                      fontSize: "0.875rem",
-                      height: "32px",
-                      width: "190px",
-                    }}
+                   
                    value={selectedMaster}
                    onChange={(e) => dispatch(changeMaster(e.target.value))}
                  >
@ -190,8 +186,8 @@ const MasterPage = () => {
                    )}
                  </select>
                </div>
-                <div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
-                  <div className="w-25">
+                <div className="col-12 col-md-9  d-flex justify-content-end align-items-center gap-2 mt-2 mt-md-0">
+                  <div className="col-6 col-md-3">
                    <input
                      type="search"
                      className="form-control form-control-sm"
@ -207,8 +203,8 @@ const MasterPage = () => {
                        handleModalData(selectedMaster, null, selectedMaster)
                      }
                    >
-                      <i className="bx bx-plus-circle me-2"></i>Add{" "}
-                      {selectedMaster}
+                      <i className="bx bx-plus-circle me-2"></i> <span className="d-none d-md-inline-block">Add{" "}
+                      {selectedMaster}</span>
                    </button>
                  )}
                </div>
--- a/src/pages/master/MasterTable.jsx
+++ b/src/pages/master/MasterTable.jsx
@ -92,7 +92,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                {" "}
                {selectedMaster === "Activity" ? "Activity" : "Name"}
              </th>
-              <th className="text-start">
+    <th className="text-start d-none d-md-table-cell">
+
                {" "}
                {selectedMaster === "Activity"
                  ? "Unit"
@ -108,12 +109,12 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
          <tbody>
            {currentItems.length > 0 ? (
              currentItems.map((item, index) => (
-                <tr key={index}>
-                  <td style={{ width: "20px" }}>
+                <tr key={index} >
+                  <td style={{ width: "20px" }} className="py-3">
                    <i className="bx bx-right-arrow-alt"></i>
                  </td>
                  {updatedColumns.map((col) => (
-                    <td className="text-start mx-2" key={col.key}>
+                    <td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} >
                      {col.key === "description" ? (
                        item[col.key] !== undefined &&
                        item[col.key] !== null ? (
@ -133,7 +134,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                      )}
                    </td>
                  ))}
-                  <td className={!hasMasterPermission ? "d-none" : ""}>
+                  <td className={!hasMasterPermission ? "d-none" : "py-3"}>
                    {(selectedMaster === "Application Role" ||
                      selectedMaster === "Work Category") &&
                    item?.isSystem ? (