admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fixed directory header layout

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-11 12:43:37 +05:30
parent 31882c3d12
commit 281a956ac8
6 changed files with 166 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/Activities/AttendcesLogs.jsx
View File

@ -38,17 +38,12 @@ 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 [isRefreshing, setIsRefreshing] = useState(false);
const [processedData, setProcessedData] = useState([]);
const today = new Date();
today.setHours(0, 0, 0, 0);
@ -71,57 +66,32 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
};
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 nameA = (a.firstName + a.lastName).toLowerCase();
const nameB = (b.firstName + b.lastName).toLowerCase();
return nameA.localeCompare(nameB);
};
const {
data = [],
isLoading,
error,
refetch,
isFetching,
} = useAttendancesLogs(
const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
selectedProject,
dateRange.startDate,
dateRange.endDate,
organizationId
);
const filtering = (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) {
@ -131,28 +101,17 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
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);
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
return sortedDates.flatMap((date) => groupedByDate[date]);
}, [data, showPending]);
// New useEffect to handle search filtering
const filteredSearchData = useMemo(() => {
if (!searchTerm) {
return processedData;
}
const lowercasedSearchTerm = searchTerm.toLowerCase();
return processedData.filter((item) => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
return fullName.includes(lowercasedSearchTerm);
});
if (!searchTerm) return processedData;
const lowercased = searchTerm.toLowerCase();
return processedData.filter((item) =>
`${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
);
}, [processedData, searchTerm]);
const {
@ -165,34 +124,27 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
useEffect(() => {
resetPage();
}, [filteredSearchData, 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
) {
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
return oldData.map((record) =>
record.id === msg.response.id ? { ...record, ...msg.response } : record
);
filtering(updatedAttendance);
return updatedAttendance;
});
resetPage();
}
},
[selectedProject, dateRange, filtering, resetPage]
[selectedProject, dateRange, resetPage]
);
useEffect(() => {
@ -204,18 +156,10 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
(msg) => {
const { startDate, endDate } = dateRange;
if (data.some((item) => item.employeeId == msg.employeeId)) {
// dispatch(
// fetchAttendanceData({
// ,
// fromDate: startDate,
// toDate: endDate,
// })
// );
refetch();
}
},
[selectedProject, dateRange, data, refetch]
[data, refetch]
);
useEffect(() => {
@ -223,6 +167,8 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]);
return (
<>
<div

4
src/components/Activities/Regularization.jsx
View File

@ -33,7 +33,11 @@ const Regularization = ({
);
useEffect(() => {
if(!regularizes) return
if(regularizes?.length) {
setregularizedList(regularizes);
}
}, [regularizes]);
const sortByName = (a, b) => {

4
src/components/master/MasterModal.jsx
View File

@ -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>
);
};

39
src/pages/Directory/DirectoryPage.jsx
View File

@ -162,10 +162,11 @@ 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" && (
<div className="col-8 col-md-3">
<input
type="search"
className="form-control form-control-sm"
@ -173,11 +174,13 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
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">
<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"
@ -185,6 +188,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
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"
@ -221,9 +223,28 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</label>
</div>
</div>
</div>
)}
</div>
<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"
@ -245,6 +266,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

22
src/pages/master/MasterPage.jsx
View File

@ -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>

9
src/pages/master/MasterTable.jsx
View File

@ -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"
@ -109,11 +110,11 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
{currentItems.length > 0 ? (
currentItems.map((item, index) => (
<tr key={index} >
<td style={{ width: "20px" }}>
<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 ? (