Compare commits
No commits in common. "main" and "HotChanges_09_10_25" have entirely different histories.
main
...
HotChanges
@ -9,274 +9,4 @@
|
||||
}
|
||||
.table_header_border {
|
||||
border-bottom:2px solid var(--bs-table-border-color) ;
|
||||
}
|
||||
|
||||
|
||||
.text-xxs { font-size: 0.55rem; } /* 8px */
|
||||
.text-xs { font-size: 0.75rem; } /* 12px */
|
||||
.text-sm { font-size: 0.875rem; } /* 14px */
|
||||
.text-base { font-size: 1rem; } /* 16px */
|
||||
.text-lg { font-size: 1.125rem; } /* 18px */
|
||||
.text-xl { font-size: 1.25rem; } /* 20px */
|
||||
.text-2xl { font-size: 1.5rem; } /* 24px */
|
||||
.text-3xl { font-size: 1.875rem; } /* 30px */
|
||||
.text-4xl { font-size: 2.25rem; } /* 36px */
|
||||
.text-5xl { font-size: 3rem; } /* 48px */
|
||||
.text-6xl { font-size: 3.75rem; } /* 60px */
|
||||
.text-7xl { font-size: 4.5rem; } /* 72px */
|
||||
.text-8xl { font-size: 6rem; } /* 96px */
|
||||
.text-9xl { font-size: 8rem; } /* 128px */
|
||||
|
||||
|
||||
/* */
|
||||
|
||||
.w-0 { width: 0px; }
|
||||
.w-px { width: 1px; }
|
||||
.w-1 { width: 0.25rem; } /* 4px */
|
||||
.w-2 { width: 0.5rem; } /* 8px */
|
||||
.w-3 { width: 0.75rem; } /* 12px */
|
||||
.w-4 { width: 1rem; } /* 16px */
|
||||
.w-5 { width: 1.25rem; } /* 20px */
|
||||
.w-6 { width: 1.5rem; } /* 24px */
|
||||
.w-8 { width: 2rem; } /* 32px */
|
||||
.w-10 { width: 2.5rem; } /* 40px */
|
||||
.w-12 { width: 3rem; } /* 48px */
|
||||
.w-16 { width: 4rem; } /* 64px */
|
||||
.w-20 { width: 5rem; } /* 80px */
|
||||
.w-24 { width: 6rem; } /* 96px */
|
||||
.w-32 { width: 8rem; } /* 128px */
|
||||
.w-40 { width: 10rem; } /* 160px */
|
||||
.w-48 { width: 12rem; } /* 192px */
|
||||
.w-56 { width: 14rem; } /* 224px */
|
||||
.w-64 { width: 16rem; } /* 256px */
|
||||
.w-auto { width: auto; }
|
||||
.w-full { width: 100%; }
|
||||
.w-screen{ width: 100vw; }
|
||||
.w-min { width: min-content; }
|
||||
.w-max { width: max-content; }
|
||||
|
||||
|
||||
|
||||
.h-0 { height: 0px; }
|
||||
.h-px { height: 1px; }
|
||||
.h-1 { height: 0.25rem; } /* 4px */
|
||||
.h-2 { height: 0.5rem; } /* 8px */
|
||||
.h-3 { height: 0.75rem; } /* 12px */
|
||||
.h-4 { height: 1rem; } /* 16px */
|
||||
.h-5 { height: 1.25rem; } /* 20px */
|
||||
.h-6 { height: 1.5rem; } /* 24px */
|
||||
.h-8 { height: 2rem; } /* 32px */
|
||||
.h-10 { height: 2.5rem; } /* 40px */
|
||||
.h-12 { height: 3rem; } /* 48px */
|
||||
.h-16 { height: 4rem; } /* 64px */
|
||||
.h-20 { height: 5rem; } /* 80px */
|
||||
.h-24 { height: 6rem; } /* 96px */
|
||||
.h-32 { height: 8rem; } /* 128px */
|
||||
.h-40 { height: 10rem; } /* 160px */
|
||||
.h-48 { height: 12rem; } /* 192px */
|
||||
.h-56 { height: 14rem; } /* 224px */
|
||||
.h-64 { height: 16rem; } /* 256px */
|
||||
.h-auto { height: auto; }
|
||||
.h-full { height: 100%; }
|
||||
.h-screen{ height: 100vh; }
|
||||
.h-min { height: min-content; }
|
||||
.h-max { height: max-content; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================
|
||||
Base Font Sizes (mobile first)
|
||||
========================== */
|
||||
.text-xxs { font-size: 0.55rem; } /* 8px */
|
||||
.text-xs { font-size: 0.75rem; } /* 12px */
|
||||
.text-sm { font-size: 0.875rem; } /* 14px */
|
||||
.text-base{ font-size: 1rem; } /* 16px */
|
||||
.text-lg { font-size: 1.125rem; } /* 18px */
|
||||
.text-xl { font-size: 1.25rem; } /* 20px */
|
||||
.text-2xl { font-size: 1.5rem; } /* 24px */
|
||||
.text-3xl { font-size: 1.875rem; } /* 30px */
|
||||
.text-4xl { font-size: 2.25rem; } /* 36px */
|
||||
.text-5xl { font-size: 3rem; } /* 48px */
|
||||
.text-6xl { font-size: 3.75rem; } /* 60px */
|
||||
.text-7xl { font-size: 4.5rem; } /* 72px */
|
||||
.text-8xl { font-size: 6rem; } /* 96px */
|
||||
.text-9xl { font-size: 8rem; } /* 128px */
|
||||
|
||||
/* ==========================
|
||||
Base Heights
|
||||
========================== */
|
||||
.h-0 { height: 0; }
|
||||
.h-px { height: 1px; }
|
||||
.h-1 { height: 0.25rem; } /* 4px */
|
||||
.h-2 { height: 0.5rem; } /* 8px */
|
||||
.h-3 { height: 0.75rem; } /* 12px */
|
||||
.h-4 { height: 1rem; } /* 16px */
|
||||
.h-5 { height: 1.25rem; } /* 20px */
|
||||
.h-6 { height: 1.5rem; } /* 24px */
|
||||
.h-8 { height: 2rem; } /* 32px */
|
||||
.h-10 { height: 2.5rem; } /* 40px */
|
||||
.h-12 { height: 3rem; } /* 48px */
|
||||
.h-16 { height: 4rem; } /* 64px */
|
||||
.h-20 { height: 5rem; } /* 80px */
|
||||
.h-24 { height: 6rem; } /* 96px */
|
||||
.h-32 { height: 8rem; } /* 128px */
|
||||
.h-40 { height: 10rem; } /* 160px */
|
||||
.h-48 { height: 12rem; } /* 192px */
|
||||
.h-56 { height: 14rem; } /* 224px */
|
||||
.h-64 { height: 16rem; } /* 256px */
|
||||
.h-full { height: 100%; }
|
||||
.h-screen{ height: 100vh; }
|
||||
|
||||
/* ==========================
|
||||
Base Widths
|
||||
========================== */
|
||||
.w-0 { width: 0; }
|
||||
.w-px { width: 1px; }
|
||||
.w-1 { width: 0.25rem; }
|
||||
.w-2 { width: 0.5rem; }
|
||||
.w-3 { width: 0.75rem; }
|
||||
.w-4 { width: 1rem; }
|
||||
.w-5 { width: 1.25rem; }
|
||||
.w-6 { width: 1.5rem; }
|
||||
.w-8 { width: 2rem; }
|
||||
.w-10 { width: 2.5rem; }
|
||||
.w-12 { width: 3rem; }
|
||||
.w-16 { width: 4rem; }
|
||||
.w-20 { width: 5rem; }
|
||||
.w-24 { width: 6rem; }
|
||||
.w-32 { width: 8rem; }
|
||||
.w-40 { width: 10rem; }
|
||||
.w-48 { width: 12rem; }
|
||||
.w-56 { width: 14rem; }
|
||||
.w-64 { width: 16rem; }
|
||||
.w-full { width: 100%; }
|
||||
.w-screen{ width: 100vw; }
|
||||
|
||||
/* ==========================
|
||||
Responsive Variants
|
||||
========================== */
|
||||
@media (min-width: 576px) { /* sm */
|
||||
/* Font */
|
||||
.text-xxs-sm { font-size: 0.55rem; }
|
||||
.text-xs-sm { font-size: 0.75rem; }
|
||||
.text-sm-sm { font-size: 0.875rem; }
|
||||
.text-base-sm{ font-size: 1rem; }
|
||||
.text-lg-sm { font-size: 1.125rem; }
|
||||
.text-xl-sm { font-size: 1.25rem; }
|
||||
.text-2xl-sm{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-sm{ height: 0.25rem; }
|
||||
.h-2-sm{ height: 0.5rem; }
|
||||
.h-3-sm{ height: 0.75rem; }
|
||||
.h-4-sm{ height: 1rem; }
|
||||
.h-5-sm{ height: 1.25rem; }
|
||||
.h-6-sm{ height: 1.5rem; }
|
||||
.h-8-sm{ height: 2rem; }
|
||||
.h-10-sm{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-sm{ width: 0.25rem; }
|
||||
.w-2-sm{ width: 0.5rem; }
|
||||
.w-3-sm{ width: 0.75rem; }
|
||||
.w-4-sm{ width: 1rem; }
|
||||
.w-5-sm{ width: 1.25rem; }
|
||||
.w-6-sm{ width: 1.5rem; }
|
||||
.w-8-sm{ width: 2rem; }
|
||||
.w-10-sm{ width: 2.5rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) { /* md */
|
||||
/* Font */
|
||||
.text-xxs-md { font-size: 0.55rem; }
|
||||
.text-xs-md { font-size: 0.75rem; }
|
||||
.text-sm-md { font-size: 0.875rem; }
|
||||
.text-base-md{ font-size: 1rem; }
|
||||
.text-lg-md { font-size: 1.125rem; }
|
||||
.text-xl-md { font-size: 1.25rem; }
|
||||
.text-2xl-md{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-md{ height: 0.25rem; }
|
||||
.h-2-md{ height: 0.5rem; }
|
||||
.h-3-md{ height: 0.75rem; }
|
||||
.h-4-md{ height: 1rem; }
|
||||
.h-5-md{ height: 1.25rem; }
|
||||
.h-6-md{ height: 1.5rem; }
|
||||
.h-8-md{ height: 2rem; }
|
||||
.h-10-md{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-md{ width: 0.25rem; }
|
||||
.w-2-md{ width: 0.5rem; }
|
||||
.w-3-md{ width: 0.75rem; }
|
||||
.w-4-md{ width: 1rem; }
|
||||
.w-5-md{ width: 1.25rem; }
|
||||
.w-6-md{ width: 1.5rem; }
|
||||
.w-8-md{ width: 2rem; }
|
||||
.w-10-md{ width: 2.5rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 992px) { /* lg */
|
||||
/* Font */
|
||||
.text-xxs-lg { font-size: 0.55rem; }
|
||||
.text-xs-lg { font-size: 0.75rem; }
|
||||
.text-sm-lg { font-size: 0.875rem; }
|
||||
.text-base-lg{ font-size: 1rem; }
|
||||
.text-lg-lg { font-size: 1.125rem; }
|
||||
.text-xl-lg { font-size: 1.25rem; }
|
||||
.text-2xl-lg{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-lg{ height: 0.25rem; }
|
||||
.h-2-lg{ height: 0.5rem; }
|
||||
.h-3-lg{ height: 0.75rem; }
|
||||
.h-4-lg{ height: 1rem; }
|
||||
.h-5-lg{ height: 1.25rem; }
|
||||
.h-6-lg{ height: 1.5rem; }
|
||||
.h-8-lg{ height: 2rem; }
|
||||
.h-10-lg{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-lg{ width: 0.25rem; }
|
||||
.w-2-lg{ width: 0.5rem; }
|
||||
.w-3-lg{ width: 0.75rem; }
|
||||
.w-4-lg{ width: 1rem; }
|
||||
.w-5-lg{ width: 1.25rem; }
|
||||
.w-6-lg{ width: 1.5rem; }
|
||||
.w-8-lg{ width: 2rem; }
|
||||
.w-10-lg{ width: 2.5rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) { /* xl */
|
||||
/* Font */
|
||||
.text-xxs-xl { font-size: 0.55rem; }
|
||||
.text-xs-xl { font-size: 0.75rem; }
|
||||
.text-sm-xl { font-size: 0.875rem; }
|
||||
.text-base-xl{ font-size: 1rem; }
|
||||
.text-lg-xl { font-size: 1.125rem; }
|
||||
.text-xl-xl { font-size: 1.25rem; }
|
||||
.text-2xl-xl{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-xl{ height: 0.25rem; }
|
||||
.h-2-xl{ height: 0.5rem; }
|
||||
.h-3-xl{ height: 0.75rem; }
|
||||
.h-4-xl{ height: 1rem; }
|
||||
.h-5-xl{ height: 1.25rem; }
|
||||
.h-6-xl{ height: 1.5rem; }
|
||||
.h-8-xl{ height: 2rem; }
|
||||
.h-10-xl{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-xl{ width: 0.25rem; }
|
||||
.w-2-xl{ width: 0.5rem; }
|
||||
.w-3-xl{ width: 0.75rem; }
|
||||
.w-4-xl{ width: 1rem; }
|
||||
.w-5-xl{ width: 1.25rem; }
|
||||
.w-6-xl{ width: 1.5rem; }
|
||||
.w-8-xl{ width: 2rem; }
|
||||
.w-10-xl{ width: 2.5rem; }
|
||||
}
|
||||
}
|
||||
@ -38,141 +38,195 @@ const usePagination = (data, itemsPerPage) => {
|
||||
};
|
||||
|
||||
const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
||||
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 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 today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [processedData, setProcessedData] = useState([]);
|
||||
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() === today.getTime();
|
||||
};
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
const isBeforeToday = (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 sortByName = (a, b) => {
|
||||
const nameA = (a.firstName + a.lastName).toLowerCase();
|
||||
const nameB = (b.firstName + b.lastName).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
const isBeforeToday = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() < today.getTime();
|
||||
};
|
||||
|
||||
const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
|
||||
selectedProject,
|
||||
dateRange.startDate,
|
||||
dateRange.endDate,
|
||||
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 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 sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||
|
||||
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));
|
||||
return sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
}, [data, showPending]);
|
||||
|
||||
const filteredSearchData = useMemo(() => {
|
||||
if (!searchTerm) return processedData;
|
||||
|
||||
const lowercased = searchTerm.toLowerCase();
|
||||
return processedData.filter((item) =>
|
||||
`${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
|
||||
const {
|
||||
data = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
isFetching,
|
||||
} = useAttendancesLogs(
|
||||
selectedProject,
|
||||
dateRange.startDate,
|
||||
dateRange.endDate,
|
||||
organizationId
|
||||
);
|
||||
}, [processedData, searchTerm]);
|
||||
const filtering = (data) => {
|
||||
const filteredData = showPending
|
||||
? data.filter((item) => item.checkOutTime === null)
|
||||
: data;
|
||||
|
||||
const {
|
||||
currentPage,
|
||||
totalPages,
|
||||
currentItems: paginatedAttendances,
|
||||
paginate,
|
||||
resetPage,
|
||||
} = usePagination(filteredSearchData, 20);
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
resetPage();
|
||||
}, [filteredSearchData]);
|
||||
const sortedList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
...group6,
|
||||
];
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
const checkIn = msg.response.checkInTime.substring(0, 10);
|
||||
// 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;
|
||||
}, {});
|
||||
|
||||
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();
|
||||
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;
|
||||
}
|
||||
},
|
||||
[selectedProject, dateRange, resetPage]
|
||||
);
|
||||
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
return processedData.filter((item) => {
|
||||
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
return fullName.includes(lowercasedSearchTerm);
|
||||
});
|
||||
}, [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)) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[data, refetch]
|
||||
);
|
||||
useEffect(() => {
|
||||
resetPage();
|
||||
}, [filteredSearchData, resetPage]);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
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]
|
||||
);
|
||||
|
||||
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)) {
|
||||
// dispatch(
|
||||
// fetchAttendanceData({
|
||||
// ,
|
||||
// fromDate: startDate,
|
||||
// toDate: endDate,
|
||||
// })
|
||||
// );
|
||||
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[selectedProject, dateRange, data, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="d-flex align-items-center my-0 ">
|
||||
@ -180,7 +234,7 @@ useEffect(() => {
|
||||
onRangeChange={setDateRange}
|
||||
defaultStartDate={yesterday}
|
||||
/>
|
||||
<div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
|
||||
<div className="form-check form-switch text-start m-0 ms-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
|
||||
@ -1,43 +1,25 @@
|
||||
import React, { useCallback, useEffect, useState, useMemo } from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RegularizationActions from "./RegularizationActions";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useRegularizationRequests } from "../../hooks/useAttendance";
|
||||
import moment from "moment";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import {
|
||||
cacheData,
|
||||
clearCacheKey,
|
||||
useSelectedProject,
|
||||
} from "../../slices/apiDataManager";
|
||||
import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import Pagination from "../../components/common/Pagination";
|
||||
|
||||
const Regularization = ({
|
||||
handleRequest,
|
||||
searchTerm,
|
||||
projectId,
|
||||
organizationId,
|
||||
IncludeInActive,
|
||||
}) => {
|
||||
const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive }) => {
|
||||
const queryClient = useQueryClient();
|
||||
// var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const selectedProject = useSelectedProject();
|
||||
const [regularizesList, setregularizedList] = useState([]);
|
||||
const { regularizes, loading, error, refetch } = useRegularizationRequests(
|
||||
selectedProject,
|
||||
organizationId,
|
||||
IncludeInActive
|
||||
);
|
||||
const { regularizes, loading, error, refetch } =
|
||||
useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
|
||||
|
||||
useEffect(() => {
|
||||
if(!regularizes) return
|
||||
if(regularizes?.length) {
|
||||
setregularizedList(regularizes);
|
||||
|
||||
}
|
||||
}, [regularizes]);
|
||||
|
||||
const sortByName = (a, b) => {
|
||||
@ -72,15 +54,48 @@ const Regularization = ({
|
||||
}
|
||||
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
return sortedList.filter((item) => {
|
||||
const fullName = `${item?.firstName} ${item?.lastName}`.toLowerCase();
|
||||
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
return fullName.includes(lowercasedSearchTerm);
|
||||
});
|
||||
}, [regularizesList, searchTerm]);
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredSearchData,
|
||||
20
|
||||
);
|
||||
// const filteredSearchData = useMemo(() => {
|
||||
// let sortedList = [...regularizesList].sort(sortByName);
|
||||
|
||||
// // Search filter
|
||||
// if (searchTerm) {
|
||||
// const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
// sortedList = sortedList.filter((item) => {
|
||||
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
// return fullName.includes(lowercasedSearchTerm);
|
||||
// });
|
||||
// }
|
||||
|
||||
// // Organization filter
|
||||
// if (filters?.selectedOrganization) {
|
||||
// sortedList = sortedList.filter(
|
||||
// (item) => item.organization?.name === filters.selectedOrganization
|
||||
// );
|
||||
// }
|
||||
|
||||
// // Services filter
|
||||
// if (filters?.selectedServices?.length > 0) {
|
||||
// sortedList = sortedList.filter((item) =>
|
||||
// filters.selectedServices.includes(item.service?.name)
|
||||
// );
|
||||
// }
|
||||
|
||||
// return sortedList;
|
||||
// }, [regularizesList, searchTerm, filters]);
|
||||
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } =
|
||||
usePagination(filteredSearchData, 20);
|
||||
|
||||
// Reset pagination when the search term or data changes
|
||||
useEffect(() => {
|
||||
|
||||
}, [filteredSearchData]);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("regularization", handler);
|
||||
@ -102,15 +117,9 @@ const Regularization = ({
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="table-responsive text-nowrap pb-4"
|
||||
style={{ minHeight: "200px" }}
|
||||
>
|
||||
<div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
|
||||
{loading ? (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
|
||||
<p className="text-secondary">Loading...</p>
|
||||
</div>
|
||||
) : currentItems?.length > 0 ? (
|
||||
@ -126,21 +135,18 @@ const Regularization = ({
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
||||
</th>
|
||||
<th colSpan={2}>
|
||||
Requested By
|
||||
</th>
|
||||
<th >
|
||||
Requested At
|
||||
</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentItems?.map((att, index) => (
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar firstName={att.firstName} lastName={att.lastName} />
|
||||
<Avatar
|
||||
firstName={att.firstName}
|
||||
lastName={att.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a href="#" className="text-heading text-truncate">
|
||||
<span className="fw-normal">
|
||||
@ -156,23 +162,7 @@ const Regularization = ({
|
||||
|
||||
<td>{convertShortTime(att.checkInTime)}</td>
|
||||
<td>
|
||||
{att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
|
||||
</td>
|
||||
|
||||
<td colSpan={2}>
|
||||
{att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
|
||||
<div className="d-flex flex-column">
|
||||
<a href="#" className="text-heading text-truncate">
|
||||
<span className="fw-normal">
|
||||
{att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>):(<small>--</small>)}
|
||||
</td>
|
||||
<td>
|
||||
{att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
|
||||
{att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
|
||||
</td>
|
||||
<td className="text-center ">
|
||||
<RegularizationActions
|
||||
@ -185,6 +175,7 @@ const Regularization = ({
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
) : (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
@ -197,7 +188,7 @@ const Regularization = ({
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* {!loading && totalPages > 1 && (
|
||||
{!loading && totalPages > 1 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1 mt-3">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
@ -235,14 +226,6 @@ const Regularization = ({
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)} */}
|
||||
|
||||
{totalPages > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -55,11 +55,10 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
endField="dateTo"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="row mb-2">
|
||||
<div className="row g-2">
|
||||
<SelectMultiple
|
||||
name="buildingIds"
|
||||
label="Building"
|
||||
@ -68,7 +67,7 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<div className="row g-2">
|
||||
<SelectMultiple
|
||||
name="floorIds"
|
||||
label="Floor"
|
||||
@ -77,7 +76,7 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<div className="row g-2">
|
||||
<SelectMultiple
|
||||
name="activityIds"
|
||||
label="Activities"
|
||||
|
||||
@ -192,7 +192,7 @@ const TaskReportList = () => {
|
||||
if (isLoading) return <TaskReportListSkeleton />;
|
||||
if (isError) return <div>Loading....</div>;
|
||||
return (
|
||||
<div className="mt-2 table-responsive text-nowrap">
|
||||
<div className="mt-2">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -179,7 +179,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
||||
<tr style={{ height: "200px" }}>
|
||||
<td
|
||||
colSpan={contactList.length + 1}
|
||||
className="text-center border-0 align-middle"
|
||||
className="text-center align-middle"
|
||||
>
|
||||
No contacts found
|
||||
</td>
|
||||
|
||||
@ -18,7 +18,7 @@ import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
|
||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
|
||||
const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { mutate: updateEmployee, isPending } = useUpdateEmployee();
|
||||
const {
|
||||
@ -72,7 +72,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
data.email = null;
|
||||
}
|
||||
|
||||
const payload = { ...data };
|
||||
const payload = { ...data, IsAllEmployee };
|
||||
|
||||
if (employeeId) {
|
||||
payload.id = employeeId;
|
||||
|
||||
@ -117,7 +117,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -395,7 +395,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
<DatePicker
|
||||
name="reimburseDate"
|
||||
control={control}
|
||||
minDate={data?.transactionDate}
|
||||
minDate={data?.createdAt}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.reimburseDate && (
|
||||
|
||||
@ -189,8 +189,7 @@ const Header = () => {
|
||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||
id="navbar-collapse"
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
{showProjectDropdown(location.pathname) && (
|
||||
{showProjectDropdown(location.pathname) && (
|
||||
<div className="align-items-center">
|
||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||
<div className="btn-group">
|
||||
@ -248,7 +247,6 @@ const Header = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="navbar-nav flex-row align-items-center ms-md-auto">
|
||||
<li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
||||
|
||||
@ -10,15 +10,13 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { spridSchema } from "./OrganizationSchema";
|
||||
import { OrgCardSkeleton } from "./OrganizationSkeleton";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
|
||||
// Zod schema: only allow exactly 4 digits
|
||||
|
||||
const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
const { onClose, startStep, flowType, onOpen, prevStep,orgData } =
|
||||
const { onClose, startStep, flowType, onOpen, prevStep } =
|
||||
useOrganizationModal();
|
||||
const clientQuery = useQueryClient()
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -37,11 +35,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
const onSubmit = (formdata) => {
|
||||
setSPRID(formdata.spridSearchText);
|
||||
};
|
||||
|
||||
const handleCrateOrg = () => {
|
||||
clientQuery.removeQueries({queryKey:["organization"]})
|
||||
onOpen({ startStep: 4,orgData:null })
|
||||
};
|
||||
|
||||
const handleOrg = (orgId) => {};
|
||||
const SP = watch("spridSearchText");
|
||||
return (
|
||||
<div className="d-block">
|
||||
@ -131,7 +126,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary mt-3"
|
||||
onClick={handleCrateOrg}
|
||||
onClick={() => onOpen({ startStep: 4 })}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Create New Organization
|
||||
|
||||
@ -142,7 +142,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
colSpan={organizationsColumns.length + 1}
|
||||
className="text-center"
|
||||
>
|
||||
<p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
|
||||
<p className="fw-semibold">Not Found</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
@ -11,8 +11,7 @@ import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import {
|
||||
useEmployeeForTaskAssign,
|
||||
useProjectAssignedOrganizationsName,
|
||||
useProjectAssignedServices,
|
||||
useProjectAssignedOrganizations,
|
||||
useProjectDetails,
|
||||
} from "../../hooks/useProjects";
|
||||
import eventBus from "../../services/eventBus";
|
||||
@ -96,9 +95,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
}, []);
|
||||
|
||||
const selectedProject = useSelectedProject();
|
||||
const { data: serviceList, isLoading: isServiceLoading } = useProjectAssignedServices(selectedProject);
|
||||
const { data: serviceList, isLoading: isServiceLoading } = useServices();
|
||||
const { data: organizationList, isLoading: isOrgLoading } =
|
||||
useProjectAssignedOrganizationsName(selectedProject);
|
||||
useProjectAssignedOrganizations(selectedProject);
|
||||
const { data: employees, isLoading: isEmployeeLoading } =
|
||||
useEmployeeForTaskAssign(
|
||||
selectedProject,
|
||||
@ -275,7 +274,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
) : (
|
||||
<>
|
||||
<option value="">--Select Service--</option>
|
||||
{serviceList?.map((service,index) => (
|
||||
{serviceList?.data?.map((service,index) => (
|
||||
<option key={`${service.id}-${index}`} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
useGroups,
|
||||
useWorkCategoriesMaster,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
|
||||
import { useManageTask, useProjectAssignedOrganizations, useProjectAssignedServices } from "../../../hooks/useProjects";
|
||||
import showToast from "../../../services/toastService";
|
||||
import Label from "../../common/Label";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
@ -47,7 +47,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
const projectId = useSelectedProject();
|
||||
|
||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
||||
const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizationsName(projectId);
|
||||
const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizations(projectId);
|
||||
|
||||
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
<ProgressBar
|
||||
completedWork={formatNumber(workArea?.completedWork)}
|
||||
plannedWork={formatNumber(workArea?.plannedWork)}
|
||||
className="m-0 my-2 " height="6px"rounded showLabel={true}
|
||||
className="m-0 my-2 me-6 text-info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -327,7 +327,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
|
||||
Pomoter, find through SPRID or create new
|
||||
</span>
|
||||
<small className="cursor-pointer" onClick={handleOrganizaioFinder} >
|
||||
<small className="cursor-pointer" onClick={handleOrganizaioFinder}>
|
||||
<i className="bx bx-plus-circle text-primary"></i>
|
||||
</small>
|
||||
</div>
|
||||
@ -367,14 +367,14 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
className="btn btn-label-secondary btn-sm me-2"
|
||||
onClick={handleCancel}
|
||||
aria-label="Close"
|
||||
disabled={isPending || isCreating || loading}
|
||||
disabled={isPending || isCreating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={isPending || isCreating || loading}
|
||||
disabled={isPending || isCreating}
|
||||
>
|
||||
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||
</button>
|
||||
|
||||
@ -132,15 +132,11 @@ const ProjectListView = ({
|
||||
|
||||
return (
|
||||
<div className="card page-min-h py-4 px-6 shadow-sm">
|
||||
|
||||
<div
|
||||
className="table-responsive text-nowrap page-min-h"
|
||||
>
|
||||
<table className="table table-hover align-middle m-0">
|
||||
<thead className="border-bottom ">
|
||||
<thead className="border-bottom">
|
||||
<tr>
|
||||
{projectColumns.map((col) => (
|
||||
<th key={col.key} colSpan={col.colSpan} className={`${col.className} table_header_border`}>
|
||||
<th key={col.key} colSpan={col.colSpan} className={col.className}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
@ -221,7 +217,6 @@ const ProjectListView = ({
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="py-4">
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useState } from "react";
|
||||
import TeamEmployeeList from "./TeamEmployeeList";
|
||||
import { useOrganization } from "../../../hooks/useDirectory";
|
||||
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
||||
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
|
||||
import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
|
||||
const TeamAssignToProject = ({ closeModal }) => {
|
||||
@ -10,13 +10,13 @@ const TeamAssignToProject = ({ closeModal }) => {
|
||||
const [selectedOrg, setSelectedOrg] = useState(null);
|
||||
const project = useSelectedProject();
|
||||
const { data, isLoading, isError, error } =
|
||||
useProjectAssignedOrganizationsName(project);
|
||||
useProjectAssignedOrganizations(project);
|
||||
return (
|
||||
<div className="container">
|
||||
<p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
|
||||
|
||||
<div className="row align-items-center gx-5">
|
||||
<div className="col">
|
||||
<div class="row align-items-center gx-5">
|
||||
<div class="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
{isLoading ? (
|
||||
<select className="form-select form-select-sm w-100" disabled>
|
||||
@ -49,7 +49,7 @@ const TeamAssignToProject = ({ closeModal }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div class="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
<label htmlFor="search" className="form-label mb-0 text-nowrap">
|
||||
Search Employee
|
||||
|
||||
@ -2,14 +2,13 @@ import React, { useState, useEffect } from "react";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import { useDebounce } from "../../../utils/appUtils";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { useOrganizationEmployees } from "../../../hooks/useOrganization";
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useManageProjectAllocation,
|
||||
useProjectAssignedServices,
|
||||
} from "../../../hooks/useProjects";
|
||||
import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
|
||||
import showToast from "../../../services/toastService";
|
||||
import { useOrganizationEmployees } from "../../../hooks/useOrganization";
|
||||
|
||||
const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
||||
const selectedProject = useSelectedProject();
|
||||
@ -30,7 +29,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
||||
useEmployeesByProjectAllocated(selectedProject, null);
|
||||
|
||||
const { data: jobRoles } = useMaster();
|
||||
const { data: services } = useProjectAssignedServices(selectedProject);
|
||||
const { data: services } = useServices();
|
||||
|
||||
const [employees, setEmployees] = useState([]);
|
||||
|
||||
@ -188,7 +187,7 @@ if (employees.length === 0) {
|
||||
}`}
|
||||
>
|
||||
<option value="">Select Service</option>
|
||||
{services?.map((s) => (
|
||||
{services?.data?.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
|
||||
@ -272,7 +272,7 @@ const Teams = () => {
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{emp.firstName}{" "}
|
||||
{emp.firstName}
|
||||
{emp.lastName}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -14,7 +14,7 @@ const SkeletonCell = ({ width = "100%", height = 20, style = {} }) => (
|
||||
|
||||
export const TenantTableSkeleton = ({ columns, rows = 5 }) => {
|
||||
return (
|
||||
<div className="p-2 mt-3">
|
||||
<div className="card p-2 mt-3">
|
||||
<div className="card-datatable text-nowrap table-responsive">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
|
||||
@ -137,7 +137,7 @@ const TenantsList = ({
|
||||
return (
|
||||
<>
|
||||
<div className="p-2 mt-3">
|
||||
<div className=" text-nowrap table-responsive">
|
||||
<div className="card-datatable text-nowrap table-responsive">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="shadow-sm">
|
||||
|
||||
@ -3,8 +3,8 @@ import { useController, useFormContext, useWatch } from "react-hook-form";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const DateRangePicker = ({
|
||||
md=12,
|
||||
sm=6,
|
||||
md,
|
||||
sm,
|
||||
onRangeChange,
|
||||
DateDifference = 7,
|
||||
endDateMode = "yesterday",
|
||||
@ -63,22 +63,21 @@ const DateRangePicker = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`position-relative w-auto justify-content-center`}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm w-100 pe-8 "
|
||||
placeholder="From to End"
|
||||
id="flatpickr-range"
|
||||
ref={inputRef}
|
||||
/>
|
||||
|
||||
<i
|
||||
className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
|
||||
onClick={handleIconClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`col-${sm} col-sm-${md} px-1`}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm ps-2 pe-5 me-4"
|
||||
placeholder="From to End"
|
||||
id="flatpickr-range"
|
||||
ref={inputRef}
|
||||
/>
|
||||
|
||||
<i
|
||||
className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y"
|
||||
onClick={handleIconClick}
|
||||
style={{ right: "22px", bottom: "-8px" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -3,65 +3,35 @@ import React from "react";
|
||||
const ProgressBar = ({
|
||||
plannedWork = 100,
|
||||
completedWork = 0,
|
||||
height = "6px",
|
||||
height = "8px",
|
||||
className = "mb-4",
|
||||
rounded = true,
|
||||
showLabel = true,
|
||||
}) => {
|
||||
const getProgress = (planned, completed) => {
|
||||
if (!planned || planned === 0) return 0;
|
||||
return Math.min((completed / planned) * 100, 100);
|
||||
if (!planned || planned === 0) return "0%";
|
||||
return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const percentage = getProgress(plannedWork, completedWork);
|
||||
|
||||
const progressBarStyle = {
|
||||
width: ` ${percentage.toFixed(2)}%`,
|
||||
transition: "width 0.4s ease",
|
||||
};
|
||||
|
||||
const containerStyle = {
|
||||
height,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
const progressStyle = {
|
||||
width: getProgress(plannedWork, completedWork),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`d-flex align-items-center ${className}`}
|
||||
style={containerStyle}
|
||||
className={`progress ${className} ${rounded ? "rounded" : ""}`}
|
||||
style={{ height }}
|
||||
>
|
||||
<div className="flex-grow-1">
|
||||
<div
|
||||
className={`progress ${rounded ? "rounded" : ""}`}
|
||||
style={{ height, backgroundColor: "#f0f0f0" }}
|
||||
>
|
||||
<div
|
||||
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
||||
role="progressbar"
|
||||
style={progressBarStyle}
|
||||
aria-valuenow={completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={plannedWork}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showLabel && (
|
||||
<span
|
||||
className="fw-semibold text-secondary"
|
||||
style={{
|
||||
minWidth: "45px",
|
||||
textAlign: "right",
|
||||
fontSize: "0.8rem",
|
||||
}}
|
||||
>
|
||||
{percentage.toFixed(2)}%
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
||||
role="progressbar"
|
||||
style={progressStyle}
|
||||
aria-valuenow={completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={plannedWork}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressBar;
|
||||
|
||||
|
||||
@ -60,7 +60,6 @@ const GalleryFilterPanel = ({ onApply }) => {
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
|
||||
@ -41,6 +41,7 @@ const EditContactTag = ({ data, onClose }) => {
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
};
|
||||
debugger
|
||||
updateContactTag({ id: data?.id, payload });
|
||||
}
|
||||
// const onSubmit = (formdata) => {
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -81,8 +81,8 @@ const ServiceGroups = ({ service }) => {
|
||||
) : (
|
||||
<div className="accordion-body text-start m-0 p-0">
|
||||
<div className="dropdown-divider border"></div>
|
||||
{!isLoading && groups?.data?.length === 0 && (<div className="text-center py-2"><p>No Group available.</p></div>)}
|
||||
{groups && groups?.data?.map((group) => {
|
||||
|
||||
{groups?.data?.map((group) => {
|
||||
const isOpen = activeGroupId === group.id;
|
||||
|
||||
return (
|
||||
|
||||
@ -570,6 +570,7 @@ export const useUpdateContactTag = (onSuccessCallback) => {
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
debugger;
|
||||
const response = await MasterRespository.updateContactTag(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
@ -703,13 +704,13 @@ export const useCreateService = (onSuccessCallback) => {
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
|
||||
debugger;
|
||||
const resp = await MasterRespository.createService(payload);
|
||||
|
||||
debugger;
|
||||
return resp.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
|
||||
debugger;
|
||||
queryClient.invalidateQueries({ queryKey: ["masterData", "Services"] });
|
||||
|
||||
showToast(data?.message || "Service added successfully", "success");
|
||||
@ -717,7 +718,7 @@ export const useCreateService = (onSuccessCallback) => {
|
||||
if (onSuccessCallback) onSuccessCallback(data?.data);
|
||||
},
|
||||
onError: (error) => {
|
||||
|
||||
debugger;
|
||||
showToast( error?.response?.data?.message || error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
@ -758,7 +759,7 @@ export const useCreateActivityGroup = (onSuccessCallback) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["groups"],
|
||||
});
|
||||
|
||||
debugger
|
||||
showToast( data?.message ||
|
||||
data?.response?.data?.message || "Activity Group created successfully.",
|
||||
"success"
|
||||
|
||||
@ -16,7 +16,6 @@ import {
|
||||
toggleModal,
|
||||
} from "../slices/localVariablesSlice.jsx";
|
||||
import { removeSession } from "../utils/authUtils.js";
|
||||
import { cacheProfileData } from "../slices/apiDataManager.jsx";
|
||||
|
||||
// ----------------------------Modal--------------------------
|
||||
|
||||
@ -85,8 +84,6 @@ export const useAuthModal = () => {
|
||||
|
||||
export const useLogout = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const naviget = useNavigate()
|
||||
const dispatch = useDispatch()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async () => {
|
||||
@ -99,12 +96,9 @@ export const useLogout = () => {
|
||||
},
|
||||
|
||||
onSuccess: (data) => {
|
||||
queryClient.clear()
|
||||
removeSession();
|
||||
dispatch(cacheProfileData(null))
|
||||
|
||||
// window.location.href = "/auth/login";
|
||||
naviget("/auth/login",{replace:true})
|
||||
window.location.href = "/auth/login";
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
|
||||
|
||||
@ -12,14 +12,14 @@ import { queryClient } from "../layouts/AuthLayout";
|
||||
// Query ---------------------------------------------------------------------------
|
||||
|
||||
export const useEmployee = (employeeId) => {
|
||||
return useQuery({
|
||||
return useQuery({
|
||||
queryKey: ["employeeProfile", employeeId],
|
||||
queryFn: async () => {
|
||||
const res = await EmployeeRepository.getEmployeeProfile(employeeId);
|
||||
const res = await EmployeeRepository.getEmployeeProfile(employeeId)
|
||||
return res.data;
|
||||
},
|
||||
enabled: !!employeeId,
|
||||
});
|
||||
enabled:!!employeeId
|
||||
});
|
||||
};
|
||||
|
||||
export const useAllEmployees = (showInactive) => {
|
||||
@ -137,6 +137,7 @@ export const useEmployeesAllOrByProjectId = (
|
||||
return res.data;
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
data: employees = [],
|
||||
isLoading,
|
||||
@ -157,18 +158,6 @@ export const useEmployeesAllOrByProjectId = (
|
||||
};
|
||||
};
|
||||
|
||||
// New Employee get list by CureentOrganization
|
||||
|
||||
export const useEmployeesByOrganization = (showInactive) => {
|
||||
return useQuery({
|
||||
queryKey: ["employeesByOrganization", showInactive],
|
||||
queryFn: async () => {
|
||||
const res = await EmployeeRepository.getAllEmployeeList(showInactive);
|
||||
return res.data;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// ManageEmployee.jsx
|
||||
export const useEmployeeProfile = (employeeId) => {
|
||||
const isEnabled = !!employeeId;
|
||||
@ -195,11 +184,11 @@ export const useEmployeeProfile = (employeeId) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const useEmployeesName = (projectId, search, allEmployee) => {
|
||||
export const useEmployeesName = (projectId, search,allEmployee) => {
|
||||
return useQuery({
|
||||
queryKey: ["employees", projectId, search, allEmployee],
|
||||
queryKey: ["employees", projectId, search,allEmployee],
|
||||
queryFn: async () =>
|
||||
await EmployeeRepository.getEmployeeName(projectId, search, allEmployee),
|
||||
await EmployeeRepository.getEmployeeName(projectId, search,allEmployee),
|
||||
|
||||
staleTime: 5 * 60 * 1000, // Optional: cache for 5 minutes
|
||||
});
|
||||
@ -219,6 +208,9 @@ export const useEmployeesNameByProject = (projectId) => {
|
||||
|
||||
// Mutation------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
export const useUpdateEmployee = () => {
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
@ -233,7 +225,7 @@ export const useUpdateEmployee = () => {
|
||||
const isAllEmployee = variables.IsAllEmployee;
|
||||
|
||||
// Cache invalidation
|
||||
queryClient.invalidateQueries({ queryKey: ["employeeProfile", id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["employeeProfile",id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
|
||||
// queryClient.invalidateQueries(['employeeProfile', id]);
|
||||
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
|
||||
@ -255,6 +247,7 @@ export const useUpdateEmployee = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const useSuspendEmployee = ({
|
||||
setIsDeleteModalOpen,
|
||||
setemployeeLodaing,
|
||||
@ -307,6 +300,7 @@ export const useSuspendEmployee = ({
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const useUpdateEmployeeRoles = ({
|
||||
onClose,
|
||||
resetForm,
|
||||
@ -340,4 +334,4 @@ export const useUpdateEmployeeRoles = ({
|
||||
isError: mutation.isError,
|
||||
error: mutation.error,
|
||||
};
|
||||
};
|
||||
};
|
||||
@ -24,7 +24,7 @@ export const useOrganizationModal = () => {
|
||||
dispatch(
|
||||
openOrgModal({
|
||||
isOpen: true,
|
||||
orgData: options.hasOwnProperty("orgData") ? options.orgData : orgData,
|
||||
orgData: options.orgData ?? orgData ?? null,
|
||||
startStep: options.startStep ?? startStep ?? 1,
|
||||
prevStep: options.prevStep ?? prevStep ?? 1,
|
||||
flowType: options.flowType ?? flowType ?? "default",
|
||||
@ -138,12 +138,8 @@ export const useAssignOrgToProject = (onSuccessCallback) => {
|
||||
useClient.invalidateQueries({
|
||||
queryKey: ["projectAssignedOrganiztions"],
|
||||
});
|
||||
useClient.invalidateQueries({
|
||||
queryKey: ["projectAssignedOrganiztionsName"],
|
||||
});
|
||||
|
||||
useClient.invalidateQueries({
|
||||
queryKey: ["projectAssignedServices", projectId],
|
||||
queryKey: ["projectAssignedOrganization", projectId],
|
||||
});
|
||||
showToast("Organization successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
@ -185,8 +181,6 @@ export const useUpdateOrganization = (onSuccessCallback) => {
|
||||
await OrganizationRepository.updateOrganizaion(orgId,payload),
|
||||
onSuccess: (_, variables) => {
|
||||
useClient.invalidateQueries({ queryKey: ["organizationList"] });
|
||||
useClient.invalidateQueries({ queryKey: ["projectAssignedOrganiztionsName"] });
|
||||
|
||||
showToast("Organization Updated successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
},
|
||||
|
||||
@ -294,21 +294,9 @@ export const useProjectAssignedOrganizations = (projectId) => {
|
||||
enabled: !!projectId,
|
||||
});
|
||||
};
|
||||
export const useProjectAssignedOrganizationsName = (projectId) => {
|
||||
return useQuery({
|
||||
queryKey: ["projectAssignedOrganiztionsName", projectId],
|
||||
queryFn: async () => {
|
||||
const resp = await ProjectRepository.getProjectAssignedOrganizationsName(
|
||||
projectId
|
||||
);
|
||||
return resp.data;
|
||||
},
|
||||
enabled: !!projectId,
|
||||
});
|
||||
};
|
||||
export const useProjectAssignedServices = (projectId) => {
|
||||
return useQuery({
|
||||
queryKey: ["projectAssignedServices", projectId],
|
||||
queryKey: ["projectAssignedOrganization", projectId],
|
||||
queryFn: async () => {
|
||||
const resp = await ProjectRepository.getProjectAssignedServices(
|
||||
projectId
|
||||
|
||||
@ -17,7 +17,7 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import {
|
||||
useProjectAssignedOrganizationsName,
|
||||
useProjectAssignedOrganizations,
|
||||
useProjectName,
|
||||
} from "../../hooks/useProjects";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
@ -47,7 +47,7 @@ const AttendancePage = () => {
|
||||
});
|
||||
|
||||
const { data: organizations = [], isLoading: orgLoading } =
|
||||
useProjectAssignedOrganizationsName(selectedProject);
|
||||
useProjectAssignedOrganizations(selectedProject);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
markTime: "",
|
||||
@ -131,7 +131,7 @@ const AttendancePage = () => {
|
||||
<div className="nav-align-top nav-tabs-shadow ">
|
||||
{/* Tabs */}
|
||||
<div className="nav-align-top nav-tabs-shadow bg-white border-bottom pt-5">
|
||||
<div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5">
|
||||
<div className="row align-items-center g-0 mb-3 mb-md-0 mx-5">
|
||||
{/* Tabs */}
|
||||
<div className="col-12 col-md">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
@ -181,10 +181,9 @@ const AttendancePage = () => {
|
||||
{/* Search + Organization filter */}
|
||||
<div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto d-flex gap-2 align-items-center">
|
||||
{/* Organization Dropdown */}
|
||||
<div className="row">
|
||||
<div className="col-12 col-sm-6 mb-2 mb-sm-0">
|
||||
<select
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
style={{ minWidth: "180px" }}
|
||||
value={appliedFilters.selectedOrganization}
|
||||
onChange={(e) =>
|
||||
setAppliedFilters((prev) => ({
|
||||
@ -201,21 +200,16 @@ const AttendancePage = () => {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6">
|
||||
{/* Search Input */}
|
||||
|
||||
{/* Search Input */}
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search Employee..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{ minWidth: "200px" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,8 +8,6 @@ import ReportTask from "../../components/Activities/ReportTask";
|
||||
import TaskReportFilterPanel from "../../components/DailyProgressRport/TaskReportFilterPanel";
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import SubTask from "../../components/Activities/SubTask";
|
||||
import { useProjectAssignedServices } from "../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
|
||||
const DailyProgrssContext = createContext();
|
||||
export const useDailyProgrssContext = () => {
|
||||
@ -23,11 +21,10 @@ export const useDailyProgrssContext = () => {
|
||||
};
|
||||
|
||||
const DailyProgrssReport = () => {
|
||||
const selectedProject = useSelectedProject()
|
||||
const [service, setService] = useState("");
|
||||
const [filter,setFilter] = useState('')
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject);
|
||||
const { data, isLoading, isError, error } = useServices();
|
||||
|
||||
const [modal, setModal] = useState({ type: null, data: null });
|
||||
|
||||
@ -89,7 +86,7 @@ const DailyProgrssReport = () => {
|
||||
/>
|
||||
|
||||
<div className="card card-fullscreen p-5">
|
||||
{data?.length > 0 && (<div className="col-sm-4 col-md-3 col-12">
|
||||
{data?.data?.length > 0 && (<div className="col-sm-4 col-md-3 col-12">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={service ?? ""}
|
||||
@ -102,7 +99,7 @@ const DailyProgrssReport = () => {
|
||||
<option value="">
|
||||
All Services
|
||||
</option>
|
||||
{data?.map((service) => (
|
||||
{data?.data?.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
|
||||
@ -162,33 +162,29 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mb-1 px-md-2 px-0 py-3">
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-10 mb-2">
|
||||
<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">
|
||||
{activeTab === "notes" && (
|
||||
<div className="col-8 col-md-3">
|
||||
<input
|
||||
<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="col-12 col-md-8 d-flex flex-row gap-2">
|
||||
<div className="col-7 col-md-4">
|
||||
<input
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
<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"
|
||||
@ -206,7 +202,9 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
<div className="form-check form-switch d-flex align-items-center d-none d-md-flex">
|
||||
</div>
|
||||
|
||||
<div className="form-check form-switch d-flex align-items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
@ -222,30 +220,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
{showActive ? "Active" : "Inactive"} Contacts
|
||||
</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">
|
||||
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||
type="button"
|
||||
@ -265,8 +244,6 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,6 @@ import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import ManageEmp from "../../components/Employee/ManageRole";
|
||||
import {
|
||||
useEmployeesAllOrByProjectId,
|
||||
useEmployeesByOrganization,
|
||||
useSuspendEmployee,
|
||||
} from "../../hooks/useEmployees";
|
||||
import { useProjectName, useProjects } from "../../hooks/useProjects";
|
||||
@ -37,7 +36,6 @@ import GlobalModel from "../../components/common/GlobalModel";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import Pagination from "../../components/common/Pagination";
|
||||
|
||||
const EmployeeList = () => {
|
||||
const selectedProjectId = useSelector(
|
||||
@ -48,14 +46,15 @@ const EmployeeList = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [showInactive, setShowInactive] = useState(false);
|
||||
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
||||
const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
|
||||
|
||||
const {
|
||||
data: employees,
|
||||
isLoading: loading,
|
||||
error,
|
||||
refetch: recallEmployeeData,
|
||||
} = useEmployeesByOrganization(showInactive);
|
||||
const { employees, loading, setLoading, error, recallEmployeeData } =
|
||||
useEmployeesAllOrByProjectId(
|
||||
showAllEmployees,
|
||||
selectedProjectId,
|
||||
showInactive
|
||||
);
|
||||
|
||||
const [employeeList, setEmployeeList] = useState([]);
|
||||
const [modelConfig, setModelConfig] = useState();
|
||||
@ -71,6 +70,7 @@ const EmployeeList = () => {
|
||||
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
|
||||
const [employeeLodaing, setemployeeLodaing] = useState(false);
|
||||
const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS);
|
||||
const ViewAllEmployee = useHasUserPermission(VIEW_ALL_EMPLOYEES);
|
||||
const { mutate: suspendEmployee, isPending: empLodaing } = useSuspendEmployee(
|
||||
{
|
||||
setIsDeleteModalOpen,
|
||||
@ -157,7 +157,7 @@ const EmployeeList = () => {
|
||||
const handleAllEmployeesToggle = (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
setShowInactive(false);
|
||||
// setShowAllEmployees(isChecked);
|
||||
setShowAllEmployees(isChecked);
|
||||
};
|
||||
|
||||
const handleEmployeeModel = (id) => {
|
||||
@ -205,16 +205,25 @@ const EmployeeList = () => {
|
||||
|
||||
setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
|
||||
}
|
||||
}, [loading, employees, selectedProjectId, showInactive]);
|
||||
}, [loading, employees, selectedProjectId, showAllEmployees]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showAllEmployees) {
|
||||
recallEmployeeData(showInactive, selectedProjectId);
|
||||
}
|
||||
}, [selectedProjectId, showInactive, showAllEmployees, recallEmployeeData]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (employees.some((item) => item.id == msg.employeeId)) {
|
||||
setEmployeeList([]);
|
||||
recallEmployeeData(showInactive);
|
||||
recallEmployeeData(
|
||||
showInactive,
|
||||
showAllEmployees ? null : selectedProjectId
|
||||
); // Use selectedProjectId here
|
||||
}
|
||||
},
|
||||
[employees, showInactive, showInactive, selectedProjectId] // Add all relevant dependencies
|
||||
[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -245,6 +254,7 @@ const EmployeeList = () => {
|
||||
<ManageEmployee
|
||||
employeeId={selectedEmployeeId}
|
||||
onClosed={() => setShowModal(false)}
|
||||
IsAllEmployee={showAllEmployees}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
@ -283,39 +293,59 @@ const EmployeeList = () => {
|
||||
|
||||
{ViewTeamMember ? (
|
||||
// <div className="row">
|
||||
<div className="card p-1 page-min-h">
|
||||
<div className="card p-1">
|
||||
<div className="card-datatable table-responsive pt-5 mx-5 py-10">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
{/* Switches: All Employees + Inactive */}
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
{/* All Employees Switch */}
|
||||
{ViewAllEmployee && (
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="allEmployeesCheckbox"
|
||||
checked={showAllEmployees}
|
||||
onChange={handleAllEmployeesToggle}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-0"
|
||||
htmlFor="allEmployeesCheckbox"
|
||||
>
|
||||
Show All Employees
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show Inactive Employees Switch */}
|
||||
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showInactive}
|
||||
onChange={(e) => setShowInactive(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-0"
|
||||
htmlFor="inactiveEmployeesCheckbox"
|
||||
>
|
||||
Show Inactive Employees
|
||||
</label>
|
||||
</div>
|
||||
{showAllEmployees && (
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showInactive}
|
||||
onChange={(e) => setShowInactive(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-0"
|
||||
htmlFor="inactiveEmployeesCheckbox"
|
||||
>
|
||||
Show Inactive Employees
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right side: Search + Export + Add Employee */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-start justify-content-md-end gap-3 flex-grow-1">
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
|
||||
{/* Search Input - ALWAYS ENABLED */}
|
||||
<div className="dataTables_filter">
|
||||
<label className="mb-0">
|
||||
@ -401,6 +431,7 @@ const EmployeeList = () => {
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
ref={tableRef}
|
||||
>
|
||||
<thead>
|
||||
@ -491,27 +522,28 @@ const EmployeeList = () => {
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{/* Conditional messages for no data or no search results */}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
(!searchText ) ? (
|
||||
searchText &&
|
||||
!showAllEmployees ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0 py-3">
|
||||
<div className="py-4">
|
||||
No Data Found
|
||||
</div>
|
||||
<td colSpan={8}>
|
||||
<small className="muted">
|
||||
'{searchText}' employee not found
|
||||
</small>{" "}
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
|
||||
{!loading &&
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
(searchText ) ? (
|
||||
(!searchText || showAllEmployees) ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0 py-3">
|
||||
<div className="py-4">
|
||||
{`No match record found ${searchText} `}
|
||||
</div>
|
||||
<td
|
||||
colSpan={8}
|
||||
style={{ paddingTop: "20px", textAlign: "center" }}
|
||||
>
|
||||
No Data Found
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
@ -665,12 +697,55 @@ const EmployeeList = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{displayData?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
<div style={{ width: "1%" }}></div>
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading && displayData.length > ITEMS_PER_PAGE && (
|
||||
<nav aria-label="Page">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{[...Array(totalPages)]?.map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -103,7 +103,7 @@ const MasterPage = () => {
|
||||
|
||||
if (menuErrorFlag || isMasterError)
|
||||
return (
|
||||
<div className="d-flex flex-column align-items-center justify-content-center py-1 py-md-5">
|
||||
<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
|
||||
@ -161,17 +161,21 @@ const MasterPage = () => {
|
||||
data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
|
||||
/>
|
||||
|
||||
<div className="row page-min-h">
|
||||
<div className="row">
|
||||
<div className="card">
|
||||
<div
|
||||
className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
|
||||
className="card-datatable table-responsive py-10 mx-5 "
|
||||
style={{ overflow: "hidden" }}
|
||||
>
|
||||
<div className="row mb-2">
|
||||
<div className="col-12 col-md-3">
|
||||
<div className="col-md-3 col-sm-6">
|
||||
<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))}
|
||||
>
|
||||
@ -186,8 +190,8 @@ const MasterPage = () => {
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<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">
|
||||
<div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
|
||||
<div className="w-25">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
@ -203,8 +207,8 @@ const MasterPage = () => {
|
||||
handleModalData(selectedMaster, null, selectedMaster)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i> <span className="d-none d-md-inline-block">Add{" "}
|
||||
{selectedMaster}</span>
|
||||
<i className="bx bx-plus-circle me-2"></i>Add{" "}
|
||||
{selectedMaster}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -92,8 +92,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
{" "}
|
||||
{selectedMaster === "Activity" ? "Activity" : "Name"}
|
||||
</th>
|
||||
<th className="text-start d-none d-md-table-cell">
|
||||
|
||||
<th className="text-start">
|
||||
{" "}
|
||||
{selectedMaster === "Activity"
|
||||
? "Unit"
|
||||
@ -109,12 +108,12 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
<tbody>
|
||||
{currentItems.length > 0 ? (
|
||||
currentItems.map((item, index) => (
|
||||
<tr key={index} >
|
||||
<td style={{ width: "20px" }} className="py-3">
|
||||
<tr key={index}>
|
||||
<td style={{ width: "20px" }}>
|
||||
<i className="bx bx-right-arrow-alt"></i>
|
||||
</td>
|
||||
{updatedColumns.map((col) => (
|
||||
<td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} >
|
||||
<td className="text-start mx-2" key={col.key}>
|
||||
{col.key === "description" ? (
|
||||
item[col.key] !== undefined &&
|
||||
item[col.key] !== null ? (
|
||||
@ -134,7 +133,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
<td className={!hasMasterPermission ? "d-none" : "py-3"}>
|
||||
<td className={!hasMasterPermission ? "d-none" : ""}>
|
||||
{(selectedMaster === "Application Role" ||
|
||||
selectedMaster === "Work Category") &&
|
||||
item?.isSystem ? (
|
||||
|
||||
@ -85,8 +85,6 @@ const ProjectRepository = {
|
||||
api.get(`/api/Project/get/assigned/services/${projectId}`),
|
||||
getProjectAssignedOrganizations: (projectId) =>
|
||||
api.get(`/api/Project/get/assigned/organization/${projectId}`),
|
||||
getProjectAssignedOrganizationsName: (projectId) =>
|
||||
api.get(`/api/Project/get/assigned/organization/dropdown/${projectId}`),
|
||||
|
||||
getEmployeeForTaskAssign: (projectId, serviceId, organizationId) => {
|
||||
let url = `/api/Project/get/task/team/${projectId}`;
|
||||
|
||||
@ -91,47 +91,4 @@ const date = new Date(
|
||||
Date.UTC(Number(year), Number(month) - 1, Number(day), 0, 0, 0)
|
||||
);
|
||||
return isNaN(date.getTime()) ? null : date.toISOString();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Flexible number formatter for currency, numbers, or percentages.
|
||||
*
|
||||
* @param {number} amount - The value to format.
|
||||
* @param {Object} options - Formatting options.
|
||||
* @param {"currency"|"number"|"percent"} [options.type="number"] - Type of format.
|
||||
* @param {string} [options.currency="INR"] - Currency code (only used when type="currency").
|
||||
* @param {string} [options.locale="en-US"] - Locale for formatting.
|
||||
* @param {"short"|"long"|"standard"} [options.notation="compact"] - Display style for large numbers.
|
||||
* @param {number} [options.minimumFractionDigits=0] - Minimum decimal places.
|
||||
* @param {number} [options.maximumFractionDigits=2] - Maximum decimal places.
|
||||
* @returns {string} Formatted number string.
|
||||
*/
|
||||
export const formatFigure = (
|
||||
amount,
|
||||
{
|
||||
type = "number",
|
||||
currency = "INR",
|
||||
locale = "en-US",
|
||||
notation = "compact",
|
||||
compactDisplay = "short",
|
||||
minimumFractionDigits = 0,
|
||||
maximumFractionDigits = 2,
|
||||
} = {}
|
||||
) => {
|
||||
if (amount == null || isNaN(amount)) return "-";
|
||||
|
||||
const formatterOptions = {
|
||||
style: type === "currency" ? "currency" : type === "percent" ? "percent" : "decimal",
|
||||
notation: notation,
|
||||
compactDisplay,
|
||||
minimumFractionDigits,
|
||||
maximumFractionDigits,
|
||||
};
|
||||
|
||||
if (type === "currency") {
|
||||
formatterOptions.currency = currency;
|
||||
}
|
||||
|
||||
return new Intl.NumberFormat(locale, formatterOptions).format(amount);
|
||||
};
|
||||
}
|
||||
@ -3,11 +3,6 @@ export const DURATION_TIME = 10; // minutes
|
||||
export const ITEMS_PER_PAGE = 20;
|
||||
export const OTP_EXPIRY_SECONDS = 300; // OTP time
|
||||
|
||||
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
|
||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||
|
||||
export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
||||
|
||||
export const VIEW_MASTER = "5ffbafe0-7ab0-48b1-bb50-c1bf76b65f9d";
|
||||
@ -147,3 +142,6 @@ export const PROJECT_STATUS = [
|
||||
];
|
||||
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
|
||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user