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

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

Browse Source
This commit is contained in:
pramod mahajan 2025-07-31 17:35:17 +05:30
commit b30940c2aa
34 changed files with 2217 additions and 1533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Activities/Attendance.jsx
View File

@ -6,34 +6,27 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
import usePagination from "../../hooks/usePagination";
import { useNavigate } from "react-router-dom";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import { useAttendance } from "../../hooks/useAttendance";
import { useAttendance } from "../../hooks/useAttendance"; // This hook is already providing data
import { useSelector } from "react-redux";
import { useQueryClient } from "@tanstack/react-query";
import eventBus from "../../services/eventBus";
const Attendance = ({ getRole, handleModalData }) => {
const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedAttendanceFromParent, showOnlyCheckout, setshowOnlyCheckout }) => {
const queryClient = useQueryClient();
const [loading, setLoading] = useState(false);
const navigate = useNavigate();
const [todayDate, setTodayDate] = useState(new Date());
const [ShowPending, setShowPending] = useState(false);
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const {
attendance,
loading: attLoading,
recall: attrecall,
isFetching
} = useAttendance(selectedProject);
const filteredAttendance = ShowPending
? attendance?.filter(
(att) => att?.checkInTime !== null && att?.checkOutTime === null
)
: attendance;
} = useAttendance(selectedProject); // Keep this hook to manage recall and fetching status
const attendanceList = Array.isArray(filteredAttendance)
? filteredAttendance
const attendanceList = Array.isArray(filteredAndSearchedAttendanceFromParent)
? filteredAndSearchedAttendanceFromParent
: [];
const sortByName = (a, b) => {
@ -41,6 +34,7 @@ const Attendance = ({ getRole, handleModalData }) => {
const nameB = (b.firstName + b.lastName).toLowerCase();
return nameA?.localeCompare(nameB);
};
const group1 = attendanceList
.filter((d) => d.activity === 1 || d.activity === 4)
.sort(sortByName);
@ -48,41 +42,39 @@ const Attendance = ({ getRole, handleModalData }) => {
.filter((d) => d.activity === 0)
.sort(sortByName);
const filteredData = [...group1, ...group2];
const finalFilteredDataForPagination = [...group1, ...group2];
const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredData,
finalFilteredDataForPagination, // Use the data that's already been searched and grouped
ITEMS_PER_PAGE
);
const handler = useCallback(
(msg) => {
if (selectedProject == msg.projectId) {
// const updatedAttendance = attendances.map((item) =>
// item.employeeId === msg.response.employeeId
// ? { ...item, ...msg.response }
// : item
// );
if (selectedProject === msg.projectId) {
queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
if (!oldData) {
queryClient.invalidateQueries({queryKey:["attendance"]})
};
queryClient.invalidateQueries({ queryKey: ["attendance"] });
return; // Exit to avoid mapping on undefined oldData
}
return oldData.map((record) =>
record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record
);
});
}
},
[selectedProject, attrecall]
[selectedProject, queryClient] // Added queryClient to dependencies
);
const employeeHandler = useCallback(
(msg) => {
if (attendances.some((item) => item.employeeId == msg.employeeId)) {
if (attrecall) { // Check if attrecall function exists
attrecall();
}
},
[selectedProject, attendance]
[attrecall] // Dependency should be attrecall, not `selectedProject` or `attendance` here
);
useEffect(() => {
eventBus.on("attendance", handler);
return () => eventBus.off("attendance", handler);
@ -105,13 +97,14 @@ const Attendance = ({ getRole, handleModalData }) => {
role="switch"
id="inactiveEmployeesCheckbox"
disabled={isFetching}
checked={ShowPending}
onChange={(e) => setShowPending(e.target.checked)}
checked={showOnlyCheckout} // Use prop for checked state
onChange={(e) => setshowOnlyCheckout(e.target.checked)} // Use prop for onChange
/>
<label className="form-check-label ms-0">Show Pending</label>
</div>
</div>
{Array.isArray(attendance) && attendance.length > 0 ? (
{/* Use `filteredAndSearchedAttendanceFromParent` for the initial check of data presence */}
{Array.isArray(filteredAndSearchedAttendanceFromParent) && filteredAndSearchedAttendanceFromParent.length > 0 ? (
<>
<table className="table ">
<thead>
@ -129,7 +122,7 @@ const Attendance = ({ getRole, handleModalData }) => {
</tr>
</thead>
<tbody className="table-border-bottom-0 ">
{currentItems &&
{currentItems && currentItems.length > 0 ? ( // Check currentItems length before mapping
currentItems
.sort((a, b) => {
const checkInA = a?.checkInTime
@ -186,18 +179,22 @@ const Attendance = ({ getRole, handleModalData }) => {
/>
</td>
</tr>
))}
{!attendance && (
<span className="text-secondary m-4">No employees assigned to the project!</span>
))
) : (
<tr>
<td colSpan="6" className="text-center text-muted py-4">
No matching records found.
</td>
</tr>
)}
</tbody>
</table>
{!loading && filteredData.length > 20 && (
{!attLoading && finalFilteredDataForPagination.length > ITEMS_PER_PAGE && ( // Use the data before pagination for total count check
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li
className={`page-item ${
className={`page-item ${
currentPage === 1 ? "disabled" : ""
}`}
>
@ -243,18 +240,20 @@ const Attendance = ({ getRole, handleModalData }) => {
<div>Loading...</div>
) : (
<div className="text-muted">
{Array.isArray(attendance)
? "No employees assigned to the project"
: "Attendance data unavailable"}
{/* Check the actual prop passed for initial data presence */}
{Array.isArray(filteredAndSearchedAttendanceFromParent) && filteredAndSearchedAttendanceFromParent.length === 0
? ""
: "Attendance data unavailable."}
</div>
)}
{currentItems?.length == 0 && attendance.length > 0 && (
<div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
{/* This condition should check `currentItems` or `finalFilteredDataForPagination` */}
{currentItems?.length === 0 && finalFilteredDataForPagination.length > 0 && showOnlyCheckout && (
<div className="my-4"><span className="text-secondary">No Pending Record Available for your search!</span></div>
)}
</div>
</>
);
};
export default Attendance;
export default Attendance;

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

@ -4,24 +4,31 @@ import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils";
import RenderAttendanceStatus from "./RenderAttendanceStatus";
import { useSelector, useDispatch } from "react-redux";
import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
import DateRangePicker from "../common/DateRangePicker";
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import eventBus from "../../services/eventBus";
import AttendanceRepository from "../../repositories/AttendanceRepository";
import { useAttendancesLogs } from "../../hooks/useAttendance";
import { queryClient } from "../../layouts/AuthLayout";
const usePagination = (data, itemsPerPage) => {
const [currentPage, setCurrentPage] = useState(1);
const maxPage = Math.ceil(data.length / itemsPerPage);
const totalItems = Array.isArray(data) ? data.length : 0;
const maxPage = Math.ceil(totalItems / itemsPerPage);
const currentItems = useMemo(() => {
if (!Array.isArray(data) || data.length === 0) {
return [];
}
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
return data.slice(startIndex, endIndex);
}, [data, currentPage, itemsPerPage]);
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
const paginate = useCallback((pageNumber) => {
if (pageNumber > 0 && pageNumber <= maxPage) {
setCurrentPage(pageNumber);
}
}, [maxPage]);
// Ensure resetPage is returned by the hook
const resetPage = useCallback(() => setCurrentPage(1), []);
return {
@ -35,60 +42,91 @@ const usePagination = (data, itemsPerPage) => {
const AttendanceLog = ({
handleModalData,
projectId,
setshowOnlyCheckout,
showOnlyCheckout,
searchQuery, // Prop for search query
}) => {
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
const dispatch = useDispatch();
const [loading, setLoading] = useState(false);
const [showPending,setShowPending] = useState(false)
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
const [isRefreshing, setIsRefreshing] = useState(false);
const [processedData, setProcessedData] = useState([]);
const today = new Date();
today.setHours(0, 0, 0, 0);
const today = useMemo(() => {
const d = new Date();
d.setHours(0, 0, 0, 0);
return d;
}, []);
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const yesterday = useMemo(() => {
const d = new Date();
d.setDate(d.getDate() - 1);
return d;
}, []);
const isSameDay = (dateStr) => {
const isSameDay = useCallback((dateStr) => {
if (!dateStr) return false;
const d = new Date(dateStr);
d.setHours(0, 0, 0, 0);
return d.getTime() === today.getTime();
};
}, [today]);
const isBeforeToday = (dateStr) => {
const isBeforeToday = useCallback((dateStr) => {
if (!dateStr) return false;
const d = new Date(dateStr);
d.setHours(0, 0, 0, 0);
return d.getTime() < today.getTime();
};
}, [today]);
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 sortByName = useCallback((a, b) => {
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(
selectedProject,
dateRange.startDate,
dateRange.endDate
);
const filtering = (data) => {
const filteredData = showPending
useEffect(() => {
const { startDate, endDate } = dateRange;
dispatch(
fetchAttendanceData({
projectId,
fromDate: startDate,
toDate: endDate,
})
);
setIsRefreshing(false);
}, [dateRange, projectId, dispatch, isRefreshing]);
const processedData = useMemo(() => {
let filteredData = showOnlyCheckout
? data.filter((item) => item.checkOutTime === null)
: data;
// Apply search query filter
if (searchQuery) {
const lowerCaseSearchQuery = searchQuery.toLowerCase().trim(); // Trim whitespace
filteredData = filteredData.filter((att) => {
// Option 1: Combine firstName, middleName, lastName
const fullName = [att.firstName, att.middleName, att.lastName]
.filter(Boolean) // This removes null, undefined, or empty string parts
.join(" ")
.toLowerCase();
// Option 2: Check `employeeName` if it exists and is reliable
const employeeName = att.employeeName?.toLowerCase() || "";
// Option 3: Check `employeeId`
const employeeId = att.employeeId?.toLowerCase() || "";
// Check if the search query is included in any of the relevant fields
return (
fullName.includes(lowerCaseSearchQuery) ||
employeeName.includes(lowerCaseSearchQuery) ||
employeeId.includes(lowerCaseSearchQuery)
);
});
}
const group1 = filteredData
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
.sort(sortByName);
@ -127,53 +165,46 @@ const AttendanceLog = ({
return acc;
}, {});
// Sort dates in descending order
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]);
// Create the final sorted array
return sortedDates.flatMap((date) => groupedByDate[date]);
}, [data, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]);
const {
currentPage,
totalPages,
currentItems: paginatedAttendances,
paginate,
resetPage,
resetPage, // Destructure resetPage here
} = usePagination(processedData, 20);
// Effect to reset pagination when search query changes
useEffect(() => {
resetPage();
}, [processedData, resetPage]);
}, [searchQuery, resetPage]); // Add resetPage to dependencies
const handler = useCallback(
(msg) => {
const { startDate, endDate } = dateRange;
const checkIn = msg.response.checkInTime.substring(0, 10);
if (
selectedProject === msg.projectId &&
projectId === msg.projectId &&
startDate <= checkIn &&
checkIn <= endDate
) {
queryClient.setQueriesData(["attendanceLogs"],(oldData)=>{
if(!oldData) {
queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
}
return oldData.map((record) =>
record.id === msg.response.id ? { ...record, ...msg.response } : record
const updatedAttendance = data.map((item) =>
item.id === msg.response.id
? { ...item, ...msg.response }
: item
);
})
filtering(updatedAttendance);
resetPage();
dispatch(setAttendanceData(updatedAttendance)); // Update Redux store
}
},
[selectedProject, dateRange, data, filtering, resetPage]
[projectId, dateRange, data, dispatch]
);
useEffect(() => {
@ -184,19 +215,15 @@ const AttendanceLog = ({
const employeeHandler = useCallback(
(msg) => {
const { startDate, endDate } = dateRange;
if (data.some((item) => item.employeeId == msg.employeeId)) {
// dispatch(
// fetchAttendanceData({
// ,
// fromDate: startDate,
// toDate: endDate,
// })
// );
refetch()
}
dispatch(
fetchAttendanceData({
projectId,
fromDate: startDate,
toDate: endDate,
})
);
},
[selectedProject, dateRange, data]
[projectId, dateRange, dispatch]
);
useEffect(() => {
@ -220,28 +247,27 @@ const AttendanceLog = ({
type="checkbox"
className="form-check-input"
role="switch"
disabled={isFetching}
id="inactiveEmployeesCheckbox"
checked={showPending}
onChange={(e) => setShowPending(e.target.checked)}
checked={showOnlyCheckout}
onChange={(e) => setshowOnlyCheckout(e.target.checked)}
/>
<label className="form-check-label ms-0">Show Pending</label>
</div>
</div>
<div className="col-md-2 m-0 text-end">
<i
className={`bx bx-refresh cursor-pointer fs-4 ${
isFetching ? "spin" : ""
}`}
className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
}`}
title="Refresh"
onClick={() => refetch()}
onClick={() => setIsRefreshing(true)}
/>
</div>
</div>
<div className="table-responsive text-nowrap">
{isLoading ? (
<div><p className="text-secondary">Loading...</p></div>
) : data?.length > 0 ? (
<div
className="table-responsive text-nowrap"
style={{ minHeight: "200px", display: 'flex' }}
>
{processedData && processedData.length > 0 ? (
<table className="table mb-0">
<thead>
<tr>
@ -260,82 +286,96 @@ const AttendanceLog = ({
</tr>
</thead>
<tbody>
{paginatedAttendances.reduce((acc, attendance, index, arr) => {
const currentDate = moment(
attendance.checkInTime || attendance.checkOutTime
).format("YYYY-MM-DD");
const previousAttendance = arr[index - 1];
const previousDate = previousAttendance
? moment(
{(loading || isRefreshing) && (
<tr>
<td colSpan={6}>Loading...</td>
</tr>
)}
{!loading &&
!isRefreshing &&
paginatedAttendances.reduce((acc, attendance, index, arr) => {
const currentDate = moment(
attendance.checkInTime || attendance.checkOutTime
).format("YYYY-MM-DD");
const previousAttendance = arr[index - 1];
const previousDate = previousAttendance
? moment(
previousAttendance.checkInTime ||
previousAttendance.checkOutTime
previousAttendance.checkOutTime
).format("YYYY-MM-DD")
: null;
: null;
if (!previousDate || currentDate !== previousDate) {
if (!previousDate || currentDate !== previousDate) {
acc.push(
<tr
key={`header-${currentDate}`}
className="table-row-header"
>
<td colSpan={6} className="text-start">
<strong>
{moment(currentDate).format("DD-MM-YYYY")}
</strong>
</td>
</tr>
);
}
acc.push(
<tr
key={`header-${currentDate}`}
className="table-row-header"
>
<td colSpan={6} className="text-start">
<strong>
{moment(currentDate).format("DD-MM-YYYY")}
</strong>
<tr key={attendance.id || index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={attendance.firstName}
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate">
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{moment(
attendance.checkInTime || attendance.checkOutTime
).format("DD-MMM-YYYY")}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime
? convertShortTime(attendance.checkOutTime)
: "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={today.toLocaleDateString("en-CA")}
/>
</td>
</tr>
);
}
acc.push(
<tr key={index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={attendance.firstName}
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate">
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{moment(
attendance.checkInTime || attendance.checkOutTime
).format("DD-MMM-YYYY")}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime
? convertShortTime(attendance.checkOutTime)
: "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={today.toLocaleDateString("en-CA")}
/>
</td>
</tr>
);
return acc;
}, [])}
return acc;
}, [])}
</tbody>
</table>
) : (
<div className="my-4"><span className="text-secondary">No Record Available !</span></div>
!loading &&
!isRefreshing && (
<div
className="d-flex justify-content-center align-items-center text-muted"
style={{
width: "100%",
}}
>
No employee logs.
</div>
)
)}
</div>
{paginatedAttendances?.length == 0 && data?.length > 0 && (
<div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
)}
{processedData.length > 10 && (
{!loading && !isRefreshing && processedData.length > 20 && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
@ -350,9 +390,8 @@ const AttendanceLog = ({
(pageNumber) => (
<li
key={pageNumber}
className={`page-item ${
currentPage === pageNumber ? "active" : ""
}`}
className={`page-item ${currentPage === pageNumber ? "active" : ""
}`}
>
<button
className="page-link"
@ -364,9 +403,8 @@ const AttendanceLog = ({
)
)}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link"
@ -382,4 +420,4 @@ const AttendanceLog = ({
);
};
export default AttendanceLog;
export default AttendanceLog;

101
src/components/Activities/CheckCheckOutForm.jsx
View File

@ -11,10 +11,43 @@ import { checkIfCurrentDate } from "../../utils/dateUtils";
import { useMarkAttendance } from "../../hooks/useAttendance";
const schema = z.object({
markTime: z.string().nonempty({ message: "Time is required" }),
description: z.string().max(200, "description should less than 200 chracters").optional()
});
// const schema = z.object({
// markTime: z.string().nonempty({ message: "Time is required" }),
// description: z.string().max(200, "description should less than 200 chracters").optional()
// });
const createSchema = (modeldata) => {
return z
.object({
markTime: z.string().nonempty({ message: "Time is required" }),
description: z
.string()
.max(200, "Description should be less than 200 characters")
.optional(),
})
.refine((data) => {
if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
const checkIn = new Date(modeldata.checkInTime);
const [time, modifier] = data.markTime.split(" ");
const [hourStr, minuteStr] = time.split(":");
let hour = parseInt(hourStr, 10);
const minute = parseInt(minuteStr, 10);
if (modifier === "PM" && hour !== 12) hour += 12;
if (modifier === "AM" && hour === 12) hour = 0;
const checkOut = new Date(checkIn);
checkOut.setHours(hour, minute, 0, 0);
return checkOut > checkIn;
}
return true;
}, {
message: "Checkout time must be later than check-in time",
path: ["markTime"],
});
};
const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
@ -33,38 +66,38 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
return `${day}-${month}-${year}`;
};
// const {
// register,
// handleSubmit,
// formState: { errors },
// reset,
// setValue,
// } = useForm({
// resolver: zodResolver(schema),
// mode: "onChange"
// });
const {
register,
handleSubmit,
formState: { errors },
reset,
setValue,
} = useForm({
resolver: zodResolver(schema),
mode: "onChange"
});
register,
handleSubmit,
formState: { errors },
reset,
setValue,
} = useForm({
resolver: zodResolver(createSchema(modeldata)),
mode: "onChange",
});
const onSubmit = (data) => {
let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, employeeId: modeldata.employeeId, action: modeldata.action, id: modeldata?.id || null }
// if (modeldata.forWhichTab === 1 || modeldata.forWhichTab === 2) {
// handleSubmitForm(record)
const payload = {
Id: modeldata?.id || null,
comment: data.description,
employeeID: modeldata.employeeId,
projectId: projectId,
date: new Date().toISOString(),
markTime: data.markTime,
latitude: coords.latitude.toString(),
longitude: coords.longitude.toString(),
action: modeldata.action,
image: null,
};
MarkAttendance({payload,forWhichTab:modeldata.forWhichTab})
// } else {
// dispatch(markAttendance(record))
// .unwrap()
// .then((data) => {
if (modeldata.forWhichTab === 1) {
handleSubmitForm(record)
} else {
dispatch(markAttendance(record))
.unwrap()
.then((data) => {
// showToast("Attendance Marked Successfully", "success");
// })
@ -72,8 +105,8 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
// showToast(error, "error");
// });
// }
});
}
closeModal()
};

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

@ -7,63 +7,37 @@ import { useRegularizationRequests } from "../../hooks/useAttendance";
import moment from "moment";
import usePagination from "../../hooks/usePagination";
import eventBus from "../../services/eventBus";
import { cacheData, clearCacheKey } from "../../slices/apiDataManager";
import { useQueryClient } from "@tanstack/react-query";
import { cacheData } from "../../slices/apiDataManager";
const Regularization = ({ handleRequest }) => {
const queryClient = useQueryClient();
var selectedProject = useSelector((store) => store.localVariables.projectId);
const [regularizesList, setregularizedList] = useState([]);
const { regularizes, loading, error, refetch } =
useRegularizationRequests(selectedProject);
const Regularization = ({ handleRequest, searchQuery }) => {
const selectedProject = useSelector((store) => store.localVariables.projectId);
const [regularizesList, setRegularizedList] = useState([]);
const { regularizes, loading, refetch } = useRegularizationRequests(selectedProject);
useEffect(() => {
setregularizedList(regularizes);
setRegularizedList(regularizes);
}, [regularizes]);
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 handler = useCallback(
(msg) => {
if (selectedProject == msg.projectId) {
// const updatedAttendance = regularizes?.filter(
// (item) => item.id !== msg.response.id
// );
// cacheData("regularizedList", {
// data: updatedAttendance,
// projectId: selectedProject,
// });
// refetch();
queryClient.setQueryData(
["regularizedList", selectedProject],
(oldData) => {
if (!oldData) {
queryClient.invalidateQueries({ queryKey: ["regularizedList"] });
}
return oldData.filter((record) => record.id !== msg.response.id);
}
),
queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
const updatedAttendance = regularizes?.filter(item => item.id !== msg.response.id);
cacheData("regularizedList", {
data: updatedAttendance,
projectId: selectedProject,
});
refetch();
}
},
[selectedProject, regularizes]
);
const filteredData = [...regularizesList]?.sort(sortByName);
const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredData,
20
);
useEffect(() => {
eventBus.on("regularization", handler);
return () => eventBus.off("regularization", handler);
}, [handler]);
const employeeHandler = useCallback(
(msg) => {
@ -74,41 +48,57 @@ const Regularization = ({ handleRequest }) => {
[regularizes]
);
useEffect(() => {
eventBus.on("regularization", handler);
return () => eventBus.off("regularization", handler);
}, [handler]);
useEffect(() => {
eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]);
// ✅ Search filter logic added here
const filteredData = [...regularizesList]
?.filter((item) => {
if (!searchQuery) return true;
const lowerSearch = searchQuery.toLowerCase();
const fullName = `${item.firstName || ""} ${item.lastName || ""}`.toLowerCase();
return (
item.firstName?.toLowerCase().includes(lowerSearch) ||
item.lastName?.toLowerCase().includes(lowerSearch) ||
fullName.includes(lowerSearch) ||
item.employeeId?.toLowerCase().includes(lowerSearch)
);
})
.sort(sortByName);
const { currentPage, totalPages, currentItems, paginate } = usePagination(filteredData, 20);
return (
<div className="table-responsive text-nowrap pb-4">
{loading ? (
<div className="my-2">
<p className="text-secondary">Loading...</p>
</div>
) : currentItems?.length > 0 ? (
<table className="table mb-0">
<thead>
<tr>
<th colSpan={2}>Name</th>
<th>Date</th>
<th>
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In
</th>
<th>
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{currentItems?.map((att, index) => (
<table className="table mb-0">
<thead>
<tr>
<th colSpan={2}>Name</th>
<th>Date</th>
<th>
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In
</th>
<th>
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{!loading && currentItems?.length > 0 ? (
currentItems.map((att, index) => (
<tr key={index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={att.firstName}
lastName={att.lastName}
></Avatar>
<Avatar firstName={att.firstName} lastName={att.lastName} />
<div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate">
<span className="fw-normal">
@ -123,24 +113,33 @@ const Regularization = ({ handleRequest }) => {
<td>
{att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
</td>
<td className="text-center ">
<td className="text-center">
<RegularizationActions
attendanceData={att}
handleRequest={handleRequest}
refresh={refetch}
/>
{/* </div> */}
</td>
</tr>
))}
</tbody>
</table>
) : (
<div className="my-4">
{" "}
<span className="text-secondary">No Requests Found !</span>
</div>
)}
))
) : (
<tr>
<td
colSpan={6}
className="text-center"
style={{
height: "200px",
verticalAlign: "middle",
borderBottom: "none",
}}
>
{loading ? "Loading..." : "No Record Found"}
</td>
</tr>
)}
</tbody>
</table>
{!loading && totalPages > 1 && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1 mt-3">
@ -155,25 +154,18 @@ const Regularization = ({ handleRequest }) => {
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
className={`page-item ${currentPage === index + 1 ? "active" : ""}`}
>
<button
className="page-link "
onClick={() => paginate(index + 1)}
>
<button className="page-link" onClick={() => paginate(index + 1)}>
{index + 1}
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
>
<button
className="page-link "
className="page-link"
onClick={() => paginate(currentPage + 1)}
>
&raquo;

1
src/components/Dashboard/Tasks.jsx
View File

@ -5,7 +5,6 @@ import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
const TasksCard = () => {
const projectId = useSelector((store) => store.localVariables?.projectId);
const { tasksCardData, loading, error } = useDashboardTasksCardData(projectId);
console.log(tasksCardData);
return (
<div className="card p-3 h-100 text-center d-flex justify-content-between">

14
src/components/Directory/CardViewDirectory.jsx
View File

@ -107,13 +107,13 @@ const CardViewDirectory = ({
{/* <li className="list-inline-item me-1 small">
<i className="fa-solid fa-briefcase me-2"></i>
</li> */}
<li className="list-inline-item text-break small ms-5">
<li className="list-inline-item text-break small px-1 ms-5">
{contact.organization}
</li>
</ul>
</div>
<div
className={`card-footer text-start px-1 py-1 ${IsActive && "cursor-pointer"
className={`card-footer text-start px-9 py-1 ${IsActive && "cursor-pointer"
}`}
onClick={() => {
if (IsActive) {
@ -123,6 +123,16 @@ const CardViewDirectory = ({
}}
>
<hr className="my-0" />
{contact.designation && (
<ul className="list-unstyled my-1 d-flex align-items-start ms-2">
<li className="me-2">
<i class="fa-solid fa-id-badge ms-1"></i>
</li>
<li className="flex-grow-1 text-break small">
{contact.designation}
</li>
</ul>
)}
{contact.contactEmails[0] && (
<ul className="list-unstyled my-1 d-flex align-items-start ms-2">
<li className="me-2">

1
src/components/Directory/DirectorySchema.js
View File

@ -6,6 +6,7 @@ export const ContactSchema = z
contactCategoryId: z.string().nullable().optional(),
address: z.string().optional(),
description: z.string().min(1, { message: "Description is required" }),
designation: z.string().min(1, {message:"Designation is requried"}),
projectIds: z.array(z.string()).nullable().optional(), // min(1, "Project is required")
contactEmails: z
.array(

45
src/components/Directory/ListViewDirectory.jsx
View File

@ -15,6 +15,10 @@ const ListViewDirectory = ({
}) => {
const { dirActions, setDirActions } = useDir();
// Get the first email and phone number if they exist
const firstEmail = contact.contactEmails?.[0];
const firstPhone = contact.contactPhones?.[0];
return (
<tr className={!IsActive ? "bg-light" : ""}>
<td
@ -47,36 +51,38 @@ const ListViewDirectory = ({
<td className="px-2" style={{ width: "20%" }}>
<div className="d-flex flex-column align-items-start text-truncate">
{contact.contactEmails.length > 0 ? (contact.contactEmails?.map((email, index) => (
<span key={email.id} className="text-truncate">
{firstEmail ? (
<span key={firstEmail.id} className="text-truncate">
<i
className={getEmailIcon(email.label)}
className={getEmailIcon(firstEmail.label)}
style={{ fontSize: "12px" }}
></i>
<a
href={`mailto:${email.emailAddress}`}
href={`mailto:${firstEmail.emailAddress}`}
className="text-decoration-none ms-1"
>
{email.emailAddress}
{firstEmail.emailAddress}
</a>
</span>
))):(<span className="small-text m-0 px-2">NA</span>)}
) : (
<span className="small-text m-0 px-2">NA</span>
)}
</div>
</td>
<td className="px-2" style={{ width: "20%" }}>
<div className="d-flex flex-column align-items-start text-truncate">
{contact.contactPhones?.length > 0 ? (
contact.contactPhones?.map((phone, index) => (
<span key={phone.id}>
{firstPhone ? (
<span key={firstPhone.id}>
<i
className={getPhoneIcon(phone.label)}
className={getPhoneIcon(firstPhone.label)}
style={{ fontSize: "12px" }}
></i>
<span className="ms-1">{phone.phoneNumber}</span>
<span className="ms-1">{firstPhone.phoneNumber}</span>
</span>
))
):(<span className="text-small m-0 px-2">NA</span>)}
) : (
<span className="text-small m-0 px-2">NA</span>
)}
</div>
</td>
@ -88,12 +94,6 @@ const ListViewDirectory = ({
{contact.organization}
</td>
{/* <td className="px-2" style={{ width: "10%" }}>
<span className="badge badge-outline-secondary">
{contact?.contactCategory?.name || "Other"}
</span>
</td> */}
<td className="px-2" style={{ width: "10%" }}>
<span className="text-truncate">
{contact?.contactCategory?.name || "Other"}
@ -118,9 +118,10 @@ const ListViewDirectory = ({
)}
{!IsActive && (
<i
className={`bx ${
dirActions.action && dirActions.id === contact.id ? "bx-loader-alt bx-spin"
: "bx-recycle"
className={`bx ${
dirActions.action && dirActions.id === contact.id
? "bx-loader-alt bx-spin"
: "bx-recycle"
} me-1 text-primary cursor-pointer`}
title="Restore"
onClick={() => {

89
src/components/Directory/ManageDirectory.jsx
View File

@ -14,7 +14,11 @@ import useMaster, {
} from "../../hooks/masterHook/useMaster";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import { useBuckets, useOrganization } from "../../hooks/useDirectory";
import {
useBuckets,
useDesignation,
useOrganization,
} from "../../hooks/useDirectory";
import { useProjects } from "../../hooks/useProjects";
import SelectMultiple from "../common/SelectMultiple";
import { ContactSchema } from "./DirectorySchema";
@ -33,8 +37,11 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
const { contactCategory, loading: contactCategoryLoading } =
useContactCategory();
const { organizationList, loading: orgLoading } = useOrganization();
const { designationList, loading: designloading } = useDesignation();
const { contactTags, loading: Tagloading } = useContactTags();
const [IsSubmitting, setSubmitting] = useState(false);
const [showSuggestions,setShowSuggestions] = useState(false);
const [filteredDesignationList, setFilteredDesignationList] = useState([]);
const dispatch = useDispatch();
const methods = useForm({
@ -45,6 +52,7 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
contactCategoryId: null,
address: "",
description: "",
designation: "",
projectIds: [],
contactEmails: [],
contactPhones: [],
@ -106,6 +114,25 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
const watchBucketIds = watch("bucketIds");
// handle logic when input of desgination is changed
const handleDesignationChange = (e) => {
const val = e.target.value;
const matches = designationList.filter((org) =>
org.toLowerCase().includes(val.toLowerCase())
);
setFilteredDesignationList(matches);
setShowSuggestions(true);
setTimeout(() => setShowSuggestions(false), 5000);
};
// handle logic when designation is selected
const handleSelectDesignation = (val) => {
setShowSuggestions(false);
setValue("designation", val);
};
const toggleBucketId = (id) => {
const updated = watchBucketIds?.includes(id)
? watchBucketIds.filter((val) => val !== id)
@ -168,6 +195,55 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
/>
</div>
</div>
<div className="row mt-1">
<div className="col-md-6 text-start">
<label className="form-label">Designation</label>
<input
className="form-control form-control-sm"
{...register("designation")}
onChange={handleDesignationChange}
/>
{showSuggestions && filteredDesignationList.length > 0 && (
<ul
className="list-group shadow-sm position-absolute bg-white border w-50 zindex-tooltip"
style={{
maxHeight: "180px",
overflowY: "auto",
marginTop: "2px",
zIndex: 1000,
borderRadius: "0px",
}}
>
{filteredDesignationList.map((designation) => (
<li
key={designation}
className="list-group-item list-group-item-action border-none "
style={{
cursor: "pointer",
padding: "5px 12px",
fontSize: "14px",
transition: "background-color 0.2s",
}}
onMouseDown={() => handleSelectDesignation(designation)}
onMouseEnter={(e) =>
(e.currentTarget.style.backgroundColor = "#f8f9fa")
}
onMouseLeave={(e) =>
(e.currentTarget.style.backgroundColor = "transparent")
}
>
{designation}
</li>
))}
</ul>
)}
{errors.designation && (
<small className="danger-text">
{errors.designation.message}
</small>
)}
</div>
</div>
<div className="row mt-1">
<div className="col-md-6">
{emailFields.map((field, index) => (
@ -381,13 +457,12 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
</div>
</li>
))}
</ul>
{errors.bucketIds && (
<small className="danger-text mt-0">
{errors.bucketIds.message}
</small>
)}
{errors.bucketIds && (
<small className="danger-text mt-0">
{errors.bucketIds.message}
</small>
)}
</div>
</div>

2
src/components/Directory/NoteCardDirectoryEditable.jsx
View File

@ -153,7 +153,7 @@ const NoteCardDirectoryEditable = ({
.utc(noteItem?.createdAt)
.add(5, "hours")
.add(30, "minutes")
.format("MMMM DD, YYYY [at] hh:mm A")}
.format("DD MMMM, YYYY [at] hh:mm A")}
</span>
</span>

221
src/components/Directory/NotesDirectory.jsx
View File

@ -4,7 +4,6 @@ import Avatar from "../common/Avatar";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { showText } from "pdf-lib";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import moment from "moment";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
@ -19,15 +18,17 @@ const schema = z.object({
const NotesDirectory = ({
refetchProfile,
isLoading,
contactProfile,
contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName
setProfileContact,
}) => {
const [IsActive, setIsActive] = useState(true);
const { contactNotes, refetch } = useContactNotes(contactProfile?.id, true);
const { contactNotes, refetch } = useContactNotes(
contactProfile?.id,
IsActive
);
const [NotesData, setNotesData] = useState();
const [IsSubmitting, setIsSubmitting] = useState(false);
const [addNote, setAddNote] = useState(true);
const [showEditor, setShowEditor] = useState(false);
const {
register,
handleSubmit,
@ -67,102 +68,122 @@ const NotesDirectory = ({
) {
const updatedProfile = {
...cached_contactProfile.data,
notes: [...(cached_contactProfile.notes || []), createdNote],
notes: [...(cached_contactProfile.data.notes || []), createdNote],
};
cacheData("Contact Profile", updatedProfile);
cacheData("Contact Profile", {
contactId: contactProfile?.id,
data: updatedProfile,
});
}
setValue("note", "");
setIsSubmitting(false);
showToast("Note added successfully!", "success");
setAddNote(true);
setShowEditor(false);
setIsActive(true);
refetch(contactProfile?.id, true);
} catch (error) {
setIsSubmitting(false);
const msg =
error.response.data.message ||
error.response?.data?.message ||
error.message ||
"Error occured during API calling";
"Error occurred during API calling";
showToast(msg, "error");
}
};
const onCancel = () => {
setValue( "note", "" );
setValue("note", "");
setShowEditor(false);
};
const handleSwitch = () => {
setIsActive(!IsActive);
if (IsActive) {
refetch(contactProfile?.id, false);
}
setIsActive((prevIsActive) => {
const newState = !prevIsActive;
refetch(contactProfile?.id, newState);
return newState;
});
};
// Use the fullName from contactProfile, which now includes middle and last names if available
const contactName =
contactProfile?.fullName || contactProfile?.firstName || "Contact";
const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
const notesToDisplay = IsActive
? contactProfile?.notes || []
: contactNotes || [];
return (
<div className="text-start">
<div className="text-start mt-10">
<div className="d-flex align-items-center justify-content-between">
<p className="fw-semibold m-0">Notes :</p>
<div className="row w-100 align-items-center">
<div className="col col-2">
<p className="fw-semibold m-0 ms-3">Notes :</p>
</div>
<div className="col d-flex justify-content-end gap-2 pe-0">
{" "}
<div className="d-flex align-items-center justify-content-between">
<label
className="switch switch-primary"
style={{
visibility:
contactProfile?.notes?.length > 0 ||
contactNotes?.length > 0
? "visible"
: "hidden",
}}
>
<input
type="checkbox"
className="switch-input"
onChange={() => handleSwitch(!IsActive)}
value={IsActive}
/>
<input type="checkbox" className="switch-input" />
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label">Include Deleted Notes</span>
</label>
{!showEditor && (
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-sm d-flex align-items-center"
onClick={() => setShowEditor(true)}
style={{
color: "#6c757d",
backgroundColor: "transparent",
boxShadow: "none",
border: "none",
}}
>
<i
className="bx bx-plus-circle me-0 text-primary"
style={{ fontSize: "1.5rem", color: "#6c757d" }}
></i>
Add a Note
</button>
</div>
)}
</div>
</div>
</div>
</div>
<div className="d-flex align-items-center justify-content-between mb-5">
<div className="m-0 d-flex align-items-center">
{contactNotes?.length > 0 ? (
<label className="switch switch-primary">
<input
type="checkbox"
className="switch-input"
onChange={() => handleSwitch(!IsActive)}
value={IsActive}
/>
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label">Include Deleted Notes</span>
</label>
) : (
<div style={{ visibility: "hidden" }}>
<label className="switch switch-primary">
<input type="checkbox" className="switch-input" />
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label">Include Deleted Notes</span>
</label>
</div>
)}
</div>
<div className="d-flex justify-content-end">
<span
className={`btn btn-sm ${addNote ? "btn-secondary" : "btn-primary"}`}
onClick={() => setAddNote(!addNote)}
>
{addNote ? "Hide Editor" : "Add a Note"}
</span>
</div>
</div>
{addNote && (
<div className="card m-2 mb-5">
<button
{showEditor && (
<div className="card m-2 mb-5 position-relative">
<span
type="button"
class="btn btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
className="position-absolute top-0 end-0 mt-3 bg-secondary rounded-circle"
aria-label="Close"
style={{ backgroundColor: "#eee", color: "white" }}
onClick={() => setAddNote(!addNote)}
></button>
{/* <div className="d-flex justify-content-end px-2">
<span
className={`btn btn-sm ${
addNote ? "btn-danger" : "btn-primary"
}`}
onClick={() => setAddNote(!addNote)}
>
{addNote ? "Hide Editor" : "Add Note"}
</span>
</div> */}
onClick={() => setShowEditor(false)}
>
<i className="bx bx-x fs-5 p-1 text-white"></i>
</span>
<form onSubmit={handleSubmit(onSubmit)}>
<Editor
value={noteValue}
@ -171,49 +192,39 @@ const NotesDirectory = ({
onCancel={onCancel}
onSubmit={handleSubmit(onSubmit)}
/>
{errors.notes && (
{errors.note && (
<p className="text-danger small mt-1">{errors.note.message}</p>
)}
</form>
</div>
)}
<div className=" justify-content-start px-1 mt-1">
<div className=" justify-content-start px-1 mt-1">
{isLoading && (
<div className="text-center">
{" "}
<p>Loading...</p>{" "}
</div>
)}
{!isLoading &&
[...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))}
{IsActive && (
<div>
{!isLoading && contactProfile?.notes.length == 0 && !addNote && (
<div className="text-center mt-5">No Notes Found</div>
{!isLoading && notesToDisplay.length > 0
? notesToDisplay
.slice()
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))
: !isLoading &&
!showEditor && (
<div className="text-center mt-5">{noNotesMessage}</div>
)}
</div>
)}
{!IsActive && (
<div>
{!isLoading && contactNotes.length == 0 && !addNote && (
<div className="text-center mt-5">No Notes Found</div>
)}
</div>
)}
</div>
</div>
);

306
src/components/Directory/ProfileContactDirectory.jsx
View File

@ -8,9 +8,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
const { contactProfile, loading, refetch } = useContactProfile(contact?.id);
const [copiedIndex, setCopiedIndex] = useState(null);
const [profileContact, setProfileContact] = useState();
const [profileContactState, setProfileContactState] = useState(null);
const [expanded, setExpanded] = useState(false);
const description = contactProfile?.description || "";
const description = profileContactState?.description || "";
const limit = 500;
const toggleReadMore = () => setExpanded(!expanded);
@ -19,14 +20,51 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
const displayText = expanded
? description
: description.slice(0, limit) + (isLong ? "..." : "");
useEffect(() => {
setProfileContact(contactProfile);
}, [contactProfile]);
if (contactProfile) {
const names = (contact?.name || "").trim().split(" ");
let firstName = "";
let middleName = "";
let lastName = "";
let fullName = contact?.name || "";
// Logic to determine first, middle, and last names
if (names.length === 1) {
firstName = names[0];
} else if (names.length === 2) {
firstName = names[0];
lastName = names[1];
} else if (names.length >= 3) {
firstName = names[0];
middleName = names[1]; // This was an error in the original prompt, corrected to names[1]
lastName = names[names.length - 1];
// Reconstruct full name to be precise with spacing
fullName = `${firstName} ${middleName ? middleName + ' ' : ''}${lastName}`;
} else {
// Fallback if no names or empty string
firstName = "Contact";
fullName = "Contact";
}
setProfileContactState({
...contactProfile,
firstName: contactProfile.firstName || firstName,
// Adding middleName and lastName to the state for potential future use or more granular access
middleName: contactProfile.middleName || middleName,
lastName: contactProfile.lastName || lastName,
fullName: contactProfile.fullName || fullName, // Prioritize fetched fullName, fallback to derived
});
}
}, [contactProfile, contact?.name]);
const handleCopy = (email, index) => {
navigator.clipboard.writeText(email);
setCopiedIndex(index);
setTimeout(() => setCopiedIndex(null), 2000); // Reset after 2 seconds
setTimeout(() => setCopiedIndex(null), 2000);
};
return (
<div className="p-1">
<div className="text-center m-0 p-0">
@ -47,31 +85,35 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
<div className="d-flex flex-column text-start ms-1">
<span className="m-0 fw-semibold">{contact?.name}</span>
<small className="text-secondary small-text">
{contactProfile?.tags?.map((tag) => tag.name).join(" | ")}
{profileContactState?.designation}
</small>
</div>
</div>
<div className="row">
<div className="row ms-9">
<div className="col-12 col-md-6 d-flex flex-column text-start">
{contactProfile?.contactEmails?.length > 0 && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Email:</p>
{profileContactState?.contactEmails?.length > 0 && (
<div className="d-flex mb-2 align-items-start">
<div
className="d-flex align-items-start"
style={{ width: "100px", minWidth: "130px" }}
>
<span className="d-flex">
<i className="bx bx-envelope bx-xs me-2 mt-1"></i>
<span>Email</span>
</span>
<span style={{ marginLeft: "45px" }}>:</span>
</div>
<div style={{ flex: 1 }}>
<ul className="list-unstyled mb-0">
{contactProfile.contactEmails.map((email, idx) => (
{profileContactState.contactEmails.map((email, idx) => (
<li className="d-flex align-items-center mb-1" key={idx}>
<i className="bx bx-envelope bx-xs me-1 mt-1"></i>
<span className="me-1 flex-grow text-break overflow-wrap">
<span className="me-1 text-break overflow-wrap">
{email.emailAddress}
</span>
<i
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${
copiedIndex === idx
? "text-secondary"
: "text-primary"
}`}
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx ? "text-secondary" : "text-primary"
}`}
title={copiedIndex === idx ? "Copied!" : "Copy Email"}
style={{ flexShrink: 0 }}
onClick={() => handleCopy(email.emailAddress, idx)}
@ -83,17 +125,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</div>
)}
{contactProfile?.contactPhones?.length > 0 && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Phone : </p>
{profileContactState?.contactPhones?.length > 0 && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-center">
<i className="bx bx-phone bx-xs me-2"></i>
<span>Phone</span>
</span>
<span style={{ marginLeft: "40px" }}>:</span>
</div>
<div>
<ul className="list-inline mb-0">
{contactProfile?.contactPhones.map((phone, idx) => (
<li className="list-inline-item me-3" key={idx}>
<i className="bx bx-phone bx-xs me-1"></i>
{profileContactState.contactPhones.map((phone, idx) => (
<li className="list-inline-item me-1" key={idx}>
{phone.phoneNumber}
{idx < profileContactState.contactPhones.length - 1 && ","}
</li>
))}
</ul>
@ -101,74 +148,93 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</div>
)}
{contactProfile?.createdAt && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Created : </p>
{profileContactState?.createdAt && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-center">
<i className="bx bx-calendar-week bx-xs me-2"></i>
<span>Created</span>
</span>
<span style={{ marginLeft: "30px" }}>:</span>
</div>
<div className="d-flex align-items-center">
<li className="list-inline-item">
<i className="bx bx-calendar-week bx-xs me-1"></i>
{moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
</li>
<span>
{moment(profileContactState.createdAt).format("DD MMMM, YYYY")}
</span>
</div>
</div>
)}
{contactProfile?.address && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Location:</p>
</div>
<div className="d-flex align-items-center">
<i className="bx bx-map bx-xs me-1 "></i>
<span className="text-break small">
{contactProfile.address}
{profileContactState?.address && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-start">
<i className="bx bx-map bx-xs me-2 mt-1"></i>
<span>Location</span>
</span>
<span style={{ marginLeft: "26px" }}>:</span>
</div>
<div>
<span className="text-break small">{profileContactState.address}</span>
</div>
</div>
)}
</div>
<div className="col-12 col-md-6 d-flex flex-column text-start">
{contactProfile?.organization && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Orgnization : </p>
{profileContactState?.organization && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-center">
<i className="fa-solid fa-briefcase me-2"></i>
<span>Organization</span>
</span>
<span className="ms-2">:</span>
</div>
<div className="d-flex align-items-center">
<i className="fa-solid fa-briefcase me-2"></i>
<div className="d-flex align-items-center">
<span style={{ wordBreak: "break-word" }}>
{contactProfile.organization}
{profileContactState.organization}
</span>
</div>
</div>
)}
{contactProfile?.contactCategory && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Category : </p>
{profileContactState?.contactCategory && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-center">
<i className="bx bx-user bx-xs me-2"></i>
<span>Category</span>
</span>
<span style={{ marginLeft: "28px" }}>:</span>
</div>
<div>
<ul className="list-inline mb-0">
<li className="list-inline-item">
<i className="bx bx-user bx-xs me-1"></i>
{contactProfile.contactCategory.name}
{profileContactState.contactCategory.name}
</li>
</ul>
</div>
</div>
)}
{contactProfile?.tags?.length > 0 && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Tags : </p>
{profileContactState?.tags?.length > 0 && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-center">
<i className="fa-solid fa-tag me-2"></i>
<span>Tags</span>
</span>
<span style={{ marginLeft: "60px" }}>:</span>
</div>
<div>
<ul className="list-inline mb-0">
{contactProfile.tags.map((tag, index) => (
{profileContactState.tags.map((tag, index) => (
<li key={index} className="list-inline-item">
<i className="fa-solid fa-tag me-1"></i>
{tag.name}
</li>
))}
@ -177,75 +243,91 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</div>
)}
{contactProfile?.buckets?.length > 0 && (
<div className="d-flex ">
{contactProfile?.contactEmails?.length > 0 && (
<div className="d-flex mb-2 align-items-center">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Buckets : </p>
</div>
<div>
<ul className="list-inline mb-0">
{contactProfile.buckets.map((bucket) => (
<li className="list-inline-item me-2" key={bucket.id}>
<span className="badge bg-label-primary my-1">
{bucket.name}
</span>
</li>
))}
</ul>
</div>
</div>
)}
{profileContactState?.buckets?.length > 0 && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-center">
<i className="bx bx-layer me-1"></i>
<span>Buckets</span>
</span>
<span style={{ marginLeft: "35px" }}>:</span>
</div>
<div>
<ul className="list-inline mb-0">
{profileContactState.buckets.map((bucket) => (
<li className="list-inline-item me-2" key={bucket.id}>
<span className="badge bg-label-primary my-1">
{bucket.name}
</span>
</li>
))}
</ul>
</div>
</div>
)}
</div>
</div>
{contactProfile?.projects?.length > 0 && (
<div className="d-flex mb-2 align-items-start">
<div style={{ minWidth: "100px" }}>
<p className="m-0 text-start">Projects :</p>
</div>
<div className="text-start">
<ul className="list-inline mb-0">
{contactProfile.projects.map((project, index) => (
<li className="list-inline-item me-2" key={project.id}>
{project.name}
{index < contactProfile.projects.length - 1 && ","}
</li>
))}
</ul>
</div>
</div>
)}
<div className="d-flex mb-2 align-items-start">
<div style={{ minWidth: "100px" }}>
<p className="m-0 text-start">Description :</p>
{profileContactState?.projects?.length > 0 && (
<div className="d-flex mb-2 align-items-start">
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-center">
<i className="bx bx-building-house me-1"></i>
<span>Projects</span>
</span>
<span style={{ marginLeft: "28px" }}>:</span>
</div>
<div className="text-start">
<ul className="list-inline mb-0">
{profileContactState.projects.map((project, index) => (
<li className="list-inline-item me-2" key={project.id}>
{project.name}
{index < profileContactState.projects.length - 1 && ","}
</li>
))}
</ul>
</div>
</div>
)}
</div>
<div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
<div className="d-flex" style={{ minWidth: "130px" }}>
<span className="d-flex align-items-start">
<i className="bx bx-book me-1"></i>
<span>Description</span>
</span>
<span style={{ marginLeft: "10px" }}>:</span>
</div>
<div className="text-start">
{displayText}
{isLong && (
<span
onClick={toggleReadMore}
className="text-primary mx-1 cursor-pointer"
>
{expanded ? "Read less" : "Read more"}
</span>
<>
<br />
<span
onClick={toggleReadMore}
className="text-primary mx-1 cursor-pointer"
>
{expanded ? "Read less" : "Read more"}
</span>
</>
)}
</div>
</div>
<hr className="my-1" />
<NotesDirectory
refetchProfile={refetch}
isLoading={loading}
contactProfile={profileContact}
setProfileContact={setProfileContact}
contactProfile={profileContactState}
setProfileContact={setProfileContactState}
/>
</div>
</div>
);
};
export default ProfileContactDirectory;
export default ProfileContactDirectory;

199
src/components/Directory/UpdateContact.jsx
View File

@ -14,7 +14,11 @@ import useMaster, {
} from "../../hooks/masterHook/useMaster";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import { useBuckets, useOrganization } from "../../hooks/useDirectory";
import {
useBuckets,
useDesignation,
useOrganization,
} from "../../hooks/useDirectory";
import { useProjects } from "../../hooks/useProjects";
import SelectMultiple from "../common/SelectMultiple";
import { ContactSchema } from "./DirectorySchema";
@ -32,10 +36,13 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
const { contactCategory, loading: contactCategoryLoading } =
useContactCategory();
const { contactTags, loading: Tagloading } = useContactTags();
const [ IsSubmitting, setSubmitting ] = useState( false );
const [IsSubmitting, setSubmitting] = useState(false);
const [isInitialized, setIsInitialized] = useState(false);
const dispatch = useDispatch();
const {organizationList} = useOrganization()
const { organizationList } = useOrganization();
const { designationList } = useDesignation();
const [showSuggestions, setShowSuggestions] = useState(false);
const [filteredDesignationList, setFilteredDesignationList] = useState([]);
const methods = useForm({
resolver: zodResolver(ContactSchema),
@ -45,6 +52,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
contactCategoryId: null,
address: "",
description: "",
designation: "",
projectIds: [],
contactEmails: [],
contactPhones: [],
@ -95,6 +103,24 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
}
};
// handle logic when input of desgination is changed
const handleDesignationChange = (e) => {
const val = e.target.value;
const matches = designationList.filter((org) =>
org.toLowerCase().includes(val.toLowerCase())
);
setFilteredDesignationList(matches);
setShowSuggestions(true);
setTimeout(() => setShowSuggestions(false), 5000);
};
// handle logic when designation is selected
const handleSelectDesignation = (val) => {
setShowSuggestions(false);
setValue("designation", val);
};
const watchBucketIds = watch("bucketIds");
const toggleBucketId = (id) => {
@ -113,33 +139,28 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
};
const onSubmit = async (data) => {
const cleaned = {
...data,
contactEmails: (data.contactEmails || [])
.filter((e) => e.emailAddress?.trim() !== "")
.map((email, index) => {
const existingEmail = existingContact.contactEmails?.[index];
return existingEmail
? { ...email, id: existingEmail.id }
: email;
}),
contactPhones: (data.contactPhones || [])
.filter((p) => p.phoneNumber?.trim() !== "")
.map((phone, index) => {
const existingPhone = existingContact.contactPhones?.[index];
return existingPhone
? { ...phone, id: existingPhone.id }
: phone;
}),
};
const cleaned = {
...data,
contactEmails: (data.contactEmails || [])
.filter((e) => e.emailAddress?.trim() !== "")
.map((email, index) => {
const existingEmail = existingContact.contactEmails?.[index];
return existingEmail ? { ...email, id: existingEmail.id } : email;
}),
contactPhones: (data.contactPhones || [])
.filter((p) => p.phoneNumber?.trim() !== "")
.map((phone, index) => {
const existingPhone = existingContact.contactPhones?.[index];
return existingPhone ? { ...phone, id: existingPhone.id } : phone;
}),
};
setSubmitting(true);
await submitContact({ ...cleaned, id: existingContact.id });
setSubmitting(true);
await submitContact({ ...cleaned, id: existingContact.id });
setSubmitting(false);
};
const orgValue = watch("organization")
const orgValue = watch("organization");
const handleClosed = () => {
onCLosed();
};
@ -149,7 +170,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
typeof existingContact === "object" &&
!Array.isArray(existingContact);
if (!isInitialized &&isValidContact && TagsData) {
if (!isInitialized && isValidContact && TagsData) {
reset({
name: existingContact.name || "",
organization: existingContact.organization || "",
@ -158,24 +179,30 @@ await submitContact({ ...cleaned, id: existingContact.id });
contactCategoryId: existingContact.contactCategory?.id || null,
address: existingContact.address || "",
description: existingContact.description || "",
designation: existingContact.designation || "",
projectIds: existingContact.projectIds || null,
tags: existingContact.tags || [],
bucketIds: existingContact.bucketIds || [],
} );
if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) {
appendPhone({ label: "Office", phoneNumber: "" });
});
if (
!existingContact.contactPhones ||
existingContact.contactPhones.length === 0
) {
appendPhone({ label: "Office", phoneNumber: "" });
}
if (
!existingContact.contactEmails ||
existingContact.contactEmails.length === 0
) {
appendEmail({ label: "Work", emailAddress: "" });
}
setIsInitialized(true);
}
if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) {
appendEmail({ label: "Work", emailAddress: "" });
}
setIsInitialized(true)
}
// return()=> reset()
}, [ existingContact, buckets, projects ] );
}, [existingContact, buckets, projects]);
return (
<FormProvider {...methods}>
@ -195,15 +222,14 @@ await submitContact({ ...cleaned, id: existingContact.id });
)}
</div>
<div className="col-md-6 text-start">
<label className="form-label">Organization</label>
<InputSuggestions
organizationList={organizationList}
value={getValues("organization") || ""}
onChange={(val) => setValue("organization", val)}
error={errors.organization?.message}
/>
organizationList={organizationList}
value={getValues("organization") || ""}
onChange={(val) => setValue("organization", val)}
error={errors.organization?.message}
/>
{errors.organization && (
<small className="danger-text">
{errors.organization.message}
@ -211,6 +237,55 @@ await submitContact({ ...cleaned, id: existingContact.id });
)}
</div>
</div>
<div className="row mt-1">
<div className="col-md-6 text-start">
<label className="form-label">Designation</label>
<input
className="form-control form-control-sm"
{...register("designation")}
onChange={handleDesignationChange}
/>
{showSuggestions && filteredDesignationList.length > 0 && (
<ul
className="list-group shadow-sm position-absolute w-50 bg-white border zindex-tooltip"
style={{
maxHeight: "180px",
overflowY: "auto",
marginTop: "2px",
zIndex: 1000,
borderRadius: "0px",
}}
>
{filteredDesignationList.map((designation) => (
<li
key={designation}
className="list-group-item list-group-item-action border-none "
style={{
cursor: "pointer",
padding: "5px 12px",
fontSize: "14px",
transition: "background-color 0.2s",
}}
onMouseDown={() => handleSelectDesignation(designation)}
onMouseEnter={(e) =>
(e.currentTarget.style.backgroundColor = "#f8f9fa")
}
onMouseLeave={(e) =>
(e.currentTarget.style.backgroundColor = "transparent")
}
>
{designation}
</li>
))}
</ul>
)}
{errors.designation && (
<small className="danger-text">
{errors.designation.message}
</small>
)}
</div>
</div>
<div className="row mt-1">
<div className="col-md-6">
{emailFields.map((field, index) => (
@ -247,11 +322,13 @@ await submitContact({ ...cleaned, id: existingContact.id });
// <button
// type="button"
// className="btn btn-xs btn-primary ms-1"
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddEmail}/>
<i
className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
onClick={handleAddEmail}
/>
) : (
// <button
// type="button"
@ -259,8 +336,10 @@ await submitContact({ ...cleaned, id: existingContact.id });
// onClick={() => removeEmail(index)}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger" onClick={() => removeEmail(index)}/>
<i
className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger"
onClick={() => removeEmail(index)}
/>
)}
</div>
{errors.contactEmails?.[index]?.emailAddress && (
@ -310,7 +389,10 @@ await submitContact({ ...cleaned, id: existingContact.id });
// onClick={handleAddPhone}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddPhone} />
<i
className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
onClick={handleAddPhone}
/>
) : (
// <button
// type="button"
@ -318,7 +400,10 @@ await submitContact({ ...cleaned, id: existingContact.id });
// onClick={() => removePhone(index)}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger" onClick={() => removePhone(index)} />
<i
className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danger"
onClick={() => removePhone(index)}
/>
)}
</div>
{errors.contactPhones?.[index]?.phoneNumber && (
@ -348,7 +433,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
</option>
) : (
<>
<option disabled value="">
<option disabled value="">
Select Category
</option>
{contactCategory?.map((cate) => (
@ -387,7 +472,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
)}
</div>
<div className="row">
<div className="col-md-12 mt-1 text-start">
<div className="col-md-12 mt-1 text-start">
<label className="form-label ">Select Label</label>
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
@ -445,7 +530,11 @@ await submitContact({ ...cleaned, id: existingContact.id });
</div>
<div className="d-flex justify-content-center gap-1 py-2">
<button className="btn btn-sm btn-primary" type="submit" disabled={IsSubmitting}>
<button
className="btn btn-sm btn-primary"
type="submit"
disabled={IsSubmitting}
>
{IsSubmitting ? "Please Wait..." : "Update"}
</button>
<button

2
src/components/Employee/ManageEmployee.jsx
View File

@ -469,7 +469,7 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
</div>
<div className="row mb-3">
<div className="col-sm-4">
<div className="form-text text-start">Role</div>
<div className="form-text text-start">Official Designation</div>
<div className="input-group input-group-merge ">
<select
className="form-select form-select-sm"

129
src/components/Layout/Header.jsx
View File

@ -1,9 +1,9 @@
import getGreetingMessage from "../../utils/greetingHandler";
import {
cacheData,
clearAllCache,
getCachedData,
useSelectedproject,
} from "../../slices/apiDataManager";
import AuthRepository from "../../repositories/AuthRepository";
import { useDispatch, useSelector } from "react-redux";
@ -28,9 +28,17 @@ const Header = () => {
const navigate = useNavigate();
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
const isDirectoryPath = /^\/directory$/.test(location.pathname);
const isProjectPath = /^\/projects$/.test(location.pathname);
const isDashboard = /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname) ;
const isDirectoryPath = /^\/directory$/.test(location.pathname);
const isProjectPath = /^\/projects$/.test(location.pathname);
const isDashboard =
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
const allowedProjectStatusIds = [
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
"b74da4c2-d07e-46f2-9919-e75e49b12731",
];
const getRole = (roles, joRoleId) => {
if (!Array.isArray(roles)) return "User";
let role = roles.find((role) => role.id === joRoleId);
@ -38,7 +46,7 @@ const Header = () => {
};
const handleLogout = (e) => {
e.preventDefault();
e.preventDefault();
logout();
};
@ -49,7 +57,7 @@ const Header = () => {
};
AuthRepository.logout(data)
.then((response) => {
.then(() => {
localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken");
localStorage.removeItem("user");
@ -57,11 +65,11 @@ const Header = () => {
clearAllCache();
window.location.href = "/auth/login";
})
.catch((error) => {
// Even if logout API fails, clear local storage and redirect
.catch(() => {
localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken");
localStorage.removeItem("user");
localStorage.clear();
clearAllCache();
window.location.href = "/auth/login";
});
@ -79,22 +87,30 @@ const Header = () => {
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const selectedProject = useSelectedproject();
// Determine the display text for the project dropdown
let displayText = "All Projects";
if (selectedProject === null) {
displayText = "All Projects";
} else if (selectedProject) {
const selectedProjectObj = projectNames?.find(
(p) => p?.id === selectedProject
);
// Fallback to selectedProject ID if name not found during loading or mismatch
displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
} else if (projectLoading) {
displayText = "Loading...";
const projectsForDropdown = isDashboard
? projectNames
: projectNames?.filter(project =>
allowedProjectStatusIds.includes(project.projectStatusId)
);
let currentProjectDisplayName;
if (projectLoading) {
currentProjectDisplayName = "Loading...";
} else if (!projectNames || projectNames.length === 0) {
currentProjectDisplayName = "No Projects Assigned";
} else if (projectNames.length === 1) {
currentProjectDisplayName = projectNames[0].name;
} else {
if (selectedProject === null) {
currentProjectDisplayName = "All Projects";
} else {
const selectedProjectObj = projectNames.find(
(p) => p?.id === selectedProject
);
currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "All Projects";
}
}
const { openChangePassword } = useChangePassword();
@ -106,17 +122,18 @@ const Header = () => {
selectedProject === undefined &&
!getCachedData("hasReceived")
) {
if(isDashboard){
dispatch(setProjectId(null));
}else{
dispatch(setProjectId(projectNames[0]?.id));
if (projectNames.length === 1) {
dispatch(setProjectId(projectNames[0]?.id || null));
} else {
if (isDashboard) {
dispatch(setProjectId(null));
} else {
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
dispatch(setProjectId(firstAllowedProject?.id || null));
}
}
}
}, [projectNames, selectedProject, dispatch]);
/** Check if current page is project details page or directory page */
// const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
}, [projectNames, selectedProject, dispatch, isDashboard]);
const handler = useCallback(
@ -160,14 +177,15 @@ const Header = () => {
};
}, [handler, newProjectHandler]);
const handleProjectChange =(project)=>{
if(isProjectPath){
dispatch(setProjectId(project))
navigate("/projects/details")
} else{
dispatch(setProjectId(project))
const handleProjectChange = (project) => {
dispatch(setProjectId(project));
if (isProjectPath && project !== null) {
navigate("/projects/details");
}
}
};
const shouldShowDropdown = projectNames && projectNames.length > 1;
return (
<nav
@ -190,39 +208,43 @@ const Header = () => {
<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">
<button
className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
} px-1`}
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{displayText}
</button>
{shouldShowDropdown ? (
<button
className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{currentProjectDisplayName}
</button>
) : (
<span className="btn btn-sm-sm btn-xl px-1">
{currentProjectDisplayName}
</span>
)}
{projectNames.length > 0 && (
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
<ul
className="dropdown-menu"
style={{ overflow: "auto", maxHeight: "300px" }}
>
{isDashboard && (
<li>
<button
className="dropdown-item"
onClick={() => dispatch(setProjectId(null))}
onClick={() => handleProjectChange(null)}
>
All Projects
</button>
</li>
)}
{[...projectNames]
{[...projectsForDropdown]
.sort((a, b) => a?.name?.localeCompare(b.name))
.map((project) => (
<li key={project?.id}>
<button
className="dropdown-item"
onClick={()=>handleProjectChange(project?.id)}
onClick={() => handleProjectChange(project?.id)}
>
{project?.name}
{project?.shortName && (
@ -239,7 +261,6 @@ const Header = () => {
</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">
<a

205
src/components/Project/AboutProject.jsx
View File

@ -1,17 +1,18 @@
import React, { useEffect, useState } from "react";
import moment from "moment";
import { getProjectStatusName } from "../../utils/projectStatus";
import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
import { useSelector } from "react-redux"; // Import useSelector
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {MANAGE_PROJECT} from "../../utils/constants";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants";
import GlobalModel from "../common/GlobalModel";
import ManageProjectInfo from "./ManageProjectInfo";
import {useQueryClient} from "@tanstack/react-query";
import { useQueryClient } from "@tanstack/react-query";
import { useSelectedproject } from "../../slices/apiDataManager";
const AboutProject = () => {
const [IsOpenModal, setIsOpenModal] = useState(false);
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
const { mutate: UpdateProjectDetails, isPending } = useUpdateProject({
onSuccessCallback: () => {
setIsOpenModal(false);
}
@ -19,118 +20,134 @@ const AboutProject = () => {
const ClientQuery = useQueryClient();
// *** MODIFIED LINE: Get projectId from Redux store using useSelector ***
const projectId = useSelector((store) => store.localVariables.projectId);
// const projectId = useSelector((store) => store.localVariables.projectId);
const projectId = useSelectedproject();
const manageProject = useHasUserPermission(MANAGE_PROJECT);
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId ); // Pass projectId from useSelector
const handleFormSubmit = ( updatedProject ) => {
if ( projects_Details?.id ) {
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject });
const { projects_Details, isLoading, error, refetch } = useProjectDetails(projectId); // Pass projectId from useSelector
const handleFormSubmit = (updatedProject) => {
if (projects_Details?.id) {
UpdateProjectDetails({ projectId: projects_Details?.id, updatedData: updatedProject });
// The refetch here might be redundant or could be handled by react-query's invalidateQueries
// if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
// If refetch is still needed, consider adding a delay or using onSuccess of UpdateProjectDetails.
// For now, keeping it as is based on your original code.
refetch();
refetch();
}
};
return (
<>
{IsOpenModal && (
<GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
<GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
<ManageProjectInfo
project={projects_Details}
handleSubmitForm={handleFormSubmit}
onClose={() => setIsOpenModal( false )}
onClose={() => setIsOpenModal(false)}
isPending={isPending}
/>
</GlobalModel>
)}
{projects_Details && (
<>
<div className="card mb-6">
<div className="card-header text-start">
<h6 className="card-action-title mb-0">
{" "}
<i className="fa fa-building rounded-circle text-primary"></i>
<span className="ms-2">Project Profile</span>
</h6>
</div>
<div className="card-body">
<ul className="list-unstyled my-3 ps-2">
<li className="d-flex align-items-center mb-3">
<i className="bx bx-cog"></i>
<span className="fw-medium mx-2">Name:</span>{" "}
<span>{projects_Details.name}</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-fingerprint"></i>
<span className="fw-medium mx-2">Nick Name:</span>{" "}
<span> {projects_Details.shortName} </span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-check"></i>
<span className="fw-medium mx-2">Start Date:</span>{" "}
<span>
{projects_Details.startDate
? moment(projects_Details.startDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-stop-circle"></i>{" "}
<span className="fw-medium mx-2">End Date:</span>{" "}
<span>
{projects_Details.endDate
? moment(projects_Details.endDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-trophy"></i>
<span className="fw-medium mx-2">Status:</span>{" "}
<span>{projects_Details?.projectStatus?.status}</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-user"></i>
<span className="fw-medium mx-2">Contact:</span>{" "}
<span>{projects_Details.contactPerson}</span>
</li>
<li className="d-flex flex-column align-items-start mb-3">
<div className="d-flex align-items-center">
<i className="bx bx-flag"></i>
<span className="fw-medium mx-2">Address:</span>
{projects_Details.projectAddress?.length <= 20 && (
<span>{projects_Details.projectAddress}</span>
)}
</div>
{projects_Details.projectAddress?.length > 20 && (
<div className="ms-4 text-start">{projects_Details.projectAddress}</div>
)}
</li>
<div className="card mb-6">
<div className="card-header text-start">
<h6 className="card-action-title mb-0 ps-1">
{" "}
<i className="fa fa-building rounded-circle text-primary"></i>
<span className="ms-2">Project Profile</span>
</h6>
</div>
<div className="card-body">
<ul className="list-unstyled my-3 ps-0">
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}> {/* Adjust width as needed for alignment */}
<i className="bx bx-cog"></i>
<span className="fw-medium mx-2">Name:</span>
</div>
<span>{projects_Details.name}</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-fingerprint"></i>
<span className="fw-medium mx-2">Nick Name:</span>
</div>
<span>{projects_Details.shortName}</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-check"></i>
<span className="fw-medium mx-2">Start Date:</span>
</div>
<span>
{projects_Details.startDate
? moment(projects_Details.startDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-stop-circle"></i>
<span className="fw-medium mx-2">End Date:</span>
</div>
<span>
{projects_Details.endDate
? moment(projects_Details.endDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-trophy"></i>
<span className="fw-medium mx-2">Status:</span>
</div>
<span>{projects_Details?.projectStatus?.status.replace(/\s/g, '')}</span>
</li>
<li className="d-flex mb-3">
<div className="d-flex align-items-center" style={{ width: '120px' }}>
<i className="bx bx-user"></i>
<span className="fw-medium mx-2">Contact:</span>
</div>
<span>{projects_Details.contactPerson}</span>
</li>
<li className="d-flex mb-3">
{/* Label section with icon */}
<div className="d-flex align-items-start" style={{ minWidth: "120px" }}>
<i className="bx bx-flag mt-1"></i>
<span className="fw-medium mx-2 text-nowrap">Address:</span>
</div>
<li className="d-flex justify-content-center mb-3">
{manageProject && (
<button
type="button"
className={`btn btn-sm btn-primary ${
!manageProject && "d-none"
}`}
data-bs-toggle="modal"
data-bs-target="#edit-project-modal"
onClick={()=>setIsOpenModal(true)}
>
Modify Details
</button>
)}
</li>
</ul>
{/* Content section that wraps nicely */}
<div className="flex-grow-1 text-start text-wrap">
{projects_Details.projectAddress}
</div>
</li>
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
{manageProject && (
<button
type="button"
className={`btn btn-sm btn-primary ${!manageProject && "d-none"
}`}
data-bs-toggle="modal"
data-bs-target="#edit-project-modal"
onClick={() => setIsOpenModal(true)}
>
Modify Details
</button>
)}
</li>
</ul>
</div>
</div>
</div>
</>
)}
</>
)}
{isLoading && <span>loading...</span>}
</>
);

778
src/components/Project/AssignTask.jsx
View File

@ -48,6 +48,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
const infoRef = useRef(null);
const infoRef1 = useRef(null);
// State for search term
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
if (typeof bootstrap !== "undefined") {
if (infoRef.current) {
@ -83,7 +86,10 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
const { loading } = useMaster();
const { data: jobRoleData } = useMaster();
const [selectedRole, setSelectedRole] = useState("all");
// Changed to an array to hold multiple selected roles
const [selectedRoles, setSelectedRoles] = useState(["all"]);
// Changed to an array to hold multiple selected roles
// const [selectedRoles, setSelectedRoles] = useState(["all"]);
const [displayedSelection, setDisplayedSelection] = useState("");
const {
handleSubmit,
@ -121,20 +127,79 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
useEffect(() => {
dispatch(changeMaster("Job Role"));
return () => setSelectedRole("all");
// Initial state should reflect "All Roles" selected
setSelectedRoles(["all"]);
}, [dispatch]);
const handleRoleChange = (event) => {
setSelectedRole(event.target.value);
// Modified handleRoleChange to handle multiple selections
const handleRoleChange = (event, roleId) => {
// If 'all' is selected, clear other selections
if (roleId === "all") {
setSelectedRoles(["all"]);
} else {
setSelectedRoles((prevSelectedRoles) => {
// If "all" was previously selected, remove it
const newRoles = prevSelectedRoles.filter((role) => role !== "all");
if (newRoles.includes(roleId)) {
// If role is already selected, unselect it
return newRoles.filter((id) => id !== roleId);
} else {
// If role is not selected, add it
return [...newRoles, roleId];
}
});
}
};
const filteredEmployees =
selectedRole === "all"
? employees
: employees?.filter(
(emp) => String(emp.jobRoleId || "") === selectedRole
);
useEffect(() => {
// Update displayedSelection based on selectedRoles
if (selectedRoles.includes("all")) {
setDisplayedSelection("All Roles");
} else if (selectedRoles.length > 0) {
const selectedRoleNames = selectedRoles.map(roleId => {
const role = jobRoleData?.find(r => String(r.id) === roleId);
return role ? role.name : '';
}).filter(Boolean); // Filter out empty strings for roles not found
setDisplayedSelection(selectedRoleNames.join(', '));
} else {
setDisplayedSelection("Select Roles");
}
}, [selectedRoles, jobRoleData]);
const handleSearchChange = (event) => {
setSearchTerm(event.target.value);
};
// Filter employees first by role, then by search term AND job role name
const filteredEmployees = employees?.filter((emp) => {
const matchesRole =
selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
// Convert both first and last names and job role name to lowercase for case-insensitive matching
const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
const searchLower = searchTerm.toLowerCase();
// Check if the full name OR job role name includes the search term
const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
return matchesRole && matchesSearch;
});
// Determine unique job role IDs from the filtered employees (for dropdown options)
const uniqueJobRoleIdsInFilteredEmployees = new Set(
employees?.map(emp => emp.jobRoleId).filter(Boolean)
);
// Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
const jobRolesForDropdown = jobRoleData?.filter(role =>
uniqueJobRoleIdsInFilteredEmployees.has(role.id)
);
// Calculate the count of selected roles for display
const selectedRolesCount = selectedRoles.includes("all")
? 0 // "All Roles" doesn't contribute to a specific count
: selectedRoles.length;
const onSubmit = (data) => {
const selectedEmployeeIds = data.selectedEmployees;
@ -159,226 +224,339 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
reset();
onClose();
};
return (
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
<div className="container my-3">
<div className="mb-1">
<p className="mb-0">
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
<span className="me-2 m-0 font-bold">Work Location :</span>
{[
assignData?.building?.buildingName,
assignData?.floor?.floorName,
assignData?.workArea?.areaName,
assignData?.workItem?.activityMaster?.activityName,
]
.filter(Boolean) // Filter out any undefined/null values
.map((item, index, array) => (
<span key={index} className="d-flex align-items-center">
{item}
{index < array.length - 1 && (
<i className="bx bx-chevron-right mx-2"></i>
)}
</span>
))}
</span>
</p>
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
<div className="container my-3">
<div className="mb-1">
<p className="mb-0">
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
<span className="me-2 m-0 fw-bold">Work Location :</span> {/* Changed font-bold to fw-bold */}
{[
assignData?.building?.buildingName,
assignData?.floor?.floorName,
assignData?.workArea?.areaName,
assignData?.workItem?.activityMaster?.activityName,
]
.filter(Boolean) // Filter out any undefined/null values
.map((item, index, array) => (
<span key={index} className="d-flex align-items-center">
{item}
{index < array.length - 1 && (
<i className="bx bx-chevron-right mx-2"></i>
)}
</span>
))}
</span>
</p>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start">
<div className="row mb-1">
<div className="col-12">
<div className="form-text text-start">
<div className="d-flex align-items-center form-text fs-7">
<span className="text-dark">Select Team</span>
<div className="me-2">{displayedSelection}</div>
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start">
<div className="row mb-1">
<div className="col-12">
<div className="form-text text-start">
<div className="d-flex align-items-center form-text fs-7">
<span className="text-dark">Select Team</span>
<div className="dropdown position-relative d-inline-block">
<a
className={`dropdown-toggle hide-arrow cursor-pointer ${
selectedRoles.includes("all") || selectedRoles.length === 0
? "text-secondary"
: "text-primary"
}`}
data-bs-toggle="dropdown"
role="button"
aria-expanded="false"
>
<i className="bx bx-slider-alt ms-2"></i>
</a>
{/* Badge */}
{selectedRolesCount > 0 && (
<span
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
style={{
fontSize: "0.65rem",
minWidth: "18px",
height: "18px",
padding: "0",
lineHeight: "18px",
textAlign: "center",
zIndex: 10,
}}
>
<i className="bx bx-filter bx-lg text-primary"></i>
</a>
{selectedRolesCount}
</span>
)}
<ul className="dropdown-menu p-2 text-capitalize">
<li key="all">
<button
type="button"
className="dropdown-item py-1"
onClick={() =>
handleRoleChange({
target: { value: "all" },
})
}
>
{/* Dropdown Menu - Corrected: Removed duplicate ul block */}
<ul className="dropdown-menu p-2 text-capitalize" style={{ maxHeight: "300px", overflowY: "auto" }}>
<li> {/* Changed key="all" to a unique key if possible, or keep it if "all" is a unique identifier */}
<div className="form-check dropdown-item py-0">
<input
className="form-check-input"
type="checkbox"
id="checkboxAllRoles" // Unique ID
value="all"
checked={selectedRoles.includes("all")}
onChange={(e) => handleRoleChange(e, e.target.value)}
/>
<label className="form-check-label ms-2" htmlFor="checkboxAllRoles">
All Roles
</button>
</label>
</div>
</li>
{jobRolesForDropdown?.map((role) => (
<li key={role.id}>
<div className="form-check dropdown-item py-0">
<input
className="form-check-input"
type="checkbox"
id={`checkboxRole-${role.id}`} // Unique ID
value={role.id}
checked={selectedRoles.includes(String(role.id))}
onChange={(e) => handleRoleChange(e, e.target.value)}
/>
<label className="form-check-label ms-2" htmlFor={`checkboxRole-${role.id}`}>
{role.name}
</label>
</div>
</li>
{jobRoleData?.map((user) => (
<li key={user.id}>
<button
type="button"
className="dropdown-item py-1"
value={user.id}
onClick={handleRoleChange}
>
{user.name}
</button>
</li>
))}
</ul>
</div>
))}
</ul>
</div>
<input
type="text"
className="form-control form-control-sm ms-auto mb-2 mt-2"
placeholder="Search employees or roles..."
value={searchTerm}
onChange={handleSearchChange}
style={{ maxWidth: "200px" }}
/>
</div>
</div>
</div>
</div>
<div
className="col-12 mt-2"
style={{ maxHeight: "280px", overflowY: "auto", overflowX: "hidden" }}
>
{selectedRoles?.length > 0 && (
<div className="row">
<div className="col-12 h-sm-25 overflow-auto mt-2">
{selectedRole !== "" && (
<div className="row">
{employeeLoading ? (
<div className="col-12">
<p className="text-center">Loading employees...</p>
</div>
) : filteredEmployees?.length > 0 ? (
filteredEmployees.map((emp) => {
const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId
);
{employeeLoading ? (
<div className="col-12">
<p className="text-center">Loading employees...</p>
</div>
) : filteredEmployees?.length > 0 ? (
filteredEmployees.map((emp) => {
const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId
);
return (
<div
key={emp.id}
className="col-6 col-md-4 col-lg-3 mb-3"
>
<div className="form-check d-flex align-items-start">
<Controller
name="selectedEmployees"
control={control}
render={({ field }) => (
<input
{...field}
className="form-check-input me-1 mt-1"
type="checkbox"
id={`employee-${emp?.id}`}
value={emp.id}
checked={field.value?.includes(emp.id)}
onChange={(e) => {
handleCheckboxChange(e, emp);
}}
/>
)}
/>
<div className="flex-grow-1">
<p
className="mb-0"
style={{ fontSize: "13px" }}
>
{emp.firstName} {emp.lastName}
</p>
<small
className="text-muted"
style={{ fontSize: "11px" }}
>
{loading ? (
<span className="placeholder-glow">
<span className="placeholder col-6"></span>
</span>
) : (
jobRole?.name || "Unknown Role"
)}
</small>
</div>
</div>
</div>
);
})
) : (
<div className="col-12">
<p className="text-center">
No employees found for the selected role.
</p>
</div>
)}
</div>
)}
</div>
</div>
<div
className="col-12 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{watch("selectedEmployees")?.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{watch("selectedEmployees")?.map((empId) => {
const emp = employees.find((emp) => emp.id === empId);
return (
emp && (
<span
key={empId}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
return (
<div
key={emp.id}
className="col-6 col-md-4 col-lg-3 mb-3"
>
<div className="form-check d-flex align-items-start">
<Controller
name="selectedEmployees"
control={control}
render={({ field }) => (
<input
{...field}
className="form-check-input me-1 mt-1"
type="checkbox"
id={`employee-${emp?.id}`} // Unique ID
value={emp.id}
checked={field.value?.includes(emp.id)}
onChange={(e) => {
handleCheckboxChange(e, emp);
}}
/>
)}
/>
<div className="flex-grow-1">
<p
className="mb-0"
style={{ fontSize: "13px" }}
>
{emp.firstName} {emp.lastName}
<p
type="button"
className=" btn-close-white p-0 m-0"
aria-label="Close"
onClick={() => {
const updatedSelected = watch(
"selectedEmployees"
).filter((id) => id !== empId);
setValue(
"selectedEmployees",
updatedSelected
);
trigger("selectedEmployees");
}}
>
<i className="icon-base bx bx-x icon-md "></i>
</p>
</span>
)
);
})}
</div>
</p>
<small
className="text-muted"
style={{ fontSize: "11px" }}
>
{loading ? (
<span className="placeholder-glow">
<span className="placeholder col-6"></span>
</span>
) : (
jobRole?.name || "Unknown Role"
)}
</small>
</div>
</div>
</div>
);
})
) : (
<div className="col-12">
<p className="text-center">
No employees found for the selected role(s).
</p>
</div>
)}
</div>
)}
</div>
{!loading && errors.selectedEmployees && (
<div className="danger-text mt-1">
<p>{errors.selectedEmployees.message}</p>{" "}
<div
className="col-12 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{watch("selectedEmployees")?.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{watch("selectedEmployees")?.map((empId) => {
const emp = employees.find((emp) => emp.id === empId);
return (
emp && (
<span
key={empId}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
>
{emp.firstName} {emp.lastName}
{/* Changed p tag to button for semantic correctness and accessibility */}
<button
type="button"
className="btn-close btn-close-white ms-1" // Added ms-1 for spacing, removed p-0 m-0
aria-label="Remove employee" // More descriptive aria-label
onClick={() => {
const updatedSelected = watch(
"selectedEmployees"
).filter((id) => id !== empId);
setValue(
"selectedEmployees",
updatedSelected
);
trigger("selectedEmployees");
}}
>
<i className="icon-base bx bx-x icon-md"></i>
</button>
</span>
)
);
})}
</div>
)}
</div>
)}
</div>
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-3 px-1">
<label
className="form-text text-dark align-items-center d-flex"
htmlFor="inlineCheckbox1"
{!loading && errors.selectedEmployees && (
<div className="danger-text mt-1">
<p>{errors.selectedEmployees.message}</p>{" "}
</div>
)}
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-3 px-1">
<label
className="form-text text-dark align-items-center d-flex"
htmlFor="inlineCheckbox1" // This htmlFor isn't linked to a checkbox in this context
>
Pending Task of Activity :
<label
className="form-check-label fs-7 ms-4"
htmlFor="inlineCheckbox1" // This htmlFor isn't linked to a checkbox in this context
>
<strong>
{assignData?.workItem?.plannedWork -
assignData?.workItem?.completedWork}
</strong>{" "}
<u>
{
assignData?.workItem?.activityMaster
?.unitOfMeasurement
}
</u>
</label>
<div style={{ display: "flex", alignItems: "center" }}>
<div
ref={infoRef}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center ms-2"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
style={{ cursor: "pointer" }}
>
Pending Task of Activity :
<label
className="form-check-label fs-7 ms-4"
htmlFor="inlineCheckbox1"
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<strong>
{assignData?.workItem?.plannedWork -
assignData?.workItem?.completedWork}
</strong>{" "}
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
</div>
</label>
</div>
</div>
{/* Target for Today input and validation */}
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
<label
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
htmlFor="targetForTodayInput" // Added a unique htmlFor for clarity
>
<span>Target for Today</span>&nbsp;
<span style={{ marginLeft: "46px" }}>:</span>
</label>
</div>
<div
className="form-check form-check-inline col-sm-3 mt-2"
style={{ marginLeft: "-28px" }}
>
<Controller
name="plannedTask"
control={control}
render={({ field }) => (
<div className="d-flex align-items-center gap-1 ">
<input
type="text"
className="form-control form-control-sm"
{...field}
id="defaultFormControlInput" // Consider a more descriptive ID if used elsewhere
aria-describedby="defaultFormControlHelp"
/>
<span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
<u>
{" "}
{
assignData?.workItem?.activityMaster
?.unitOfMeasurement
}
</u>
</label>
<div style={{ display: "flex", alignItems: "center" }}>
</span>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<div
ref={infoRef}
ref={infoRef1}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center ms-2"
data-bs-toggle="popover"
@ -401,145 +579,75 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
</svg>
</div>
</div>
</label>
</div>
</div>
{/* Target for Today input and validation */}
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
<label
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
htmlFor="inlineCheckbox1"
>
<span>Target for Today</span>&nbsp;
<span style={{ marginLeft: "46px" }}>:</span>
</label>
</div>
<div
className="form-check form-check-inline col-sm-3 mt-2"
style={{ marginLeft: "-28px" }}
>
<Controller
name="plannedTask"
control={control}
render={({ field }) => (
<div className="d-flex align-items-center gap-1 ">
<input
type="text"
className="form-control form-control-sm"
{...field}
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
/>
<span style={{ paddingLeft: "6px" }}>
{
assignData?.workItem?.workItem?.activityMaster
?.unitOfMeasurement
}
</span>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<div
ref={infoRef1}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center ms-2"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
style={{ cursor: "pointer" }}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
</div>
</div>
)}
/>
</div>
{errors.plannedTask && (
<div className="danger-text mt-1">
{errors.plannedTask.message}
</div>
)}
{isHelpVisible && (
<div
className="position-absolute bg-white border p-2 rounded shadow"
style={{ zIndex: 10, marginLeft: "10px" }}
>
{/* Add your help content here */}
<p className="mb-0">
Enter the target value for today's task.
</p>
</div>
)}
</div>
<label
className="form-text fs-7 m-1 text-lg text-dark"
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
>
Description
</label>
<Controller
name="description"
control={control}
render={({ field }) => (
<textarea
{...field}
className="form-control"
id="descriptionTextarea" // Changed id for better accessibility
rows="2"
/>
)}
/>
{errors.description && (
<div className="danger-text">{errors.description.message}</div>
)}
</div>
{/* Submit and Cancel buttons */}
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
<button
type="submit"
className="btn btn-sm btn-primary "
disabled={isSubmitting || loading}
{errors.plannedTask && (
<div className="danger-text mt-1">
{errors.plannedTask.message}
</div>
)}
{isHelpVisible && (
<div
className="position-absolute bg-white border p-2 rounded shadow"
style={{ zIndex: 10, marginLeft: "10px" }}
>
{isSubmitting ? "Please Wait" : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={closedModel}
disabled={isSubmitting || loading}
>
Cancel
</button>
</div>
</form>
<p className="mb-0">
Enter the target value for today's task.
</p>
</div>
)}
</div>
<label
className="form-text fs-7 m-1 text-dark" // Removed duplicate htmlFor and text-lg
htmlFor="descriptionTextarea"
>
Description
</label>
<Controller
name="description"
control={control}
render={({ field }) => (
<textarea
{...field}
className="form-control"
id="descriptionTextarea" // Unique ID
rows="2"
/>
)}
/>
{errors.description && (
<div className="danger-text">{errors.description.message}</div>
)}
</div>
</div>
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
<button
type="submit"
className="btn btn-sm btn-primary "
disabled={isSubmitting || loading}
>
{isSubmitting ? "Please Wait" : "Submit"}
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={closedModel}
disabled={isSubmitting || loading}
>
Cancel
</button>
</div>
</form>
</div>
);
</div>
</div> );
};
export default AssignTask;
export default AssignTask;

4
src/components/Project/ProjectInfra.jsx
View File

@ -15,6 +15,7 @@ import {
cacheData,
clearCacheKey,
getCachedData,
useSelectedproject,
} from "../../slices/apiDataManager";
import { useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
@ -25,7 +26,8 @@ import GlobalModel from "../common/GlobalModel";
const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
{
const projectId = useSelector((store)=>store.localVariables.projectId)
// const projectId = useSelector((store)=>store.localVariables.projectId)
const projectId = useSelectedproject();
const reloadedData = useSelector((store) => store.localVariables.reload);
const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
const {projectInfra,isLoading,error} = useProjectInfra(projectId)

29
src/components/Project/ProjectNav.jsx
View File

@ -49,20 +49,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
</a>
</li>
<li className="nav-item">
<a
className={`nav-link ${
activePill === "imagegallary" ? "active" : ""
} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("imagegallary");
}}
>
<i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">project Setup</span>
</a>
</li>
{(DirAdmin || DireManager || DirUser) && (
<li className="nav-item">
<a
@ -77,6 +64,20 @@ const ProjectNav = ({ onPillClick, activePill }) => {
</a>
</li>
)}
<li className="nav-item">
<a
className={`nav-link ${
activePill === "imagegallary" ? "active" : ""
} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("imagegallary");
}}
>
<i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">project Setup</span>
</a>
</li>
</ul>
</div>

6
src/components/Project/Teams.jsx
View File

@ -15,11 +15,13 @@ import { ASSIGN_TO_PROJECT } from "../../utils/constants";
import ConfirmModal from "../common/ConfirmModal";
import eventBus from "../../services/eventBus";
import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../hooks/useProjects";
import { useSelectedproject } from "../../slices/apiDataManager";
const Teams = () =>
{
// const {projectId} = useParams()
const projectId = useSelector((store)=>store.localVariables.projectId)
// const projectId = useSelector((store)=>store.localVariables.projectId)
const projectId = useSelectedproject();
const dispatch = useDispatch();
const { data, loading } = useMaster();
@ -293,7 +295,7 @@ const {
<div className="d-flex flex-column">
<a
onClick={() =>
navigate(`/employee/${item.employeeId}?for=account`)
navigate(`/employee/${item.employeeId}?for=attendance`)
}
className="text-heading text-truncate cursor-pointer"
>

129
src/components/master/CreateRole.jsx
View File

@ -141,83 +141,92 @@ const CreateRole = ({ modalType, onClose }) => {
)}
</div>
<div className="col-12 col-md-12 border">
<div
className="border rounded px-3"
style={{
maxHeight: "350px",
overflowY: "auto",
overflowX: "hidden", // Prevent bottom scrollbar
}}
>
{masterFeatures.map((feature, featureIndex) => (
<React.Fragment key={feature.id}>
<div
className="row my-1"
key={feature.id}
style={{ marginLeft: "0px" }}
>
<div
className="col-12 col-md-3 d-flex text-start align-items-start"
style={{ wordWrap: "break-word" }}
>
<span className="fs">{feature.name}</span>
<div className="row my-1">
{/* Feature Title */}
<div className="col-12 text-start fw-semibold mb-2">
{feature.name}
</div>
<div className="col-12 col-md-1"></div>
<div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
{feature.featurePermissions.map((perm, permIndex) => {
const refIndex = featureIndex * 10 + permIndex;
return (
<div className="d-flex me-3 mb-2" key={perm.id}>
<label className="form-check-label" htmlFor={perm.id}>
<input
type="checkbox"
className="form-check-input mx-2"
id={perm.id}
value={perm.id}
{...register("selectedPermissions")}
/>
{perm.name}
</label>
<div style={{ display: "flex", alignItems: "center" }}>
<div
key={refIndex}
ref={(el) => (popoverRefs.current[refIndex] = el)}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center"
data-bs-toggle="popover"
refIndex
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`
<div class="border border-secondary rounded custom-popover p-2 px-3">
${perm.description}
</div>
`}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
{/* Permissions Grid */}
<div className="col-12">
<div className="row">
{feature.featurePermissions.map((perm, permIndex) => {
const refIndex = featureIndex * 100 + permIndex;
return (
<div
className="col-12 col-sm-6 col-md-4 mb-3"
key={perm.id}
>
<div className="d-flex align-items-start">
<label
className="form-check-label d-flex align-items-center"
htmlFor={perm.id}
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
<input
type="checkbox"
className="form-check-input me-2"
id={perm.id}
value={perm.id}
{...register("selectedPermissions")}
/>
{perm.name}
</label>
{/* Info icon */}
<div className="ms-1 d-flex align-items-center">
<div
ref={(el) => (popoverRefs.current[refIndex] = el)}
tabIndex="0"
className="d-flex align-items-center justify-content-center"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
</div>
</div>
</div>
</div>
);
})}
);
})}
</div>
</div>
</div>
<hr className="hr my-1 py-1" />
<hr className="my-2" />
</React.Fragment>
))}
{errors.selectedPermissions && (
<p className="text-danger">{errors.selectedPermissions.message}</p>
)}
{!masterFeatures && <p>Loading...</p>}
</div>
{masterFeatures && (
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">

413
src/components/master/EditRole.jsx
View File

@ -7,14 +7,7 @@ import { useFeatures } from "../../hooks/useMasterRole";
import { MasterRespository } from "../../repositories/MastersRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
import {useUpdateApplicationRole} from "../../hooks/masterHook/useMaster";
import { useUpdateApplicationRole } from "../../hooks/masterHook/useMaster";
const updateSchema = z.object({
role: z.string().min(1, { message: "Role is required" }),
@ -25,147 +18,145 @@ const updateSchema = z.object({
}),
});
const EditMaster = ({ master, onClose }) => {
const maxDescriptionLength = 255;
const popoverRefs = useRef([]);
const { masterFeatures } = useFeatures();
const { mutate: updateApplicationRole, isPending: isLoading } = useUpdateApplicationRole(() => onClose?.());
const maxDescriptionLength = 255;
const popoverRefs = useRef([]);
const { masterFeatures } = useFeatures();
const { mutate: updateApplicationRole, isPending: isLoading } = useUpdateApplicationRole(() => onClose?.());
const buildDefaultPermissions = () => {
const defaults = {};
masterFeatures.forEach((feature) => {
feature.featurePermissions.forEach((perm) => {
const existing = master?.item?.featurePermission?.find(p => p.id === perm.id);
defaults[perm.id] = existing?.isEnabled || false;
const buildDefaultPermissions = () => {
const defaults = {};
masterFeatures.forEach((feature) => {
feature.featurePermissions.forEach((perm) => {
const existing = master?.item?.featurePermission?.find(p => p.id === perm.id);
defaults[perm.id] = existing?.isEnabled || false;
});
});
});
return defaults;
};
const initialPermissions = buildDefaultPermissions();
const {
register,
handleSubmit,
formState: { errors, dirtyFields },
setError,
reset,
} = useForm({
resolver: zodResolver(updateSchema),
defaultValues: {
role: master?.item?.role || "",
description: master?.item?.description || "",
permissions: initialPermissions,
},
});
const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
const onSubmit = (data) => {
const existingIds = new Set(master?.item?.featurePermission?.map(p => p.id));
const updatedPermissions = Object.entries(data.permissions)
.filter(([id, value]) => {
return existingIds.has(id) || value === true || (dirtyFields.permissions?.[id]);
})
.map(([id, value]) => ({ id, isEnabled: value }));
if (updatedPermissions.length === 0) {
setError("permissions", {
type: "manual",
message: "At least one permission must be selected.",
});
return;
}
const payload = {
id: master?.item?.id,
role: data.role,
description: data.description,
featuresPermission: updatedPermissions,
return defaults;
};
updateApplicationRole({ id: payload.id, payload });
};
// const onSubmit = (data) => {
// setIsLoading(true)
// const existingIds = new Set(
// master?.item?.featurePermission?.map((p) => p.id)
// );
const initialPermissions = buildDefaultPermissions();
// const updatedPermissions = Object.entries(data.permissions)
// .filter(([id, value]) => {
// if (existingIds.has(id)) return true;
// return (
// value === true ||
// (dirtyFields.permissions && dirtyFields.permissions[id])
// );
// })
// .map(([id, value]) => ({ id, isEnabled: value }));
// if (updatedPermissions.length === 0) {
// setError("permissions", {
// type: "manual",
// message: "At least one permission must be selected.",
// });
// return;
// }
// const updatedRole = {
// id: master?.item?.id,
// role: data.role,
// description: data.description,
// featuresPermission: updatedPermissions,
// };
// MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
// setIsLoading(false)
// const cachedData = getCachedData("Application Role");
// if (cachedData) {
// const updatedData = cachedData.map((role) =>
// role.id === resp.data?.id ? { ...role, ...resp.data } : role
// );
// cacheData("Application Role", updatedData);
// }
// showToast("Application Role Updated successfully.", "success");
// setIsLoading(false)
// onClose()
// }).catch((Err) => {
// showToast(Err.message, "error");
// setIsLoading(false)
// })
// };
useEffect(() => {
reset({
role: master?.item?.role || "",
description: master?.item?.description || "",
permissions: buildDefaultPermissions(),
const {
register,
handleSubmit,
formState: { errors, dirtyFields },
setError,
reset,
} = useForm({
resolver: zodResolver(updateSchema),
defaultValues: {
role: master?.item?.role || "",
description: master?.item?.description || "",
permissions: initialPermissions,
},
});
setDescriptionLength(master?.item?.description?.length || 0);
}, [master, reset]);
useEffect(() => {
popoverRefs.current.forEach((el) => {
if (el) {
new bootstrap.Popover(el, {
trigger: "focus",
placement: "right",
html: true,
content: el.getAttribute("data-bs-content"),
const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
const onSubmit = (data) => {
const existingIds = new Set(master?.item?.featurePermission?.map(p => p.id));
const updatedPermissions = Object.entries(data.permissions)
.filter(([id, value]) => {
return existingIds.has(id) || value === true || (dirtyFields.permissions?.[id]);
})
.map(([id, value]) => ({ id, isEnabled: value }));
if (updatedPermissions.length === 0) {
setError("permissions", {
type: "manual",
message: "At least one permission must be selected.",
});
return;
}
});
}, [masterFeatures]);
const payload = {
id: master?.item?.id,
role: data.role,
description: data.description,
featuresPermission: updatedPermissions,
};
updateApplicationRole({ id: payload.id, payload });
};
// const onSubmit = (data) => {
// setIsLoading(true)
// const existingIds = new Set(
// master?.item?.featurePermission?.map((p) => p.id)
// );
// const updatedPermissions = Object.entries(data.permissions)
// .filter(([id, value]) => {
// if (existingIds.has(id)) return true;
// return (
// value === true ||
// (dirtyFields.permissions && dirtyFields.permissions[id])
// );
// })
// .map(([id, value]) => ({ id, isEnabled: value }));
// if (updatedPermissions.length === 0) {
// setError("permissions", {
// type: "manual",
// message: "At least one permission must be selected.",
// });
// return;
// }
// const updatedRole = {
// id: master?.item?.id,
// role: data.role,
// description: data.description,
// featuresPermission: updatedPermissions,
// };
// MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
// setIsLoading(false)
// const cachedData = getCachedData("Application Role");
// if (cachedData) {
// const updatedData = cachedData.map((role) =>
// role.id === resp.data?.id ? { ...role, ...resp.data } : role
// );
// cacheData("Application Role", updatedData);
// }
// showToast("Application Role Updated successfully.", "success");
// setIsLoading(false)
// onClose()
// }).catch((Err) => {
// showToast(Err.message, "error");
// setIsLoading(false)
// })
// };
useEffect(() => {
reset({
role: master?.item?.role || "",
description: master?.item?.description || "",
permissions: buildDefaultPermissions(),
});
setDescriptionLength(master?.item?.description?.length || 0);
}, [master, reset]);
useEffect(() => {
popoverRefs.current.forEach((el) => {
if (el) {
new bootstrap.Popover(el, {
trigger: "focus",
placement: "right",
html: true,
content: el.getAttribute("data-bs-content"),
});
}
});
}, [masterFeatures]);
return (
@ -199,76 +190,90 @@ useEffect(() => {
)}
</div>
<div className="col-12 col-md-12 mx-2s" >
<div className="col-12 text-start">
{/* Scrollable Container with Border */}
<div
className="border rounded p-3"
style={{
maxHeight: "350px",
overflowY: "auto",
overflowX: "hidden", // Prevent horizontal scrollbar
paddingRight: "10px",
}}
>
{masterFeatures.map((feature, featureIndex) => (
<div key={feature.id} className="mb-3">
{/* Feature Group Title */}
<div className="fw-semibold mb-2">{feature.name}</div>
{masterFeatures.map((feature, featureIndex) => (
<div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
{/* Permissions Grid */}
<div className="row">
{feature.featurePermissions.map((perm, permIndex) => {
const refIndex = featureIndex * 10 + permIndex;
return (
<div
key={perm.id}
className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
>
<label
className="form-check-label d-flex align-items-center"
htmlFor={perm.id}
>
<input
type="checkbox"
className="form-check-input me-2"
id={perm.id}
{...register(`permissions.${perm.id}`, {
value: initialPermissions[perm.id] || false,
})}
/>
{perm.name}
</label>
<div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
<span className="fs">{feature.name}</span>
</div>
<div className="col-12 col-md-1">
</div>
<div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap ">
{feature.featurePermissions.map((perm, permIndex) => {
const refIndex = (featureIndex * 10) + permIndex;
return (
<div className="d-flex me-3 mb-2" key={perm.id}>
<label className="form-check-label" htmlFor={perm.id}>
<input
type="checkbox"
className="form-check-input mx-2"
id={perm.id}
{...register(`permissions.${perm.id}`, {
value: initialPermissions[perm.id] || false
})}
/>
{perm.name}
</label>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div
key={refIndex}
ref={(el) =>
(popoverRefs.current[refIndex] = el)
}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center"
data-bs-toggle="popover" refIndex
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`
<div class="border border-secondary rounded custom-popover p-2 px-3">
${perm.description}
</div>
`}
>
&nbsp;
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
</div>
{/* Info Icon */}
<div style={{ display: "flex", alignItems: "center" }}>
<div
ref={(el) => (popoverRefs.current[refIndex] = el)}
tabIndex="0"
className="d-flex align-items-center justify-content-center"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
)
})}
</div>
</div>
);
})}
</div>
</div>
<hr className="hr my-1 py-1" />
</div>
))}
{errors.permissions && (
<p className="text-danger">{errors.permissions.message}</p>
)}
<hr className="my-2" />
</div>
))}
</div>
{/* Error Display */}
{errors.permissions && (
<p className="text-danger">{errors.permissions.message}</p>
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>

6
src/hooks/useDashboard_Data.jsx
View File

@ -104,17 +104,15 @@ export const useDashboardTeamsCardData = (projectId) => {
useEffect(() => {
const fetchTeamsData = async () => {
if (!projectId) return; // ✅ Skip if projectId is not provided
setLoading(true);
setError("");
try {
const response = await GlobalRepository.getDashboardTeamsCardData(projectId);
setTeamsData(response.data); // ✅ Handle undefined/null
setTeamsData(response.data || {});
} catch (err) {
setError("Failed to fetch teams card data.");
console.error(err);
console.error("Error fetching teams card data:", err);
setTeamsData({});
} finally {
setLoading(false);

33
src/hooks/useDirectory.js
View File

@ -177,3 +177,36 @@ export const useOrganization = () => {
return { organizationList, loading, error };
};
export const useDesignation = () => {
const [designationList, setDesignationList] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const fetchOrg = async () => {
const cacheOrg = getCachedData("designation");
if (cacheOrg?.length != 0) {
setLoading(true);
try {
const resp = await DirectoryRepository.GetDesignations();
cacheData("designation", resp.data);
setDesignationList(resp.data);
setLoading(false);
} catch (error) {
const msg =
error?.response?.data?.message ||
error?.message ||
"Something went wrong";
setError(msg);
}
} else {
setDesignationList(cacheOrg);
}
};
useEffect(() => {
fetchOrg();
}, []);
return { designationList, loading, error };
};

329
src/pages/Activities/AttendancePage.jsx
View File

@ -8,33 +8,35 @@ import {
import Breadcrumb from "../../components/common/Breadcrumb";
import AttendanceLog from "../../components/Activities/AttendcesLogs";
import Attendance from "../../components/Activities/Attendance";
import AttendanceModel from "../../components/Activities/AttendanceModel";
import showToast from "../../services/toastService";
import Regularization from "../../components/Activities/Regularization";
import { useAttendance } from "../../hooks/useAttendance";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
import { hasUserPermission } from "../../utils/authUtils";
import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
import eventBus from "../../services/eventBus";
import AttendanceRepository from "../../repositories/AttendanceRepository";
import { useProjectName } from "../../hooks/useProjects";
import GlobalModel from "../../components/common/GlobalModel";
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
import AttendLogs from "../../components/Activities/AttendLogs";
import { useQueryClient } from "@tanstack/react-query";
const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all");
const [ShowPending, setShowPending] = useState(false);
const queryClient = useQueryClient();
const [showPending, setShowPending] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const loginUser = getCachedProfileData();
var selectedProject = useSelector((store) => store.localVariables.projectId);
const selectedProject = useSelector((store) => store.localVariables.projectId);
const dispatch = useDispatch();
const {
attendance,
loading: attLoading,
recall: attrecall,
} = useAttendance(selectedProject);
const [attendances, setAttendances] = useState();
const [empRoles, setEmpRoles] = useState(null);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [modelConfig, setModelConfig] = useState();
const [modelConfig, setModelConfig] = useState(null); // Initialize as null
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
@ -44,68 +46,172 @@ const AttendancePage = () => {
date: new Date().toLocaleDateString(),
});
useEffect(() => {
if (selectedProject == null) {
dispatch(setProjectId(projectNames[0]?.id));
}
}, []);
const handler = useCallback(
(msg) => {
if (selectedProject === msg.projectId) {
const updatedAttendance = attendances
? attendances.map((item) =>
item.employeeId === msg.response.employeeId
? { ...item, ...msg.response }
: item
)
: [msg.response];
cacheData("Attendance", {
data: updatedAttendance,
projectId: selectedProject,
});
setAttendances(updatedAttendance);
}
},
[selectedProject, attendances]
);
const employeeHandler = useCallback(
(msg) => {
// This logic seems fine for refetching if an employee ID exists in current attendances
if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
AttendanceRepository.getAttendance(selectedProject)
.then((response) => {
cacheData("Attendance", { data: response.data, selectedProject });
setAttendances(response.data);
})
.catch((error) => {
console.error(error);
});
}
},
[selectedProject, attendances]
);
const getRole = (roleId) => {
if (!empRoles) return "Unassigned";
if (!roleId) return "Unassigned";
const role = empRoles.find((b) => b.id == roleId);
const role = empRoles.find((b) => b.id === roleId);
return role ? role.role : "Unassigned";
};
const openModel = () => {
setIsCreateModalOpen(true);
};
const handleModalData = (employee) => {
// Simplified and moved modal opening logic
const handleModalData = useCallback((employee) => {
setModelConfig(employee);
};
setIsCreateModalOpen(true); // Open the modal directly when data is set
}, []);
const closeModal = () => {
const closeModal = useCallback(() => {
setModelConfig(null);
setIsCreateModalOpen(false);
};
// Directly manipulating the DOM is generally not recommended in React.
// React handles modal visibility via state. If you must, ensure it's
// for external libraries or for very specific, controlled reasons.
// For a typical Bootstrap modal, just setting `isCreateModalOpen` to false
// should be enough if the modal component itself handles the Bootstrap classes.
const modalElement = document.getElementById("check-Out-modal");
if (modalElement) {
modalElement.classList.remove("show");
modalElement.style.display = "none";
document.body.classList.remove("modal-open");
const modalBackdrop = document.querySelector(".modal-backdrop");
if (modalBackdrop) {
modalBackdrop.remove();
}
}
}, []);
const handleSubmit = useCallback((formData) => {
dispatch(markCurrentAttendance(formData))
.then((action) => {
if (action.payload && action.payload.employeeId) {
const updatedAttendance = attendances
? attendances.map((item) =>
item.employeeId === action.payload.employeeId
? { ...item, ...action.payload }
: item
)
: [action.payload];
cacheData("Attendance", {
data: updatedAttendance,
projectId: selectedProject,
});
setAttendances(updatedAttendance);
showToast("Attendance Marked Successfully", "success");
} else {
showToast("Failed to mark attendance: Invalid response", "error");
}
})
.catch((error) => {
showToast(error.message, "error");
});
}, [dispatch, attendances, selectedProject]);
const handleToggle = (event) => {
setShowOnlyCheckout(event.target.checked);
setShowPending(event.target.checked);
};
useEffect(() => {
if (selectedProject === null && projectNames.length > 0) {
dispatch(setProjectId(projectNames[0]?.id));
}
}, [selectedProject, projectNames, dispatch]);
useEffect(() => {
if (modelConfig !== null) {
openModel();
setAttendances(attendance);
}, [attendance]);
const filteredAndSearchedTodayAttendance = useCallback(() => {
let currentData = attendances;
if (showPending) {
currentData = currentData?.filter(
(att) => att?.checkInTime !== null && att?.checkOutTime === null
);
}
}, [modelConfig, isCreateModalOpen]);
if (searchQuery) {
const lowerCaseSearchQuery = searchQuery.toLowerCase();
currentData = currentData?.filter((att) => {
const fullName = [att.firstName, att.middleName, att.lastName]
.filter(Boolean)
.join(" ")
.toLowerCase();
return (
att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) ||
att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) ||
fullName.includes(lowerCaseSearchQuery)
);
});
}
return currentData;
}, [attendances, showPending, searchQuery]);
useEffect(() => {
eventBus.on("attendance", handler);
return () => eventBus.off("attendance", handler);
}, [handler]);
useEffect(() => {
eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]);
return (
<>
{isCreateModalOpen && modelConfig && (
<GlobalModel
isOpen={isCreateModalOpen}
size={modelConfig?.action === 6 && "lg"}
closeModal={closeModal}
<div
className="modal fade show"
style={{ display: "block" }}
id="check-Out-modal"
tabIndex="-1"
aria-hidden="true"
>
{(modelConfig?.action === 0 ||
modelConfig?.action === 1 ||
modelConfig?.action === 2) && (
<CheckCheckOutmodel
modeldata={modelConfig}
closeModal={closeModal}
/>
)}
{/* For view logs */}
{modelConfig?.action === 6 && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
)}
{modelConfig?.action === 7 && (
<Confirmation closeModal={closeModal} />
)}
</GlobalModel>
<AttendanceModel
modelConfig={modelConfig}
closeModal={closeModal}
handleSubmitForm={handleSubmit}
/>
</div>
)}
<div className="container-fluid">
@ -115,69 +221,106 @@ const AttendancePage = () => {
{ label: "Attendance", link: null },
]}
></Breadcrumb>
<div className="nav-align-top nav-tabs-shadow" >
<ul className="nav nav-tabs" role="tablist">
<li className="nav-item">
<button
type="button"
className={`nav-link ${
activeTab === "all" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("all")}
data-bs-toggle="tab"
data-bs-target="#navs-top-home"
>
Today's
</button>
</li>
<li className="nav-item">
<button
type="button"
className={`nav-link ${
activeTab === "logs" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("logs")}
data-bs-toggle="tab"
data-bs-target="#navs-top-profile"
>
Logs
</button>
</li>
<li className={`nav-item ${!DoRegularized && "d-none"}`}>
<button
type="button"
className={`nav-link ${
activeTab === "regularization" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("regularization")}
data-bs-toggle="tab"
data-bs-target="#navs-top-messages"
>
Regularization
</button>
</li>
<div className="nav-align-top nav-tabs-shadow">
<ul
className="nav nav-tabs d-flex justify-content-between align-items-center"
role="tablist"
>
<div className="d-flex">
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
onClick={() => setActiveTab("all")}
data-bs-toggle="tab"
data-bs-target="#navs-top-home"
>
Today's
</button>
</li>
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
onClick={() => setActiveTab("logs")}
data-bs-toggle="tab"
data-bs-target="#navs-top-profile"
>
Logs
</button>
</li>
<li className={`nav-item ${!DoRegularized && "d-none"}`}>
<button
type="button"
className={`nav-link ${
activeTab === "regularization" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("regularization")}
data-bs-toggle="tab"
data-bs-target="#navs-top-messages"
>
Regularization
</button>
</li>
</div>
<div className="p-2">
<input
type="text"
className="form-control form-control-sm"
placeholder="Search employee..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
</ul>
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
{activeTab === "all" && (
<>
{!attLoading && (
<div className="tab-pane fade show active py-0">
<Attendance
attendance={filteredAndSearchedTodayAttendance()}
handleModalData={handleModalData}
getRole={getRole}
setshowOnlyCheckout={setShowPending}
showOnlyCheckout={showPending}
searchQuery={searchQuery}
/>
</div>
)}
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
<p>
{" "}
{showPending
? "No Pending Available"
: "No Employee assigned yet."}{" "}
</p>
)}
</>
)}
{activeTab === "logs" && (
<div className="tab-pane fade show active py-0">
<AttendanceLog
handleModalData={handleModalData}
projectId={selectedProject}
setshowOnlyCheckout={setShowPending}
showOnlyCheckout={showPending}
searchQuery={searchQuery}
/>
</div>
)}
{activeTab === "regularization" && DoRegularized && (
<div className="tab-pane fade show active py-0">
<Regularization />
<Regularization
handleRequest={handleSubmit}
searchQuery={searchQuery}
/>
</div>
)}
{!attLoading && !attendances && <span>Not Found</span>}
</div>
</div>
</div>
@ -185,4 +328,4 @@ const AttendancePage = () => {
);
};
export default AttendancePage;
export default AttendancePage;

23
src/pages/Directory/DirectoryPageHeader.jsx
View File

@ -257,7 +257,7 @@ const DirectoryPageHeader = ({
<ul className="nav nav-tabs mb-0" role="tablist">
<li className="nav-item" role="presentation">
<button
className={`nav-link ${viewType === "notes" ? "active" : ""}`}
className={`nav-link ${viewType === "notes" ? "active" : ""} fs-6`}
onClick={() => setViewType("notes")}
type="button"
>
@ -266,8 +266,9 @@ const DirectoryPageHeader = ({
</li>
<li className="nav-item" role="presentation">
<button
className={`nav-link ${viewType === "card" ? "active" : ""}`}
onClick={() => setViewType("card")}
// Corrected: Apply 'active' if viewType is either 'card' or 'list'
className={`nav-link ${viewType === "card" || viewType === "list" ? "active" : ""} fs-6`}
onClick={() => setViewType("card")} // You might want to default to 'card' when switching to contacts
type="button"
>
<i className="bx bx-user me-1"></i> Contacts
@ -279,7 +280,7 @@ const DirectoryPageHeader = ({
<hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} />
<div className="row mx-0 px-0 align-items-center mt-2">
<div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
<div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-2">
<input
type="search"
@ -298,7 +299,7 @@ const DirectoryPageHeader = ({
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className={`fa-solid fa-filter ms-1 fs-5 ${notesFilterCount > 0 ? "text-primary" : "text-muted"}`}></i>
<i className={`bx bx-slider-alt ${notesFilterCount > 0 ? "text-primary" : "text-muted"}`}></i>
{notesFilterCount > 0 && (
<span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
{notesFilterCount}
@ -341,7 +342,7 @@ const DirectoryPageHeader = ({
</div>
{/* Organization */}
<div style={{ maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
<div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden", }}>
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
<p className="text-muted mb-2 pt-2">Organization</p>
</div>
@ -404,17 +405,17 @@ const DirectoryPageHeader = ({
<button
type="button"
className={`btn btn-xs ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
className={`btn btn-sm p-1 ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
onClick={() => setViewType("card")}
>
<i className="bx bx-grid-alt"></i>
</button>
<button
type="button"
className={`btn btn-xs ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
className={`btn btn-sm p-1 ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
onClick={() => setViewType("list")}
>
<i className="bx bx-list-ul me-1"></i>
<i className="bx bx-list-ul"></i>
</button>
</div>
@ -422,13 +423,13 @@ const DirectoryPageHeader = ({
{/* Filter by funnel icon for Contacts view (retains numerical badge) */}
{viewType !== "notes" && (
<div className="dropdown-center" style={{ width: "fit-content" }}>
<div className="dropdown" style={{ width: "fit-content" }}>
<a
className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
<i className={`bx bx-slider-alt ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
{filtered > 0 && (
<span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
{filtered}

4
src/pages/Gallary/ImageGallary.jsx
View File

@ -320,7 +320,7 @@ useEffect(() => {
{isFilterPanelOpen ? (
<i className="fa-solid fa-times fs-5" />
) : (
<i className="fa-solid fa-filter ms-1 fs-5" />
<i className="bx bx-slider-alt ms-1" />
)}
</button>
<div className="activity-section">
@ -394,7 +394,7 @@ useEffect(() => {
>
{batch.documents.map((d, i) => {
const hoverDate = moment(d.uploadedAt).format(
"DD-MM-YYYY"
"DD MMMM, YYYY"
);
const hoverTime = moment(d.uploadedAt).format(
"hh:mm A"

2
src/pages/employee/EmployeeList.jsx
View File

@ -480,7 +480,7 @@ const EmployeeList = () => {
aria-label="User: activate to sort column ascending"
aria-sort="descending"
>
<div className="text-start ms-5">Role</div>
<div className="text-start ms-5">Official Designation</div>
</th>
<th

32
src/pages/employee/EmployeeProfile.jsx
View File

@ -102,8 +102,8 @@ const EmployeeProfile = () => {
return (
<>
{showModal && (
<GlobalModel size="lg" isOpen={showModal} closeModal={()=>setShowModal(false)}>
<ManageEmployee employeeId={employeeId} onClosed={()=>setShowModal(false)} />
<GlobalModel size="lg" isOpen={showModal} closeModal={() => setShowModal(false)}>
<ManageEmployee employeeId={employeeId} onClosed={() => setShowModal(false)} />
</GlobalModel>
)}
<div className="container-fluid">
@ -146,34 +146,29 @@ const EmployeeProfile = () => {
</td>
</tr>
<tr>
<td className="fw-medium text-start">
<td className="fw-medium text-start text-nowrap">
Phone Number:
</td>
<td className="text-start">
{currentEmployee?.phoneNumber || <em>NA</em>}
</td>
</tr>
</tr>
<tr>
<td className="fw-medium text-start">
<td className="fw-medium text-start" style={{ width: '120px' }}>
Emergency Contact Person:
</td>
<td className="text-start">
{currentEmployee?.emergencyContactPerson || (
<em>NA</em>
)}
<td className="text-start align-bottom">
{currentEmployee?.emergencyContactPerson || <em>NA</em>}
</td>
</tr>
<tr>
<td className="fw-medium text-start">
Emergency Contact Number:
</td>
<td className="text-start">
{currentEmployee?.emergencyPhoneNumber || (
<em>NA</em>
)}
<td className="text-start align-bottom">
{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
</td>
</tr>
<tr>
<td className="fw-medium text-start">
Gender:
@ -220,21 +215,20 @@ const EmployeeProfile = () => {
</td>
</tr>
<tr>
<td className="fw-medium text-start">
<td className="fw-medium text-start align-top" >
Address:
</td>
<td className="text-start">
{currentEmployee?.currentAddress || (
<em>NA</em>
)}
{currentEmployee?.currentAddress || <em>NA</em>}
</td>
</tr>
</tbody>
</table>
</div>
<button
className="btn btn-primary btn-block"
onClick={()=>setShowModal(true)}
onClick={() => setShowModal(true)}
>
Edit Profile
</button>

19
src/pages/project/ProjectDetails.jsx
View File

@ -13,6 +13,7 @@ import {
cacheData,
clearCacheKey,
getCachedData,
useSelectedproject,
} from "../../slices/apiDataManager";
import "./ProjectDetails.css";
import {
@ -28,8 +29,7 @@ import { setProjectId } from "../../slices/localVariablesSlice";
const ProjectDetails = () => {
const projectId = useSelector((store) => store.localVariables.projectId);
const projectId = useSelectedproject()
const { projectNames, fetchData } = useProjectName();
const dispatch = useDispatch()
@ -47,9 +47,10 @@ const ProjectDetails = () => {
refetch,
} = useProjectDetails(projectId);
const [activePill, setActivePill] = useState("profile");
// const [activePill, setActivePill] = useState("profile");
const [activePill, setActivePill] = useState(() => {
return localStorage.getItem("lastActiveProjectTab") || "profile";
});
const handler = useCallback(
(msg) => {
@ -65,9 +66,11 @@ const ProjectDetails = () => {
return () => eventBus.off("project", handler);
}, [handler]);
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
};
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
localStorage.setItem("lastActiveProjectTab", pillKey); // ✅ Save to localStorage
};
const renderContent = () => {
if (projectLoading || !projects_Details) return <Loader />;

10
src/pages/project/ProjectList.jsx
View File

@ -192,7 +192,7 @@ const ProjectList = () => {
</button>
</div>
<div className="dropdown ms-3 mt-1">
<div className="dropdown mt-1">
<a
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
data-bs-toggle="dropdown"
@ -200,7 +200,7 @@ const ProjectList = () => {
data-bs-custom-class="tooltip"
title="Filter"
>
<i className="fa-solid fa-filter fs-4"></i>
<i className="bx bx-slider-alt ms-1"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
{[
@ -269,10 +269,10 @@ const ProjectList = () => {
<div className="card cursor-pointer">
<div className="card-body p-2">
<div
className="table-responsive text-nowrap py-2 "
style={{ minHeight: "400px" }}
className="table-responsive text-nowrap py-2 mx-2"
style={{ minHeight: "200px" }}
>
<table className="table m-3">
<table className="table m-0">
<thead>
<tr>
<th className="text-start" colSpan={5}>

1
src/repositories/DirectoryRepository.jsx
View File

@ -2,6 +2,7 @@ import { api } from "../utils/axiosClient";
export const DirectoryRepository = {
GetOrganizations: () => api.get("/api/directory/organization"),
GetDesignations: () => api.get("/api/directory/designations"),
GetContacts: (isActive, projectId) => {
const params = new URLSearchParams();
params.append("active", isActive);

16
src/slices/apiDataManager.jsx
View File

@ -5,6 +5,7 @@ import {
flushApiCache,
} from "../slices/apiCacheSlice";
import {setLoginUserPermmisions} from "./globalVariablesSlice";
import { useSelector } from "react-redux";
// Cache data
@ -36,4 +37,17 @@ export const cacheProfileData = ( data) => {
// Get cached data
export const getCachedProfileData = () => {
return store.getState().globalVariables.loginUser;
};
};
export const useSelectedproject = () => {
const selectedProject = useSelector((store)=> store.localVariables.projectId);
var project = localStorage.getItem("project");
if(project){
return project
} else{
return selectedProject
}
// return project ? selectedProject
};

2
src/slices/localVariablesSlice.jsx
View File

@ -21,7 +21,9 @@ const localVariablesSlice = createSlice({
state.regularizationCount = action.payload;
},
setProjectId: (state, action) => {
localStorage.setItem("project",null)
state.projectId = action.payload;
localStorage.setItem("project",state.projectId)
},
refreshData: ( state, action ) =>
{