diff --git a/src/components/Dashboard/AttendanceChart.jsx b/src/components/Dashboard/AttendanceChart.jsx index 7fcc862e..df99b07d 100644 --- a/src/components/Dashboard/AttendanceChart.jsx +++ b/src/components/Dashboard/AttendanceChart.jsx @@ -6,180 +6,198 @@ import flatColors from "../Charts/flatColor"; import ChartSkeleton from "../Charts/Skelton"; const formatDate = (dateStr) => { - const date = new Date(dateStr); - return date.toLocaleDateString("en-GB", { - day: "2-digit", - month: "long", - }); + const date = new Date(dateStr); + return date.toLocaleDateString("en-GB", { + day: "2-digit", + month: "long", + }); }; const AttendanceOverview = () => { - const [dayRange, setDayRange] = useState(7); - const [view, setView] = useState("chart"); + const [dayRange, setDayRange] = useState(7); + const [view, setView] = useState("chart"); - const projectId = useSelector((store) => store.localVariables.projectId); - const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(projectId, dayRange); + const projectId = useSelector((store) => store.localVariables.projectId); + const { attendanceOverviewData, loading, error } = useAttendanceOverviewData( + projectId, + dayRange + ); - const { tableData, roles, dates } = useMemo(() => { - const map = new Map(); + const { tableData, roles, dates } = useMemo(() => { + const map = new Map(); - attendanceOverviewData.forEach((entry) => { - const date = formatDate(entry.date); - if (!map.has(date)) map.set(date, {}); - map.get(date)[entry.role.trim()] = entry.present; - }); + attendanceOverviewData.forEach((entry) => { + const date = formatDate(entry.date); + if (!map.has(date)) map.set(date, {}); + map.get(date)[entry.role.trim()] = entry.present; + }); - const uniqueRoles = [...new Set(attendanceOverviewData.map((e) => e.role.trim()))]; - const sortedDates = [...map.keys()]; - const data = sortedDates.map((date) => { - const row = { date }; - uniqueRoles.forEach((role) => { - row[role] = map.get(date)?.[role] ?? 0; - }); - return row; - }); + const uniqueRoles = [ + ...new Set(attendanceOverviewData.map((e) => e.role.trim())), + ]; + const sortedDates = [...map.keys()]; + const data = sortedDates.map((date) => { + const row = { date }; + uniqueRoles.forEach((role) => { + row[role] = map.get(date)?.[role] ?? 0; + }); + return row; + }); - return { - tableData: data, - roles: uniqueRoles, - dates: sortedDates, - }; - }, [attendanceOverviewData]); - - const chartSeries = roles.map((role) => ({ - name: role, - data: tableData.map((row) => row[role]), - })); - - const chartOptions = { - chart: { - type: "bar", - stacked: true, - height: 400, - toolbar: { show: false }, - }, - plotOptions: { - bar: { - borderRadius: 2, - columnWidth: "60%", - }, - }, - xaxis: { - categories: tableData.map((row) => row.date), - }, - yaxis: { - show: true, - axisBorder: { - show: true, - color: '#78909C', - offsetX: 0, - offsetY: 0 - }, - axisTicks: { - show: true, - borderType: 'solid', - color: '#78909C', - width: 6, - offsetX: 0, - offsetY: 0 - }, - }, - legend: { - position: "bottom", - }, - fill: { - opacity: 1, - }, - colors: roles.map((_, i) => flatColors[i % flatColors.length]), + return { + tableData: data, + roles: uniqueRoles, + dates: sortedDates, }; + }, [attendanceOverviewData]); - return ( -
- {/* Header */} -
-
-
Attendance Overview
-

Role-wise present count

-
-
- - - -
-
+ const chartSeries = roles.map((role) => ({ + name: role, + data: tableData.map((row) => row[role]), + })); - {/* Content */} -
- {loading ? ( - - ) : error ? ( -

{error}

- ) : view === "chart" ? ( -
- -
- ) : ( -
- - - - - {dates.map((date, idx) => ( - - ))} - - + const chartOptions = { + chart: { + type: "bar", + stacked: true, + height: 400, + toolbar: { show: false }, + }, + plotOptions: { + bar: { + borderRadius: 2, + columnWidth: "60%", + }, + }, + xaxis: { + categories: tableData.map((row) => row.date), + }, + yaxis: { + show: true, + axisBorder: { + show: true, + color: "#78909C", + offsetX: 0, + offsetY: 0, + }, + axisTicks: { + show: true, + borderType: "solid", + color: "#78909C", + width: 6, + offsetX: 0, + offsetY: 0, + }, + }, + legend: { + position: "bottom", + }, + fill: { + opacity: 1, + }, + colors: roles.map((_, i) => flatColors[i % flatColors.length]), + }; - - {roles.map((role) => ( - - - {tableData.map((row, idx) => { - const value = row[role]; - const cellStyle = value > 0 ? { backgroundColor: '#d5d5d5' } : {}; - return ( - - ); - })} - - ))} - -
Role{date}
{role} - {value} -
-
- )} -
+ return ( +
+ {/* Header */} +
+
+
Attendance Overview
+

Role-wise present count

- ); +
+ + + +
+
+ + {/* Content */} +
+ {loading ? ( + + ) : error ? ( +

{error}

+ ) : view === "chart" ? ( +
+ +
+ ) : ( +
+ + + + + {dates.map((date, idx) => ( + + ))} + + + + + {roles.map((role) => ( + + + {tableData.map((row, idx) => { + const value = row[role]; + const cellStyle = + value > 0 ? { backgroundColor: "#d5d5d5" } : {}; + return ( + + ); + })} + + ))} + +
+ Role + + {date} +
{role} + {value} +
+
+ )} +
+
+ ); }; -export default AttendanceOverview; \ No newline at end of file +export default AttendanceOverview; diff --git a/src/components/Employee/EmpDocuments.jsx b/src/components/Employee/EmpDocuments.jsx new file mode 100644 index 00000000..1042c6c8 --- /dev/null +++ b/src/components/Employee/EmpDocuments.jsx @@ -0,0 +1,516 @@ +import React, { useState, useEffect } from "react"; + +const EmpDocuments = ({ profile, loggedInUser }) => { + return ( + <> + + + ); +}; + +export default EmpDocuments; diff --git a/src/components/Employee/EmployeeNav.jsx b/src/components/Employee/EmployeeNav.jsx index a7f02b64..ac1e89ae 100644 --- a/src/components/Employee/EmployeeNav.jsx +++ b/src/components/Employee/EmployeeNav.jsx @@ -36,12 +36,12 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
  • { e.preventDefault(); // Prevent page reload - onPillClick("account"); + onPillClick("documents"); }} > Documents diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx index a5f4b722..e7fafa4a 100644 --- a/src/pages/employee/EmployeeProfile.jsx +++ b/src/pages/employee/EmployeeProfile.jsx @@ -20,6 +20,7 @@ import EmpAttendance from "../../components/Employee/EmpAttendance"; import ManageEmployee from "../../components/Employee/ManageEmployee"; import EmpBanner from "../../components/Employee/EmpBanner"; import EmpDashboard from "../../components/Employee/EmpDashboard"; +import EmpDocuments from "../../components/Employee/EmpDocuments"; const EmployeeProfile = () => { const { profile } = useProfile(); @@ -73,10 +74,10 @@ const EmployeeProfile = () => { ); } - case "dcoument": { + case "documents": { return ( <> - + ); break;