Merge branch 'Issue_Jun_1W_2' of https://git.marcoaiot.com/admin/marco.pms.web into Issue_Jun_1W_2
This commit is contained in:
Pramod Mahajan
commit
00e61988a8
@ -33,7 +33,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredData,
|
||||
10
|
||||
20
|
||||
);
|
||||
return (
|
||||
<>
|
||||
@ -130,7 +130,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{!loading && (
|
||||
{!loading>20 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
|
||||
@ -56,9 +56,9 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
if (!firstRender.current && containerRef.current) {
|
||||
containerRef.current.scrollTop = containerRef.current.scrollHeight;
|
||||
} else {
|
||||
firstRender.current = false;
|
||||
firstRender.current = false;
|
||||
}
|
||||
}, [comments]);
|
||||
}, [comments]);
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
let sendComment = {
|
||||
@ -69,11 +69,11 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
try {
|
||||
setloading(true);
|
||||
const resp = await TasksRepository.taskComments(sendComment);
|
||||
|
||||
|
||||
setComment((prevItems) => [...prevItems, resp.data]);
|
||||
|
||||
const taskList = getCachedData("taskList");
|
||||
|
||||
|
||||
if (taskList && taskList.data) {
|
||||
const updatedTaskList = taskList.data.map((task) => {
|
||||
if (task.id === resp.data.taskAllocationId) {
|
||||
@ -87,14 +87,14 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
}
|
||||
return task;
|
||||
});
|
||||
|
||||
|
||||
cacheData("taskList", {
|
||||
data: updatedTaskList,
|
||||
projectId: taskList.projectId,
|
||||
projectId: taskList.projectId,
|
||||
});
|
||||
}
|
||||
|
||||
reset();
|
||||
reset();
|
||||
setloading(false);
|
||||
showToast("Successfully Sent", "success");
|
||||
} catch (error) {
|
||||
@ -134,7 +134,16 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
</p>
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Loaction :
|
||||
Reported By :
|
||||
<span className=" ms-2"> -
|
||||
{/* {commentsData?.assignedBy?.firstName +
|
||||
" " +
|
||||
commentsData?.assignedBy?.lastName} */}
|
||||
</span>{" "}
|
||||
</p>
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Location :
|
||||
<span className="fw-normal ms-2 text-start">
|
||||
{`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
|
||||
<i className="bx bx-chevron-right"></i>{" "}
|
||||
@ -146,11 +155,19 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
</span>
|
||||
</p>
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Planned Work: {commentsData?.plannedTask}
|
||||
Planned Work: {commentsData?.plannedTask}{" "}
|
||||
{
|
||||
commentsData?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</p>
|
||||
<p className="fw-bold my-2 text-start">
|
||||
{" "}
|
||||
Completed Work : {commentsData?.completedTask}
|
||||
Completed Work : {commentsData?.completedTask}{" "}
|
||||
{
|
||||
commentsData?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</p>
|
||||
<div className="d-flex align-items-center flex-wrap">
|
||||
<p className="fw-bold text-start m-0 me-1">Team :</p>
|
||||
@ -196,12 +213,12 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
|
||||
<ul
|
||||
className="list-group px-0 mx-0 overflow-auto border-0"
|
||||
ref={containerRef}
|
||||
ref={containerRef}
|
||||
>
|
||||
{comments &&
|
||||
comments
|
||||
?.slice()
|
||||
.reverse()
|
||||
.reverse()
|
||||
.map((data, idx) => {
|
||||
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
|
||||
return (
|
||||
|
||||
240
src/components/common/FilterIcon.jsx
Normal file
240
src/components/common/FilterIcon.jsx
Normal file
@ -0,0 +1,240 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities }) => {
|
||||
// State for filters, now managed within FilterIcon
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding);
|
||||
const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors);
|
||||
const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities);
|
||||
|
||||
// Update internal state when props change (e.g., project selection in DailyTask clears filters)
|
||||
useEffect(() => {
|
||||
setSelectedBuilding(currentSelectedBuilding);
|
||||
setSelectedFloors(currentSelectedFloors);
|
||||
setSelectedActivities(currentSelectedActivities);
|
||||
}, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]);
|
||||
|
||||
// Helper to get unique values for filters based on current selections
|
||||
const getUniqueFilterValues = (key) => {
|
||||
if (!taskListData) return [];
|
||||
let relevantTasks = taskListData;
|
||||
|
||||
// Filter tasks based on selected building for floors and activities
|
||||
if (selectedBuilding) {
|
||||
relevantTasks = relevantTasks.filter(task =>
|
||||
task?.workItem?.workArea?.floor?.building?.name === selectedBuilding
|
||||
);
|
||||
}
|
||||
|
||||
// Filter tasks based on selected floors for activities
|
||||
if (selectedFloors.length > 0) {
|
||||
relevantTasks = relevantTasks.filter(task =>
|
||||
selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
|
||||
);
|
||||
}
|
||||
|
||||
const values = relevantTasks.map(task => {
|
||||
if (key === 'building') return task?.workItem?.workArea?.floor?.building?.name;
|
||||
if (key === 'floor') return task?.workItem?.workArea?.floor?.floorName;
|
||||
if (key === 'activity') return task?.workItem?.activityMaster?.activityName;
|
||||
return null;
|
||||
}).filter(Boolean); // Remove null or undefined values
|
||||
return [...new Set(values)].sort(); // Sort for consistent order
|
||||
};
|
||||
|
||||
const uniqueBuildings = getUniqueFilterValues('building');
|
||||
const uniqueFloors = getUniqueFilterValues('floor');
|
||||
const uniqueActivities = getUniqueFilterValues('activity');
|
||||
|
||||
// Handle filter selection with dependency logic
|
||||
const handleFilterChange = (filterType, value) => {
|
||||
let newSelectedBuilding = selectedBuilding;
|
||||
let newSelectedFloors = [...selectedFloors];
|
||||
let newSelectedActivities = [...selectedActivities];
|
||||
|
||||
if (filterType === 'building') {
|
||||
if (selectedBuilding !== value) {
|
||||
newSelectedFloors = [];
|
||||
newSelectedActivities = [];
|
||||
}
|
||||
newSelectedBuilding = value;
|
||||
} else if (filterType === 'floor') {
|
||||
newSelectedFloors = selectedFloors.includes(value) ? selectedFloors.filter(item => item !== value) : [...selectedFloors, value];
|
||||
if (!newSelectedFloors.includes(value) && selectedFloors.includes(value)) {
|
||||
newSelectedActivities = [];
|
||||
}
|
||||
} else if (filterType === 'activity') {
|
||||
newSelectedActivities = selectedActivities.includes(value) ? selectedActivities.filter(item => item !== value) : [...selectedActivities, value];
|
||||
}
|
||||
|
||||
setSelectedBuilding(newSelectedBuilding);
|
||||
setSelectedFloors(newSelectedFloors);
|
||||
setSelectedActivities(newSelectedActivities);
|
||||
|
||||
// Communicate the updated filter states back to the parent
|
||||
onApplyFilters({
|
||||
selectedBuilding: newSelectedBuilding,
|
||||
selectedFloors: newSelectedFloors,
|
||||
selectedActivities: newSelectedActivities,
|
||||
});
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSelectedBuilding('');
|
||||
setSelectedFloors([]);
|
||||
setSelectedActivities([]);
|
||||
// Communicate cleared filters back to the parent
|
||||
onApplyFilters({
|
||||
selectedBuilding: '',
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dropdown">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
id="filterDropdown"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="fa-solid fa-filter bx-sm "></i>
|
||||
|
||||
</a>
|
||||
<ul
|
||||
className="dropdown-menu p-2"
|
||||
aria-labelledby="filterDropdown"
|
||||
style={{
|
||||
minWidth: "360px",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
// Prevent dropdown from closing when clicking inside it
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Building Filter - Now a Dropdown */}
|
||||
<li>
|
||||
<div className="fw-bold text-dark mb-1">Building</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedBuilding}
|
||||
onChange={(e) => handleFilterChange("building", e.target.value)}
|
||||
>
|
||||
<option value="">Select Building</option>
|
||||
{uniqueBuildings.length > 0 ? (
|
||||
uniqueBuildings.map((building, idx) => (
|
||||
<option key={`building-option-${idx}`} value={building}>
|
||||
{building}
|
||||
</option>
|
||||
))
|
||||
) : (
|
||||
<option value="" disabled>No buildings available</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Floor Filter - Visible only if a building is selected */}
|
||||
{selectedBuilding && (
|
||||
<>
|
||||
<li>
|
||||
<hr className="my-1" />
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div className="fw-bold text-dark mb-1">Floor</div>
|
||||
<div className="row">
|
||||
{uniqueFloors.length > 0 ? (
|
||||
uniqueFloors.map((floor, idx) => (
|
||||
<div className="col-6" key={`floor-${idx}`}>
|
||||
<div className="form-check mb-1">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`floor-${floor}`}
|
||||
checked={selectedFloors.includes(floor)}
|
||||
onChange={() => handleFilterChange("floor", floor)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`floor-${floor}`}
|
||||
>
|
||||
{floor}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-12 text-muted">No floors for selected building.</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Activity Filter - Visible only if a floor is selected */}
|
||||
{selectedFloors.length > 0 && (
|
||||
<>
|
||||
<li>
|
||||
<hr className="my-1" />
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div className="fw-bold text-dark mb-1">Activity</div>
|
||||
<div className="row">
|
||||
{uniqueActivities.length > 0 ? (
|
||||
uniqueActivities.map((activity, idx) => (
|
||||
<div className="col-6" key={`activity-${idx}`}>
|
||||
<div className="form-check mb-1">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`activity-${activity}`}
|
||||
checked={selectedActivities.includes(activity)}
|
||||
onChange={() => handleFilterChange("activity", activity)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`activity-${activity}`}
|
||||
>
|
||||
{activity}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-12 text-muted">No activities for selected floor(s).</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Clear Filters */}
|
||||
{(selectedBuilding ||
|
||||
selectedFloors.length > 0 ||
|
||||
selectedActivities.length > 0) && (
|
||||
<>
|
||||
<li>
|
||||
<hr className="my-1" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item text-danger px-2 py-1"
|
||||
style={{ fontSize: "13px" }}
|
||||
onClick={clearAllFilters}
|
||||
>
|
||||
Clear All Filters
|
||||
</button>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterIcon;
|
||||
@ -1,47 +1,48 @@
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { dailyTask } from "../../data/masters";
|
||||
import { useTaskList } from "../../hooks/useTasks";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
// import { formatDate } from "../../utils/dateUtils"; // Removed this import
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import AssignRoleModel from "../../components/Project/AssignRole";
|
||||
import { ReportTask } from "../../components/Activities/ReportTask";
|
||||
import ReportTaskComments from "../../components/Activities/ReportTaskComments";
|
||||
import DateRangePicker from "../../components/common/DateRangePicker";
|
||||
import DatePicker from "../../components/common/DatePicker";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import moment from "moment";
|
||||
import FilterIcon from "../../components/common/FilterIcon"; // Import the FilterIcon component
|
||||
|
||||
const DailyTask = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const projectId = searchParams.get("project");
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const projectIdFromUrl = searchParams.get("project");
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const {
|
||||
projects,
|
||||
loading: project_lodaing,
|
||||
loading: project_loading,
|
||||
error: projects_Error,
|
||||
} = useProjects();
|
||||
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// State for filters (moved to FilterIcon, but we need to receive them here)
|
||||
const [filters, setFilters] = useState({
|
||||
selectedBuilding: '',
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
|
||||
// Sync projectId (either from URL or pick first accessible one)
|
||||
useEffect(() => {
|
||||
if (!project_lodaing && projects.length > 0 && !initialized) {
|
||||
if (selectedProject === 1 || selectedProject === undefined) {
|
||||
if (!project_loading && projects.length > 0 && !initialized) {
|
||||
if (projectIdFromUrl) {
|
||||
dispatch(setProjectId(projectIdFromUrl));
|
||||
} else if (selectedProject === 1 || selectedProject === undefined) {
|
||||
dispatch(setProjectId(projects[0].id));
|
||||
}
|
||||
|
||||
setInitialized(true);
|
||||
}
|
||||
}, [project_lodaing, projects, projectId, selectedProject, initialized]);
|
||||
}, [project_loading, projects, projectIdFromUrl, selectedProject, initialized, dispatch]);
|
||||
|
||||
const dispatch = useDispatch(selectedProject);
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
|
||||
const {
|
||||
@ -59,9 +60,30 @@ const DailyTask = () => {
|
||||
const [dates, setDates] = useState([]);
|
||||
const popoverRefs = useRef([]);
|
||||
|
||||
// Effect to apply filters (now using filters from FilterIcon)
|
||||
useEffect(() => {
|
||||
setTaskLists(TaskList);
|
||||
}, [TaskList, selectedProject]);
|
||||
let filteredTasks = TaskList;
|
||||
|
||||
if (filters.selectedBuilding) {
|
||||
filteredTasks = filteredTasks.filter(task =>
|
||||
task?.workItem?.workArea?.floor?.building?.name === filters.selectedBuilding
|
||||
);
|
||||
}
|
||||
|
||||
if (filters.selectedFloors.length > 0) {
|
||||
filteredTasks = filteredTasks.filter(task =>
|
||||
filters.selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
|
||||
);
|
||||
}
|
||||
|
||||
if (filters.selectedActivities.length > 0) {
|
||||
filteredTasks = filteredTasks.filter(task =>
|
||||
filters.selectedActivities.includes(task?.workItem?.activityMaster?.activityName)
|
||||
);
|
||||
}
|
||||
|
||||
setTaskLists(filteredTasks);
|
||||
}, [TaskList, filters.selectedBuilding, filters.selectedFloors, filters.selectedActivities]); // Depend on filters state
|
||||
|
||||
useEffect(() => {
|
||||
const AssignmentDates = [
|
||||
@ -81,26 +103,37 @@ const DailyTask = () => {
|
||||
|
||||
const openComment = () => setIsModalOpenComment(true);
|
||||
const closeCommentModal = () => setIsModalOpenComment(false);
|
||||
|
||||
const handletask = (task) => {
|
||||
selectTask(task);
|
||||
openModal();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Ensure Bootstrap's Popover is initialized correctly
|
||||
popoverRefs.current.forEach((el) => {
|
||||
if (el) {
|
||||
new bootstrap.Popover(el, {
|
||||
if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') {
|
||||
new window.bootstrap.Popover(el, {
|
||||
trigger: "focus",
|
||||
placement: "left",
|
||||
html: true,
|
||||
content: el.getAttribute("data-bs-content"), // use inline content from attribute
|
||||
content: el.getAttribute("data-bs-content"),
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [dates]);
|
||||
}, [dates, TaskLists]);
|
||||
|
||||
// Handler for project selection
|
||||
const handleProjectChange = (e) => {
|
||||
const newProjectId = e.target.value;
|
||||
dispatch(setProjectId(newProjectId));
|
||||
// Reset filters when project changes (communicate to FilterIcon to clear)
|
||||
setFilters({ selectedBuilding: '', selectedFloors: [], selectedActivities: [] });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Report Task Modal */}
|
||||
<div
|
||||
className={`modal fade ${isModalOpen ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
@ -115,6 +148,7 @@ const DailyTask = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Report Task Comments Modal */}
|
||||
<div
|
||||
className={`modal fade ${isModalOpenComment ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
@ -132,35 +166,44 @@ const DailyTask = () => {
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Daily Task", link: null },
|
||||
{ label: "Daily Progress Report", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className="card card-action mb-6">
|
||||
<div className="card-body p-1 p-sm-2">
|
||||
<div className="row d-flex justify-content-between">
|
||||
<div className="col-6 text-start">
|
||||
<div className="row d-flex justify-content-between align-items-center">
|
||||
<div className="justify-content-between align-items-center"></div>
|
||||
<div className="col-md-6 d-flex gap-3 align-items-center col-12 text-start mb-2 mb-md-0">
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
DateDifference="6"
|
||||
dateFormat="DD-MM-YYYY"
|
||||
/>
|
||||
{/* FilterIcon component now manages its own filter states and logic */}
|
||||
<FilterIcon
|
||||
taskListData={TaskList} // Pass the raw TaskList to FilterIcon
|
||||
onApplyFilters={setFilters} // Callback to receive the filtered states from FilterIcon
|
||||
currentSelectedBuilding={filters.selectedBuilding}
|
||||
currentSelectedFloors={filters.selectedFloors}
|
||||
currentSelectedActivities={filters.selectedActivities}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-3 col-6 text-end mb-1">
|
||||
<div className="col-md-4 col-12 text-center mb-2 mb-md-0">
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
name="project_select"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
value={selectedProject}
|
||||
onChange={(e) => dispatch(setProjectId(e.target.value))}
|
||||
aria-label=""
|
||||
value={selectedProject || ""}
|
||||
onChange={handleProjectChange}
|
||||
aria-label="Select Project"
|
||||
>
|
||||
{project_lodaing && (
|
||||
<option value="Loading..." disabled>
|
||||
Loading...
|
||||
{project_loading && (
|
||||
<option value="" disabled>
|
||||
Loading Projects...
|
||||
</option>
|
||||
)}
|
||||
{!project_lodaing &&
|
||||
{!project_loading &&
|
||||
projects &&
|
||||
projects?.map((project) => (
|
||||
<option value={project.id} key={project.id}>
|
||||
@ -170,13 +213,13 @@ const DailyTask = () => {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="table-responsive text-nowrap mt-3">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Activity</th>
|
||||
<th>Assigned </th>
|
||||
<th>Compeleted</th>
|
||||
<th>Completed</th>
|
||||
<th>Assign On</th>
|
||||
<th>Team</th>
|
||||
<th>Actions</th>
|
||||
@ -190,7 +233,7 @@ const DailyTask = () => {
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!task_loading && TaskList.length === 0 && (
|
||||
{!task_loading && TaskLists.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center">
|
||||
<p>No Reports Found</p>
|
||||
@ -198,6 +241,11 @@ const DailyTask = () => {
|
||||
</tr>
|
||||
)}
|
||||
{dates.map((date, i) => {
|
||||
const tasksForDate = TaskLists.filter((task) =>
|
||||
task.assignmentDate.includes(date)
|
||||
);
|
||||
if (tasksForDate.length === 0) return null;
|
||||
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<tr className="table-row-header">
|
||||
@ -205,12 +253,10 @@ const DailyTask = () => {
|
||||
<strong>{moment(date).format("DD-MM-YYYY")}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{TaskLists.filter((task) =>
|
||||
task.assignmentDate.includes(date)
|
||||
).map((task, index) => {
|
||||
const refIndex = index * 10 + i;
|
||||
{tasksForDate.map((task, index) => {
|
||||
const refIndex = `${i}-${index}`;
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<React.Fragment key={refIndex}>
|
||||
<tr>
|
||||
<td className="flex-wrap text-start">
|
||||
<div>
|
||||
@ -219,7 +265,7 @@ const DailyTask = () => {
|
||||
</div>
|
||||
<div>
|
||||
{" "}
|
||||
<label className=" col-form-label text-sm">
|
||||
<label className="col-form-label text-sm">
|
||||
{" "}
|
||||
{
|
||||
task?.workItem?.workArea?.floor
|
||||
@ -267,23 +313,18 @@ const DailyTask = () => {
|
||||
${task.teamMembers
|
||||
.map(
|
||||
(member) => `
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${
|
||||
member?.firstName?.charAt(
|
||||
0
|
||||
) || ""
|
||||
}${
|
||||
member?.lastName?.charAt(0) || ""
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<span>${member.firstName} ${
|
||||
member.lastName
|
||||
}</span>
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${member?.firstName?.charAt(0) || ""
|
||||
}${member?.lastName?.charAt(0) || ""
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
<span>${member.firstName} ${member.lastName
|
||||
}</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
@ -301,7 +342,6 @@ const DailyTask = () => {
|
||||
title={`${member.firstName} ${member.lastName}`}
|
||||
className="avatar avatar-xs"
|
||||
>
|
||||
{/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
|
||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
||||
{member?.firstName.slice(0, 1)}
|
||||
</span>
|
||||
@ -312,9 +352,8 @@ const DailyTask = () => {
|
||||
className="avatar avatar-xs"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title={`${
|
||||
task.teamMembers.length - 3
|
||||
} more`}
|
||||
title={`${task.teamMembers.length - 3
|
||||
} more`}
|
||||
>
|
||||
<span className="avatar-initial rounded-circle bg-label-secondary pull-up">
|
||||
+{task.teamMembers.length - 3}
|
||||
@ -327,9 +366,8 @@ const DailyTask = () => {
|
||||
<div className="d-flex justify-content-center">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs btn-primary ${
|
||||
task.reportedDate != null ? "d-none" : ""
|
||||
}`}
|
||||
className={`btn btn-xs btn-primary ${task.reportedDate != null ? "d-none" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
selectTask(task);
|
||||
openModal();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { AuthWrapper } from "./AuthWrapper";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@ -9,16 +9,23 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
const loginScheam = z.object({
|
||||
username: z.string().email(),
|
||||
password: z.string().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const LoginPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hidepass, setHidepass] = useState(true);
|
||||
const [IsLoginWithOTP, setLoginWithOtp] = useState(false);
|
||||
const [IsTriedOTPThrough, setIsTriedOTPThrough] = useState(false);
|
||||
const now = Date.now();
|
||||
|
||||
const loginSchema = IsLoginWithOTP
|
||||
? z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
})
|
||||
: z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
password: z.string().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -27,35 +34,53 @@ const LoginPage = () => {
|
||||
reset,
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(loginScheam),
|
||||
resolver: zodResolver(loginSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
let userCredential = {
|
||||
username: data.username,
|
||||
password: data.password,
|
||||
};
|
||||
const response = await AuthRepository.login(userCredential);
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading(false);
|
||||
navigate("/dashboard");
|
||||
if (!IsLoginWithOTP) {
|
||||
const userCredential = {
|
||||
username: data.username,
|
||||
password: data.password,
|
||||
};
|
||||
const response = await AuthRepository.login(userCredential);
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading(false);
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
await AuthRepository.sendOTP({ email: data.username });
|
||||
localStorage.setItem("otpUsername", data.username);
|
||||
localStorage.setItem("otpSentTime", now.toString());
|
||||
navigate("/auth/login-otp");
|
||||
}
|
||||
} catch (err) {
|
||||
showToast("Invalid username or password.","error")
|
||||
showToast("Invalid username or password.", "error");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||
if (
|
||||
localStorage.getItem("otpUsername") &&
|
||||
IsLoginWithOTP &&
|
||||
now - Number(otpSentTime) < 10 * 60 * 1000
|
||||
) {
|
||||
navigate("/auth/login-otp");
|
||||
}
|
||||
}, [IsLoginWithOTP]);
|
||||
return (
|
||||
<AuthWrapper>
|
||||
<h4 className="mb-2">Welcome to PMS!</h4>
|
||||
<p className="mb-4">
|
||||
Please sign-in to your account and start the adventure
|
||||
{IsLoginWithOTP
|
||||
? "Enter your email to receive a one-time password (OTP)."
|
||||
: "Please sign-in to your account and start the adventure."}
|
||||
</p>
|
||||
|
||||
<form
|
||||
id="formAuthentication"
|
||||
className="mb-3"
|
||||
@ -70,7 +95,6 @@ const LoginPage = () => {
|
||||
className="form-control"
|
||||
id="username"
|
||||
{...register("username")}
|
||||
name="username"
|
||||
placeholder="Enter your email or username"
|
||||
autoFocus
|
||||
/>
|
||||
@ -83,87 +107,100 @@ const LoginPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3 form-password-toggle">
|
||||
<div className="d-flex justify-content-center">
|
||||
<label className="form-label" htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div className="input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
{...register("password")}
|
||||
className="form-control"
|
||||
name="password"
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn border-top border-end border-bottom"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
|
||||
{!IsLoginWithOTP && (
|
||||
<>
|
||||
<div className="mb-3 form-password-toggle">
|
||||
<label className="form-label" htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
<div className="input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
{...register("password")}
|
||||
className="form-control"
|
||||
placeholder="••••••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn border-top border-end border-bottom"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3 d-flex justify-content-between">
|
||||
<div className="form-check d-flex">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="remember-me"
|
||||
name="rememberMe"
|
||||
{...register("rememberMe")}
|
||||
/>
|
||||
<label className="form-check-label ms-2">Remember Me</label>
|
||||
</div>
|
||||
<Link
|
||||
aria-label="Go to Forgot Password Page"
|
||||
to="/auth/forgot-password"
|
||||
>
|
||||
<span>Forgot Password?</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 d-flex justify-content-between">
|
||||
<div className="form-check d-flex">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="remember-me"
|
||||
{...register("rememberMe")}
|
||||
/>
|
||||
<label className="form-check-label ms-2">Remember Me</label>
|
||||
</div>
|
||||
<Link to="/auth/forgot-password">Forgot Password?</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<button
|
||||
aria-label="Click me"
|
||||
className="btn btn-primary d-grid w-100"
|
||||
aria-label="Submit form"
|
||||
className="btn btn-primary d-grid w-100 mb-2"
|
||||
type="submit"
|
||||
>
|
||||
{loading ? "Please Wait" : " Sign in"}
|
||||
{loading ? "Please Wait" : IsLoginWithOTP ? "Send OTP" : "Sign In"}
|
||||
</button>
|
||||
{!IsLoginWithOTP && <div className="p-2">OR</div>}
|
||||
{!IsLoginWithOTP && (
|
||||
<button
|
||||
aria-label="loginwithotp"
|
||||
type="button"
|
||||
onClick={() => setLoginWithOtp(true)}
|
||||
className="btn btn-secondary w-100"
|
||||
>
|
||||
Login With OTP
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p className="text-center">
|
||||
<span>New on our platform? </span>
|
||||
<Link
|
||||
aria-label="Go to Register Page"
|
||||
to="/auth/reqest/demo"
|
||||
className="registration-link"
|
||||
>
|
||||
<span>Request a Demo</span>
|
||||
</Link>
|
||||
{IsLoginWithOTP ? (
|
||||
<a
|
||||
className="text-primary cursor-pointer"
|
||||
onClick={() => setLoginWithOtp(false)}
|
||||
>
|
||||
Login With Password
|
||||
</a>
|
||||
) : (
|
||||
<Link to="/auth/reqest/demo" className="registration-link">
|
||||
Request a Demo
|
||||
</Link>
|
||||
)}
|
||||
</p>
|
||||
</AuthWrapper>
|
||||
);
|
||||
|
||||
185
src/pages/authentication/LoginWithOtp.jsx
Normal file
185
src/pages/authentication/LoginWithOtp.jsx
Normal file
@ -0,0 +1,185 @@
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import showToast from "../../services/toastService";
|
||||
import { AuthWrapper } from "./AuthWrapper";
|
||||
import { OTP_EXPIRY_SECONDS } from "../../utils/constants";
|
||||
import AuthRepository from "../../repositories/AuthRepository";
|
||||
|
||||
const otpSchema = z.object({
|
||||
otp1: z.string().min(1, "Required"),
|
||||
otp2: z.string().min(1, "Required"),
|
||||
otp3: z.string().min(1, "Required"),
|
||||
otp4: z.string().min(1, "Required"),
|
||||
});
|
||||
|
||||
const LoginWithOtp = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [ loading, setLoading ] = useState( false );
|
||||
const [ timeLeft, setTimeLeft ] = useState( 0 );
|
||||
|
||||
|
||||
const inputRefs = useRef([]);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitted },
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(otpSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const finalOtp = data.otp1 + data.otp2 + data.otp3 + data.otp4;
|
||||
const username = localStorage.getItem( "otpUsername" );
|
||||
console.log(username)
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
let requestedData = {
|
||||
email: username,
|
||||
otp:finalOtp
|
||||
}
|
||||
const response = await AuthRepository.verifyOTP( requestedData )
|
||||
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading( false );
|
||||
localStorage.removeItem( "otpUsername" );
|
||||
localStorage.removeItem( "otpSentTime" );
|
||||
navigate( "/dashboard" );
|
||||
|
||||
} catch (err) {
|
||||
showToast( "Invalid or expired OTP.", "error" );
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const formatTime = (seconds) => {
|
||||
const min = Math.floor(seconds / 60).toString().padStart(2, "0");
|
||||
const sec = (seconds % 60).toString().padStart(2, "0");
|
||||
return `${min}:${sec}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||
const now = Date.now();
|
||||
|
||||
if (otpSentTime) {
|
||||
const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); // in seconds
|
||||
const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0); // prevent negatives
|
||||
setTimeLeft(remaining);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (timeLeft <= 0) return;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prev) => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
localStorage.removeItem( "otpSentTime" );
|
||||
localStorage.removeItem("otpUsername");
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [timeLeft]);
|
||||
|
||||
|
||||
return (
|
||||
<AuthWrapper>
|
||||
<div className="otp-verification-wrapper">
|
||||
<h4>Verify Your OTP</h4>
|
||||
<p className="mb-4">Please enter the 4-digit code sent to your email.</p>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-center gap-6 mb-3">
|
||||
{[1, 2, 3, 4].map((num, idx) => {
|
||||
const { ref, onChange, ...rest } = register(`otp${num}`);
|
||||
|
||||
return (
|
||||
<input
|
||||
key={num}
|
||||
type="text"
|
||||
maxLength={1}
|
||||
className={`form-control text-center ${
|
||||
errors[`otp${num}`] ? "is-invalid" : ""
|
||||
}`}
|
||||
ref={(el) => {
|
||||
inputRefs.current[idx] = el;
|
||||
ref(el);
|
||||
}}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
onChange(e);
|
||||
if (/^\d$/.test(val) && idx < 3) {
|
||||
inputRefs.current[idx + 1]?.focus();
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (
|
||||
e.key === "Backspace" &&
|
||||
!getValues()[`otp${num}`] &&
|
||||
idx > 0
|
||||
) {
|
||||
inputRefs.current[idx - 1]?.focus();
|
||||
}
|
||||
}}
|
||||
style={{ width: "40px", height: "40px", fontSize: "15px" }}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{isSubmitted && Object.values(errors).some((e) => e?.message) && (
|
||||
<div
|
||||
className="text-danger text-center mb-3"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
Please fill all four digits.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary d-grid w-100"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Verifying..." : "Verify OTP"}
|
||||
</button>
|
||||
|
||||
{timeLeft > 0 ? (
|
||||
<p
|
||||
className="text-center text-muted mt-2"
|
||||
style={{ fontSize: "14px" }}
|
||||
>
|
||||
This OTP will expire in <strong>{formatTime(timeLeft)}</strong>
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
<p
|
||||
className="text-center text-danger mt-2 text small-text m-0"
|
||||
|
||||
>
|
||||
OTP has expired. Please request a new one.
|
||||
</p>
|
||||
<a className="text-primary cursor-pointer" onClick={()=>navigate('/auth/login')}>Try Again</a>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginWithOtp;
|
||||
@ -10,7 +10,9 @@ const AuthRepository = {
|
||||
resetPassword: (data) => api.post("/api/auth/reset-password", data),
|
||||
forgotPassword: (data) => api.post("/api/auth/forgot-password", data),
|
||||
sendMail: (data) => api.post("/api/auth/sendmail", data),
|
||||
changepassword: (data) => api.post("/api/auth/change-password", data),
|
||||
changepassword: ( data ) => api.post( "/api/auth/change-password", data ),
|
||||
sendOTP: ( data ) => api.post( 'api/auth/send-otp', data ),
|
||||
verifyOTP:(data)=>api.post("api/auth/login-otp",data)
|
||||
};
|
||||
|
||||
export default AuthRepository;
|
||||
|
||||
@ -37,13 +37,15 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
|
||||
// Protected Route Wrapper
|
||||
import ProtectedRoute from "./ProtectedRoute";
|
||||
import Directory from "../pages/Directory/Directory";
|
||||
import LoginWithOtp from "../pages/authentication/LoginWithOtp";
|
||||
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
{
|
||||
element: <AuthLayout />,
|
||||
children: [
|
||||
{ path: "/auth/login", element: <LoginPage /> },
|
||||
{path: "/auth/login", element: <LoginPage />},
|
||||
{path: "/auth/login-otp", element: <LoginWithOtp />},
|
||||
{ path: "/auth/reqest/demo", element: <RegisterPage /> },
|
||||
{ path: "/auth/forgot-password", element: <ForgotPasswordPage /> },
|
||||
{ path: "/reset-password", element: <ResetPasswordPage /> },
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export const THRESH_HOLD = 48; // hours
|
||||
export const DURATION_TIME = 10; // minutes
|
||||
export const OTP_EXPIRY_SECONDS = 600 // OTP time
|
||||
|
||||
export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
||||
|
||||
@ -24,4 +25,5 @@ export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
|
||||
|
||||
export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
|
||||
|
||||
export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
|
||||
export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user