Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Tenant_Manag
This commit is contained in:
commit
a537da6eff
11
package-lock.json
generated
11
package-lock.json
generated
@ -18,6 +18,7 @@
|
||||
"apexcharts": "^4.5.0",
|
||||
"axios": "^1.7.9",
|
||||
"axios-retry": "^4.5.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"dotenv": "^16.4.7",
|
||||
"dotenv-webpack": "^8.1.0",
|
||||
"eventemitter3": "^5.0.1",
|
||||
@ -2455,6 +2456,16 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"apexcharts": "^4.5.0",
|
||||
"axios": "^1.7.9",
|
||||
"axios-retry": "^4.5.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"dotenv": "^16.4.7",
|
||||
"dotenv-webpack": "^8.1.0",
|
||||
"eventemitter3": "^5.0.1",
|
||||
|
||||
@ -3,10 +3,6 @@
|
||||
--bs-nav-link-font-size: 0.7375rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
--bs-nav-link-font-size: 0.7375rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 0.5rem var(--bs-card-cap-padding-x);
|
||||
}
|
||||
|
||||
BIN
public/assets/img/avatars/avatar_f_01.png
Normal file
BIN
public/assets/img/avatars/avatar_f_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
BIN
public/assets/img/avatars/avatar_f_02.png
Normal file
BIN
public/assets/img/avatars/avatar_f_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
BIN
public/assets/img/avatars/avatar_m_01.png
Normal file
BIN
public/assets/img/avatars/avatar_m_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
BIN
public/assets/img/avatars/avatar_m_02.png
Normal file
BIN
public/assets/img/avatars/avatar_m_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
BIN
public/img/favicon.ico
Normal file
BIN
public/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
@ -18,7 +18,10 @@ const AttendanceOverview = () => {
|
||||
const [view, setView] = useState("chart");
|
||||
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(projectId, dayRange);
|
||||
const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(
|
||||
projectId,
|
||||
dayRange
|
||||
);
|
||||
|
||||
const { tableData, roles, dates } = useMemo(() => {
|
||||
const map = new Map();
|
||||
@ -29,7 +32,9 @@ const AttendanceOverview = () => {
|
||||
map.get(date)[entry.role.trim()] = entry.present;
|
||||
});
|
||||
|
||||
const uniqueRoles = [...new Set(attendanceOverviewData.map((e) => e.role.trim()))];
|
||||
const uniqueRoles = [
|
||||
...new Set(attendanceOverviewData.map((e) => e.role.trim())),
|
||||
];
|
||||
const sortedDates = [...map.keys()];
|
||||
const data = sortedDates.map((date) => {
|
||||
const row = { date };
|
||||
@ -71,17 +76,17 @@ const AttendanceOverview = () => {
|
||||
show: true,
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#78909C',
|
||||
color: "#78909C",
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
offsetY: 0,
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
borderType: 'solid',
|
||||
color: '#78909C',
|
||||
borderType: "solid",
|
||||
color: "#78909C",
|
||||
width: 6,
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
offsetY: 0,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
@ -94,9 +99,7 @@ const AttendanceOverview = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-white p-4 rounded shadow d-flex flex-column"
|
||||
>
|
||||
<div className="bg-white p-4 rounded shadow d-flex flex-column">
|
||||
{/* Header */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div className="card-title mb-0 text-start">
|
||||
@ -105,7 +108,7 @@ const AttendanceOverview = () => {
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
className="form-select form-select-sm w-auto"
|
||||
value={dayRange}
|
||||
onChange={(e) => setDayRange(Number(e.target.value))}
|
||||
>
|
||||
@ -114,16 +117,20 @@ const AttendanceOverview = () => {
|
||||
<option value={30}>Last 30 Days</option>
|
||||
</select>
|
||||
<button
|
||||
className={`btn btn-sm ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
className={`btn btn-sm p-1 ${
|
||||
view === "chart" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setView("chart")}
|
||||
>
|
||||
📊
|
||||
<i class="bx bx-bar-chart fs-5"></i>
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-sm ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
className={`btn btn-sm p-1 ${
|
||||
view === "table" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setView("table")}
|
||||
>
|
||||
📋
|
||||
<i class="bx bx-table fs-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -149,11 +156,21 @@ const AttendanceOverview = () => {
|
||||
style={{ maxHeight: "350px", overflowY: "auto" }}
|
||||
>
|
||||
<table className="table table-bordered table-sm text-start align-middle mb-0">
|
||||
<thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
|
||||
<thead
|
||||
className="table-light"
|
||||
style={{ position: "sticky", top: 0, zIndex: 1 }}
|
||||
>
|
||||
<tr>
|
||||
<th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
|
||||
<th style={{ background: "#f8f9fa", textTransform: "none" }}>
|
||||
Role
|
||||
</th>
|
||||
{dates.map((date, idx) => (
|
||||
<th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>{date}</th>
|
||||
<th
|
||||
key={idx}
|
||||
style={{ background: "#f8f9fa", textTransform: "none" }}
|
||||
>
|
||||
{date}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
@ -164,7 +181,8 @@ const AttendanceOverview = () => {
|
||||
<td>{role}</td>
|
||||
{tableData.map((row, idx) => {
|
||||
const value = row[role];
|
||||
const cellStyle = value > 0 ? { backgroundColor: '#d5d5d5' } : {};
|
||||
const cellStyle =
|
||||
value > 0 ? { backgroundColor: "#d5d5d5" } : {};
|
||||
return (
|
||||
<td key={idx} style={cellStyle}>
|
||||
{value}
|
||||
|
||||
161
src/components/Employee/EmpActivities.jsx
Normal file
161
src/components/Employee/EmpActivities.jsx
Normal file
@ -0,0 +1,161 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import moment from "moment";
|
||||
import DateRangePicker from "../common/DateRangePicker";
|
||||
import useFormattedDate from "../../hooks/useFormattedDate";
|
||||
import { useProjectTasksByEmployee } from "../../hooks/useProjects";
|
||||
|
||||
const EmpActivities = ({ employee }) => {
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const myDate = new Date("2025-08-06T10:30:00Z");
|
||||
const formattedToday = useFormattedDate(myDate, "dd-MMM-yyyy");
|
||||
|
||||
|
||||
const {
|
||||
data,
|
||||
isError,
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
} = useProjectTasksByEmployee(employee?.id,dateRange.startDate,dateRange.endDate);
|
||||
|
||||
if(isLoading) return <div>Loading...</div>
|
||||
return (
|
||||
<>
|
||||
<div className="card h-100 mt-4">
|
||||
<div className="card-body">
|
||||
<div className="my-0 text-start">
|
||||
<DateRangePicker
|
||||
DateDifference="30"
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
/>
|
||||
</div>
|
||||
<ul className="timeline mb-0 mt-5 text-start">
|
||||
{data?.map((activity)=>(
|
||||
<li className="timeline-item timeline-item-transparent">
|
||||
<span className="timeline-point timeline-point-primary"></span>
|
||||
<div className="timeline-event">
|
||||
<div className="timeline-header mb-3">
|
||||
<h6 className="mb-0">{activity.projectName}</h6>
|
||||
<small className="text-body-secondary">
|
||||
{useFormattedDate(activity.assignmentDate, "dd-MMM-yyyy")}
|
||||
</small>
|
||||
</div>
|
||||
<p className="mb-2"><span className="fw-semibold">Activity:</span>{activity.activityName}</p>
|
||||
<p className="mb-2">
|
||||
<span className="fw-semibold">Location:</span> {activity.location}
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<span className="fw-semibold">Planned: {activity.plannedTask}</span>
|
||||
<span className="ms-2">Completed : {activity.completedTask}</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
||||
|
||||
{/* <li className="timeline-item timeline-item-transparent">
|
||||
<span className="timeline-point timeline-point-success"></span>
|
||||
<div className="timeline-event">
|
||||
<div className="timeline-header mb-3">
|
||||
<h6 className="mb-0">Client Meeting</h6>
|
||||
<small className="text-body-secondary">45 min ago</small>
|
||||
</div>
|
||||
<p className="mb-2">Project meeting with john @10:15am</p>
|
||||
<div className="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
||||
<div className="d-flex flex-wrap align-items-center mb-50">
|
||||
<div className="avatar avatar-sm me-2">
|
||||
<img
|
||||
src="../../assets/img/avatars/1.png"
|
||||
alt="Avatar"
|
||||
className="rounded-circle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-0 small fw-medium">
|
||||
Lester McCarthy (Client)
|
||||
</p>
|
||||
<small>CEO of ThemeSelection</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="timeline-item timeline-item-transparent">
|
||||
<span className="timeline-point timeline-point-info"></span>
|
||||
<div className="timeline-event">
|
||||
<div className="timeline-header mb-3">
|
||||
<h6 className="mb-0">Create a new project for client</h6>
|
||||
<small className="text-body-secondary">2 Day Ago</small>
|
||||
</div>
|
||||
<p className="mb-2">6 team members in a project</p>
|
||||
<ul className="list-group list-group-flush">
|
||||
<li className="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
|
||||
<div className="d-flex flex-wrap align-items-center">
|
||||
<ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
className="avatar pull-up"
|
||||
aria-label="Vinnie Mostowy"
|
||||
data-bs-original-title="Vinnie Mostowy"
|
||||
>
|
||||
<img
|
||||
className="rounded-circle"
|
||||
src="../../assets/img/avatars/5.png"
|
||||
alt="Avatar"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
className="avatar pull-up"
|
||||
aria-label="Allen Rieske"
|
||||
data-bs-original-title="Allen Rieske"
|
||||
>
|
||||
<img
|
||||
className="rounded-circle"
|
||||
src="../../assets/img/avatars/12.png"
|
||||
alt="Avatar"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
className="avatar pull-up"
|
||||
aria-label="Julee Rossignol"
|
||||
data-bs-original-title="Julee Rossignol"
|
||||
>
|
||||
<img
|
||||
className="rounded-circle"
|
||||
src="../../assets/img/avatars/6.png"
|
||||
alt="Avatar"
|
||||
/>
|
||||
</li>
|
||||
<li className="avatar">
|
||||
<span
|
||||
className="avatar-initial rounded-circle pull-up"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-original-title="3 more"
|
||||
>
|
||||
+3
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmpActivities;
|
||||
@ -1,24 +1,30 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import moment from "moment";
|
||||
import DateRangePicker from "../../components/common/DateRangePicker";
|
||||
import DateRangePicker from "../common/DateRangePicker";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { fetchEmployeeAttendanceData } from "../../slices/apiSlice/employeeAttendanceSlice";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
|
||||
import AttendLogs from "../../components/Activities/AttendLogs";
|
||||
import RenderAttendanceStatus from "../Activities/RenderAttendanceStatus";
|
||||
import AttendLogs from "../Activities/AttendLogs";
|
||||
import { useAttendanceByEmployee } from "../../hooks/useAttendance";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
|
||||
const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
const EmpAttendance = ({ employee }) => {
|
||||
const [attendances, setAttendnaces] = useState([]);
|
||||
const [selectedDate, setSelectedDate] = useState("");
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [attendanceId, setAttendanecId] = useState();
|
||||
const {data =[],isLoading:loading,isFetching,error,refetch} = useAttendanceByEmployee(employee,dateRange.startDate, dateRange.endDate)
|
||||
const {
|
||||
data = [],
|
||||
isLoading: loading,
|
||||
isFetching,
|
||||
error,
|
||||
refetch,
|
||||
} = useAttendanceByEmployee(employee, dateRange.startDate, dateRange.endDate);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// const { data, loading, error } = useSelector(
|
||||
@ -75,16 +81,24 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
const uniqueMap = new Map();
|
||||
|
||||
[...group1, ...group2, ...group3, ...group4, ...group5].forEach((rec) => {
|
||||
const date = moment(rec.checkInTime || rec.checkOutTime).format("YYYY-MM-DD");
|
||||
const date = moment(rec.checkInTime || rec.checkOutTime).format(
|
||||
"YYYY-MM-DD"
|
||||
);
|
||||
const key = `${rec.employeeId}-${date}`;
|
||||
const existing = uniqueMap.get(key);
|
||||
if (!existing || new Date(rec.checkInTime || rec.checkOutTime) > new Date(existing.checkInTime || existing.checkOutTime)) {
|
||||
if (
|
||||
!existing ||
|
||||
new Date(rec.checkInTime || rec.checkOutTime) >
|
||||
new Date(existing.checkInTime || existing.checkOutTime)
|
||||
) {
|
||||
uniqueMap.set(key, rec);
|
||||
}
|
||||
});
|
||||
|
||||
const sortedFinalList = [...uniqueMap.values()].sort((a, b) =>
|
||||
new Date(b.checkInTime || b.checkOutTime) - new Date(a.checkInTime || a.checkOutTime)
|
||||
const sortedFinalList = [...uniqueMap.values()].sort(
|
||||
(a, b) =>
|
||||
new Date(b.checkInTime || b.checkOutTime) -
|
||||
new Date(a.checkInTime || a.checkOutTime)
|
||||
);
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
@ -93,8 +107,6 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
|
||||
|
||||
const openModal = (id) => {
|
||||
setAttendanecId(id);
|
||||
setIsModalOpen(true);
|
||||
@ -103,24 +115,27 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
{isModalOpen && (
|
||||
<GlobalModel size="lg" isOpen={isModalOpen} closeModal={closeModal}>
|
||||
<AttendLogs Id={attendanceId} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="px-4 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday" />
|
||||
<DateRangePicker
|
||||
DateDifference="30"
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
/>
|
||||
</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 ${
|
||||
isFetching ? "spin" : ""
|
||||
}`}
|
||||
data-toggle="tooltip"
|
||||
title="Refresh"
|
||||
@ -214,7 +229,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
@ -226,7 +242,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
@ -244,4 +261,4 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendancesEmployeeRecords;
|
||||
export default EmpAttendance;
|
||||
115
src/components/Employee/EmpBanner.jsx
Normal file
115
src/components/Employee/EmpBanner.jsx
Normal file
@ -0,0 +1,115 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import ManageEmployee from "./ManageEmployee";
|
||||
|
||||
const EmpBanner = ({ profile, loggedInUser }) => {
|
||||
const { openChangePassword } = useChangePassword();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModal && (
|
||||
<GlobalModel
|
||||
size="lg"
|
||||
isOpen={showModal}
|
||||
closeModal={() => setShowModal(false)}
|
||||
>
|
||||
<ManageEmployee
|
||||
employeeId={profile.id}
|
||||
onClosed={() => setShowModal(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
|
||||
<div className="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
|
||||
{profile?.gender?.toLowerCase() == "male" && (
|
||||
<img
|
||||
width={125}
|
||||
src="../../assets/img/avatars/avatar_m_01.png"
|
||||
alt="user image"
|
||||
className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
|
||||
/>
|
||||
)}
|
||||
{profile?.gender?.toLowerCase() == "female" && (
|
||||
<img
|
||||
width={125}
|
||||
src="../../assets/img/avatars/avatar_f_02.png"
|
||||
alt="user image"
|
||||
className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-grow-1 mt-1 mt-lg-1">
|
||||
<div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
|
||||
<div className="user-profile-info">
|
||||
<h4 className="mb-2">
|
||||
<span>{profile?.firstName}</span>
|
||||
{profile?.middleName ? (
|
||||
<span className="ms-1">{profile?.middleName}</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{profile?.lastName ? (
|
||||
<span className="ms-1">{profile?.lastName}</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</h4>
|
||||
<ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 mt-4">
|
||||
<li className="list-inline-item">
|
||||
<i className="icon-base bx bx-crown me-2 align-top"></i>
|
||||
<span className="fw-medium">
|
||||
{profile?.jobRole || <em>NA</em>}
|
||||
</span>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<i className="icon-base bx bx-phone me-2 align-top"></i>
|
||||
<span className="fw-medium">
|
||||
{" "}
|
||||
{profile?.phoneNumber || <em>NA</em>}
|
||||
</span>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<i className="icon-base bx bx-calendar me-2 align-top"></i>
|
||||
<span className="fw-medium">
|
||||
{" "}
|
||||
Joined on{" "}
|
||||
{profile?.joiningDate ? (
|
||||
new Date(profile.joiningDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className="btn btn-sm btn-primary btn-block"
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
{profile?.id == loggedInUser?.employeeInfo?.id && (
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary btn-block"
|
||||
onClick={() => openChangePassword()}
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmpBanner;
|
||||
84
src/components/Employee/EmpDashboard.jsx
Normal file
84
src/components/Employee/EmpDashboard.jsx
Normal file
@ -0,0 +1,84 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import EmpOverview from "./EmpOverview";
|
||||
import { useProjectsAllocationByEmployee } from "../../hooks/useProjects";
|
||||
|
||||
const EmpDashboard = ({ profile }) => {
|
||||
const {
|
||||
projectList,
|
||||
loading: selectedProjectLoding,
|
||||
refetch,
|
||||
} = useProjectsAllocationByEmployee(profile?.id);
|
||||
|
||||
console.log(projectList);
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12 col-sm-6 pt-5">
|
||||
{" "}
|
||||
<EmpOverview profile={profile}></EmpOverview>
|
||||
</div>
|
||||
<div className="col col-sm-6 pt-5">
|
||||
<div className="card ">
|
||||
<div className="card-body">
|
||||
<small className="card-text text-uppercase text-body-secondary small">
|
||||
My Projects
|
||||
</small>{" "}
|
||||
<ul className="list-unstyled text-start my-3 py-1">
|
||||
{selectedProjectLoding && <span>Loading</span>}
|
||||
{projectList.map((project) => (
|
||||
<li
|
||||
className="d-flex mb-4 align-items-start flex-wrap"
|
||||
key={project.id}
|
||||
>
|
||||
{/* Project Info */}
|
||||
<div className="flex-grow-1">
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="d-flex">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<span className="avatar-initial rounded bg-label-primary">
|
||||
<i className="icon-base bx bx-buildings icon-lg"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 className="mb-0">{project.projectShortName}</h6>
|
||||
<small className="text-muted">{project.projectName}</small>
|
||||
<div className="label-secondary">
|
||||
Assigned:{" "}
|
||||
{project.assignedDate ? (
|
||||
new Date(project.assignedDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="badge bg-label-secondary">
|
||||
{project.designation}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
{project.removedDate && (
|
||||
<div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
|
||||
<div className="label-secondary">
|
||||
Unassigned:{" "}
|
||||
{new Date(project.removedDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmpDashboard;
|
||||
12
src/components/Employee/EmpDocuments.jsx
Normal file
12
src/components/Employee/EmpDocuments.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { ComingSoonPage } from "../../pages/Misc/ComingSoonPage";
|
||||
|
||||
const EmpDocuments = ({ profile, loggedInUser }) => {
|
||||
return (
|
||||
<>
|
||||
<ComingSoonPage/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmpDocuments;
|
||||
109
src/components/Employee/EmpOverview.jsx
Normal file
109
src/components/Employee/EmpOverview.jsx
Normal file
@ -0,0 +1,109 @@
|
||||
import React from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
|
||||
const EmpOverview = ({ profile }) => {
|
||||
const { loggedInUserProfile } = useProfile();
|
||||
return (
|
||||
<>
|
||||
{" "}
|
||||
<div className="row">
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<small className="card-text text-uppercase text-body-secondary small">
|
||||
About
|
||||
</small>
|
||||
<ul className="list-unstyled my-3 py-1">
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">Full Name:</span>{" "}
|
||||
<span>{`${profile?.firstName} ${profile?.lastName}`}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>{" "}
|
||||
<span>Active</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-crown"></i>
|
||||
<span className="fw-medium mx-2">Role:</span>{" "}
|
||||
<span> {profile?.jobRole || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-flag"></i>
|
||||
<span className="fw-medium mx-2">Gender:</span>{" "}
|
||||
<span> {profile?.gender || <em>NA</em>}</span>
|
||||
</li>{" "}
|
||||
<li className="d-flex align-items-center mb-2">
|
||||
<i className="icon-base bx bx-calendar "></i>
|
||||
<span className="fw-medium mx-2">Birth Date:</span>{" "}
|
||||
<span>
|
||||
{profile?.birthDate ? (
|
||||
new Date(profile.birthDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-2">
|
||||
<i className="icon-base bx bx-calendar "></i>
|
||||
<span className="fw-medium mx-2">Joining Date:</span>{" "}
|
||||
<span>
|
||||
{profile?.joiningDate ? (
|
||||
new Date(profile.joiningDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<small className="card-text text-uppercase text-body-secondary small">
|
||||
Contacts
|
||||
</small>
|
||||
<ul className="list-unstyled my-3 py-1">
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-phone"></i>
|
||||
<span className="fw-medium mx-2">Contact:</span>{" "}
|
||||
<span> {profile?.phoneNumber || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-envelope"></i>
|
||||
<span className="fw-medium mx-2">Email:</span>{" "}
|
||||
<a href={`mailto:${profile?.email}`}>
|
||||
{" "}
|
||||
{profile?.email || <em>NA</em>}
|
||||
</a>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">
|
||||
{" "}
|
||||
Emergency Contact:
|
||||
</span>{" "}
|
||||
<span> {profile?.emergencyContactPerson || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-phone"></i>
|
||||
<span className="fw-medium mx-2"> Emergency Phone:</span>{" "}
|
||||
<span> {profile?.emergencyPhoneNumber || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center ">
|
||||
<div className="container p-0">
|
||||
<div className="fw-medium text-start">
|
||||
<i className="icon-base bx bx-map "></i> Address:
|
||||
</div>
|
||||
<div className="text-start ms-7">
|
||||
{profile?.currentAddress || <em>NA</em>}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default EmpOverview;
|
||||
@ -1,53 +1,36 @@
|
||||
import React from "react";
|
||||
|
||||
const EmployeeNav = ({ onPillClick, activePill }) => {
|
||||
const tabs = [
|
||||
{ key: "profile", icon: "bx bx-user", label: "Profile" },
|
||||
{ key: "attendance", icon: "bx bx-group", label: "Attendances" },
|
||||
{ key: "documents", icon: "bx bx-user", label: "Documents" },
|
||||
{ key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="col-md-12">
|
||||
<div className="nav-align-top">
|
||||
<ul className="nav nav-tabs">
|
||||
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
||||
<ul className="nav nav-tabs overflow-auto" id="horizontal-example">
|
||||
{tabs.map(({ key, icon, label }) => (
|
||||
<li
|
||||
key={key}
|
||||
className="nav-item"
|
||||
style={{ padding: "10px 10px 0 10px" }}
|
||||
>
|
||||
<a
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
activePill === "attendance" ? "active" : ""
|
||||
}`}
|
||||
href="#"
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
activePill === key ? "active" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent page reload
|
||||
onPillClick("attendance");
|
||||
e.preventDefault();
|
||||
onPillClick(key);
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-group bx-sm me-1_5"></i> Attendances
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
||||
<a
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
activePill === "account" ? "active" : ""
|
||||
}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent page reload
|
||||
onPillClick("account");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-user bx-sm me-1_5"></i> Documents
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
||||
<a
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
activePill === "activities" ? "active" : ""
|
||||
}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent page reload
|
||||
onPillClick("activities");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
|
||||
<i className={`icon-base ${icon} icon-sm me-1_5`}></i> {label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,12 +27,25 @@ const Header = () => {
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
// {
|
||||
// console.log(location.pathname);
|
||||
// }
|
||||
|
||||
const isDirectoryPath = /^\/directory$/.test(location.pathname);
|
||||
const isProjectPath = /^\/projects$/.test(location.pathname);
|
||||
const isDashboard =
|
||||
const isDashboardPath =
|
||||
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
||||
const isProjectPath = /^\/projects$/.test(location.pathname);
|
||||
|
||||
const showProjectDropdown = (pathname) => {
|
||||
const isDirectoryPath = /^\/directory$/.test(pathname);
|
||||
|
||||
// const isProfilePage = /^\/employee$/.test(location.pathname);
|
||||
const isProfilePage =
|
||||
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
|
||||
pathname
|
||||
);
|
||||
|
||||
return !(isDirectoryPath || isProfilePage);
|
||||
};
|
||||
const allowedProjectStatusIds = [
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
@ -82,16 +95,16 @@ const Header = () => {
|
||||
};
|
||||
|
||||
const handleProfilePage = () => {
|
||||
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
|
||||
navigate(`/employee/${profile?.employeeInfo?.id}`);
|
||||
};
|
||||
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
const selectedProject = useSelectedproject();
|
||||
|
||||
const projectsForDropdown = isDashboard
|
||||
const projectsForDropdown = isDashboardPath
|
||||
? projectNames
|
||||
: projectNames?.filter(project =>
|
||||
: projectNames?.filter((project) =>
|
||||
allowedProjectStatusIds.includes(project.projectStatusId)
|
||||
);
|
||||
|
||||
@ -109,7 +122,9 @@ const Header = () => {
|
||||
const selectedProjectObj = projectNames.find(
|
||||
(p) => p?.id === selectedProject
|
||||
);
|
||||
currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "All Projects";
|
||||
currentProjectDisplayName = selectedProjectObj
|
||||
? selectedProjectObj.name
|
||||
: "All Projects";
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,16 +140,17 @@ const Header = () => {
|
||||
if (projectNames.length === 1) {
|
||||
dispatch(setProjectId(projectNames[0]?.id || null));
|
||||
} else {
|
||||
if (isDashboard) {
|
||||
if (isDashboardPath) {
|
||||
dispatch(setProjectId(null));
|
||||
} else {
|
||||
const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
|
||||
const firstAllowedProject = projectNames.find((project) =>
|
||||
allowedProjectStatusIds.includes(project.projectStatusId)
|
||||
);
|
||||
dispatch(setProjectId(firstAllowedProject?.id || null));
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [projectNames, selectedProject, dispatch, isDashboard]);
|
||||
|
||||
}, [projectNames, selectedProject, dispatch, isDashboardPath]);
|
||||
|
||||
const handler = useCallback(
|
||||
async (data) => {
|
||||
@ -204,7 +220,7 @@ const Header = () => {
|
||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||
id="navbar-collapse"
|
||||
>
|
||||
{projectNames && !isDirectoryPath && (
|
||||
{showProjectDropdown(location.pathname) && (
|
||||
<div className="align-items-center">
|
||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||
<div className="btn-group">
|
||||
@ -223,12 +239,14 @@ const Header = () => {
|
||||
</span>
|
||||
)}
|
||||
|
||||
{shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
|
||||
{shouldShowDropdown &&
|
||||
projectsForDropdown &&
|
||||
projectsForDropdown.length > 0 && (
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
{isDashboard && (
|
||||
{isDashboardPath && (
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
|
||||
@ -27,8 +27,7 @@ const DateRangePicker = ({
|
||||
altInput: true,
|
||||
altFormat: "d-m-Y",
|
||||
defaultDate: [startDate, endDate],
|
||||
static: false,
|
||||
// appendTo: document.body,
|
||||
static: true,
|
||||
clickOpens: true,
|
||||
maxDate: endDate,
|
||||
onChange: (selectedDates, dateStr) => {
|
||||
|
||||
26
src/hooks/useFormattedDate.js
Normal file
26
src/hooks/useFormattedDate.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { format } from "date-fns";
|
||||
|
||||
/**
|
||||
* A custom hook to format a date string, object, or number.
|
||||
* @param {string | Date | number} date - The date to be formatted.
|
||||
* @param {string} formatString - The format string (e.g., 'MMMM do, yyyy').
|
||||
* @returns {string} The formatted date string.
|
||||
*/
|
||||
const useFormattedDate = (date, formatString) => {
|
||||
// Return early if no date is provided
|
||||
if (!date) {
|
||||
return "";
|
||||
}
|
||||
|
||||
try {
|
||||
const dateObj = new Date(date);
|
||||
// You could also add error handling for invalid dates
|
||||
// if (!isValid(dateObj)) return 'Invalid Date';
|
||||
return format(dateObj, formatString);
|
||||
} catch (error) {
|
||||
console.error("Error formatting date:", error);
|
||||
return ""; // Return an empty string or a default value on error
|
||||
}
|
||||
};
|
||||
|
||||
export default useFormattedDate;
|
||||
@ -96,7 +96,7 @@ export const useProjectDetails = (projectId, isAuto = true) => {
|
||||
|
||||
export const useProjectsByEmployee = (employeeId) => {
|
||||
const {
|
||||
data: projectNameList = [],
|
||||
data: projectList = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
@ -117,6 +117,36 @@ export const useProjectsByEmployee = (employeeId) => {
|
||||
return { projectList, loading: isLoading, error, refetch };
|
||||
};
|
||||
|
||||
export const useProjectsAllocationByEmployee = (employeeId) => {
|
||||
const {
|
||||
data: projectList = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ["ProjectsAllocationByEmployee", employeeId],
|
||||
queryFn: async () => {
|
||||
const res = await ProjectRepository.getProjectsAllocationByEmployee(
|
||||
employeeId
|
||||
);
|
||||
const sortedProjects = [...res.data].sort((a, b) =>
|
||||
a.projectName.localeCompare(b.projectName)
|
||||
);
|
||||
return sortedProjects || res;
|
||||
|
||||
//return res.data || res;
|
||||
},
|
||||
enabled: !!employeeId,
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.message || "Error while Fetching project Employee",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
return { projectList, loading: isLoading, error, refetch };
|
||||
};
|
||||
|
||||
export const useProjectName = () => {
|
||||
const {
|
||||
data = [],
|
||||
@ -176,6 +206,29 @@ export const useProjectTasks = (workAreaId, IsExpandedArea = false) => {
|
||||
return { ProjectTaskList, isLoading, error };
|
||||
};
|
||||
|
||||
export const useProjectTasksByEmployee = (
|
||||
employeeId,
|
||||
fromDate,
|
||||
toDate,
|
||||
) => {
|
||||
|
||||
return useQuery({
|
||||
queryKey: ["TasksByEmployee", employeeId],
|
||||
queryFn: async () => {
|
||||
const res = await ProjectRepository.getProjectTasksByEmployee(
|
||||
employeeId,
|
||||
fromDate,
|
||||
toDate
|
||||
);
|
||||
return res.data;
|
||||
},
|
||||
enabled: !!employeeId && !!fromDate && !!toDate,
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Error while Fetching project Tasks", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// -- -------------Mutation-------------------------------
|
||||
|
||||
export const useCreateProject = ({ onSuccessCallback }) => {
|
||||
|
||||
@ -51,7 +51,8 @@ const EmployeeList = () => {
|
||||
|
||||
const { employees, loading, setLoading, error, recallEmployeeData } =
|
||||
useEmployeesAllOrByProjectId(
|
||||
showAllEmployees ,selectedProjectId,
|
||||
showAllEmployees,
|
||||
selectedProjectId,
|
||||
showInactive
|
||||
);
|
||||
|
||||
@ -153,8 +154,6 @@ const EmployeeList = () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleAllEmployeesToggle = (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
setShowInactive(false);
|
||||
@ -295,12 +294,12 @@ const EmployeeList = () => {
|
||||
|
||||
{ViewTeamMember ? (
|
||||
// <div className="row">
|
||||
<div className="card px-0 px-sm-4">
|
||||
<div className="card p-1">
|
||||
<div className="card-datatable table-responsive pt-2">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper no-footer px-2 "
|
||||
|
||||
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||
style={{ width: "98%" }}
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
{/* Switches: All Employees + Inactive */}
|
||||
@ -480,7 +479,9 @@ const EmployeeList = () => {
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Official Designation</div>
|
||||
<div className="text-start ms-5">
|
||||
Official Designation
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th
|
||||
@ -564,9 +565,7 @@ const EmployeeList = () => {
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/employee/${item.id}?for=attendance`
|
||||
)
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
@ -581,7 +580,7 @@ const EmployeeList = () => {
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
{item.email ? (
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-envelope text-primary text-truncate me-2"></i>
|
||||
<i className="bx bxs-envelope text-primary me-2"></i>
|
||||
{item.email}
|
||||
</span>
|
||||
) : (
|
||||
@ -639,8 +638,7 @@ const EmployeeList = () => {
|
||||
}
|
||||
className="dropdown-item py-1"
|
||||
>
|
||||
<i className="bx bx-detail bx-sm"></i>{" "}
|
||||
View
|
||||
<i className="bx bx-detail bx-sm"></i> View
|
||||
</button>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
@ -737,8 +735,8 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// </div>
|
||||
) : (
|
||||
// </div>
|
||||
<div className="card">
|
||||
<div className="text-center">
|
||||
<i className="fa-solid fa-triangle-exclamation fs-5"></i>
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import EmpProfile from "../../components/Employee/EmpProfile";
|
||||
import axios from "axios";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import EmployeeNav from "../../components/Employee/EmployeeNav";
|
||||
import { useSearchParams, useParams } from "react-router-dom";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import { useSearchParams, useParams, useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
useEmployeeProfile,
|
||||
useEmployees,
|
||||
useEmployeesByProject,
|
||||
} from "../../hooks/useEmployees";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
|
||||
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import EmployeeNav from "../../components/Employee/EmployeeNav";
|
||||
import EmpProfile from "../../components/Employee/EmpProfile";
|
||||
import EmpAttendance from "../../components/Employee/EmpAttendance";
|
||||
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
||||
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import EmpBanner from "../../components/Employee/EmpBanner";
|
||||
import EmpDashboard from "../../components/Employee/EmpDashboard";
|
||||
import EmpDocuments from "../../components/Employee/EmpDocuments";
|
||||
import EmpActivities from "../../components/Employee/EmpActivities";
|
||||
|
||||
const EmployeeProfile = () => {
|
||||
const { profile } = useProfile();
|
||||
@ -32,7 +33,7 @@ const EmployeeProfile = () => {
|
||||
|
||||
const [SearchParams] = useSearchParams();
|
||||
const tab = SearchParams.get("for");
|
||||
const [activePill, setActivePill] = useState(tab);
|
||||
const [activePill, setActivePill] = useState(tab || "profile");
|
||||
const [currentEmployee, setCurrentEmployee] = useState();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
@ -40,8 +41,6 @@ const EmployeeProfile = () => {
|
||||
setActivePill(pillKey);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const fetchEmployeeProfile = async (employeeID) => {
|
||||
try {
|
||||
const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
|
||||
@ -62,17 +61,24 @@ const EmployeeProfile = () => {
|
||||
const renderContent = () => {
|
||||
if (loading) return <div>Loading</div>;
|
||||
switch (activePill) {
|
||||
case "attendance": {
|
||||
case "profile": {
|
||||
return (
|
||||
<>
|
||||
<AttendancesEmployeeRecords employee={employeeId} />
|
||||
<EmpDashboard profile={currentEmployee} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
case "dcoument": {
|
||||
case "attendance": {
|
||||
return (
|
||||
<>
|
||||
<ComingSoonPage />
|
||||
<EmpAttendance employee={employeeId} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
case "documents": {
|
||||
return (
|
||||
<>
|
||||
<EmpDocuments />
|
||||
</>
|
||||
);
|
||||
break;
|
||||
@ -80,7 +86,7 @@ const EmployeeProfile = () => {
|
||||
case "activities": {
|
||||
return (
|
||||
<>
|
||||
<ComingSoonPage />
|
||||
<EmpActivities employee={currentEmployee} />
|
||||
</>
|
||||
);
|
||||
break;
|
||||
@ -98,14 +104,8 @@ const EmployeeProfile = () => {
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
const { openChangePassword } = useChangePassword();
|
||||
return (
|
||||
<>
|
||||
{showModal && (
|
||||
<GlobalModel size="lg" isOpen={showModal} closeModal={() => setShowModal(false)}>
|
||||
<ManageEmployee employeeId={employeeId} onClosed={() => setShowModal(false)} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
@ -114,151 +114,24 @@ const EmployeeProfile = () => {
|
||||
{ label: "Profile", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
|
||||
<div className="row">
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="d-flex flex-row flex-lg-column">
|
||||
<div className="d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<Avatar
|
||||
firstName={`${currentEmployee?.firstName}`}
|
||||
lastName={`${currentEmployee?.lastName}`}
|
||||
size={"lg"}
|
||||
/>
|
||||
<div className="py-2">
|
||||
<p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100 d-flex flex-column justify-content-start">
|
||||
<div className="mt-3 w-100">
|
||||
<h6 className="mb-2 text-muted text-start">
|
||||
Employee Info
|
||||
</h6>
|
||||
<table className="table table-borderless mb-3">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">Email:</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.email || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start text-nowrap">
|
||||
Phone Number:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.phoneNumber || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start" style={{ width: '120px' }}>
|
||||
Emergency Contact Person:
|
||||
</td>
|
||||
<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 align-bottom">
|
||||
{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Gender:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.gender || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Birth Date:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.birthDate ? (
|
||||
new Date(
|
||||
currentEmployee.birthDate
|
||||
).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Joining Date:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.joiningDate ? (
|
||||
new Date(
|
||||
currentEmployee.joiningDate
|
||||
).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Job Role:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.jobRole || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start align-top" >
|
||||
Address:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.currentAddress || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-block"
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
{currentEmployee?.id == profile?.employeeInfo?.id && (
|
||||
<button
|
||||
className="btn btn-outline-primary btn-block mt-2"
|
||||
onClick={() => openChangePassword()}
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
|
||||
<div className="col-12 ">
|
||||
<EmpBanner
|
||||
profile={currentEmployee}
|
||||
loggedInUser={profile}
|
||||
></EmpBanner>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="row">
|
||||
<div className="col-12 ">
|
||||
<EmployeeNav
|
||||
onPillClick={handlePillClick}
|
||||
activePill={activePill}
|
||||
/>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="row row-bordered g-0">{renderContent()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className=" ">{renderContent()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -8,7 +8,8 @@ const ProjectRepository = {
|
||||
getProjectAllocation: (projetid) =>
|
||||
api.get(`api/project/allocation/${projetid}`),
|
||||
|
||||
getEmployeesByProject:(projectId)=>api.get(`/api/Project/employees/get/${projectId}`),
|
||||
getEmployeesByProject: (projectId) =>
|
||||
api.get(`/api/Project/employees/get/${projectId}`),
|
||||
|
||||
manageProject: (data) => api.post("/api/project", data),
|
||||
// updateProject: (data) => api.post("/api/project/update", data),
|
||||
@ -21,17 +22,25 @@ const ProjectRepository = {
|
||||
|
||||
updateProject: (id, data) => api.put(`/api/project/update/${id}`, data),
|
||||
deleteProject: (id) => api.delete(`/projects/${id}`),
|
||||
getProjectsByEmployee: ( id ) => api.get( `/api/project/assigned-projects/${ id }` ),
|
||||
updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data),
|
||||
getProjectsByEmployee: (id) =>
|
||||
api.get(`/api/project/assigned-projects/${id}`),
|
||||
getProjectsAllocationByEmployee: (id) =>
|
||||
api.get(`/api/project/allocation-histery/${id}`),
|
||||
updateProjectsByEmployee: (id, data) =>
|
||||
api.post(`/api/project/assign-projects/${id}`, data),
|
||||
projectNameList: () => api.get("/api/project/list/basic"),
|
||||
|
||||
getProjectDetails: (id) => api.get(`/api/project/details/${id}`),
|
||||
getProjectInfraByproject: (id) => api.get(`/api/project/infra-details/${id}`),
|
||||
getProjectTasksByWorkArea:(id)=>api.get(`/api/project/tasks/${id}`)
|
||||
getProjectTasksByWorkArea: (id) => api.get(`/api/project/tasks/${id}`),
|
||||
getProjectTasksByEmployee: (id, fromDate, toDate) =>
|
||||
api.get(
|
||||
`/api/project/tasks-employee/${id}?fromDate=${fromDate}&toDate=${toDate}`
|
||||
),
|
||||
};
|
||||
|
||||
export const TasksRepository = {
|
||||
assignTask: (data) => api.post("/api/task/assign", data),
|
||||
// reportTask:(data)=>api.post("/api/task/report",data)
|
||||
}
|
||||
};
|
||||
export default ProjectRepository;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user